# BYOB (Build Your Own) - Complete Guide > BYOB is an AI-powered cloud workspace for planning, building, editing, testing, and deploying full-stack SvelteKit web applications from conversational prompts. BYOB sits between restrictive no-code builders and local IDE workflows. Users describe what they want, BYOB turns the idea into an implementation plan, writes real SvelteKit code, shows the running app in a live preview, and keeps the generated project editable and exportable. The product is designed for builders who want a real codebase without managing local setup. Developers can inspect and edit the generated files directly; creators can work primarily through chat and preview. ## Core Stack BYOB is opinionated so the AI writes consistent production code: - **Framework:** Svelte 5 and SvelteKit - **Styling:** Tailwind CSS v4 and DaisyUI 5 - **Runtime:** Vite preview while building - **Deployment:** Cloudflare-backed production deploys on BYOB domains, with custom-domain support on paid plans - **Database options:** BYOB DB, Supabase, or deferred database setup - **BYOB DB:** Managed SQLite/Cloudflare D1-style storage with schema viewing and SQL inspection tools - **BYOB Storage:** Managed Cloudflare R2-style object storage with Worker bindings, private browser routes, and smoke checks - **AI workflow:** Chat Mode for reasoning and Tool Mode for direct implementation ## First Prompt To Build The current BYOB flow starts with a prompt, then opens a setup and planning pass before implementation. 1. **Describe the product:** State the outcome, audience, constraints, and any required integrations. 2. **Preflight setup:** BYOB refines the prompt, identifies features, proposes UX direction, suggests data choices, and builds a complete plan. 3. **Review or fast-track:** Users can choose a more guided custom setup or a faster lucky/default setup. 4. **Select data direction:** The setup flow supports deferred data work, Supabase, or BYOB DB. 5. **Build handoff:** BYOB writes the project handoff and starts the generated app workflow from the approved plan. Setup requires a minimum credit balance because it uses model context and planning tools before code generation starts. ## Workspace Experience When a project is open, BYOB uses a three-pane product workspace: - **Editor:** A VS Code-style file editor where generated SvelteKit files remain inspectable. - **AI command center:** Chat, planning, implementation, tool results, uploads, questions, and follow-up edits. - **Live preview:** A running browser preview that updates as files change. The dashboard also supports project refresh, project sharing, shared projects, templates, resumeable setup flows, and a limit on simultaneously started projects. ## Modes - **Chat Mode:** Use this for strategy, architecture, explanations, tradeoff analysis, and product thinking. Chat Mode does not have to modify files. - **Tool Mode:** Use this when BYOB should edit files, connect services, run checks, install packages, write migrations, or otherwise move the project forward. Creator-oriented projects can hide the code-first experience and emphasize chat plus preview. Developer-oriented projects expose the full three-pane workspace. ## Major Product Capabilities - **Visual editing:** Click elements in the live preview and ask BYOB to refine text, styling, spacing, layout, images, or behavior. - **Version rollback:** Save and restore project states with human-readable notes so experiments are recoverable. - **Git history and diffs:** Inspect recent commits, compare refs, and review changes since the last deploy through BYOB CLI or Agent MCP. - **One-click deploy:** Publish the app from the workspace without writing hosting configuration by hand. Deploys can auto-save the current project state when no commit hash is supplied. - **Deployment rollback:** Restore a git-backed checkpoint and redeploy a known commit. - **Deployment analytics:** Inspect deployed Worker traffic, errors, CPU timing, subrequests, and deployment/custom-domain status. - **Team collaboration:** Share projects with teammates and coordinate access so work does not overwrite itself. - **Testing agent:** Run full-site or feature-focused visual checks, optionally with browser-extension driven interaction. - **Templates:** Start from blank projects, private templates, shared templates, or public templates. Projects can also be saved as templates. - **SEO-ready output:** BYOB helps generate metadata, sitemap and indexing assets, and LLM-friendly page access patterns. - **Context tracking and model lock:** BYOB tracks context-heavy work across sessions and can keep model selection stable for a workflow. - **Image and vision support:** Upload images and wireframes, ask BYOB to understand them, and generate or insert image assets. - **Voice coding:** Dictate changes instead of typing prompts. ## Data And Backend Integrations BYOB supports several backend paths from inside the workspace: - **Supabase integration:** Connect a Supabase account securely, select a Supabase project, load credentials into `.env`, inspect schemas, write migrations, run the Supabase CLI, and generate TypeScript types. - **BYOB DB:** Create a managed BYOB database, load credentials into the project environment, inspect schema and table data, and run read-oriented SQL/debugging workflows from the database viewer. - **BYOB Storage:** Create managed object storage, attach a `STORAGE` Worker binding, use app-signed access routes, and run lifecycle/smoke checks without exposing provider credentials. - **Auth and email brokers:** Provision BYOB-managed Google sign-in and default email sender settings for generated apps when those features are needed. - **Environment variables:** The agent can request missing environment variables and the UI can save them into the project environment. - **Deferred backend:** For projects that do not need storage yet, BYOB can continue with frontend or static behavior and add persistence later. ## Auth And Email BYOB provides managed authentication and email services for generated applications: - **Google sign-in:** One-click provisioning of BYOB-managed Google OAuth credentials. Apps get sign-in without external OAuth setup. - **Better Auth integration:** Install the Better Auth integration with BYOB DB or D1 for session-based auth, email/password, magic links, and social login. - **Email sender:** Provision a BYOB-managed email sender for transactional emails. Includes delivery logging, test-send verification, and DNS record management. - **Email inbox:** View sent emails and logs from the workspace for debugging delivery issues. ## BYOB CLI BYOB CLI is the command-line interface for BYOB project workflows. It installs a local `byob` command and the `byob_cli` skill for approved BYOB project access, coding tools, deployment, billing, and related workflows. Hosted MCP clients should connect through the BYOB dashboard MCP connection flow. The local `byob mcp-stdio` command starts a long-running stdio MCP server process only for MCP hosts that require local stdio. Recommended agent installs: ```bash npx -y byob-cli codex install npx -y byob-cli claude install npx -y byob-cli gemini install ``` The installer starts BYOB OAuth approval, scopes access to approved projects, writes local stdio MCP configuration only when the selected agent needs it, installs the local `byob` command, installs the `byob_cli` skill where that agent can discover it, and can sync BYOB AIR coding skills for SvelteKit, Supabase, BYOB DB, UI quality, SEO, PWA, payments, animations, image generation, and integrations. Agent MCP exposes project and platform tools including: - project context, status, startup, preview URL, editor URL, and deployment URL - billing status and payment/top-up links - environment status - deployment and redeployment - deployment status, deployment rollback, and git-backed deploy records - deployment analytics - project git logs, capped diffs, and diffs since the last deployment - project-scoped BYOB Git PAT creation, listing, and revocation for external git access - custom-domain status, DNS instructions, setup, and removal - connected BYOB testing browsers - browser actions such as navigation, screenshots, clicks, typing, DOM evaluation, selector waits, console logs, and network capture Agents should use the exact preview, editor, and deployment URLs returned by BYOB tools instead of hardcoding hostnames. Git and deployment CLI examples: ```bash byob --project-id git log '{"limit":20}' byob --project-id git diff '{"base":"HEAD~1","head":"HEAD","mode":"product"}' byob --project-id git diff-since-last-deploy '{"mode":"product"}' byob --project-id git token create '{"name":"Laptop","scope":"read","expires_in_days":90}' byob --project-id deployment status byob --project-id deployment analytics byob --project-id deployment rollback '{"commit_hash":""}' ``` `git token create` returns the raw `byob_git_pat_...` value once. `git token list` returns metadata and token prefixes only. Use `scope:"read"` for diff/log access; `read_write` is reserved for future normal Git write access. ## Testing BYOB testing has two paths: - **In-app testing agent:** Users can run visual testing from the workspace, choose full-site or custom testing, provide requested values, and optionally include generated unit tests. - **BYOB Testing extension:** Codex and BYOB can drive a real connected browser for screenshots, clicks, typing, viewport checks, console logs, network capture, and DOM evaluation. Testing agent access and custom domains are paid-plan features. ## Deployment And Domains BYOB projects can be published from the workspace. A successful deploy returns a live BYOB deployment URL and can be opened or copied from the publish modal. Deployment features include: - one-click production publish and redeploy - auto-save before deploy when a commit hash is not supplied - deployment records tied to saved commits - rollback and redeploy of a known commit - BYOB-managed deployment URLs - custom-domain connection on paid plans - guided DNS records and status checks - automatic SSL/provisioning status - deployment analytics for the live Worker Custom domains require an existing deployment before setup can begin. ## Pricing And Credits BYOB uses credits plus optional subscriptions. - **Pay As You Go:** Free monthly plan. Credits can be topped up; credits never expire. The base rate is `$1 = 100 credits`. - **Pro:** Starts at `$25/mo` for 2,000 credits/month, with selectable tiers up to 10,000 credits/month. Annual billing is discounted. Top-ups are discounted to `$0.80/100 credits`. - **Max:** Starts at `$79/mo` for 8,000 credits/month, with selectable tiers up to 16,000 credits/month. Includes the best top-up rate at `$0.65/100 credits`. - **Enterprise:** Custom packages for white-label, private cloud, governance, SSO/SAML, custom integrations, SLAs, and dedicated support. Plan highlights: - All plans include premium models, developer-level VS Code access, visual editing, Supabase integration, image upload/generation/understanding, Time Travel, SEO integration, templates, BYOB.page deployment, unlimited context, and unlimited file uploads. - Free/Pay As You Go does not include collaborators. - Pro adds BYOB DB, template publishing, testing agent, custom domains, BYOB badge removal, and up to 5 collaborators. - Max adds credit rollover, priority model access, up to 10 collaborators, priority support, and the Post-Dev Marketing Agent. - Enterprise adds white-label embedding, custom branding, private cloud deployment, custom AI agents, admin controls, audit/governance support, unlimited seats, custom integrations, and dedicated onboarding. ## Ownership And Export BYOB aims for no lock-in. Projects are standard SvelteKit applications. Users can inspect the source, edit files manually, export the project as a ZIP file, and continue development outside BYOB if they choose. ## Competitive Positioning - **BYOB vs. Cursor:** Cursor is a strong desktop IDE, but BYOB runs in the browser and removes local environment setup. - **BYOB vs. v0:** v0 is good for isolated React UI generation; BYOB targets full SvelteKit applications with project workflow, backend integration, preview, testing, and deployment. - **BYOB vs. Bolt.new:** Both are browser-based, but BYOB is an opinionated SvelteKit production workspace with visual editing, preflight planning, deployment, analytics, BYOB CLI, and credit-based usage. - **BYOB vs. Lovable:** BYOB emphasizes file-level control, exportable SvelteKit projects, deeper workspace tooling, and production deployment. - **BYOB vs. Webflow/Wix:** Traditional site builders optimize for visual editing; BYOB generates and preserves a real app codebase. ## Documentation Full product documentation is available at `https://byob.studio/docs`. Each page covers a specific feature or workflow: ### Getting Started - [Welcome to BYOB](https://byob.studio/docs/welcome) — Product overview and what you can build. - [Quickstart](https://byob.studio/docs/quickstart) — Core workflow in under 5 minutes. - [Creating Your First Project](https://byob.studio/docs/creating-first-project) — Dashboard overview and new project modal. - [The Editor Workspace](https://byob.studio/docs/editor-workspace) — Three-panel layout: file explorer, chat/code, live preview. ### Working with the AI - [Preflight Planning (Guided Review)](https://byob.studio/docs/preflight-planning) — Setup wizard for prompt refinement, feature selection, and data strategy. - [Chat & Prompts](https://byob.studio/docs/chat-prompts) — Chat Mode vs Tool Mode, error badges, and prompt best practices. - [Browser Visual Testing](https://byob.studio/docs/browser-testing) — In-app testing agent and browser extension driven testing. ### Saving & Version Control - [Autosave & Versions](https://byob.studio/docs/autosave-versions) — Automatic saves, manual commits, and human-readable version notes. - [Viewing History](https://byob.studio/docs/viewing-history) — Commit popover, version timeline, and diff inspection. - [Restoring Versions](https://byob.studio/docs/restoring-versions) — One-click rollback to any previous project state. ### Databases & Storage - [BYOB DB (D1)](https://byob.studio/docs/byob-db) — Managed SQLite database, schema viewer, data browser, and SQL tools. - [Supabase Integration](https://byob.studio/docs/supabase-integration) — OAuth-connected Supabase with schema inspection and migration support. - [Object Storage](https://byob.studio/docs/object-storage) — Managed R2-style object storage with Worker bindings and smoke checks. ### Authentication & Services - [Authentication](https://byob.studio/docs/authentication) — BYOB-managed Google OAuth, Better Auth integration, and session-based auth. - [Email Services](https://byob.studio/docs/email-services) — Managed email sender, delivery logs, test-send, and DNS records. ### Connections - [CLI & Agent Connections](https://byob.studio/docs/agent-connections) — BYOB CLI install, Codex/Claude/Antigravity agent setup, and MCP tools. - [MCP Clients](https://byob.studio/docs/mcp-clients) — Dashboard MCP connection flow for hosted agents and IDE extensions. ### Publishing & Deployment - [One-Click Deploy](https://byob.studio/docs/one-click-deploy) — Publish from the workspace with auto-save and commit tracking. - [Custom Domains](https://byob.studio/docs/custom-domains) — Guided DNS records, verification checks, and SSL automation. - [Analytics & Status](https://byob.studio/docs/analytics-status) — Post-deploy traffic analytics and deployment health monitoring. - [Environment Variables](https://byob.studio/docs/environment-variables) — Secure API key and secret management per project. ### Billing & Plans - [Pricing & Plans](https://byob.studio/docs/pricing-plans) — Pay-as-you-go, Pro, Max, and Enterprise plan details. ### Team & Reuse - [Collaborators & Templates](https://byob.studio/docs/team-reuse) — Team sharing, access coordination, and template workflows. ## Blog The BYOB blog is available at `https://byob.studio/blog` with guides, comparisons, tutorials, and product updates. ## FAQ **Do I need to know how to code?** No. Creator-style workflows let users build through prompts and preview. Developers can still inspect and edit the full codebase. **Why SvelteKit?** SvelteKit keeps routes, components, logic, and styling straightforward for AI generation and produces efficient web applications. **Can BYOB connect to an existing backend?** Yes. Supabase can be connected through OAuth, and BYOB can also use managed BYOB DB or defer backend work until later. **Can Codex, Claude Code, or Antigravity work on BYOB projects?** Yes. Install BYOB CLI, approve project access, and the configured coding agent can use MCP tools to inspect context, edit code, test previews, deploy, manage domains, and surface billing links. **Can I use my own domain?** Yes on paid plans, after the project has been deployed. BYOB provides guided DNS records and status checks. **Who owns the generated app?** The user owns the generated project and can export the code as a ZIP file. **What is BYOB DB?** BYOB DB is a managed SQLite database (powered by Cloudflare D1) with a schema viewer, data browser, and SQL inspection tools. **Can BYOB send emails?** Yes. Paid plans include a managed email sender with delivery logging and test-send verification. **How does version control work?** BYOB autosaves your project, supports manual commits with notes, and lets you browse history, compare changes, and restore any previous version. **What is Preflight Planning?** Preflight Planning is the guided setup that refines your prompt, identifies features, suggests UX direction, and builds a plan before the AI writes any code. **Can I export my project?** Yes. Download the entire project as a ZIP file. BYOB generates standard SvelteKit code with no vendor lock-in.