← Back
johnzhaors-bit

johnzhaors-bit/pixelcrabs

Open-source Visual AI IDE built on OpenCode. Preview, point-select, box-select and multi-select UI elements, trace them back to source code, and let AI modify your app precisely. Local-first, extensible, built for visual AI development.

View on GitHub ↗
Stars
47
Forks
1
Watchers
47
Open issues
2
Contributors
1
Language
TypeScript
License
MIT License
Default branch
main
Created Sep 27, 2026Updated Sep 29, 2026

Star growth

Today—
This week—
This month—

Star history will appear here once this repo has been tracked for a couple of days.

README

🦀 PixelCrabs

Have an idea? Make it real.

A local-first visual AI IDE built on OpenCode.

Describe an app. Preview it. Point at what you want to change.

Download the desktop app · Website · About · Release notes


Try it before you build on it

PixelCrab brings AI coding, live preview and visual feedback into one workspace. Your project stays on your computer, and OpenCode handles the coding agent: sessions, models, tools and source changes.

Download the full desktop app to experience the workflow today:

Platform Download
Windows x64 Get PixelCrab for Windows
macOS · Apple Silicon Get PixelCrab for macOS
Linux x86_64 · preview Get the AppImage

The website always links to the current installers and platform notes. The Windows installer is currently unsigned; Linux distribution compatibility is still being tested.

From an idea to a working app

1. Describe it — Start a project or open existing code. Tell AI what you want to make.

2. See it — Run the application beside the conversation and check the actual result.

3. Point and refine — Select an element, draw a box, or select several elements. Add your feedback and let AI work with visual context and project source.

4. Make it yours — Keep iterating with your own models, local Skills and tools. Your code remains a real project you can manage with Git.

Why PixelCrab?

  • Visual AI development: express changes from the running interface instead of guessing which component to describe.
  • Local-first projects: keep code in your own working directory. Local work and your own models do not require a PixelCrab account.
  • Model freedom: connect supported providers, bring your own API key, or configure a compatible local or enterprise model service.
  • OpenCode at the core: build on an established coding agent rather than maintaining a second agent engine.
  • Skills and tools: bring specialized knowledge and external capabilities into your workflow.

Local-first does not mean every model request is offline. When you choose an online model, the context needed for the task is sent to that service. Model access, capabilities and charges depend on your provider.

Open-source edition: first modules available

This repository is the home of the Web-focused open-source edition. The OpenCode source baseline and the first preview contract and capability registration modules are available here under their MIT licenses. The upstream coding engine and an experimental Web Preview desktop integration now build from this repository. This is a source-only project for studying, modifying and running the Web-focused code yourself. We do not distribute a separate open-source installer. For the ready-to-use full product, download the desktop app from our website.

Area Planned public scope
Web projects Local development, preview, visual selection and AI-assisted changes
Web delivery Local build and export; deployment through your own tools and services
Models User-configured providers, API keys and compatible local services
Skills and tools Local Skill support and extension interfaces, subject to dependency and license review
Flutter A later release, after the Web edition

PixelCrab account services, platform model billing, cloud hosting, marketplace publishing and dedicated mini app preview/publishing integrations are outside the public source scope. Design packs and other third-party resources have their own distribution and licensing requirements.

We publish each module after reviewing its source boundary and verifying it independently. Ready-to-use installers are provided only through the full product website. Forking this repository gives you the upstream coding engine source and the foundation modules below. The preview panel is connected to the native engine and composer. Generic system networking, local static export and native dependency preparation are published. Windows source builds and basic desktop preview/evidence checks, plus Linux CI, have passed. The complete real-model edit/recheck workflow has not yet been verified.

Development roadmap

We are preparing the public Web edition in small, verifiable steps. The status column distinguishes published modules from work still in preparation.

Milestone Status
Define the Web-first public scope Complete
Import the pinned OpenCode engine source Available under upstream/opencode
Separate shared preview contracts and Web capability registration Published in this repository with tests
Extract the static Web preview launch recipe Implemented; isolated HTTP checks pass with Node
Separate Web discovery, managed Node and owned process lifecycle Published; static HTML and a real Vite project pass runtime lifecycle tests
Connect Agent tools to preview management Built-in preview plugin and desktop presentation connected
Separate native preview host and visual workbench Draft/existing session panels connected; native draft and screenshot smoke passed
Generic network integration Published: standard HTTPS providers and remote MCP use Electron system networking; custom transports/child processes retain their own behavior
Add an independent desktop identity and build configuration Isolated IDs/data roots and packaging configuration; automatic updates disabled; no separate public installer planned
Complete dependency/license review and a clean Web workflow build Reviewed modules and clean builds published; review continues for future additions
Publish source and license incrementally Reviewed modules under MIT; experimental desktop build instructions below
Add Flutter capabilities After the Web release

