AI-Powered Web App Generator — Describe in natural language, instantly generate runnable projects
Deployment · Quick Start · Features · Architecture · Changelog · Project Audit (Chinese) · Contributing
English | 简体中文
Open Builder is a desktop-first AI web app generator with a browser-compatible interface. Simply describe the application you want to build in natural language, and the AI will create, modify, and delete files in an in-memory file system through a Tool Call loop, with live preview powered by Sandpack.
Open Builder does not require a hosted application backend. The Web app connects directly to the providers and approved remote tools you configure; provider settings, including API keys, are stored in browser local storage and are sent only when required by those configured services.
The Tauri desktop build (macOS / Windows / Linux) provides local runtime capabilities such as stdio MCP. Web and experimental mobile builds intentionally omit local process and Skill script execution.
Native adapters are included for OpenAI Responses, Anthropic, and Google, plus OpenAI-compatible endpoints such as Ollama and other compatible gateways.
- Natural Language to Code — Describe your idea, AI plans and generates the complete project structure
- Live Preview — Browser-based sandbox powered by Sandpack, instant rendering on code changes
- Multi-Framework Support — 20+ templates including React, Vue, Svelte, Angular, SolidJS, and Astro, with Open Builder-managed dependency profiles and verified Sandpack/Nodebox runtime locks
- Smart File Operations — AI uses
patch_filefor precise modifications, avoiding unnecessary full rewrites - Dependency Management — AI can modify
package.jsonand trigger dependency reinstallation - Build Accelerators — Install shadcn components, translate screenshots into components, apply design specifications, and manage typed environment schemas through dedicated tools
- Project Guidance — Root-level
AGENTS.md,CLAUDE.md, andDESIGN.mdfiles can guide generation while remaining untrusted project data that cannot override tool or safety policy - Project Snapshots — Browse snapshot history, name snapshots, inspect diffs, export patches, and roll back to historical versions
- Project Health Check — Run
/healthto inspect structure, dependencies, runtime logs, accessibility, and responsive risks; isolated Automatic QA performs a restricted project check without MCP or preview-console access - Context Compression — Use
/compactor the command palette to summarize long conversations and reduce token usage - Plan Mode — Explore the code and submit an implementation plan for approval before writing files;
ask_user_questionsupports both independent clarification batches and one-question-at-a-time stress-test interviews - Subagent Collaboration — Built-in read-only subagents for code exploration, review, dependency advice, bug investigation, and UI critique
- Built-in Search — Supports enabling the model's built-in search service
- Desktop API Proxy — Tauri can forward approved HTTP/HTTPS provider requests that would otherwise be blocked by browser CORS; static Web deployments still depend on provider CORS support
- Desktop Local CLI Runtime — Explicitly run the complete generation workflow through a signed-in Codex CLI while keeping API mode as the default; the Claude adapter remains fail-closed until its CLI exposes compatible pre-input isolation
- Multi-Session Management — Sidebar with create, switch, delete sessions; history persisted locally
- Session Organization — Search, pin, archive, fork, and smart-rename conversations
- Project Templates — Save generated projects as reusable local templates and start new sessions from them
- Smart Session Naming — Auto-generates session titles based on conversation content
- Slash Commands — Input box supports
/new,/fork,/clear,/reset,/compact,/health,/review,/continue, and/retry - Command Palette & Shortcuts — Open commands with
Cmd/Ctrl+K, create sessions, open settings, focus input, or stop generation from the keyboard - Image & File Input — Upload screenshots, text files, or PDFs; PDF-capable models receive PDFs as native file input without local text extraction
- Skills System — Enabled Skills expose metadata for automatic discovery; full instructions load only after
read_skillor when a Skill is selected for the next message, which also applies to subagents and clears after sending. Built-ins includedesign-taste-frontend,frontend-design,code-review, andcode-simplifier; imported Skills start with discovery disabled - Custom Instructions — Advanced settings can safely append up to 32,000 characters to Chat, Plan, retry, and subagent requests without granting tools or changing mode restrictions; utility calls such as Automatic QA, titles, and compression exclude them
- Local Settings — Provider configuration, API keys, and custom instructions persist in browser local storage
- Storage Governance — Inspect local data usage and safely clean archived sessions, empty sessions, and old snapshots
- Streaming Output — Real-time display of AI thinking process and code generation progress
- Extended Thinking — Supports Extended Thinking / Reasoning mode (DeepSeek-R1, Claude 4.6, etc.)
- One-Click Download — Export generated project as a ZIP file
- Workspace Tools — Switch between code and preview, search and manage files, inspect the Sandpack console, and preview desktop/tablet/phone widths with fit and zoom controls
- Adaptive Layout — Desktop uses a horizontal resizable split, tablets use a vertical resizable workspace-over-chat split, and phones use a chat-first layout with inline preview
- Languages & Themes — English and Simplified Chinese interfaces with system, light, and dark themes
| Command | Behavior |
|---|---|
/new |
Start a new session |
/fork |
Fork the current session and project |
/clear |
Clear chat context while keeping current project files |
/reset |
Reset the current conversation and project after approval |
/compact |
Compress the current conversation context |
/health |
Run the project health check |
/review |
Ask the AI to review the current project |
/continue |
Continue an interrupted or incomplete task |
/retry |
Retry the latest generation |
| Shortcut | Action |
|---|---|
Cmd/Ctrl+K |
Toggle the command palette |
Cmd/Ctrl+N |
Start a new session |
Cmd/Ctrl+, |
Open settings |
Cmd/Ctrl+/ |
Focus the chat input |
Esc |
Close the palette first, otherwise stop generation |
- Configure remote HTTPS MCP servers with Streamable HTTP or SSE, static headers, OAuth authorization code, or OAuth client credentials; desktop builds also support stdio servers.
- Import server definitions from JSON, enable servers and tools independently, and review tool-definition drift before changed capabilities can run.
- Plan Mode and subagents receive only MCP tools explicitly approved as read-only for those modes.
| Runtime | Remote HTTPS MCP | stdio MCP | Skill scripts |
|---|---|---|---|
| Web | Yes | No | No |
| Desktop | Yes | Yes | Developer switch + per-call approval |
| Experimental mobile | Yes | No | No |
- Firecrawl is the default for new or reset settings and supports keyless search and page reading under IP-based limits; an optional API key raises those limits
- Tavily and Exa are available with provider credentials; supported model providers can also use built-in search
- Web content reading automatically falls back to Jina Reader when a configured reader cannot return a page
- Node.js 24 LTS
- pnpm 11
- A supported provider endpoint and an API key when that provider requires one
# Clone the repository
git clone https://github.com/Amery2010/open-builder.git
cd open-builder
# Install dependencies
pnpm install
# Start the development server
pnpm devOpen http://localhost:5173 in your browser, click the settings icon in the top-right corner to configure your API Key.
Requires Rust and Tauri platform dependencies.
# Desktop development
pnpm tauri:dev
# Desktop build
pnpm tauri:build
# iOS development / build
pnpm tauri ios init # first setup only
pnpm tauri:ios:dev
pnpm tauri:ios:build
# Android development / build
pnpm tauri android init # first setup only
pnpm tauri:android:dev
pnpm tauri:android:buildThe desktop app can use an installed Codex CLI as a complete agent runtime. API mode remains the default and Open Builder never silently falls back between runtimes. The Claude adapter is included, but current Claude CLI releases are reported as Unsupported because they cannot prove isolation before receiving user content while also retaining both the Open Builder MCP bridge and subscription authentication.
- Install the official Codex CLI and sign in with
codex login. - Start the desktop app and open Settings → Model → Runtime → Local CLI.
- Select Codex. Open Builder scans
PATHand common installation locations; Choose program can store a validated executable override in native app data. Claude remains visible for capability diagnostics but cannot start a turn until a compatible CLI protocol is available. - Confirm that the status is Installed and signed in, then optionally select a model and reasoning effort reported by the CLI.
The local CLI is not an offline model. Prompts, attachments, web-search activity, and tool results are normally sent to the selected provider and may consume account subscription or usage quota. Open Builder checks login status but does not read, copy, or persist CLI credentials.
Projects remain in Open Builder's in-memory virtual file system. The CLI runs in an isolated empty directory and can interact with the project only through the per-run loopback MCP bridge. Attachment IDs are opaque; host file paths are not exposed. Provider configuration, hooks, unrelated MCP servers, shell tools, and CLI project-instruction injection are rejected or disabled before user content is sent.
When Web Search is Model Built-in, local mode uses the selected CLI's native search. Tavily, Firecrawl, or Exa selections instead use the existing Open Builder tools and keep native search disabled. If detection reports not installed, signed out, unsupported, or an isolation error, use Rescan, Choose program, Use auto-detection, or copy the displayed login command. Web and mobile builds show a blocking message and require switching back to API.
Click the settings button in the top-right corner and fill in:
| Option | Description | Example |
|---|---|---|
| API Type | Provider protocol adapter | OpenAI, Anthropic, Google, compatible |
| API Key | Provider credential, when required | sk-... |
| API Base URL | Provider origin or base path | https://api.openai.com |
| Model Name | Model ID; supported providers can list models | gpt-5.6-sol, deepseek-chat |
| Web Search | Keyless Firecrawl, or provider credentials | fc-..., tvly-..., or an Exa key |
| Image Search | Optional Pixabay or Unsplash credential | Provider API key |
| Custom Instructions | Reusable instructions under Advanced settings | Up to 32,000 characters |
Settings and API keys are stored in browser local storage. Custom instructions are sent to the selected model provider for Chat, Plan, retry, and subagent work. They cannot expand tool permissions; do not place credentials or other secrets in them. Treat the browser profile and device as part of your credential security boundary.
MCP servers and Skills are managed from the chat toolbar. A Skills management switch controls metadata auto-discovery only. Selecting a Skill in the toolbar loads its full instructions for the next request and then clears the selection. Desktop-only options are shown only when the native runtime reports the required capability.
src/lib/ai/generator.ts is the project's core, implementing the full AI Tool Call loop engine:
┌─ API Backend → AI SDK
User Message → Generator┤
└─ Local CLI Backend → Tauri Agent Manager
↓
Loopback MCP Tool Bridge
↓
Shared Tool Executor and Policy
↓
In-Memory File System
↓
Sandpack Live Preview
Built-in tools:
| Tool | Description |
|---|---|
init_project |
Initialize Sandpack project template |
manage_dependencies |
Modify package.json to manage dependencies |
list_files |
List all project files |
read_files |
Batch read file contents |
write_file |
Create or overwrite a file |
patch_file |
Precise search-and-replace patch |
delete_file |
Delete a file |
rename_file / move_file |
Rename or move files while updating relative imports |
search_in_files |
Global file content search |
get_console_logs |
Read Sandpack preview console output |
compact_context |
Compress long conversation context |
ask_user_question |
Ask 1-4 independent clarifications, or run a dependent stress-test interview one question at a time |
exit_plan_mode |
Submit a plan and wait for user approval |
dispatch_subagent |
Dispatch read-only subagents for exploration, review, or diagnosis |
project_health_check |
Inspect project structure, package files, env schema, console logs, accessibility, and responsive risks |
web_search |
Web search (supports Built-in, Tavily, Firecrawl, Exa) |
web_reader |
Read web page content |
image_search |
Image search (supports Pixabay, Unsplash) |
search_npm_packages |
NPM package search |
get_npm_package_detail |
Get detailed information about NPM package |
install_component |
Install an approved shadcn registry component and its dependencies |
screenshot_to_code |
Generate and write a component from a supplied UI image |
apply_design_style |
Add a selected design specification to the project |
list_skills / read_skill |
Discover enabled Skill metadata, then load full instructions and resource listings |
execute_skill_script |
Run an active skill script in the desktop app only |
read_env_schema / manage_env |
Safely inspect and manage env files |
Enabled MCP tools are injected dynamically after server discovery and approval, then filtered by the current platform and Chat, Plan, Automatic QA, or subagent run policy.
| Category | Technology |
|---|---|
| Framework | React 19 + TypeScript 6 |
| Build Tool | Vite 8 |
| Styling | Tailwind CSS v4 |
| UI Components | shadcn/ui + Radix UI |
| Code Sandbox | Sandpack (CodeSandbox) |
| State Mgmt | Zustand 5 |
| Local Storage | localforage |
| Icons | Lucide React |
| Markdown | react-markdown + rehype-highlight |
| Desktop/Mobile | Tauri 2 |
Open Builder selects a native AI SDK adapter from the configured API Type and can query supported provider endpoints for their model list.
| API Type | Protocol/adapter | Default base URL | Typical use |
|---|---|---|---|
| OpenAI Compatible | OpenAI-compatible chat API | http://localhost:11434 |
Ollama and compatible gateways |
| OpenAI | Responses API | https://api.openai.com |
OpenAI |
| Anthropic | Messages API | https://api.anthropic.com |
Anthropic |
| Generative Language API | https://generativelanguage.googleapis.com |
Google Gemini |
For best results, use a model with strong Function Calling support.
Static Web deployments do not include the Tauri API proxy, stdio MCP, or Skill script execution. Model and search endpoints used directly from a browser must allow the deployment origin through CORS.
pnpm build
# Output to dist/ directoryThe lightweight container image serves the Web build with an unprivileged Nginx Alpine runtime:
docker run --rm -p 8080:8080 ghcr.io/amery2010/open-builder:latestOpen http://localhost:8080. The image supports linux/amd64 and linux/arm64. It intentionally contains no provider credentials, API proxy, stdio MCP, Local CLI, or Skill script runtime; browser-facing provider and search endpoints must allow the deployed origin through CORS.
Pushing a semantic version tag such as v1.8.0 runs the frontend quality gates and a container smoke test before publishing 1.8.0, 1.8, 1, and latest tags to ghcr.io/amery2010/open-builder. Pre-release tags publish only their full pre-release version. GitHub initializes a new container package as private, so a repository owner must change its visibility to public once after the first successful publish.
See .github/workflows/release.yml.
GitHub Actions builds and deploys Pages when main is updated (or when the workflow is started manually). The workflow sets Vite's base path to the repository subpath, including the static MCP OAuth callback entry. A v* tag creates a draft desktop release and publishes the container image after their respective quality gates pass; it does not deploy Pages.
See .github/workflows/deploy.yml.
Or manually: import the GitHub repo, select Vite as framework preset, build command pnpm run build, output directory dist.
Or manually:
- Log in to Cloudflare Dashboard → Workers & Pages → Create → Worker → Connect to Git
- Select the
open-builderrepo with the following build config:
| Option | Value |
|---|---|
| Build Command | pnpm run build |
| Output Dir | dist |
| Node.js Ver | 24 |
Import the repo, build command pnpm run build, output directory dist. No additional configuration needed.
Issues and Pull Requests are welcome! Please read the Contributing Guide first.
GPLv3 License © 2026 Open Builder Contributors