# AI use cases for Pixelcrabs (johnzhaors-bit/pixelcrabs)

Repo: [johnzhaors-bit/pixelcrabs](https://github.com/johnzhaors-bit/pixelcrabs) | Use cases: 3 | Page: https://dedupedai.com/use-cases/johnzhaors-bit-pixelcrabs/

PixelCrabs is an open-source, local-first visual AI development workspace built on OpenCode, with a Web-first local runtime for previewing and iterating on real project source.

This file holds every use case of this repo. Each one starts with a "## " heading and ends with its URL.

- Preview a static site on localhost: https://dedupedai.com/use-cases/johnzhaors-bit-pixelcrabs/preview-static-site-locally/
- Run the pinned OpenCode engine on a project: https://dedupedai.com/use-cases/johnzhaors-bit-pixelcrabs/run-opencode-engine-on-project/
- Run public runtime tests before changing the runtime: https://dedupedai.com/use-cases/johnzhaors-bit-pixelcrabs/verify-local-runtime-before-changes/

## How to preview a static site on localhost with Pixelcrabs

Repo: [johnzhaors-bit/pixelcrabs](https://github.com/johnzhaors-bit/pixelcrabs) | Difficulty: Intermediate | Time: 15 minutes | Basis: From the README

Serve a static site folder on a localhost URL with one command and stop it with Ctrl+C.

**Who it is for:** A web designer or developer who has a plain HTML site folder and wants to see it running locally without building a framework setup.

**The problem:** Opening HTML files directly from disk often breaks relative links and does not mirror how the site will be served.

**The outcome:** The site loads at a localhost URL printed in the terminal, and the user can stop the preview cleanly.

### Steps

1. Download or clone the Pixelcrabs repository and open a terminal in its root folder.
2. Confirm Node.js 24 or later is installed.
3. Run `node packages/local-runtime/bin/static-preview.mjs /absolute/path/to/your/site`
4. Open the localhost URL printed in the terminal.
5. Press Ctrl+C in the terminal to stop the preview.

### Prompt to paste into your agent

```text
In the pixelcrabs repository root, run `node packages/local-runtime/bin/static-preview.mjs <absolute-path-to-site>`. Expected output: a localhost URL printed in the terminal. Verify first that the target folder contains index.html before starting the server.
```

### Caveat

The README says this preview is for trusted static sites only, and framework projects such as React, Vue, Next.js, Nuxt and Astro should use their own development server.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/johnzhaors-bit-pixelcrabs/preview-static-site-locally/

## How to run the pinned OpenCode engine on a project with Pixelcrabs

Repo: [johnzhaors-bit/pixelcrabs](https://github.com/johnzhaors-bit/pixelcrabs) | Difficulty: Advanced | Time: 60 minutes | Basis: From the README

Install the locked OpenCode dependencies with Bun and start its dev command against a chosen project folder.

**Who it is for:** A developer who wants the coding agent engine that PixelCrabs is built on, pointed at their own project directory.

**The problem:** Getting the agent engine running from source requires the correct Bun version and a locked dependency install.

**The outcome:** The OpenCode engine starts against the target project directory, with dependencies installed from the preserved lockfile.

### Steps

1. Install Bun 1.3.14.
2. Run `cd upstream/opencode` from the repository root.
3. Run `bun install --frozen-lockfile`
4. Run `bun dev --help` to see the available options.
5. Run `bun dev /absolute/path/to/your/project`

### Prompt to paste into your agent

```text
In the pixelcrabs repository, change into upstream/opencode, run `bun install --frozen-lockfile`, then run `bun dev <absolute-path-to-project>`. Expected output: the OpenCode dev process starts against that project. Verify with `bun dev --help` that the command runs before pointing it at a project.
```

### Caveat

The README notes that some tests download packages and need a native compiler toolchain, and that online model providers receive the context needed for their requests.

Risk, credentials: Model providers are configured with your own API keys, so keep those keys out of the repository and out of any commit made while working in the project.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/johnzhaors-bit-pixelcrabs/run-opencode-engine-on-project/

## How to run public runtime tests before changing the runtime with Pixelcrabs

Repo: [johnzhaors-bit/pixelcrabs](https://github.com/johnzhaors-bit/pixelcrabs) | Difficulty: Intermediate | Time: 15 minutes | Basis: From the README

Run the dependency-free public runtime test suite to confirm a clean baseline before editing the local runtime.

**Who it is for:** A contributor who plans to modify the local Web runtime or preview gateway and wants a known-good baseline first.

**The problem:** Changes to the preview runtime are hard to judge without knowing whether the existing public tests pass on the machine.

**The outcome:** The five public runtime test files run and report a result, giving a baseline before any edits.

### Steps

1. Confirm Node.js 24 or later is installed and open a terminal in the repository root.
2. Run `node --test packages/local-runtime/test/public-preview-core.test.mjs packages/local-runtime/test/public-static-preview.test.mjs packages/local-runtime/test/public-web-project.test.mjs packages/local-runtime/test/public-web-runtime.test.mjs packages/local-runtime/test/public-preview-gateway.test.mjs` (inferred, check the README)
3. Review the test output and note any failures before editing.
4. Read .github/workflows/opencode-smoke.yml for the broader locked-dependency build and test sequence.

### Prompt to paste into your agent

```text
In the pixelcrabs repository root, run the five public runtime test files with `node --test` as listed in the README. Expected output: a pass or fail summary for each test file. Verify that no test requires installed packages before reporting a baseline.
```

### Caveat

The README says these five tests are dependency-free, but the broader CI workflow may download packages and need a native compiler toolchain.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/johnzhaors-bit-pixelcrabs/verify-local-runtime-before-changes/