September 28, 2026 — Web foundation progress

The shared preview contracts and Web capability registration have been separated from the full product's platform registration. The static webpage launch recipe has also been extracted and tested in isolation: HTML, CSS and client-side routes can be served without the platform-specific modules. Existing project discovery tests continue to pass.

The contract and capability modules and a standalone static HTML preview are published here with independent tests. Full desktop integration remains in preparation. Meanwhile, the full desktop app is available to try.

Run the OpenCode engine

The upstream/opencode directory is based on official OpenCode commit 9f69463f1d. It is an upstream snapshot, not a copy of the customized private PixelCrab source. Its original MIT license, notices, lockfile and development documentation are preserved. One recorder test fixture is locally patched to construct a synthetic Google-key-shaped value instead of storing the original key-shaped literal. CI checks this fixture and rejects Google API key literals in tracked files; this targeted check complements GitHub secret scanning.

The foundation smoke workflow checks dependency installation, CLI startup and a local API health request on Linux. Full PixelCrabs desktop and model-call validation remain separate. Native dependencies also require a working compiler toolchain and Python; Windows locked dependency installation and CLI startup have passed in a short-path checkout using a separate Bun cache; the full desktop build remains unverified.

Install Bun 1.3.14 and use the pinned lockfile:

cd upstream/opencode
bun install --frozen-lockfile
bun dev --help
bun dev /absolute/path/to/your/project

For a local API server:

bun dev serve --hostname 127.0.0.1 --port 4096

This runs OpenCode with its original identity and provider configuration. It does not include PixelCrab account services, platform models, marketplace integrations or the PixelCrabs visual preview panel. The upstream repository also contains its own console and infrastructure code; those are upstream components, not the PixelCrab backend, and are not required to run the local engine. See the upstream development guide for its other entry points.

Preview a static webpage

With Node.js 24 or later, serve an existing directory containing index.html from the repository root. No package installation or PixelCrab account is required:

node packages/local-runtime/bin/static-preview.mjs /absolute/path/to/your/site

Open the localhost URL printed in the terminal. Edit your files and refresh the browser to see changes; press Ctrl+C to stop. Pass a port as the second argument, or 0 to choose an available port:

node packages/local-runtime/bin/static-preview.mjs /absolute/path/to/your/site 0

This explicitly serves static HTML, CSS and browser JavaScript. React, Vue, Next.js and other source projects still need their framework's dev server. Extensionless routes fall back to index.html; missing assets return 404. The server binds only to loopback, rejects hidden paths and links outside the project, and does not list directories. Serve only trusted local projects: this is a development server, not a security sandbox or a production hosting service. The standalone command does not open the desktop panel; use the desktop build below for visual selection.

Web project and runtime APIs

The shared Web modules now expose discoverWebProject(directory) and createWebRuntimeManager(). Discovery preserves Vite, Next.js, Nuxt and Astro projects, reports missing dependencies and never treats detection as a running preview. The caller explicitly selects an adapter and authorizes the project before starting it. Dependency installation is not automatic in this batch.

The manager owns its child processes, verifies listener ownership, scopes runtimes to a conversation, routes local HTTP/HMR through a runtime gateway and recovers resources on stop or project switch. It uses the current executable for the managed Node shim; an Electron host uses Electron's Node mode. It does not install system Node. Windows ownership checks use PowerShell; macOS/Linux require lsof. These are trusted development tools, not a sandbox for untrusted projects.

Independent tests cover static startup, reuse, project switching, cross-conversation rejection, cancellation and cleanup. A running process does not establish that a desktop panel has displayed the right page. The native Agent plugin is available below. The desktop panel and build are available below; standard Provider/MCP networking is available through Electron.

Connect the native OpenCode preview tool

Install the pinned plugin API dependency with Bun 1.3.14:

cd packages/local-runtime
bun install --frozen-lockfile --ignore-scripts
bun test test/web-preview-plugin.test.ts

The vendored engine already includes this plugin; do not register it a second time. To use the standalone plugin with a separate compatible OpenCode checkout instead, add the absolute file URL of packages/local-runtime/src/web-preview-plugin.ts to the plugin array in your project's OpenCode configuration. Merge it with your existing configuration; do not replace your providers or permissions. For example, on Windows the URL is file:///C:/src/pixelcrabs/packages/local-runtime/src/web-preview-plugin.ts, and on macOS/Linux file:///home/you/pixelcrabs/packages/local-runtime/src/web-preview-plugin.ts.

