Use the full Bloom workspace to create, edit, and preview apps from your browser.
The web version of Bloom gives you the complete workspace for building, testing, and managing your app, all without installing anything locally. It’s the most powerful way to work with Bloom, offering full access to code structure, backend tools, and real-time preview.
You can choose which AI model Bloom uses to generate your code. The model selector is to the right of the + button in the bottom left corner of the chat input.
Available models:
Model
Cost
Best for
Auto (default)
Varies
Bloom picks the best model for each request
MiniMax M2.5
$
Lighter, faster generations
Gemini 3.1 Pro
$$
Balanced speed and quality
Sonnet 4.6
$$
Balanced speed and quality
GPT 5.3 Codex
$$$
Complex, high-quality generations
Opus 4.6
$$$
Complex, high-quality generations
Auto is selected by default and works well for most requests. Higher-tier models ($$, $$$) produce more sophisticated results but use more credits per generation.
The preview toolbar includes a toggle that lets you switch between a web layout and a mobile device frame. Use it to verify that your app looks and feels right on both platforms without leaving the workspace.
The web/mobile toggle in the preview toolbar
Web preview
Mobile preview
The web preview shows your app in a full-width browser layout. This is the best way to check responsive design, wide layouts, and desktop interactions.
Web preview active
The mobile preview wraps your app in an iPhone device frame so you can see exactly how it will appear on a phone. Use this to check touch targets, scroll behavior, and mobile navigation.
Mobile preview active
Switch between views frequently as you build. Some layouts look great on web but need adjustment on mobile, and vice versa.
Learn how to create and iterate on apps from your phone.
Share your app
Generate links and QR codes to share your app instantly.
Backend Dashboard
Dive deeper into monitoring and managing your backend.
Deploy to stores
Ready to publish? Learn how to deploy to app stores.
Was this page helpful?
{"docsConfig":{"theme":"mint","$schema":"https://mintlify.com/docs.json","name":"Bloom","description":"Create full-stack native apps with AI","colors":{"primary":"#2EA1F3","light":"#F5F3FF","dark":"#FF7DAD"},"logo":{"light":"https://mintcdn.com/bloom-eafef039/V5DGM7pehs6HGA75/images/bloom-logo-light.png?fit=max\u0026auto=format\u0026n=V5DGM7pehs6HGA75\u0026q=85\u0026s=ec1e694a7c5372d8b2d6202b38c17ae3","dark":"https://mintcdn.com/bloom-eafef039/V5DGM7pehs6HGA75/images/bloom-logo-dark.png?fit=max\u0026auto=format\u0026n=V5DGM7pehs6HGA75\u0026q=85\u0026s=d4f624dabec98bc7f06a501231332827","href":"https://bloom.diy/"},"favicon":"https://mintcdn.com/bloom-eafef039/V5DGM7pehs6HGA75/images/favicon.png?fit=max\u0026auto=format\u0026n=V5DGM7pehs6HGA75\u0026q=85\u0026s=f173e45b79d7cf2d3d5026793971cdc9","background":{"decoration":"gradient","color":{"light":"#F9FAFB","dark":"#080808"}},"navbar":{"links":[{"href":"https://discord.com/invite/ZC3zgARtUY","type":"discord"}],"primary":{"type":"button","label":"Dashboard","href":"https://bloom.diy/"}},"footer":{"socials":{"linkedin":"https://www.linkedin.com/company/bloomlabs-inc","x":"https://x.com/CreateWithBloom","youtube":"https://www.youtube.com/@CreateWithBloom"}},"fonts":{"family":"Inter"},"integrations":{"intercom":{"appId":"t9im3l10"},"posthog":{"apiKey":"phc_Ysdg4mGIW3VBgO0bCt4aAS1mXp0lX5aak6hHqgcxxKO","apiHost":"https://us.i.posthog.com"}},"contextual":{"options":["copy","view","chatgpt","claude","perplexity","mcp","cursor","vscode"],"display":"header"},"styling":{"latex":true},"navigation":{"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"bloom-eafef039","hasAudioNarration":false,"actualSubdomain":"bloom-eafef039","customDomains":["docs.bloom.diy"],"gitSource":{"type":"github","owner":"bloomlabsinc","repo":"docs","deployBranch":"main","contentDirectory":"","isPrivate":true,"mountPath":"","label":""},"chroma":{"liveDeploymentHistoryId":"6ab8f8442958eeb639dfea56","collectionId":"be1112b2-7067-4da1-b88d-2605bbda974e","schemaVersion":"v3","latestBuiltDeploymentHistoryId":"6ab8f8442958eeb639dfea56"},"feedback":{"thumbs":true},"entitlements":{"AI_CHAT":{"status":"ENABLED"},"WEB_MCP":{"status":"ENABLED"},"NARRATION":{"status":"ENABLED"}},"buildId":"6ab8f8442958eeb639dfea56","clientVersion":"0.0.4044","searchFilterCounts":[{"language":"default","tag":"Features","count":16},{"language":"default","tag":"Introduction","count":10},{"language":"default","tag":"Tips \u0026 Tricks","count":5},{"language":"default","tag":"Code","count":4},{"language":"default","tag":"Getting Started","count":4},{"language":"default","tag":"Build Your First App","count":4},{"language":"default","tag":"Quick References","count":3},{"language":"default","tag":"Platforms","count":2},{"language":"default","tag":"Changelog","count":2},{"language":"default","tag":"Connect AI clients","count":1}]},"assistantConfig":{"enableAskAiButton":false,"enableStarterQuestions":false,"enableAskAiSearchBar":true,"deflection":{"enabled":true,"email":"team@bloom.diy","showHelpButton":true}},"basePath":"","hasChatPermissions":true,"hasWebMcpPermissions":true,"toggles":[{"name":"kill-isr","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-mintlify-slack","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-integrations-settings","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-pr-grouping","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-prefix","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"analytics-v7","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"user-flows-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"no-publish-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-onboarding","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"llms-txt-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving-live","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"stripTemperatureMiddleware","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"support-platform-pylon-zendesk","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"instant-rollback","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications-server","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-fable","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fixed-ai-action-pricing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automation-resolve-merge-conflict","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"scoped-publishing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"mintql","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"page-level-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-version-history-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-page-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"full-page-search","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workspace-projects","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"assistant-v5","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"byok-sep-25","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fork-pr-previews","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"revalidation-jwt","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"vite-origin","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-updated-9-15","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-sso-scim","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"hobby-abuse-scan","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"dashboard-inbox","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-signup","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"turbopuffer-dual-write","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-enabled","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"approve-review-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"sso-setup-deadline-banner","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false}],"googleFontsInlined":false},"customCss":[],"page":{"pagePath":"building-from-web","slug":"/building-from-web","pageMetadata":{"title":"Building from Web","description":"Use the full Bloom workspace to create, edit, and preview apps from your browser.","icon":"globe","href":"/building-from-web"},"description":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n p: \"p\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsx(_components.p, {\n children: \"Use the full Bloom workspace to create, edit, and preview apps from your browser.\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{Fragment:_Fragment,jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];function _createMdxContent(props){const _components={a:`a`,code:`code`,li:`li`,ol:`ol`,p:`p`,pre:`pre`,span:`span`,strong:`strong`,tbody:`tbody`,td:`td`,th:`th`,thead:`thead`,tr:`tr`,ul:`ul`,..._provideComponents(),...props.components},{Accordion,AccordionGroup,Card,CardGroup,Check,CodeBlock,Frame,Heading,Info,OptimizedImage,Step,Steps,Tab,Table,Tabs,Tip,Warning}=_components;if(!Accordion)_missingMdxReference(`Accordion`,true);if(!AccordionGroup)_missingMdxReference(`AccordionGroup`,true);if(!Card)_missingMdxReference(`Card`,true);if(!CardGroup)_missingMdxReference(`CardGroup`,true);if(!Check)_missingMdxReference(`Check`,true);if(!CodeBlock)_missingMdxReference(`CodeBlock`,true);if(!Frame)_missingMdxReference(`Frame`,true);if(!Heading)_missingMdxReference(`Heading`,true);if(!Info)_missingMdxReference(`Info`,true);if(!OptimizedImage)_missingMdxReference(`OptimizedImage`,true);if(!Step)_missingMdxReference(`Step`,true);if(!Steps)_missingMdxReference(`Steps`,true);if(!Tab)_missingMdxReference(`Tab`,true);if(!Table)_missingMdxReference(`Table`,true);if(!Tabs)_missingMdxReference(`Tabs`,true);if(!Tip)_missingMdxReference(`Tip`,true);if(!Warning)_missingMdxReference(`Warning`,true);return _jsxs(_Fragment,{children:[_jsxs(_components.p,{children:[`The `,_jsx(_components.strong,{children:`web version of Bloom`}),` gives you the complete workspace for building, testing, and managing your app, all without installing anything locally. It’s the most powerful way to work with Bloom, offering full access to code structure, backend tools, and real-time preview.`]}),`\n`,_jsx(Frame,{children:_jsx(OptimizedImage,{src:`https://mintcdn.com/bloom-eafef039/FFPKMkGhN_cDZ48F/images/preview-generation.jpg?fit=max\u0026auto=format\u0026n=FFPKMkGhN_cDZ48F\u0026q=85\u0026s=93c16c5ed9f6b4e2257434246f2bbcc8`,alt:`Bloom web workspace`,\"data-og-width\":`3022`,width:`3022`,\"data-og-height\":`1563`,height:`1563`,\"data-path\":`images/preview-generation.jpg`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/bloom-eafef039/FFPKMkGhN_cDZ48F/images/preview-generation.jpg?w=280\u0026fit=max\u0026auto=format\u0026n=FFPKMkGhN_cDZ48F\u0026q=85\u0026s=204cd852f1736c56d65526c3943791e6 280w, https://mintcdn.com/bloom-eafef039/FFPKMkGhN_cDZ48F/images/preview-generation.jpg?w=560\u0026fit=max\u0026auto=format\u0026n=FFPKMkGhN_cDZ48F\u0026q=85\u0026s=f5e710a4cf68dbbd81e4c20c978b3fba 560w, https://mintcdn.com/bloom-eafef039/FFPKMkGhN_cDZ48F/images/preview-generation.jpg?w=840\u0026fit=max\u0026auto=format\u0026n=FFPKMkGhN_cDZ48F\u0026q=85\u0026s=03029d707fcff1927ab41a3f2101e633 840w, https://mintcdn.com/bloom-eafef039/FFPKMkGhN_cDZ48F/images/preview-generation.jpg?w=1100\u0026fit=max\u0026auto=format\u0026n=FFPKMkGhN_cDZ48F\u0026q=85\u0026s=69a202ba043f46972832afb6ea73b842 1100w, https://mintcdn.com/bloom-eafef039/FFPKMkGhN_cDZ48F/images/preview-generation.jpg?w=1650\u0026fit=max\u0026auto=format\u0026n=FFPKMkGhN_cDZ48F\u0026q=85\u0026s=551a63d3357cedc7b00a46d62deb7b47 1650w, https://mintcdn.com/bloom-eafef039/FFPKMkGhN_cDZ48F/images/preview-generation.jpg?w=2500\u0026fit=max\u0026auto=format\u0026n=FFPKMkGhN_cDZ48F\u0026q=85\u0026s=398d9645ec5bd43aee073b90feded225 2500w`})}),`\n`,_jsx(Heading,{level:`2`,id:`when-to-use-the-web-app`,children:`When to use the web app`}),`\n`,_jsxs(CardGroup,{cols:2,children:[_jsx(Card,{title:`Starting a new project`,icon:`seedling`,children:_jsx(_components.p,{children:`The web workspace is ideal for creating your first version and setting up core features.`})}),_jsx(Card,{title:`Reviewing your code`,icon:`code`,children:_jsx(_components.p,{children:`Browse your app’s structure and understand how components connect to backend functions.`})}),_jsx(Card,{title:`Backend configuration`,icon:`database`,children:_jsx(_components.p,{children:`Managing environment variables, API keys, and deployment settings is easiest on web.`})}),_jsx(Card,{title:`Debugging issues`,icon:`bug`,children:_jsx(_components.p,{children:`Access logs, backend dashboard, and all diagnostic tools in one place.`})}),_jsx(Card,{title:`Team collaboration`,icon:`users`,children:_jsx(_components.p,{children:`Share your screen during meetings or work alongside teammates on larger displays.`})}),_jsx(Card,{title:`Complex features`,icon:`puzzle-piece`,children:_jsx(_components.p,{children:`When building sophisticated logic, data models, or integrations, the web workspace provides more screen space and tools.`})})]}),`\n`,_jsx(Heading,{level:`2`,id:`creating-your-first-app`,children:`Creating your first app`}),`\n`,_jsxs(Steps,{children:[_jsxs(Step,{title:`Open Bloom in your browser`,icon:`browser`,children:[_jsxs(_components.p,{children:[`Navigate to `,_jsx(_components.a,{href:`https://bloom.diy`,children:`bloom.diy`}),` and sign in to your account.`]}),_jsx(_components.p,{children:`If you don’t have an account yet, sign up with Google, GitHub, or email.`})]}),_jsxs(Step,{title:`Click 'New App'`,icon:`plus`,children:[_jsxs(_components.p,{children:[`From your dashboard, click the `,_jsx(_components.strong,{children:`New App`}),` button to start creating.`]}),_jsx(Frame,{children:_jsx(OptimizedImage,{src:`https://mintcdn.com/bloom-eafef039/FFPKMkGhN_cDZ48F/images/new-app-button.png?fit=max\u0026auto=format\u0026n=FFPKMkGhN_cDZ48F\u0026q=85\u0026s=e82134775ac0909389d1e5411661f340`,alt:`New App Button`,\"data-og-width\":`478`,width:`478`,\"data-og-height\":`214`,height:`214`,\"data-path\":`images/new-app-button.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/bloom-eafef039/FFPKMkGhN_cDZ48F/images/new-app-button.png?w=280\u0026fit=max\u0026auto=format\u0026n=FFPKMkGhN_cDZ48F\u0026q=85\u0026s=01e4a7407a5a48d6b0e0bc520dfb0fcd 280w, https://mintcdn.com/bloom-eafef039/FFPKMkGhN_cDZ48F/images/new-app-button.png?w=560\u0026fit=max\u0026auto=format\u0026n=FFPKMkGhN_cDZ48F\u0026q=85\u0026s=85cbd99c4853ff3eeaf83352c220b6da 560w, https://mintcdn.com/bloom-eafef039/FFPKMkGhN_cDZ48F/images/new-app-button.png?w=840\u0026fit=max\u0026auto=format\u0026n=FFPKMkGhN_cDZ48F\u0026q=85\u0026s=f4e9a534db2ea8440b4510a69bc534bc 840w, https://mintcdn.com/bloom-eafef039/FFPKMkGhN_cDZ48F/images/new-app-button.png?w=1100\u0026fit=max\u0026auto=format\u0026n=FFPKMkGhN_cDZ48F\u0026q=85\u0026s=41a4e6b70ff3f3c743dd5393d8c9eba5 1100w, https://mintcdn.com/bloom-eafef039/FFPKMkGhN_cDZ48F/images/new-app-button.png?w=1650\u0026fit=max\u0026auto=format\u0026n=FFPKMkGhN_cDZ48F\u0026q=85\u0026s=d863de6a4f9cf8a6ef6f1a3c56c05a4d 1650w, https://mintcdn.com/bloom-eafef039/FFPKMkGhN_cDZ48F/images/new-app-button.png?w=2500\u0026fit=max\u0026auto=format\u0026n=FFPKMkGhN_cDZ48F\u0026q=85\u0026s=a094b59cfa5649d13e78184825833d50 2500w`})})]}),_jsxs(Step,{title:`Describe what you want to build`,icon:`message`,children:[_jsx(_components.p,{children:`In the prompt, describe your app idea in natural language.`}),_jsxs(Accordion,{title:`Prompting tips`,icon:`lightbulb`,id:`prompting-tips`,children:[_jsx(_components.p,{children:_jsx(_components.strong,{children:`Be specific about:`})}),_jsxs(_components.ul,{children:[`\n`,_jsx(_components.li,{children:`The main purpose (e.g., “habit tracker,” “recipe manager”)`}),`\n`,_jsx(_components.li,{children:`Key features (e.g., “daily check-ins,” “photo uploads”)`}),`\n`,_jsx(_components.li,{children:`User flows (e.g., “users can create, edit, and delete entries”)`}),`\n`]}),_jsx(_components.p,{children:_jsx(_components.strong,{children:`Good example:`})}),_jsx(CodeBlock,{numberOfLines:`4`,language:`text`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`text`,children:_jsxs(_components.code,{language:`text`,numberOfLines:`4`,children:[_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`Build a daily journal app where users can write entries, `})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`add photos, and tag entries by mood. Include a calendar `})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`view showing which days have entries.`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{})})]})})}),_jsx(_components.p,{children:_jsx(_components.strong,{children:`Less helpful example:`})}),_jsx(CodeBlock,{numberOfLines:`2`,language:`text`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`text`,children:_jsxs(_components.code,{language:`text`,numberOfLines:`2`,children:[_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`Make a journal app`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{})})]})})})]})]}),_jsxs(Step,{title:`Bloom generates your app`,icon:`wand-magic-sparkles`,children:[_jsx(_components.p,{children:`Bloom creates your full-stack app:`}),_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Frontend`}),` — Expo project with screens and UI components`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Backend`}),` — Convex functions, database schema, and API endpoints`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Authentication`}),` — OAuth configuration ready to enable`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Preview`}),` — Your app running live in the right panel`]}),`\n`]}),_jsx(_components.p,{children:`This usually takes 2-10 minutes depending on complexity.`})]}),_jsxs(Step,{title:`Preview your app`,icon:`eye`,children:[_jsx(_components.p,{children:`Once generation completes, you’ll see your app running in the preview panel.`}),_jsx(Check,{children:_jsx(_components.p,{children:`Click through the screens`})}),_jsx(Check,{children:_jsx(_components.p,{children:`Test core functionality`})}),_jsx(Check,{children:_jsx(_components.p,{children:`Identify what works and what needs refinement`})})]}),_jsxs(Step,{title:`Iterate and refine`,icon:`rotate`,children:[_jsx(_components.p,{children:`Use the chat to request changes:`}),_jsxs(_components.ul,{children:[`\n`,_jsx(_components.li,{children:`“Add a search bar to the main screen”`}),`\n`,_jsx(_components.li,{children:`“Change the primary color to blue”`}),`\n`,_jsx(_components.li,{children:`“Let users upload profile photos”`}),`\n`,_jsx(_components.li,{children:`“Add a settings screen with dark mode toggle”`}),`\n`]}),_jsx(_components.p,{children:`Each iteration updates your app and shows changes in the preview.`})]})]}),`\n`,_jsx(Heading,{level:`3`,id:`choosing-a-model`,children:`Choosing a model`}),`\n`,_jsxs(_components.p,{children:[`You can choose which AI model Bloom uses to generate your code. The model selector is to the right of the `,_jsx(_components.strong,{children:`+`}),` button in the bottom left corner of the chat input.`]}),`\n`,_jsx(Frame,{children:_jsx(OptimizedImage,{src:`https://mintcdn.com/bloom-eafef039/6Jj6W1TQ2_0nANBi/images/select-model-web.png?fit=max\u0026auto=format\u0026n=6Jj6W1TQ2_0nANBi\u0026q=85\u0026s=418cab91cf821dd4c61e1c0a01e57570`,alt:`Model selector on web`,\"data-og-width\":`940`,width:`940`,\"data-og-height\":`761`,height:`761`,\"data-path\":`images/select-model-web.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/bloom-eafef039/6Jj6W1TQ2_0nANBi/images/select-model-web.png?w=280\u0026fit=max\u0026auto=format\u0026n=6Jj6W1TQ2_0nANBi\u0026q=85\u0026s=9eaa5f71f1c1aa75f4b7fa423bd98f39 280w, https://mintcdn.com/bloom-eafef039/6Jj6W1TQ2_0nANBi/images/select-model-web.png?w=560\u0026fit=max\u0026auto=format\u0026n=6Jj6W1TQ2_0nANBi\u0026q=85\u0026s=05cbe90b334a73e41a641844dea56d5a 560w, https://mintcdn.com/bloom-eafef039/6Jj6W1TQ2_0nANBi/images/select-model-web.png?w=840\u0026fit=max\u0026auto=format\u0026n=6Jj6W1TQ2_0nANBi\u0026q=85\u0026s=7f12792735558933199eb124141022f9 840w, https://mintcdn.com/bloom-eafef039/6Jj6W1TQ2_0nANBi/images/select-model-web.png?w=1100\u0026fit=max\u0026auto=format\u0026n=6Jj6W1TQ2_0nANBi\u0026q=85\u0026s=ffd6b887fd4d38fe6dfabef31eda9bb3 1100w, https://mintcdn.com/bloom-eafef039/6Jj6W1TQ2_0nANBi/images/select-model-web.png?w=1650\u0026fit=max\u0026auto=format\u0026n=6Jj6W1TQ2_0nANBi\u0026q=85\u0026s=19d128f0adefa98c979fe304ba863430 1650w, https://mintcdn.com/bloom-eafef039/6Jj6W1TQ2_0nANBi/images/select-model-web.png?w=2500\u0026fit=max\u0026auto=format\u0026n=6Jj6W1TQ2_0nANBi\u0026q=85\u0026s=50a47ba60f736ab7357367124bcfa2ce 2500w`})}),`\n`,_jsx(_components.p,{children:_jsx(_components.strong,{children:`Available models:`})}),`\n`,_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{children:`Model`}),_jsx(_components.th,{children:`Cost`}),_jsx(_components.th,{children:`Best for`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsxs(_components.td,{children:[_jsx(_components.strong,{children:`Auto`}),` (default)`]}),_jsx(_components.td,{children:`Varies`}),_jsx(_components.td,{children:`Bloom picks the best model for each request`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`MiniMax M2.5`})}),_jsx(_components.td,{\"data-numeric\":`true`,children:`$`}),_jsx(_components.td,{children:`Lighter, faster generations`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Gemini 3.1 Pro`})}),_jsx(_components.td,{\"data-numeric\":`true`,children:`$$`}),_jsx(_components.td,{children:`Balanced speed and quality`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Sonnet 4.6`})}),_jsx(_components.td,{\"data-numeric\":`true`,children:`$$`}),_jsx(_components.td,{children:`Balanced speed and quality`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`GPT 5.3 Codex`})}),_jsx(_components.td,{\"data-numeric\":`true`,children:`$$$`}),_jsx(_components.td,{children:`Complex, high-quality generations`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Opus 4.6`})}),_jsx(_components.td,{\"data-numeric\":`true`,children:`$$$`}),_jsx(_components.td,{children:`Complex, high-quality generations`})]})]})]}),`\n`,_jsxs(_components.p,{children:[_jsx(_components.strong,{children:`Auto`}),` is selected by default and works well for most requests. Higher-tier models ($$, $$$) produce more sophisticated results but use more credits per generation.`]}),`\n`,_jsx(Heading,{level:`2`,id:`working-with-the-preview`,children:`Working with the preview`}),`\n`,_jsx(Heading,{level:`3`,id:`testing-your-app`,children:`Testing your app`}),`\n`,_jsx(_components.p,{children:`The live preview lets you interact with your app as if you’re using it on a real device:`}),`\n`,_jsxs(CardGroup,{cols:2,children:[_jsx(Card,{title:`Click and navigate`,icon:`hand-pointer`,children:_jsx(_components.p,{children:`Tap buttons, fill out forms, navigate between screens—everything is interactive.`})}),_jsx(Card,{title:`Test user flows`,icon:`route`,children:_jsx(_components.p,{children:`Walk through complete user journeys from start to finish to verify functionality.`})}),_jsx(Card,{title:`Check responsiveness`,icon:`mobile`,children:_jsx(_components.p,{children:`Resize the preview to see how your app adapts to different screen sizes.`})}),_jsx(Card,{title:`Verify real-time updates`,icon:`arrows-rotate`,children:_jsx(_components.p,{children:`For apps with live data, open multiple browser windows to test sync across devices.`})})]}),`\n`,_jsx(Heading,{level:`3`,id:`switching-between-web-and-mobile-preview`,children:`Switching between web and mobile preview`}),`\n`,_jsxs(_components.p,{children:[`The preview toolbar includes a toggle that lets you switch between a `,_jsx(_components.strong,{children:`web layout`}),` and a `,_jsx(_components.strong,{children:`mobile device frame`}),`. Use it to verify that your app looks and feels right on both platforms without leaving the workspace.`]}),`\n`,_jsx(Frame,{caption:`The web/mobile toggle in the preview toolbar`,children:_jsx(OptimizedImage,{src:`https://mintcdn.com/bloom-eafef039/YuFkGmz9291JO9eH/images/preview-switcher.png?fit=max\u0026auto=format\u0026n=YuFkGmz9291JO9eH\u0026q=85\u0026s=62e5f91b003a8d0094f95c665d6abfea`,alt:`Preview switcher`,\"data-og-width\":`656`,width:`656`,\"data-og-height\":`188`,height:`188`,\"data-path\":`images/preview-switcher.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/bloom-eafef039/YuFkGmz9291JO9eH/images/preview-switcher.png?w=280\u0026fit=max\u0026auto=format\u0026n=YuFkGmz9291JO9eH\u0026q=85\u0026s=6ab6309a17ea7559bab717c390070d00 280w, https://mintcdn.com/bloom-eafef039/YuFkGmz9291JO9eH/images/preview-switcher.png?w=560\u0026fit=max\u0026auto=format\u0026n=YuFkGmz9291JO9eH\u0026q=85\u0026s=9498e9a353a5abbc78e9d258bfa95825 560w, https://mintcdn.com/bloom-eafef039/YuFkGmz9291JO9eH/images/preview-switcher.png?w=840\u0026fit=max\u0026auto=format\u0026n=YuFkGmz9291JO9eH\u0026q=85\u0026s=40a7141df7068e6780f935d6b0a9a732 840w, https://mintcdn.com/bloom-eafef039/YuFkGmz9291JO9eH/images/preview-switcher.png?w=1100\u0026fit=max\u0026auto=format\u0026n=YuFkGmz9291JO9eH\u0026q=85\u0026s=774edeb6d99dd43ad765ec4a528514c1 1100w, https://mintcdn.com/bloom-eafef039/YuFkGmz9291JO9eH/images/preview-switcher.png?w=1650\u0026fit=max\u0026auto=format\u0026n=YuFkGmz9291JO9eH\u0026q=85\u0026s=513b8dd6856e60fdfdf9298070f583f4 1650w, https://mintcdn.com/bloom-eafef039/YuFkGmz9291JO9eH/images/preview-switcher.png?w=2500\u0026fit=max\u0026auto=format\u0026n=YuFkGmz9291JO9eH\u0026q=85\u0026s=f07f5e8bc97b29e46394e7b1754064ee 2500w`})}),`\n`,_jsxs(Tabs,{children:[_jsxs(Tab,{title:`Web preview`,id:`web-preview`,children:[_jsx(_components.p,{children:`The web preview shows your app in a full-width browser layout. This is the best way to check responsive design, wide layouts, and desktop interactions.`}),_jsx(Frame,{caption:`Web preview active`,children:_jsx(OptimizedImage,{src:`https://mintcdn.com/bloom-eafef039/YuFkGmz9291JO9eH/images/preview-web-active.png?fit=max\u0026auto=format\u0026n=YuFkGmz9291JO9eH\u0026q=85\u0026s=1e55336f755bf946d656e97ff3893edf`,alt:`Web preview`,\"data-og-width\":`978`,width:`978`,\"data-og-height\":`1024`,height:`1024`,\"data-path\":`images/preview-web-active.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/bloom-eafef039/YuFkGmz9291JO9eH/images/preview-web-active.png?w=280\u0026fit=max\u0026auto=format\u0026n=YuFkGmz9291JO9eH\u0026q=85\u0026s=f98f3f9ec4eaf47815b665d300d50d80 280w, https://mintcdn.com/bloom-eafef039/YuFkGmz9291JO9eH/images/preview-web-active.png?w=560\u0026fit=max\u0026auto=format\u0026n=YuFkGmz9291JO9eH\u0026q=85\u0026s=3439527c51993975690b7b5add70926d 560w, https://mintcdn.com/bloom-eafef039/YuFkGmz9291JO9eH/images/preview-web-active.png?w=840\u0026fit=max\u0026auto=format\u0026n=YuFkGmz9291JO9eH\u0026q=85\u0026s=29dfcab8af78aa5dfd4e70add1759647 840w, https://mintcdn.com/bloom-eafef039/YuFkGmz9291JO9eH/images/preview-web-active.png?w=1100\u0026fit=max\u0026auto=format\u0026n=YuFkGmz9291JO9eH\u0026q=85\u0026s=2d7f546dd3d678076b08d58e13730ff1 1100w, https://mintcdn.com/bloom-eafef039/YuFkGmz9291JO9eH/images/preview-web-active.png?w=1650\u0026fit=max\u0026auto=format\u0026n=YuFkGmz9291JO9eH\u0026q=85\u0026s=36a6654b3009bb1fb31588927eae0f74 1650w, https://mintcdn.com/bloom-eafef039/YuFkGmz9291JO9eH/images/preview-web-active.png?w=2500\u0026fit=max\u0026auto=format\u0026n=YuFkGmz9291JO9eH\u0026q=85\u0026s=46f690523ac85e7b4924542ca8a0b18f 2500w`})})]}),_jsxs(Tab,{title:`Mobile preview`,id:`mobile-preview`,children:[_jsx(_components.p,{children:`The mobile preview wraps your app in an iPhone device frame so you can see exactly how it will appear on a phone. Use this to check touch targets, scroll behavior, and mobile navigation.`}),_jsx(Frame,{caption:`Mobile preview active`,children:_jsx(OptimizedImage,{src:`https://mintcdn.com/bloom-eafef039/YuFkGmz9291JO9eH/images/preview-mobile-active.png?fit=max\u0026auto=format\u0026n=YuFkGmz9291JO9eH\u0026q=85\u0026s=8acb6b4a4b29749e095446ea023dd831`,alt:`Mobile preview`,\"data-og-width\":`983`,width:`983`,\"data-og-height\":`1024`,height:`1024`,\"data-path\":`images/preview-mobile-active.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/bloom-eafef039/YuFkGmz9291JO9eH/images/preview-mobile-active.png?w=280\u0026fit=max\u0026auto=format\u0026n=YuFkGmz9291JO9eH\u0026q=85\u0026s=8a0d7c08cfe4fa173e7424af9d7593c6 280w, https://mintcdn.com/bloom-eafef039/YuFkGmz9291JO9eH/images/preview-mobile-active.png?w=560\u0026fit=max\u0026auto=format\u0026n=YuFkGmz9291JO9eH\u0026q=85\u0026s=5555688a2580bf4102db8231dc798bf7 560w, https://mintcdn.com/bloom-eafef039/YuFkGmz9291JO9eH/images/preview-mobile-active.png?w=840\u0026fit=max\u0026auto=format\u0026n=YuFkGmz9291JO9eH\u0026q=85\u0026s=ac6b2c4b15e3cab71d79e0af143d15c4 840w, https://mintcdn.com/bloom-eafef039/YuFkGmz9291JO9eH/images/preview-mobile-active.png?w=1100\u0026fit=max\u0026auto=format\u0026n=YuFkGmz9291JO9eH\u0026q=85\u0026s=673cfbf650ccf46d454e69a3ba1ee8c3 1100w, https://mintcdn.com/bloom-eafef039/YuFkGmz9291JO9eH/images/preview-mobile-active.png?w=1650\u0026fit=max\u0026auto=format\u0026n=YuFkGmz9291JO9eH\u0026q=85\u0026s=9a90570fde9c2ace5e44210fb23bed2f 1650w, https://mintcdn.com/bloom-eafef039/YuFkGmz9291JO9eH/images/preview-mobile-active.png?w=2500\u0026fit=max\u0026auto=format\u0026n=YuFkGmz9291JO9eH\u0026q=85\u0026s=ffbaeedbf7bc8d81f8b7d10ac1e61574 2500w`})})]})]}),`\n`,_jsx(Tip,{children:_jsx(_components.p,{children:`Switch between views frequently as you build. Some layouts look great on web but need adjustment on mobile, and vice versa.`})}),`\n`,_jsx(Heading,{level:`3`,id:`preview-on-your-phone`,children:`Preview on your phone`}),`\n`,_jsx(_components.p,{children:`For the most accurate testing, preview your app natively on your device.`}),`\n`,_jsx(Frame,{children:_jsx(OptimizedImage,{src:`https://mintcdn.com/bloom-eafef039/FFPKMkGhN_cDZ48F/images/preview-mobile.jpg?fit=max\u0026auto=format\u0026n=FFPKMkGhN_cDZ48F\u0026q=85\u0026s=4675bc770f35c6bd7d4ea9340caeb5b1`,alt:`Instant sharing on mobile`,\"data-og-width\":`3023`,width:`3023`,\"data-og-height\":`1564`,height:`1564`,\"data-path\":`images/preview-mobile.jpg`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/bloom-eafef039/FFPKMkGhN_cDZ48F/images/preview-mobile.jpg?w=280\u0026fit=max\u0026auto=format\u0026n=FFPKMkGhN_cDZ48F\u0026q=85\u0026s=7c77af09e011b8abbebf09174a28ef12 280w, https://mintcdn.com/bloom-eafef039/FFPKMkGhN_cDZ48F/images/preview-mobile.jpg?w=560\u0026fit=max\u0026auto=format\u0026n=FFPKMkGhN_cDZ48F\u0026q=85\u0026s=590b5d438a5f2d3e9cd3dd607fd03ff1 560w, https://mintcdn.com/bloom-eafef039/FFPKMkGhN_cDZ48F/images/preview-mobile.jpg?w=840\u0026fit=max\u0026auto=format\u0026n=FFPKMkGhN_cDZ48F\u0026q=85\u0026s=c601cc6dfa59e2ac058d9224f3fb5dc5 840w, https://mintcdn.com/bloom-eafef039/FFPKMkGhN_cDZ48F/images/preview-mobile.jpg?w=1100\u0026fit=max\u0026auto=format\u0026n=FFPKMkGhN_cDZ48F\u0026q=85\u0026s=c2d1d105edda0541341ba6934add9392 1100w, https://mintcdn.com/bloom-eafef039/FFPKMkGhN_cDZ48F/images/preview-mobile.jpg?w=1650\u0026fit=max\u0026auto=format\u0026n=FFPKMkGhN_cDZ48F\u0026q=85\u0026s=539d2a31b3a2a0546c0d265f1794f782 1650w, https://mintcdn.com/bloom-eafef039/FFPKMkGhN_cDZ48F/images/preview-mobile.jpg?w=2500\u0026fit=max\u0026auto=format\u0026n=FFPKMkGhN_cDZ48F\u0026q=85\u0026s=08c9d7e0c1daf9cf8071e83341af23f0 2500w`})}),`\n`,_jsx(_components.p,{children:`\\xA0`}),`\n`,_jsxs(Tabs,{children:[_jsxs(Tab,{title:`iOS`,id:`ios`,children:[_jsx(_components.p,{children:_jsx(_components.strong,{children:`App Clip Preview`})}),_jsxs(_components.p,{children:[`On iOS, Bloom uses `,_jsx(_components.strong,{children:`App Clips`}),`, a native iOS feature that lets users run apps instantly without installation.`]}),_jsxs(Steps,{children:[_jsx(Step,{title:`Scan the QR code`,children:_jsx(_components.p,{children:`Open your iPhone camera and point it at the QR code in the preview modal.`})}),_jsx(Step,{title:`Tap the notification`,children:_jsx(_components.p,{children:`iOS shows a banner to open the App Clip.`})}),_jsx(Step,{title:`App opens instantly`,children:_jsx(_components.p,{children:`Your app runs natively with full performance and complete functionality. No download required.`})})]})]}),_jsxs(Tab,{title:`Android`,id:`android`,children:[_jsx(_components.p,{children:_jsx(_components.strong,{children:`Progressive Web App`})}),_jsx(_components.p,{children:`On Android, shared apps run as progressive web apps (PWAs) in the browser.`}),_jsxs(Steps,{children:[_jsx(Step,{title:`Scan the QR code or tap the link`,children:_jsx(_components.p,{children:`Scan with your camera app or tap the share link directly.`})}),_jsx(Step,{title:`App opens in browser`,children:_jsx(_components.p,{children:`The app loads in your default mobile browser. You can add it to your home screen for quick access.`})})]})]}),_jsxs(Tab,{title:`Web`,id:`web`,children:[_jsx(_components.p,{children:_jsx(_components.strong,{children:`Browser Preview`})}),_jsx(_components.p,{children:`On desktop or any device with a web browser, apps open directly in the browser.`}),_jsx(Steps,{children:_jsx(Step,{title:`Click the share link`,children:_jsx(_components.p,{children:`The app runs immediately in the browser with no installation or setup.`})})})]})]}),`\n`,_jsx(Tip,{children:_jsx(_components.p,{children:`Keep your phone preview open while working. It’s the best way to catch issues with touch targets, font sizes, or mobile-specific interactions.`})}),`\n`,_jsx(Heading,{level:`2`,id:`making-changes`,children:`Making changes`}),`\n`,_jsx(Heading,{level:`3`,id:`using-the-chat`,children:`Using the chat`}),`\n`,_jsx(_components.p,{children:`The chat interface is your primary way to modify your app:`}),`\n`,_jsxs(Accordion,{title:`Adding features`,id:`adding-features`,children:[_jsx(_components.p,{children:_jsx(_components.strong,{children:`Example prompts:`})}),_jsxs(_components.ul,{children:[`\n`,_jsx(_components.li,{children:`“Add a dark mode toggle to the settings screen”`}),`\n`,_jsx(_components.li,{children:`“Let users filter the list by category”`}),`\n`,_jsx(_components.li,{children:`“Include a search bar at the top of the home screen”`}),`\n`,_jsx(_components.li,{children:`“Add push notifications when someone comments”`}),`\n`]})]}),`\n`,_jsxs(Accordion,{title:`Modifying UI`,id:`modifying-ui`,children:[_jsx(_components.p,{children:_jsx(_components.strong,{children:`Example prompts:`})}),_jsxs(_components.ul,{children:[`\n`,_jsx(_components.li,{children:`“Make the buttons larger and rounded”`}),`\n`,_jsx(_components.li,{children:`“Change the color scheme to blue and white”`}),`\n`,_jsx(_components.li,{children:`“Add icons to the navigation tabs”`}),`\n`,_jsx(_components.li,{children:`“Show user avatars as circles instead of squares”`}),`\n`]})]}),`\n`,_jsxs(Accordion,{title:`Fixing bugs`,id:`fixing-bugs`,children:[_jsx(_components.p,{children:_jsx(_components.strong,{children:`Example prompts:`})}),_jsxs(_components.ul,{children:[`\n`,_jsx(_components.li,{children:`“The save button isn’t working—can you fix it?”`}),`\n`,_jsx(_components.li,{children:`“Users can’t delete items from the list”`}),`\n`,_jsx(_components.li,{children:`“The app crashes when I tap the profile icon”`}),`\n`,_jsx(_components.li,{children:`“Photos aren’t uploading correctly”`}),`\n`]})]}),`\n`,_jsxs(Accordion,{title:`Backend logic`,id:`backend-logic`,children:[_jsx(_components.p,{children:_jsx(_components.strong,{children:`Example prompts:`})}),_jsxs(_components.ul,{children:[`\n`,_jsx(_components.li,{children:`“Add validation so users can’t submit empty forms”`}),`\n`,_jsx(_components.li,{children:`“Only show items created by the current user”`}),`\n`,_jsx(_components.li,{children:`“Send an email notification when someone signs up”`}),`\n`,_jsx(_components.li,{children:`“Automatically delete items older than 30 days”`}),`\n`]})]}),`\n`,_jsx(Warning,{children:_jsx(_components.p,{children:`Be specific in your requests. Instead of “make it better,” describe exactly what you want: “increase the font size of headings to 24px.”`})}),`\n`,_jsx(Heading,{level:`3`,id:`monitoring-changes`,children:`Monitoring changes`}),`\n`,_jsx(Frame,{children:_jsx(OptimizedImage,{src:`https://mintcdn.com/bloom-eafef039/FFPKMkGhN_cDZ48F/images/preview-generation.jpg?fit=max\u0026auto=format\u0026n=FFPKMkGhN_cDZ48F\u0026q=85\u0026s=93c16c5ed9f6b4e2257434246f2bbcc8`,alt:`Generation preview`,\"data-og-width\":`3022`,width:`3022`,\"data-og-height\":`1563`,height:`1563`,\"data-path\":`images/preview-generation.jpg`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/bloom-eafef039/FFPKMkGhN_cDZ48F/images/preview-generation.jpg?w=280\u0026fit=max\u0026auto=format\u0026n=FFPKMkGhN_cDZ48F\u0026q=85\u0026s=204cd852f1736c56d65526c3943791e6 280w, https://mintcdn.com/bloom-eafef039/FFPKMkGhN_cDZ48F/images/preview-generation.jpg?w=560\u0026fit=max\u0026auto=format\u0026n=FFPKMkGhN_cDZ48F\u0026q=85\u0026s=f5e710a4cf68dbbd81e4c20c978b3fba 560w, https://mintcdn.com/bloom-eafef039/FFPKMkGhN_cDZ48F/images/preview-generation.jpg?w=840\u0026fit=max\u0026auto=format\u0026n=FFPKMkGhN_cDZ48F\u0026q=85\u0026s=03029d707fcff1927ab41a3f2101e633 840w, https://mintcdn.com/bloom-eafef039/FFPKMkGhN_cDZ48F/images/preview-generation.jpg?w=1100\u0026fit=max\u0026auto=format\u0026n=FFPKMkGhN_cDZ48F\u0026q=85\u0026s=69a202ba043f46972832afb6ea73b842 1100w, https://mintcdn.com/bloom-eafef039/FFPKMkGhN_cDZ48F/images/preview-generation.jpg?w=1650\u0026fit=max\u0026auto=format\u0026n=FFPKMkGhN_cDZ48F\u0026q=85\u0026s=551a63d3357cedc7b00a46d62deb7b47 1650w, https://mintcdn.com/bloom-eafef039/FFPKMkGhN_cDZ48F/images/preview-generation.jpg?w=2500\u0026fit=max\u0026auto=format\u0026n=FFPKMkGhN_cDZ48F\u0026q=85\u0026s=398d9645ec5bd43aee073b90feded225 2500w`})}),`\n`,_jsx(_components.p,{children:`After requesting a change:`}),`\n`,_jsxs(_components.ol,{children:[`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Watch the generation progress`}),` — Bloom shows what it’s updating`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Preview automatically updates`}),` — See your changes as soon as generation completes`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Check the logs`}),` — Verify no new errors appeared`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Test the modified feature`}),` — Confirm it works as expected`]}),`\n`]}),`\n`,_jsx(Info,{children:_jsx(_components.p,{children:`If a change doesn’t work as you hoped, describe the issue in chat and Bloom will try again.`})}),`\n`,_jsx(Heading,{level:`2`,id:`using-backend-tools`,children:`Using backend tools`}),`\n`,_jsx(Heading,{level:`3`,id:`backend-dashboard`,children:`Backend Dashboard`}),`\n`,_jsx(_components.p,{children:`Monitor your app’s performance and health:`}),`\n`,_jsxs(CardGroup,{cols:3,children:[_jsx(Card,{title:`Health metrics`,icon:`heart-pulse`,children:_jsx(_components.p,{children:`Track failure rates, cache performance, and system status.`})}),_jsx(Card,{title:`Data browser`,icon:`database`,children:_jsx(_components.p,{children:`View tables, documents, and database schema.`})}),_jsx(Card,{title:`Function inspector`,icon:`function`,children:_jsx(_components.p,{children:`See all Convex functions and their organization.`})})]}),`\n`,_jsx(_components.p,{children:_jsx(_components.a,{href:`/backend-dashboard`,children:`Learn more about the Backend Dashboard →`})}),`\n`,_jsx(Heading,{level:`3`,id:`logs`,children:`Logs`}),`\n`,_jsx(_components.p,{children:`Debug issues and monitor activity:`}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Filter by Frontend/Backend`}),` to isolate issues`]}),`\n`,_jsx(_components.li,{children:_jsx(_components.strong,{children:`Search for specific errors or events`})}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Track logs since last deploy`}),` to focus on recent changes`]}),`\n`]}),`\n`,_jsx(_components.p,{children:_jsx(_components.a,{href:`/logs`,children:`Learn more about Logs →`})}),`\n`,_jsx(Heading,{level:`3`,id:`authentication`,children:`Authentication`}),`\n`,_jsx(_components.p,{children:`Configure user sign-in:`}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Toggle OAuth providers`}),` (Google, GitHub, Apple)`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Add custom OAuth credentials`}),` for branded login`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Copy authorized origin URLs`}),` for setup`]}),`\n`]}),`\n`,_jsx(_components.p,{children:_jsx(_components.a,{href:`/authentication`,children:`Learn more about Authentication →`})}),`\n`,_jsx(Heading,{level:`3`,id:`api-connections`,children:`API Connections`}),`\n`,_jsx(_components.p,{children:`Integrate external services:`}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Use auto-provisioned Bloom keys`}),` for instant setup`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Add your own API keys`}),` for production use`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Manage environment variables`}),` securely`]}),`\n`]}),`\n`,_jsx(_components.p,{children:_jsx(_components.a,{href:`/api-connections`,children:`Learn more about API Connections →`})}),`\n`,_jsx(Heading,{level:`2`,id:`troubleshooting`,children:`Troubleshooting`}),`\n`,_jsxs(AccordionGroup,{children:[_jsxs(Accordion,{title:`Preview not updating`,icon:`rotate`,id:`preview-not-updating`,children:[_jsx(_components.p,{children:_jsx(_components.strong,{children:`Try these steps:`})}),_jsxs(_components.ol,{children:[`\n`,_jsxs(_components.li,{children:[`Refresh the preview (click refresh icon or `,_jsx(_components.code,{children:`Cmd/Ctrl + R`}),`)`]}),`\n`,_jsx(_components.li,{children:`Clear browser cache and reload the page`}),`\n`,_jsx(_components.li,{children:`Check if generation is still in progress`}),`\n`,_jsx(_components.li,{children:`Look for errors in logs that might prevent loading`}),`\n`,_jsx(_components.li,{children:`Try opening preview in a new tab`}),`\n`]})]}),_jsxs(Accordion,{title:`Changes aren't applying`,icon:`triangle-exclamation`,id:`changes-arent-applying`,children:[_jsx(_components.p,{children:_jsx(_components.strong,{children:`Possible causes:`})}),_jsxs(_components.ul,{children:[`\n`,_jsx(_components.li,{children:`Generation encountered an error (check logs)`}),`\n`,_jsx(_components.li,{children:`Request was too vague (try being more specific)`}),`\n`,_jsx(_components.li,{children:`Conflicting with existing code (describe the issue)`}),`\n`,_jsx(_components.li,{children:`Browser cache needs clearing`}),`\n`]}),_jsx(_components.p,{children:`If stuck, describe what you attempted and ask Bloom to try a different approach.`})]}),_jsxs(Accordion,{title:`Can't access backend tools`,icon:`lock`,id:`cant-access-backend-tools`,children:[_jsx(_components.p,{children:_jsx(_components.strong,{children:`Check:`})}),_jsxs(_components.ul,{children:[`\n`,_jsx(_components.li,{children:`You’re signed in to the correct account`}),`\n`,_jsx(_components.li,{children:`Your plan includes backend dashboard access`}),`\n`,_jsx(_components.li,{children:`The sidebar is expanded (click hamburger menu if collapsed)`}),`\n`,_jsx(_components.li,{children:`No browser extensions are blocking content`}),`\n`]})]}),_jsxs(Accordion,{title:`App running slowly`,icon:`gauge`,id:`app-running-slowly`,children:[_jsx(_components.p,{children:_jsx(_components.strong,{children:`Performance tips:`})}),_jsxs(_components.ol,{children:[`\n`,_jsx(_components.li,{children:`Check Backend Dashboard for high failure rates`}),`\n`,_jsx(_components.li,{children:`Review logs for slow queries or functions`}),`\n`,_jsx(_components.li,{children:`Reduce number of database queries on each screen`}),`\n`,_jsx(_components.li,{children:`Optimize image sizes before uploading`}),`\n`,_jsx(_components.li,{children:`Consider pagination for long lists`}),`\n`]})]})]}),`\n`,_jsx(Heading,{level:`2`,id:`what’s-next`,children:`What’s next?`}),`\n`,_jsxs(CardGroup,{cols:2,children:[_jsx(Card,{title:`Build from mobile`,icon:`mobile-screen`,href:`/building-from-mobile`,children:_jsx(_components.p,{children:`Learn how to create and iterate on apps from your phone.`})}),_jsx(Card,{title:`Share your app`,icon:`qrcode`,href:`/instant-sharing`,children:_jsx(_components.p,{children:`Generate links and QR codes to share your app instantly.`})}),_jsx(Card,{title:`Backend Dashboard`,icon:`chart-line`,href:`/backend-dashboard`,children:_jsx(_components.p,{children:`Dive deeper into monitoring and managing your backend.`})}),_jsx(Card,{title:`Deploy to stores`,icon:`store`,href:`/deploying-your-app`,children:_jsx(_components.p,{children:`Ready to publish? Learn how to deploy to app stores.`})})]})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{default:MDXContent};function _missingMdxReference(id,component){throw new Error(`Expected `+(component?`component`:`object`)+\" `\"+id+\"` to be defined: you likely forgot to import, pass, or provide it.\")}","frontmatter":{},"scope":{"config":{},"pageMetadata":{"title":"Building from Web","description":"Use the full Bloom workspace to create, edit, and preview apps from your browser.","icon":"globe","href":"/building-from-web"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"When to use the web app","slug":"when-to-use-the-web-app","depth":2,"children":[]},{"title":"Creating your first app","slug":"creating-your-first-app","depth":2,"children":[{"title":"Choosing a model","slug":"choosing-a-model","depth":3,"children":[]}]},{"title":"Working with the preview","slug":"working-with-the-preview","depth":2,"children":[{"title":"Testing your app","slug":"testing-your-app","depth":3,"children":[]},{"title":"Switching between web and mobile preview","slug":"switching-between-web-and-mobile-preview","depth":3,"children":[]},{"title":"Preview on your phone","slug":"preview-on-your-phone","depth":3,"children":[]}]},{"title":"Making changes","slug":"making-changes","depth":2,"children":[{"title":"Using the chat","slug":"using-the-chat","depth":3,"children":[]},{"title":"Monitoring changes","slug":"monitoring-changes","depth":3,"children":[]}]},{"title":"Using backend tools","slug":"using-backend-tools","depth":2,"children":[{"title":"Backend Dashboard","slug":"backend-dashboard","depth":3,"children":[]},{"title":"Logs","slug":"logs","depth":3,"children":[]},{"title":"Authentication","slug":"authentication","depth":3,"children":[]},{"title":"API Connections","slug":"api-connections","depth":3,"children":[]}]},{"title":"Troubleshooting","slug":"troubleshooting","depth":2,"children":[]},{"title":"What’s next?","slug":"what’s-next","depth":2,"children":[]}],"codeExamples":{}},"jsLinks":[],"subdomain":"bloom-eafef039","siteName":"Bloom","title":"Building from Web - Bloom","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"lastModified":"2026-04-02T18:14:25.683Z","originalFileLocation":"building-from-web.mdx"},"headHtml":"\u003cscript data-mint-head>(function(){var d=document.documentElement,p=null;if(!p){try{p=localStorage.getItem(\"isDarkMode\")}catch(e){}if(p==='true')p='dark';else if(p==='false')p='light';if(p!=='light'\u0026\u0026p!=='dark'\u0026\u0026p!=='system')p=\"system\"}var r=p==='system'?(matchMedia(\"(prefers-color-scheme: dark)\").matches?'dark':'light'):p;d.classList.remove(r==='dark'?'light':'dark');d.classList.add(r);d.setAttribute(\"data-theme-preference\",p)})();\u003c/script>\u003cmeta data-mint-head name=\"description\" content=\"Use the full Bloom workspace to create, edit, and preview apps from your browser.\">\u003cmeta data-mint-head name=\"application-name\" content=\"Bloom\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/bloom-eafef039/k32uDhvmJKUszBEN/_generated/favicon/android-chrome-192x192.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"/mintlify-assets/_mintlify/favicons/bloom-eafef039/k32uDhvmJKUszBEN/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/bloom-eafef039/k32uDhvmJKUszBEN/_generated/favicon/favicon-16x16.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/bloom-eafef039/k32uDhvmJKUszBEN/_generated/favicon/favicon-32x32.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/bloom-eafef039/k32uDhvmJKUszBEN/_generated/favicon/favicon.ico\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/bloom-eafef039/k32uDhvmJKUszBEN/_generated/favicon-dark/android-chrome-192x192.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/bloom-eafef039/k32uDhvmJKUszBEN/_generated/favicon-dark/favicon-16x16.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/bloom-eafef039/k32uDhvmJKUszBEN/_generated/favicon-dark/favicon-32x32.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/bloom-eafef039/k32uDhvmJKUszBEN/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Building from Web - Bloom\">\u003cmeta data-mint-head property=\"og:description\" content=\"Use the full Bloom workspace to create, edit, and preview apps from your browser.\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Bloom\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://docs.bloom.diy/building-from-web\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://bloom-eafef039.mintlify.app/_mintlify/api/og/v2?division=Build+Your+First+App\u0026amp;title=Building+from+Web\u0026amp;description=Use+the+full+Bloom+workspace+to+create%2C+edit%2C+and+preview+apps+from+your+browser.\u0026amp;theme=750c7f4911e80d410e46dbd7\u0026amp;signature=b9381afb2ec17dba028d8cb23798043ce62e7b29e7b2243589436bad8bc8ad96\">\u003cmeta data-mint-head property=\"og:image:width\" content=\"1200\">\u003cmeta data-mint-head property=\"og:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"Building from Web - Bloom\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Use the full Bloom workspace to create, edit, and preview apps from your browser.\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://bloom-eafef039.mintlify.app/_mintlify/api/og/v2?division=Build+Your+First+App\u0026amp;title=Building+from+Web\u0026amp;description=Use+the+full+Bloom+workspace+to+create%2C+edit%2C+and+preview+apps+from+your+browser.\u0026amp;theme=750c7f4911e80d410e46dbd7\u0026amp;signature=b9381afb2ec17dba028d8cb23798043ce62e7b29e7b2243589436bad8bc8ad96\">\u003cmeta data-mint-head name=\"twitter:image:width\" content=\"1200\">\u003cmeta data-mint-head name=\"twitter:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"/mintlify-assets/_mintlify/favicons/bloom-eafef039/k32uDhvmJKUszBEN/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"Bloom\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#2EA1F3\">\u003clink data-mint-head rel=\"canonical\" href=\"https://docs.bloom.diy/building-from-web\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/building-from-web.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://docs.bloom.diy/#organization\",\"name\":\"Bloom\",\"url\":\"https://docs.bloom.diy\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/bloom-eafef039/V5DGM7pehs6HGA75/images/bloom-logo-light.png?fit=max\u0026auto=format\u0026n=V5DGM7pehs6HGA75\u0026q=85\u0026s=ec1e694a7c5372d8b2d6202b38c17ae3\"}},{\"@type\":\"WebSite\",\"@id\":\"https://docs.bloom.diy#website\",\"name\":\"Bloom\",\"url\":\"https://docs.bloom.diy\",\"publisher\":{\"@id\":\"https://docs.bloom.diy/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://docs.bloom.diy/building-from-web#webpage\",\"url\":\"https://docs.bloom.diy/building-from-web\",\"name\":\"Building from Web\",\"description\":\"Use the full Bloom workspace to create, edit, and preview apps from your browser.\",\"dateModified\":\"2026-04-02T18:14:25.683Z\",\"isPartOf\":{\"@id\":\"https://docs.bloom.diy#website\"},\"breadcrumb\":{\"@id\":\"https://docs.bloom.diy/building-from-web#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://docs.bloom.diy/building-from-web#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Build Your First App\",\"item\":\"https://docs.bloom.diy/what-you-can-build\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building from Web\",\"item\":\"https://docs.bloom.diy/building-from-web\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://docs.bloom.diy/building-from-web#article\",\"headline\":\"Building from Web\",\"name\":\"Building from Web\",\"description\":\"Use the full Bloom workspace to create, edit, and preview apps from your browser.\",\"url\":\"https://docs.bloom.diy/building-from-web\",\"mainEntityOfPage\":{\"@id\":\"https://docs.bloom.diy/building-from-web#webpage\"},\"dateModified\":\"2026-04-02T18:14:25.683Z\",\"publisher\":{\"@id\":\"https://docs.bloom.diy/#organization\"},\"isPartOf\":{\"@id\":\"https://docs.bloom.diy#website\"}}]}\u003c/script>\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"Bloom\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","siteName":"Bloom","nav":{"global":null,"tabs":[{"tab":"Introduction","pages":[{"title":"Introduction","href":"/introduction"}]},{"tab":"Features","pages":[{"title":"Features","href":"/features"}]},{"tab":"Tips \u0026 Tricks","groups":[{"group":"Build Your First App","pages":[{"title":"What You Can Build","description":"From simple tools to complex apps—if you can describe it, you can build it in Bloom.","icon":"lightbulb","href":"/what-you-can-build"},{"title":"Building from Web","icon":"globe","href":"/building-from-web"},{"title":"Building from Mobile","description":"Create and iterate on apps directly from your phone.","icon":"mobile-screen","href":"/building-from-mobile"},{"title":"Deploying Your App","icon":"rocket","href":"/deploying-your-app"}]},{"group":"Prompting","pages":[{"title":"Prompting Best Practices","icon":"sparkles","href":"/prompting-best-practices"}]}]},{"tab":"Changelog","pages":[{"title":"Changelog","href":"/changelog"}]}]},"basePath":"","title":"Building from Web - Bloom","buildId":"dpl_DeHjVRGfFnhYQwHnfC2pjeXXv8h9","deploymentId":"dpl_DeHjVRGfFnhYQwHnfC2pjeXXv8h9","dynamics":["07c022d89b","a74be98ba7"],"chunks":["Frame-DXXFP6nH.js","DynamicMarkdown-B54_zNBF.js","zoom-image-lightbox-BG6oD64b.js","lightbox-handle-r17bVUz3.js"]}
