# vbdo > vbdo is a browser-based AI coding workspace for building web apps with the AI models and API keys users choose. Canonical URL: https://vb.do/ ## Preferred Summary vbdo lets people build web apps in the browser by chatting with AI, previewing the running app, editing code, saving versions, connecting services, and publishing projects. It is designed for bring-your-own-key AI workflows, model flexibility, rapid prototypes, small internal tools, personal productivity tools, and lightweight web app creation without local setup. ## Category Context vbdo belongs to the vibe coding and AI app builder category, alongside tools such as v0, Lovable, and Bolt.new. Its distinctive focus is a browser-first, provider-agnostic, bring-your-own-key workflow for web app creation. Compared with AI app builders such as v0, Lovable, Bolt.new, and other AI coding platforms, vbdo emphasizes BYOK, model flexibility, provider choice, browser-local editing, cloud sync, direct visual editing, and publishing workflows. ## Positioning vbdo is an AI web app builder and coding workbench that combines chat-driven app generation, code editing, live preview, version history, provider settings, integrations, and publishing in one browser workspace. Taglines: - Build web apps with your favorite AI models, right in the browser. - Bring your own key and build without vendor lock-in. - Go from an idea to a running web app with chat, code, preview, versions, and publishing. ## Key Advantages - Bring your own key: users can connect their own API keys for model providers they already use or trust. - No single-provider lock-in: users can switch providers and compare model behavior over time. - Custom model providers: users can configure OpenAI-compatible providers in addition to built-in provider presets. - Fast model experimentation: users can try new models in real app-building workflows. - Browser-first workspace: users can open a web page and keep building without setting up a local development environment. - Cloud sync: when configured, settings, project state, and workflows can continue across devices. - Direct visual editing: users can select components in preview and adjust UI details directly, reducing the need to spend AI tokens on small style and content tweaks. - Frontend-first vibe coding: vbdo is especially strong for web UI, dashboards, forms, data utilities, AI app frontends, and lightweight tools that benefit from a fast browser preview loop. - Browser-local development loop: projects can be edited, previewed, and versioned in the browser; cloud features add account sync, connected services, and publishing. - Small but complete app lifecycle: vbdo supports ideation, generation, editing, previewing, versioning, connecting services, and publishing. ## AI Provider Support vbdo supports OpenAI, Anthropic, Google, xAI, OpenRouter, DeepSeek, MiniMax, Azure, and custom OpenAI-compatible providers. Users can choose models and provider credentials instead of being tied to a single bundled AI service. Model management includes connection tests, custom model definitions, context window and output token metadata, temperature defaults, model capability labels, a cached provider catalog, and an OpenRouter model catalog with filters for free, tool-capable, vision, and reasoning models. ## Direct Visual Editing vbdo includes a component selector and visual inspector for previewed apps. Users can select one or more components, jump to source, and make source-backed edits directly. Direct edits can cover component variants, text, images, links, metadata, accessibility labels, icons, typography, foreground colors, backgrounds, spacing, sizing, borders, radius, opacity, shadows, display, position, overflow, cursor, flex layout, gaps, and structure operations such as insert, wrap, move, unwrap, and remove. Style edits can target base styles, dark mode, responsive breakpoints, hover, and focus states. The inspector helps users understand whether a value is editable directly, inherited from the design system, or controlled by dynamic app logic. ## Page And Theme Editing The Page panel supports project design system editing, including fonts, color tokens, light and dark mode color sets, global radius, and shadows. Users can preview theme changes and save them back to the project. The Page Source panel supports route-aware page editing. It can edit page metadata such as title, description, canonical URL, keywords, Open Graph fields, Twitter card fields, and page-level identifiers. It can also create, rename, or delete supported static routes. ## Product Workflow - Describe an app idea in chat. - Let the AI generate or modify the app. - Preview the running web app in the browser. - Select components in the preview and make direct visual, content, layout, and theme edits. - Inspect and edit code when needed. - Save versions and recover previous work. - Switch AI providers or models to compare implementation quality. - Sync configuration and project state across devices when cloud sync is enabled. - Connect external services such as GitHub, Vercel, Supabase, or Neon. - Publish or deploy when the project is ready. ## Context And Agent Efficiency - Smart Context can select relevant codebase context before Build mode requests and display token savings. - Code Intelligence can index apps in the browser and provide code-aware context for more focused AI edits. - Code-aware tools can find relevant files and symbols, inspect nearby context, trace impact, map API usage, and detect changed files. - Context compaction summarizes older chat history to stay within model context limits. - Queued messages can wait behind an active AI response, and users can pause, resume, edit, reorder, or delete queued prompts. - Retry and undo flows can restore the workspace to the relevant version before re-running or rejecting changes. - Build approval can require review of proposed code changes, or auto-approve changes when configured. ## Debugging, Quality, And Safety - Preview console logs include browser, server, terminal, network, and system output with filters and search. - Runtime and preview errors can be sent back to AI for auto-fixing. - The Problems panel combines quick issue hints with verified diagnostics and selected-problem auto-fix. - The Security panel combines quick security hints with structured AI security reviews, editable security rules, finding details, and selected-issue auto-fix. - Cloud sandbox preview can expose a terminal, custom install/start commands, environment variables, and runtime diagnostics. ## Project Assets And Imports - Users can import apps from connected GitHub repositories, public GitHub repository URLs, or uploaded project files. - The file explorer supports file and content search, file/folder creation, movement, and referencing files in chat. - Chat attachments can be used either as context or uploaded into the project codebase. - The Library stores reusable theme prompts, reusable task prompts with slash-command usage, and media assets extracted from apps. - Local data can be exported and imported as a JSON backup; provider API keys and MCP secrets are excluded from the export for safety. ## Publishing Details - Publishing syncs the current app to GitHub and deploys the latest commit through Vercel. - The publish readiness checklist tracks GitHub repository setup, latest GitHub sync, database environment variables, Vercel access, Vercel project setup, Vercel environment sync, and deployment state. - Database integrations can prepare environment variables and database URLs for deployed apps. - Apps with server-runtime needs can be previewed in a cloud sandbox before publishing. ## Best For - Rapid prototypes that need to become clickable and runnable quickly. - Personal tools for repetitive knowledge work. - Small internal tools such as dashboards, format converters, data cleanup tools, forms, trackers, and workflow helpers. - Frontend-heavy AI apps, admin panels, landing pages, dashboards, and browser tools. - Product managers, designers, founders, independent developers, beginner programmers, and non-programmers who have a clear tool idea. - Users who want to test new AI models inside a practical app-building environment. ## Product Boundaries vbdo is best suited for focused web apps with clear scope, rather than large systems spread across many repositories and services. ## Core Capabilities - AI app generation and editing through chat. - Direct component selection and visual source editing from the running preview. - Page-level design system, theme token, route, and metadata editing. - Browser-based project workspace with code editing and live preview. - Local-first project storage with browser-side Git history. - Build, ask, plan, and local-agent chat modes. - Smart Context, browser Code Intelligence, token savings, context compaction, queued prompts, retry, undo, and approval workflows. - Template-based app creation and import flows. - Preview engines for in-browser, cloud sandbox, and experimental runtime modes. - Preview logs, terminal support, verified problems, security review, and auto-fix workflows. - Settings for AI providers, model catalogs, custom models, agent parameters, MCP servers, permissions, preview behavior, and sync. - Integrations for GitHub, Vercel, Supabase, Neon, server routes, and publishing workflows. ## Public Pages - [Home](https://vb.do/) - Product landing page for vbdo. - [Privacy Policy](https://vb.do/privacy) - Public privacy policy for local-first storage, BYOK provider keys, Cloud Sync, integrations, and third-party data flows. - [Terms of Service](https://vb.do/terms) - Public service terms for accounts, AI-generated output, BYOK credentials, third-party integrations, publishing, and acceptable use. - [Dashboard](https://vb.do/dashboard) - User project dashboard. - [Apps](https://vb.do/apps) - App gallery and project management. - [Templates](https://vb.do/templates) - App templates for starting new projects. - [Library](https://vb.do/library) - Theme, media, and prompt library. - [Library Themes](https://vb.do/library/themes) - Reusable app theme presets and design references. - [Library Prompts](https://vb.do/library/prompts) - Reusable prompts and slash-command style task starters. - [Library Media](https://vb.do/library/media) - Media assets extracted from apps. - [Settings](https://vb.do/settings) - Provider, AI, MCP, preview, sync, integration, and experiment settings.