After restarting OpenCode, ask the Agent to discover the current project and start a Web preview with pixelcrabs_preview. It exposes discover, start, verify, list, logs and stop; starting a process uses native permission checks. External project directories require a separate native permission. Runtime IDs are scoped to the conversation. The plugin returns a local URL and process evidence; the integrated desktop opens that verified runtime in the preview panel. Code changes still use OpenCode's own editing tools.

The plugin depends only on the reviewed runtime and OpenCode's MIT plugin API. It does not connect to PixelCrab account, billing, marketplace or publishing services. Normal engine disposal or deleting the session releases its previews. The Agent can call pixelcrabs_prepare_web under native permissions to prepare dependencies, then re-run discovery/start.

Native Web presentation modules

The desktop source now includes a shared Web preview controller, renderer bridge, preload API and IPC registration under upstream/opencode/packages/desktop/src/pixelcrab. These use Electron's isolated WebContentsView, bounded DOM evidence, runtime/project identity, route-aware rechecks and a floating visual-change panel. The host must register the bridge and supply safe external-browser handling. Framework-specific presentation policies are not included.

Windows smoke checks exercised real Electron DOM selection, mode switching, empty-request evidence attachment, rechecking and navigation staleness. In the hidden test window no screenshot was available, so structured evidence continued with an explicit unavailable screenshot status. A subsequent isolated desktop test also passed: the built-in tool is present, a real page renders, an empty-description point selection enters the native new-session draft, and a visible screenshot is captured. This still does not prove a complete real-model editing round trip.

node --test upstream/opencode/packages/desktop/src/pixelcrab/public-web-preview-domain.test.mjs

Run the foundation tests

Use Node.js 24 or later. No package installation or cloud account is needed for these modules.

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
  • preview-delivery-protocol.ts: action envelopes, project/conversation scope checks and a capability registry.
  • web-preview-capabilities.ts: Web capability descriptors and snapshots.
  • static-web-preview.ts: a shared Node static-server launch recipe, used by the standalone CLI.

The registry describes capabilities; the static CLI provides one executable preview path. These modules do not execute deployments, enforce operating-system permissions or provide a desktop UI. The host remains responsible for project authorization and integrated runtime management. More modules will arrive in reviewed batches.

Evidence modules

The reviewed upstream/opencode/packages/app/src/pixelcrab/ modules now include structured text/image attachments, visual change drafts and task-completion recheck state. They use the original OpenCode conversation rather than a second model loop. Missing target values or an unrelated evidence ID cannot pass a visual change check. These modules now drive the public session panel. Complete real-model editing and recheck acceptance remains pending.

Build the experimental desktop

Use Node.js 24+, Bun 1.3.14 and Git. From this repository root:

cd packages/local-runtime
bun install --frozen-lockfile --ignore-scripts
cd ../../upstream/opencode
bun install --frozen-lockfile
cd packages/opencode
bun script/build-node.ts
cd ../desktop
node node_modules/electron/install.js
bun scripts/copy-icons.ts dev
bun x --no-install electron-vite build
bun x --no-install electron-vite preview

This uses the embedded Node sidecar (leave OPENCODE_SIDECAR_V2 unset). Open a project, use your normal OpenCode provider and ask the Agent to discover and start a preview with pixelcrabs_preview. The Web Preview panel is also available in a new-session draft; an HTTP/HTTPS address can be opened manually. Point/region evidence and multi-selection targets are added to the composer for you to review and send. The panel never edits project files itself.

The native application is named PixelCrabs Open, with separate dev/beta/prod app IDs under com.pixelcrabs.open. Desktop settings and engine XDG data/config/cache/state live under that app's own user-data directory; no automatic import of OpenCode desktop settings is performed. Project-local OpenCode configuration remains supported. Only the audited embedded engine is enabled; the upstream experimental background CLI mode is disabled. The independent pixelcrabs-open:// scheme is normalized into the original renderer's internal deep-link format.

Packaging uses a separate 0.1.0-preview.1 version and PixelCrabs-Open artifact names. It has no automatic update feed, upstream signing script or legacy Linux launcher migration. Updates are disabled even in packaged beta/prod builds. The main logo, splash, native icons and window title use PixelCrabs Open branding. Original OpenCode provider names, technical references and license notices remain intact. Installer signing and installation testing are outside this source-only project scope. The complete real-model workflow is not yet verified. Use the website download for the ready-to-use full product. Windows Git checkouts that materialize the upstream custom-elements.d.ts symlink as plain text need a portable typecheck fix; this does not prevent the tested desktop bundle build.

After building, the isolated desktop smoke can be run with Electron and scripts/test-desktop-session.cjs from the repository root. It creates temporary application/project state and closes its own app when finished. Check .tmp/full-desktop-smoke-result.json; a launcher exit code alone is not acceptance. No model call is made by that test.

Follow along

Try the desktop app, explore the product, and watch this repository for the next source modules. You can report a problem or share a use case. Please include the platform, app version and steps to reproduce, and leave out credentials or private project content.

The published source in this repository is available under the MIT License. This license does not cover the separately distributed full desktop app or unpublished code and design resources.

PixelCrab is built on OpenCode. Upstream projects retain their own licenses and attribution; the vendored OpenCode snapshot retains its original copyright and license.

Your ideas. Your code. Your models.

Start with PixelCrab →

The real Vite integration test installs a pinned Vite version in a fresh temporary directory, verifies transformed and updated source through the preview gateway, and checks process ownership and shutdown, then builds with the project script, exports the static output and serves its bundled assets. Run node --test packages/local-runtime/test/public-vite-runtime.mjs with Bun 1.3.14 on PATH (or set PIXELCRABS_TEST_BUN to its absolute executable). It requires registry access and does not replace a real-model desktop editing acceptance test.

Provider availability and free-tier eligibility are controlled by each provider. An OpenCode-compatible API or model catalog entry does not guarantee that a provider permits its free tier in a derived desktop client. Use your own supported provider configuration for end-to-end editing tests; this project does not bypass provider client restrictions.

System networking

The public desktop establishes a process-scoped loopback transport before starting its embedded engine. Standard HTTPS provider requests and remote HTTP/SSE MCP requests use Electron's Chromium transport and its system proxy/PAC policy, independently of account state. Loopback model endpoints stay direct. Custom provider fetch implementations retain their own transport; arbitrary child processes and package managers are not automatically routed through Electron. The current bridge does not proxy plain HTTP destinations.

The shared module contains no hosted service URLs, marketplace routing or account implementation. A failed write is not automatically replayed and a proxy failure does not force direct access. Windows tests cover Chromium direct → test proxy → direct with streaming responses; platform-specific enterprise proxy authentication and production PAC deployment still require real-machine validation.

Local static Web export

The native pixelcrabs_web_export tool copies an explicitly selected static artifact directory into a new unique folder under an existing destination parent. It requires index.html, reports excluded files, and uses native OpenCode permissions for export and external paths. It never uploads or deploys. Build framework projects with their own scripts through the normal Agent tools before selecting the output directory; server-only output is not a static site.

Hidden files, dependencies, package manifests, source maps and non-Web file types are excluded; links and special files are rejected. Limits are 10,000 copied files and 512 MiB. Use trusted, completed build output: this is not a secret scanner or an atomic snapshot of a concurrently changing project. Dependency preparation is available through the native tool; framework builds use the project's scripts through native terminal tools.

Managed package-manager foundation

packages/local-runtime/src/managed-web-package.ts provides an opt-in pnpm lease for hosts: supply an application-owned absolute cache directory and a fetchImpl using the host network policy. It downloads pinned pnpm 10.34.6 from npm, verifies its reviewed SHA-512, caches only the verified archive, and extracts a fresh lease with tar 7.5.22. Release the lease after its consumers stop. It does not change system Node or global PATH. The upstream pnpm MIT license and tar BlueOak-1.0.0 license remain applicable.

The real integration test verifies download, offline cache reuse, dependency installation with lifecycle scripts disabled, and Vite preview startup/shutdown in a fresh project. Run node --test packages/local-runtime/test/public-managed-package.mjs after installing the pinned local-runtime dependencies; registry access is required. The native pixelcrabs_prepare_web tool now consumes this foundation, with the desktop injecting its shared network transport for the pnpm archive download. pnpm 12 uses a different native-binary bootstrap and is deliberately not substituted.

Preparing a Web project

When preview discovery reports missing dependencies, the Agent can call pixelcrabs_prepare_web, then rediscover and start the preview. The tool requests native installation/external-directory permission, prepares Node, runs a finite package-manager install with lifecycle scripts disabled, and reports actual exit status and remaining missing dependencies. A successful install does not assert a running preview. Managed paths also reach the native shell through OpenCode's shell.env hook.

Existing npm, pnpm and Bun executables are reused when they match the declared package-manager version. If pnpm is missing, a project with no explicit version or the pinned 10.34.6 version can use the managed lease. Yarn, other missing managers or version mismatches return needs_setup for the native Agent to resolve without silently rewriting the project. Existing lockfiles are respected; required lifecycle rebuilds use native tools with their own permissions.

Only the managed tool archive download uses Electron here. Dependency installation retains the package manager's registry/proxy settings; arbitrary child-process HTTPS is not automatically routed through Chromium. Projects are trusted code, not sandboxed by --ignore-scripts. Run node --test packages/local-runtime/test/public-web-environment.mjs for the native-tool missing-dependency → preparation → Vite startup/cleanup fixture.