# API Connections Source: https://docs.bloom.diy/api-connections Connect external services to your app with managed or custom API keys. **API Connections** let you integrate external services into your app—like AI models, payment processors, analytics tools, and more. Bloom can automatically provide and manage API keys for you, or you can bring your own. ## Why API connections matter Most modern apps rely on external services: Connect to services like Google AI, OpenAI, or Anthropic to add smart features—chatbots, content generation, image analysis, etc. Integrate Stripe, PayPal, or other payment processors to accept payments in your app. Track user behavior and app performance with services like Mixpanel, Segment, or Google Analytics. Send emails (SendGrid, Mailgun), SMS messages (Twilio), or push notifications (Firebase). API keys are like passwords that let your app talk to external services securely. Bloom helps you manage them safely. ## Auto-provisioned API keys Bloom can **automatically provide API keys** for popular services, so you can start using them immediately without creating accounts or managing credentials yourself. ### How it works **When auto-provisioning is ON:** Bloom provides API keys automatically for supported services Keys are securely managed and rotated by Bloom Usage counts against your plan's credits No need to create external accounts or manage credentials Start using services immediately This is the fastest way to add external services to your app—perfect for development, testing, and most production use cases. **Supported services:** * Google AI (Gemini models) * Additional services coming soon Auto-provisioned keys are shared across your Bloom apps but isolated per project for security. **When auto-provisioning is OFF:** You provide your own API keys for each service Full control over API accounts and billing Direct access to service dashboards and logs Required for services not supported by Bloom provisioning You'll need to create accounts with each external service, generate API keys, and add them as environment variables in Bloom. **When to disable auto-provisioning:** * You need specific API quotas or rate limits * You want direct billing from the service provider * You're using services not yet supported by Bloom provisioning * Your organization requires managing all API credentials directly ### Credit usage warning **API provisioning disabled - insufficient credits** Your Bloom credits have been exhausted. API calls will fail until you upgrade your plan or disable API provisioning. If you see this warning: 1. **Upgrade your plan** to get more credits (recommended for continued use) 2. **Disable API provisioning** and use your own API keys instead 3. **Purchase credit top-ups** from your billing dashboard Compare plans and see how credits are used ## Environment Variables Environment variables let you securely store API keys, configuration values, and other sensitive information your app needs to function. ### What are environment variables? Think of environment variables as a secure storage locker for your app's secrets: * **API keys** from external services * **Configuration values** like feature flags or URLs * **Credentials** for databases or third-party services They're called "environment" variables because they're specific to where your app is running (development vs. production) and kept separate from your code. Environment variables are **never exposed** in your app's frontend code or shared publicly. They're only accessible from your backend functions. ### Managing variables Opens a form to create a new environment variable. * **Name:** What you'll call this variable in your code (e.g., `STRIPE_API_KEY`) * **Value:** The actual key or configuration value Use UPPERCASE\_WITH\_UNDERSCORES for variable names—it's a common convention that makes them easy to identify. The variable is immediately available in your Convex backend functions. Access the variable in your backend using `process.env.VARIABLE_NAME` ```ts theme={null} // Example: Using an API key in a Convex function const apiKey = process.env.GOOGLE_AI_API_KEY; ``` ### Variable status indicators Each variable shows its current status: This variable is auto-provisioned by Bloom. The API key is managed automatically and rotated for security. **Example:** `Google_AI` when auto-provisioning is enabled No manual configuration needed Counts against your plan credits This variable is actively being used by your app's backend functions. Your code is successfully accessing this variable The service connection is working If a variable shows no status badge, it's defined but not currently being used in any backend functions. This might mean: * You added it but haven't implemented the feature yet * The variable name doesn't match what your code is looking for * The code using it isn't being called ### Actions for variables Click the **edit icon** (pencil) to change a variable's value. Changing a variable value will affect your live app immediately. Make sure you're updating the correct variable! **Common reasons to edit:** * Rotating API keys for security * Updating configuration values * Fixing incorrect credentials Click the **delete icon** (trash can) to remove a variable. Deleting a variable that's in use will cause errors in your app. Check that no functions depend on it before deleting. **Check logs after deleting** to ensure no functions are trying to access the removed variable. Click **Refresh** to reload the list of variables and their current status. Useful after: * Adding variables in the Convex dashboard directly * Making changes in another browser tab * Troubleshooting variable visibility issues ## Common use cases If you want to use your own Google AI, OpenAI, or Anthropic API key: Toggle off "Automatically provision API keys" if it's enabled. * For Google AI: [Google AI Studio](https://aistudio.google.com/) * For OpenAI: [OpenAI Platform](https://platform.openai.com/) * For Anthropic: [Anthropic Console](https://console.anthropic.com/) Click "Add Variable" and enter: * Name: `GOOGLE_AI_API_KEY` (or appropriate name) * Value: Your API key from the provider Make sure your backend functions use `process.env.GOOGLE_AI_API_KEY` Use your app's AI features and check [Logs](/logs) for any errors To add Stripe, PayPal, or another payment service: Sign up with your chosen payment processor (e.g., [Stripe](https://stripe.com)) Find your API keys in the service's dashboard: * Stripe: Dashboard → Developers → API keys * Look for "Secret key" or "API key" * Name: `STRIPE_SECRET_KEY` (or provider-specific name) * Value: Your secret API key Never use "publishable" keys in environment variables—only "secret" keys belong in the backend. Use Bloom's agent to help generate payment processing code, or follow the provider's documentation To track user behavior with Mixpanel, Segment, or Google Analytics: Sign up with your chosen analytics platform Each platform provides: * API key or Write key * Project ID or tracking ID Example for Mixpanel: * `MIXPANEL_TOKEN`: Your project token * `MIXPANEL_SECRET`: Your API secret (if using server-side tracking) Add tracking calls to your backend functions or frontend code as needed If you started with auto-provisioned keys but want to use your own: Create an account with the service provider and generate an API key Create an environment variable with your custom key (don't delete the Bloom one yet) Change your functions to use the new variable name Verify everything works with your custom key before proceeding Once confirmed working, toggle off auto-provisioning to stop using Bloom credits Delete the Bloom-provided variable if no longer needed ## Security best practices Always use environment variables—never hard-code API keys directly in your app's source code. Change API keys periodically for security, especially if team members leave or keys are potentially exposed. If exporting code for production, use different API keys for development vs. production deployments. Check provider dashboards regularly for unexpected API usage that might indicate a security issue. **If you suspect an API key is compromised:** 1. Immediately delete the variable in Bloom 2. Revoke the key in the provider's dashboard 3. Generate a new key and add it as a fresh variable 4. Check [Logs](/logs) for suspicious activity ## Troubleshooting **Possible causes:** * The API key is incorrect or expired * The key doesn't have required permissions * Auto-provisioning is disabled but no custom key is set * Variable name doesn't match what your code expects **Solutions:** 1. Verify the key is correct in the provider's dashboard 2. Check the variable name matches your code exactly 3. Enable auto-provisioning if you want Bloom-managed keys 4. View [Logs](/logs) for the specific error message If you added a variable but it doesn't show the "In use" badge: * Your code might not be calling the function that uses it yet * The variable name in your code might not match exactly * You might be checking `process.env` incorrectly in your function Check [Backend Dashboard Functions](/backend-dashboard) to verify the function is being called. If auto-provisioning is disabled due to insufficient credits: **Option 1: Upgrade plan** * Get more included credits through a paid billing cycle * Keep using Bloom-managed keys * Simplest for ongoing projects **Option 2: Use custom keys** * Disable auto-provisioning * Add your own API keys * Direct billing from service providers * Click **Refresh** to reload the variable list * Check you're in the correct app's settings * Verify the variable was saved (you should see a confirmation) * Check if it was accidentally deleted ## Learn more Debug API connection errors and see request details Monitor function calls that use API connections Understand credit usage for auto-provisioned keys Learn more about how Convex handles environment variables # App Structure Source: https://docs.bloom.diy/app-structure Understand how your Bloom app is organized and what each file does. Every Bloom app is a monorepo containing an Expo frontend and a Convex backend. This architecture gives you a cross-platform mobile app (iOS, Android, and web) with a real-time serverless backend, all in one codebase. ## Directory Overview ``` your-app/ ├── .env # Environment variables ├── package.json # Workspace configuration ├── turbo.json # Task runner configuration │ ├── apps/ │ └── default/ # Expo app (iOS, Android, Web) │ ├── app/ # App screens and layouts │ │ ├── _layout.tsx # Root layout with providers │ │ └── index.tsx # Main entry screen │ ├── lib/ # Shared utilities │ │ └── auth-client.ts # Authentication client │ ├── app.json # Expo configuration │ └── package.json # App dependencies │ └── packages/ └── backend/ # Convex backend └── convex/ ├── schema.ts # Database schema ├── functions.ts # Auth wrapper functions ├── auth.ts # Authentication setup ├── http.ts # HTTP endpoints └── _generated/ # Auto-generated types ``` ## Root Files The root of your project contains configuration files that tie everything together. Defines your monorepo workspace structure using Bun workspaces. It includes scripts to run your app and backend together. ```json theme={null} { "workspaces": ["apps/*", "packages/*"], "scripts": { "dev": "turbo dev", "dev:backend": "turbo dev --filter=@bloom/backend", "dev:mobile": "turbo dev --filter=@bloom/mobile" } } ``` Run `bun run dev` to start both the frontend and backend simultaneously. Configures Turborepo, which orchestrates tasks across your monorepo. It defines how `dev`, `build`, `lint`, and `typecheck` commands run across packages. Stores environment variables shared across your app. Required variables: * `CONVEX_DEPLOYMENT` — Your Convex deployment identifier * `EXPO_PUBLIC_CONVEX_URL` — The Convex cloud URL for your app * `EXPO_PUBLIC_CONVEX_SITE_URL` — The URL for Convex HTTP actions (used for auth) Never commit `.env` files to version control. Use `.env.example` as a template. ## Frontend: `apps/default/` Your Expo app lives here. It's a universal React Native app that runs on iOS, Android, and web from a single codebase. ### App Directory The `app/` folder uses Expo Router for file-based routing. Each file becomes a route. The root layout wraps your entire app with required providers: ```tsx theme={null} export default function RootLayout() { return ( ); } ``` * **ConvexProvider** — Connects your app to the Convex backend * **ConvexBetterAuthProvider** — Manages authentication state * **Stack** — The navigation container for your screens The main entry screen of your app. This is what users see when they open your app. By default, it's a blank screen ready for you to build on. Add new screens by creating files in this directory. For example, `profile.tsx` becomes the `/profile` route. ### Key Configuration Files Expo configuration file that defines your app's name, icons, splash screen, and platform-specific settings. ```json theme={null} { "expo": { "name": "Your App Name", "slug": "your-app", "newArchEnabled": true, "plugins": [ "expo-router", "expo-splash-screen", "expo-secure-store" ] } } ``` Configures the Better Auth client for authentication. Handles platform-specific storage (secure store on native, cookies on web) and cross-domain authentication. ```tsx theme={null} export const authClient = createAuthClient({ baseURL: process.env.EXPO_PUBLIC_CONVEX_SITE_URL, plugins: [ expoClient({ storage: expoSecureStore, }), crossDomainClient(), ], }); ``` TypeScript configuration with path aliases for cleaner imports: * `@/*` — Maps to the current directory * `@/convex/*` — Maps to `../../packages/backend/convex/*` This lets you import backend types directly: ```tsx theme={null} import { api } from "@/convex/_generated/api"; ``` ## Backend: `packages/backend/convex/` Your Convex backend contains your database schema, serverless functions, and authentication logic. ### Core Files Defines your database tables and their structure. Convex uses this to generate type-safe queries. ```ts theme={null} import { defineSchema, defineTable } from "convex/server"; import { v } from "convex/values"; export default defineSchema({ posts: defineTable({ title: v.string(), content: v.string(), authorId: v.string(), }), }); ``` Changes to your schema automatically sync with your database. Provides authentication-aware wrapper functions for your queries, mutations, and actions: * `authQuery` — Query that requires the user to be logged in * `authMutation` — Mutation that requires the user to be logged in * `authAction` — Action that requires the user to be logged in ```ts theme={null} import { authQuery } from "./functions"; export const getMyPosts = authQuery({ handler: async (ctx) => { const userId = ctx.session.user.id; return await ctx.db .query("posts") .filter((q) => q.eq(q.field("authorId"), userId)) .collect(); }, }); ``` Configures Better Auth with Convex integration. Sets up OAuth providers (Google, GitHub, Apple) and authentication plugins. The default setup includes: * Google OAuth (enabled by default) * Email/password authentication * Anonymous authentication * Expo-specific session handling Sets up HTTP endpoints for authentication. This routes auth requests (sign in, sign out, OAuth callbacks) to the Better Auth handler. ```ts theme={null} const http = httpRouter(); auth.registerRoutes(http, { allowedOrigins: ["*"], }); export default http; ``` ### Generated Files The `_generated/` folder contains auto-generated TypeScript types. These are created by Convex and should not be edited manually. | File | Purpose | | ---------------- | ------------------------------------------- | | `api.d.ts` | Type-safe references to your functions | | `dataModel.d.ts` | Types matching your database schema | | `server.d.ts` | Server-side types for queries and mutations | These files update automatically when you modify your schema or functions. They enable full type safety between your frontend and backend. ## Key Patterns ### Environment Variables Environment variables flow through your app in a specific way: 1. Defined in `.env` at the project root 2. Backend reads them via the `--env-file` flag 3. Frontend loads them through Metro bundler using `@expo/env` 4. Variables prefixed with `EXPO_PUBLIC_` are available in frontend code ### Type-Safe Imports The path alias `@/convex/*` lets your frontend import backend types directly: ```tsx theme={null} import { api } from "@/convex/_generated/api"; import { useQuery } from "convex/react"; function PostList() { const posts = useQuery(api.posts.list); // posts is fully typed based on your schema } ``` ### Authentication Flow Authentication is pre-wired between frontend and backend: 1. Frontend uses `authClient` from `lib/auth-client.ts` 2. Auth requests route through Convex HTTP endpoints 3. Session state syncs via `ConvexBetterAuthProvider` 4. Backend functions access the user via `ctx.session` ## What's Next? Learn how to configure OAuth providers Monitor your database and functions # Authentication Source: https://docs.bloom.diy/authentication Let users sign in to your app securely with OAuth providers. **Authentication** lets users sign in to your app using accounts they already have—like Google, GitHub, or Apple ID. Bloom handles the complex security setup automatically, so you can add sign-in to your app without writing code or managing credentials yourself. ## Why authentication matters Authentication is essential for apps that: * Store user-specific data (profiles, preferences, saved content) * Need to know who's using the app (personalized experiences) * Require secure access control (private content, paid features) * Track user activity or progress over time With Bloom, authentication is **pre-configured and ready to use**. You don't need to set up servers, manage API credentials, or worry about security best practices—it's all handled automatically. ## How authentication works in Bloom Bloom uses **OAuth**, an industry-standard protocol that lets users sign in using existing accounts from trusted providers (Google, GitHub, Apple, etc.). When a user signs in: 1. They tap "Sign in with Google" (or another provider) in your app 2. They're redirected to that provider's secure login page 3. They approve giving your app access to basic info (name, email) 4. They're returned to your app, now signed in 5. Your app can now store and retrieve their personal data Users never share their password with your app—OAuth keeps credentials secure. ## Bloom-managed vs. custom credentials Bloom offers two ways to configure authentication: **Quick and automatic setup** When you enable a provider with Bloom-managed credentials: Authentication works instantly—no configuration needed Bloom handles all API keys and security automatically Updates and maintenance are managed for you Perfect for development, testing, and most production apps **Google** comes with Bloom-managed credentials by default. Just toggle it on and users can sign in immediately. **When to use Bloom-managed:** * You're building an MVP or testing your app * You want the fastest setup possible * You don't need custom branding on the OAuth consent screen * You're comfortable with Bloom managing your auth infrastructure **Advanced control with your own OAuth apps** You can use your own OAuth credentials for any provider: Full control over OAuth app settings Custom branding on consent screens Direct access to provider dashboards Required for some App Store submissions Custom credentials require creating OAuth applications with each provider (Google Cloud Console, GitHub Developer Settings, Apple Developer Portal, etc.) **When to use custom credentials:** * You're publishing to app stores and need your own developer accounts * You want custom branding on sign-in screens * You need specific OAuth scopes or permissions * Your organization requires managing all credentials directly ### Available providers **Status:** Bloom-managed by default (ready to use immediately) Google authentication is pre-configured with Bloom-managed credentials. The toggle is **on by default**, meaning users can sign in with Google accounts right away. **To use Bloom-managed Google auth:** * The toggle stays **on** (green) * No additional configuration needed * Works immediately in your app **To use your own Google OAuth:** 1. Create a project in [Google Cloud Console](https://console.cloud.google.com) 2. Enable the Google+ API 3. Create OAuth 2.0 credentials 4. Add your Authorized Origin to allowed origins 5. Toggle off Bloom-managed and add your credentials in Bloom Learn how to create Google OAuth credentials **Status:** Not configured by default GitHub authentication requires setup before it can be used. **To add GitHub authentication:** This opens a prompt where you can ask Bloom's AI to set up GitHub OAuth for you. Example: "Add GitHub OAuth so users can sign in with their GitHub accounts" Bloom will guide you through: * Creating a GitHub OAuth App * Configuring credentials * Testing the integration GitHub OAuth requires creating an OAuth App in [GitHub Developer Settings](https://github.com/settings/developers). You'll need your Authorized Origin URL from Bloom. **Status:** Not configured by default Apple Sign-In is required if you publish to the iOS App Store and offer other social login options. **To add Apple authentication:** Bloom's AI assistant will help configure Apple Sign-In. Apple Sign-In requires an [Apple Developer Account](https://developer.apple.com/programs/) (\$99/year). Configure the service in [Apple Developer Console](https://developer.apple.com/account). Follow Bloom's prompts to enter your Apple Service ID and Key. **App Store requirement:** If your iOS app offers Google or GitHub login, Apple requires you to also offer "Sign in with Apple" as an option. Learn about Sign in with Apple requirements ## Testing authentication After configuring providers, test that sign-in works: Use Bloom's Live Preview or share your app to a test device. Tap each configured provider's sign-in button in your app. * You should be redirected to the provider's login page * After approving, you should return to your app signed in * Your app should have access to your basic profile info If sign-in fails, check [Logs](/logs) for authentication errors. Common issues: * Incorrect Authorized Origin * Missing OAuth credentials * Provider-specific configuration errors ## Switching between Bloom-managed and custom You can switch authentication modes anytime: 1. Toggle **off** the Bloom-managed switch for the provider 2. Click to add your own OAuth credentials 3. Paste your Client ID and Client Secret from the provider 4. Save and test the integration Your app will continue working during the switch—authentication doesn't go down. 1. Toggle **on** the Bloom-managed switch for the provider 2. Bloom automatically takes over credential management 3. Test that authentication still works Only available for providers that offer Bloom-managed credentials (currently Google). ## Common authentication questions No! You only need to configure the providers you want your users to be able to use. Most apps start with just Google (which is pre-configured). Yes. Start with one provider and add more anytime. Users who signed in with existing providers won't be affected. Bloom currently focuses on OAuth providers because they're more secure and easier to maintain. If you need password auth, reach out to support or use custom authentication after exporting your code. Yes! Bloom-managed credentials work in production apps. If you're publishing to app stores, you may want to switch to custom credentials for full control and branding. Authentication errors appear in [Logs](/logs) with detailed messages. Common issues: * Authorized Origin mismatch * Invalid or expired credentials * User denied permission Check logs for specific error messages and solutions. ## Troubleshooting **Check:** * Authorized Origin is correctly configured in provider dashboard * OAuth credentials are valid and not expired * Provider's OAuth app is enabled and approved **Check:** * Redirect URI matches your Authorized Origin exactly * No trailing slashes or protocol mismatches * OAuth app settings saved correctly **Check:** * Required OAuth scopes are enabled (email, profile) * User approved data sharing during sign-in * Provider account has necessary information filled out **Check:** * Toggle is enabled (green) * Click **Refresh** to reload provider status * Check [Logs](/logs) for system errors Check [Logs](/logs) for detailed error messages or contact Bloom support with your authentication configuration. ## What's next? Connect external services and APIs to your app Monitor authentication attempts and debug issues See user data and authentication metrics Share your app with users or publish to app stores # Backend Dashboard Source: https://docs.bloom.diy/backend-dashboard Manage your Convex backend: monitor health, explore data, and inspect functions. Each Bloom app comes with a ready-to-use backend powered by [Convex](https://docs.convex.dev). The **Backend Dashboard** gives you direct access to your Convex deployment, where you can monitor system health, browse your database, inspect functions, manage files, and configure scheduled tasks.

The Backend Dashboard is embedded directly in Bloom, but you can also **Open in New Tab** to access the full Convex dashboard experience. ## Dashboard Views ### Monitor system performance

The Health view shows real-time metrics for your backend: **Failure Rate** * Tracks the percentage of function calls that fail over time * View data for all functions or filter by specific ones * Useful for identifying reliability issues after deployments **Cache Hit Rate** * Shows how often queries are served from cache vs. database * Higher cache hit rates mean faster responses and lower costs * Tracks "All queries" performance over the last hour **Scheduler Status** * Displays whether scheduled functions are running on time * Shows "On time" when everything is healthy * Alerts you to delays or failures in background jobs **Last Deployed** * Timestamp of your most recent deployment * Shows which Convex version your deployment is running * Helpful for correlating issues with specific releases Check the Health tab right after deploying changes to catch issues before they impact users. ### Browse your database tables

The Data view lets you explore your Convex database structure. **What you can do:** View all tables in your database See table schemas and field types Browse documents stored in each table Search tables by name Create new tables directly from the dashboard **Common use cases:** * Verify data is being saved correctly * Check user records after sign-up * Debug data structure issues * Understand your database schema Empty tables show helpful prompts to **Add Documents** or **Follow a quickstart guide** to get started with Convex data patterns. ### Inspect your backend logic

The Functions view shows all Convex functions in your app, organized by module. **Function organization:** * **auth** — Authentication lifecycle functions (onCreate, onDelete, onUpdate) * **betHistory** — Custom functions for your app's logic * **http** — HTTP endpoints and API routes **What you can see:** * Function names and their module locations * Lock icons indicate internal/system functions * Search and filter to find specific functions Click any function to view its statistics, code implementation, and logs. This makes debugging individual functions much easier. The expandable panel shows: "Select a function in the expandable panel to the left to view its statistics, code, and logs." ### Manage file storage

The Files view provides access to Convex File Storage for managing uploaded files. **File management features:** Upload files directly (or drag and drop) Lookup files by ID Filter by upload date View file size and content type See total file count and storage used **Supported operations:** * Store images, documents, videos, and other media * Retrieve files by their unique ID * Track storage usage against your plan limits File storage counts toward your plan's storage limit. Monitor your usage in the [pricing dashboard](/pricing-and-credits) or when viewing total files. Learn more about [Convex File Storage](https://docs.convex.dev/file-storage). ### Manage scheduled functions

The Schedules view lets you configure functions that run on a schedule or after a delay. **Schedule types:** * **Scheduled Functions** — Run after a delay or at a specific time * **Cron Jobs** — Recurring tasks on a schedule (e.g., daily, weekly) **What you can see:** * Scheduled function ID * When it's scheduled to run * Current status (pending, running, completed) * Which function will execute Filter by function name Cancel all scheduled tasks View upcoming scheduled executions Use scheduled functions for tasks like sending notifications, generating reports, or cleaning up old data. Learn more about [scheduled functions](https://docs.convex.dev/scheduling/scheduled-functions). ### View backend activity

The Logs view in the Backend Dashboard shows Convex-specific logs with additional filtering options. **Log columns:** * **Timestamp** — Exact time the event occurred * **ID** — Unique identifier for the log entry * **Status** — Success, error, or execution time * **Function** — Which function generated the log **Filtering options:** * Filter by component (isolate specific modules) * Filter by function (see logs for one function only) * Search logs by text or error messages Success logs show execution time (e.g., "357ms"). Use this to identify slow functions that might need optimization. Error logs are highlighted in red. Click them to see full error messages and stack traces. For a unified view of frontend and backend logs, use Bloom's [Logs view](/logs). ### Configure your deployment

The Settings view shows configuration details for your Convex backend. **Deployment URL** * Your Convex deployment's hosted URL * Use this to configure production Convex clients * Format: `https://[name].convex.cloud` **HTTP Actions URL** * URL for Convex [HTTP Actions](https://docs.convex.dev/functions/http-actions) * Available in functions as `process.env.CONVEX_SITE_URL` * Format: `https://[name].convex.site` **Deploy Key** * For cloud deployments, deploy keys are handled automatically * For local development, generate an admin key using [the script in your repository](https://docs.convex.dev/production/hosting) These settings are automatically configured when you build in Bloom. You typically only need them when exporting your code or setting up CI/CD. ## Opening in a new tab Click **Open in New Tab** to access your full Convex dashboard with additional features: * More detailed analytics and metrics * Advanced query debugging tools * Team member management (for Convex teams) * Billing and usage information Your Convex deployment is automatically provisioned and managed by Bloom. You don't need to create a Convex account separately unless you want to access team features or manage billing directly. ## Common workflows 1. Deploy your changes in Bloom 2. Open **Health** to confirm no new failures 3. Check **Functions** to see your new functions appear 4. View **Data** to verify records are being created 5. Monitor **Logs** for any errors during testing 1. Check **Health** to identify high failure rates 2. Switch to **Logs** and filter by the failing function 3. Look for error messages (highlighted in red) 4. Click the error to see the full stack trace 5. Open **Functions** and select the failing function to see its code 6. Fix the issue in your Bloom project and redeploy 1. Open the **Data** tab 2. Find your table in the left sidebar 3. Click to view all documents in the table 4. Use **Filter & Sort** to find specific records 5. Verify data structure matches your expectations 1. Go to **Schedules** tab 2. View all pending scheduled functions 3. Filter by function name to find specific tasks 4. Check status to ensure tasks are running on time 5. Use **Cancel All** if you need to stop scheduled executions ## Learn more about Convex Deep dive into Convex's database, functions, and real-time capabilities See frontend and backend logs together in Bloom's Logs view Learn how to store and serve files with Convex Set up recurring tasks and delayed executions # Best Practices Source: https://docs.bloom.diy/best-practices Get the most out of Bloom with these proven strategies for building better apps, faster. Bloom is a full-stack app builder, not a code assistant. The way you work with Bloom is different from traditional development tools. These best practices will help you build better apps with less back-and-forth. For detailed prompting techniques, see the [Prompting Best Practices](/prompting-best-practices) guide, which covers the D.N.A. framework for crafting effective prompts. *** ## Before You Start The most successful Bloom projects start with a clear plan. Before you write your first prompt, take a few minutes to think through what you're building. ### Define your core feature Every great app does one thing really well. Before you start building, answer these questions: * **What's the main action?** What will users do most often in your app? * **Who is it for?** Picture your ideal user and their situation. * **Why will they use it?** What problem does it solve or need does it fill? Write a single sentence that captures your app's purpose. If you can't, your idea might need more focus. ### Start with an MVP Resist the urge to build everything at once. Focus on 1-3 core features that prove your concept works. "Build a habit tracker where users can add habits, mark them complete, and see their streak count." "Build a habit tracker with social features, gamification, AI coaching, Apple Health integration, and subscription billing." You can always add features later. Getting a working app in users' hands quickly is more valuable than a feature-packed app that never ships. ### Map your user journey Think through what happens from the moment someone opens your app: 1. What do they see first? 2. What's their first action? 3. What happens after that action? 4. How do they know it worked? This mental walkthrough helps you describe your app to Bloom in a way that produces better results. *** ## Working with Bloom ### One change at a time Bloom works best when each message focuses on a single thing: * One new feature, **or** * One improvement to existing functionality, **or** * One bug to fix "Add a delete button to each task that removes it when tapped." "Add delete buttons, change the font to something more modern, fix the bug where completed tasks reappear, and add a settings screen." If you need multiple changes, send multiple messages. This gives Bloom the focus it needs to implement each change correctly. ### Build incrementally The best workflow with Bloom follows a simple pattern: Send one focused prompt describing what you want. Try the feature in the preview. Toggle between web and mobile views to make sure it works on both. If something's off, describe what you expected. If it works, move to the next feature. Testing after each change helps you catch issues early when they're easy to fix. ### Describe behavior, not implementation Bloom already knows the best way to build features in its stack. Your job is to describe **what should happen**, not how to make it happen. "When I complete a task, it should animate away and show my updated streak count." "Use React Native Reanimated with a FadeOut animation and update the streak count using a Convex mutation." When you focus on behavior, Bloom can choose the optimal technical approach for your use case. *** ## Prompting Effectively ### Use the D.N.A. framework The most effective Bloom prompts follow the D.N.A. pattern: | Letter | Meaning | Example | | ------ | ------------------- | ---------------------------------------------------------------------- | | **D** | Describe the user | "I'm a busy parent checking the app while cooking dinner." | | **N** | Narrate the journey | "I tap a recipe, see the ingredients, and can check them off as I go." | | **A** | Atmosphere / vibe | "The app should feel calm and uncluttered, not overwhelming." | This gives Bloom enough context to make smart decisions about touch targets, navigation, visual design, and more. ### Be specific about outcomes Vague prompts produce vague results. Specific prompts produce exactly what you want. "When I tap save, show a green checkmark animation and return to the list." "Make the save button work better." ### Use experiential language Describe how features should feel, not just what they should do. Emotional adjectives help Bloom understand the experience you're after. **Examples:** * "The loading state should feel quick and responsive, not sluggish." * "Deleting should feel decisive. No second-guessing." * "The onboarding should feel welcoming and simple, not intimidating." ### Reference familiar apps When describing complex UI patterns, reference apps your users already know. This communicates a lot of context in just a few words. "The feed should scroll like Instagram stories at the top, with a vertical feed below." "Add a horizontal scrolling section at the top with circular items, then a vertical list below." Other useful references: * "A sidebar like Notion" * "Swipe to delete like iOS Mail" * "A bottom sheet like Google Maps" * "Card stacking like Tinder" ### Ask for clarification on complex features For complex prompts, end with: *"Ask me any questions you need to fully understand what I want."* This lets Bloom identify gaps in your description before it starts building, saving you iteration time. *** ## Iterating and Debugging ### When something doesn't work If a feature isn't behaving correctly, give Bloom clear information: 1. **What you expected:** "When I tap the button, it should show a confirmation." 2. **What actually happened:** "Nothing happens when I tap it." 3. **Where it occurs:** "This is on the task detail screen, after I've opened a task from the list." "On the profile screen, tapping 'Save Changes' doesn't update my name. I expected it to save and show a success message." "Save is broken. Fix it." ### Include error messages If you see an error message, include it in your prompt. Error messages contain valuable information that helps Bloom diagnose the issue. You can copy error messages directly from the [Logs](/logs) panel and paste them into your prompt. ### Don't guess at technical causes You might be tempted to diagnose the problem yourself: "I think the database query is failing." Unless you're certain, stick to describing the behavior. Bloom can investigate the technical cause. ### Use screenshots to show what's wrong Bloom has a built-in screenshot tool that captures the current state of your app. When something looks wrong or behaves unexpectedly, take a screenshot and include it in your message. Screenshots help when: * The layout doesn't match what you expected * An element is in the wrong position or size * Colors or styling look off * You want to point to a specific part of the screen A screenshot combined with a description ("The button in this screenshot should be aligned to the right") is often more effective than words alone. *** ## Testing Your App ### Test on both web and mobile If your app is meant for both platforms, test on both. The preview toolbar includes a **web/mobile toggle** that lets you switch between a browser layout and a mobile device frame. Use it after every change to catch platform-specific issues early. Check responsive layouts, wide-screen spacing, and hover interactions. Great for dashboards, admin tools, and content-heavy apps. Verify touch targets, scroll behavior, and navigation. Essential for any app your users will open on their phones. Even if you're building primarily for one platform, a quick check on the other can reveal layout issues you wouldn't otherwise notice. ### Test on a real device with App Clips The in-browser preview is great for quick checks, but testing on your actual phone reveals issues you might miss, like touch target sizes, scroll behavior, and how the app feels in your hand. With Bloom's [**instant sharing**](/instant-sharing), you can test on a real iPhone instantly using App Clips. No TestFlight setup, no waiting for builds. Just scan the QR code and your app opens natively on your device. In the preview panel, click the QR code icon. Point your camera at the QR code. iOS will show a notification to open the App Clip. Your app runs with full native performance. Changes you make in Bloom appear on your phone in real time. On Android, your app opens as a progressive web app in the browser. You can add it to your home screen for an app-like experience. ### Keep your phone nearby while building The best workflow is to keep your phone open to the app preview while you work on the web. This lets you: * Catch mobile-specific issues immediately * Test touch interactions as you build them * Verify that text is readable and buttons are tappable * See how animations feel on actual hardware *** ## Working with Data and Auth ### Let Bloom handle your database Your app automatically includes a [Convex](https://docs.convex.dev) backend with real-time data sync, file storage, and scheduled functions. You don't need to design schemas or write database queries. Just describe what data your app needs to store. "Users should be able to save recipes with a title, ingredients list, and photo." "Create a recipes table with columns for id, title, ingredients as JSON, and image\_url." Bloom will create the appropriate data structure and handle all the backend logic for storing, retrieving, and syncing your data in real time. ### Authentication is built in Bloom apps come with OAuth authentication ready to use. Google sign-in is enabled by default with Bloom-managed credentials. You can also add GitHub and Apple sign-in. When prompting for features that involve users, you don't need to specify authentication details: "Only show tasks that belong to the current user." "Check the user's JWT token and filter tasks by user\_id in the database query." Bloom understands that "current user" means the authenticated user and will implement the correct permissions automatically. *** ## Common Pitfalls **Problem:** Asking for multiple unrelated changes in one prompt leads to confusion and partial implementations. **Solution:** Send separate messages for each distinct change. It feels slower but actually speeds up your overall progress. **Problem:** Prompts like "Create a users table with id, email, and created\_at columns" constrain Bloom unnecessarily. **Solution:** Describe what users should be able to do: "Users should be able to sign up with their email and see when they joined." **Problem:** "Make it look better" or "improve the UX" don't give Bloom enough direction. **Solution:** Be specific: "Increase the spacing between cards" or "Make the primary action button more prominent." **Problem:** Thinking in terms of files, functions, and code changes instead of features and experiences. **Solution:** Think like a product manager describing what to build, not a developer explaining how to build it. **Problem:** Your app looks great on mobile but the layout breaks on web, or vice versa. **Solution:** Use the web/mobile toggle in the preview toolbar to check both views after each change. If your app targets both platforms, test both regularly. *** ## Quick Reference **Before prompting** * Define your core feature and target user * Start with 1-3 features, not everything * Map the user journey in your head **While building** * One change per message * Test after each change * Describe behavior, not implementation **When prompting** * Use the D.N.A. framework * Be specific about outcomes * Reference familiar apps for complex UI patterns **When testing** * Toggle between web and mobile preview after each change * Use App Clips to test on your real device * Keep your phone preview open while working * Test touch interactions, not just visuals **When debugging** * Describe expected vs actual behavior * Include screenshots and error messages * Reference specific screens and flows *** ## Next Steps Deep dive into prompting techniques for better results. Put these practices into action with your first app. # Bloom Mobile App Source: https://docs.bloom.diy/bloom-mobile # Bloom Web Platform Source: https://docs.bloom.diy/bloom-web # Building from Mobile Source: https://docs.bloom.diy/building-from-mobile Create and iterate on apps directly from your phone. The **Bloom mobile app** lets you build, test, and modify apps directly from your phone. Whether you're commuting, traveling, or just prefer working from your device, you can create full-stack apps without touching a computer. ## When to use the mobile app Sketch out ideas immediately when inspiration strikes—no need to be at a desk. Make changes or fix issues while away from your computer. Build and test directly on your phone to see exactly how your app feels to users. Show teammates or clients your app in real-time during meetings or casual conversations. New to app building? The mobile interface makes it easy to experiment and learn. Generate share links and QR codes to demo your app to people nearby. **Everything syncs:** Changes you make in the mobile app sync automatically to the web workspace and vice versa. Start on mobile, finish on web—or the other way around. ## Getting started ### Download the Bloom app **Download from the App Store** 1. Open the App Store on your iPhone or iPad 2. Search for "Bloom" or "Bloom App Builder" 3. Tap **Get** to download 4. Open the app once installed Requires iOS 15 or later for the best experience. ### Sign in Launch the app on your device. Use the same account you use on the web to access all your apps across devices. After signing in, you'll see your app dashboard with all your Bloom apps.

From here you can: * Open existing apps * Create new apps * Access recent apps * Manage your account settings ## Creating a new app From your app dashboard, tap the **+** button at the bottom of the screen. In the chat interface, describe what you want to build.

**Tips for mobile prompting:** * Be concise but specific * Use voice input if typing is difficult * Break complex ideas into multiple messages * Reference examples when helpful **Good mobile prompts:** * "Build a habit tracker with daily check-ins and streak tracking" * "Create a simple to-do list with categories" * "Make a photo sharing app with comments" **Less effective:** * "Make an app" (too vague) * "Build something like Instagram with all features" (too complex for first version) Just like on web, Bloom creates your full-stack app: * Frontend screens and UI * Backend functions and database * Authentication setup * Real-time preview You'll see progress updates as generation happens. Once generation completes, your app opens automatically in native preview. App Preview

Test all screens and interactions Try user flows from start to finish Experience exactly what your users will see ## Making changes ### Using the chat The chat interface is your main tool for modifying your app on mobile: Type your requests in the chat at the bottom of the screen: Making changes on mobile

**Example requests:** * "Add a search bar to the home screen" * "Change the button color to blue" * "Make the text larger" * "Add a delete button to each item" ### Choosing a model You can choose which AI model Bloom uses to generate your code. Tap the **+** button in the bottom left corner of the chat input to open the model selector. Model selector on mobile

**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. ### Common modifications **Example prompts:** * "Make the buttons rounded" * "Add spacing between list items" * "Change the background to light gray" * "Show user avatars as circles" * "Make the header sticky at the top" **Example prompts:** * "Add a filter dropdown" * "Include a favorites feature" * "Let users upload photos" * "Add dark mode support" * "Include share functionality" **Example prompts:** * "The save button doesn't work" * "Fix the keyboard covering the input" * "Photos aren't loading" * "The list won't scroll" * "Users can't sign out" **Example prompts:** * "Only show items from the current user" * "Sort the list by date" * "Add validation to the form" * "Send a notification when someone comments" * "Delete old items automatically" ## Testing your app ### Native preview One of the biggest advantages of building on mobile: you're already testing on the platform your users will use. Test on actual hardware—no simulators or emulators needed. Experience taps, swipes, and gestures exactly as users will. See how your app looks on your specific device size. Check actual load times and responsiveness on mobile. ### Gestures for testing Based on your screenshots, Bloom supports developer gestures for quick testing:

**Shake your phone** to open the developer menu. Access tools like: * Reload app * Debug options * Performance monitoring * Network inspector **Press with three fingers** to trigger specific actions or open quick settings. **Pinch inward** to exit preview mode and return to the Bloom interface. Developer gestures can be enabled/disabled in **Settings** → **Gestures** within the Bloom app. ## Viewing your app structure The mobile app includes views to understand and manage your app: ### App sections The main building interface where you chat with Bloom and see your app preview. Edit Tab

Navigate through your app's screens and test functionality in full-screen mode. Perfect for: * User flow testing * Sharing with others * Experiencing the app as users will ### Database view Access your Convex database directly from mobile. From the **More** tab, tap **View Database** to browse your tables and data. Database view on mobile

**What you can do:** * Browse database tables * View stored data * Check document structure * Verify data is saving correctly The database view is read-only on mobile. For more detailed database management, use the web workspace's [**Backend Dashboard**](/backend-dashboard). ### Code preview You can browse your app's generated code directly from your phone. From the **More** tab, tap **View Code** to open a modal with your project files. Code preview on mobile

* **File dropdown** (top left) to switch between files in your project * **Refresh** to reload the file contents * **Copy** to copy the current file's contents to your clipboard (Starter plan and above) * **Download** to download the file to your device (Starter plan and above) Code files are read-only within Bloom. To edit code directly, use [**GitHub Sync**](/github-sync) or [**export your code**](/exporting-code). For a full overview of browsing code on both web and mobile, see [**Code Preview**](/code-preview). ## Upgrading your plan on mobile You can upgrade your plan directly from the app. From the dashboard, tap your **profile image** in the top right corner. Select **Upgrade Plan** from the menu to see available plans. Upgrade plan on mobile

## Buying credits on mobile If you're running low on credits, you can top up directly from the app without switching to web. From the dashboard, tap your **profile image** in the top right corner. Select **Buy Credits** from the menu to see top-up options. Buy credits on mobile

Top-ups are one-time purchases that add to your balance immediately and never expire. ## Sharing from mobile Generate share links instantly from your phone: In your app preview, tap the **share** button in the toolbar. **Options:** * **Copy link** — Get a shareable URL * **Show QR code** — Display a QR code for others to scan * **Share via...** — Use your device's native share sheet (Messages, Email, etc.) Anyone with the link or QR code can try your app immediately on their device. Sharing from mobile is perfect for in-person demos at meetings, conferences, or casual conversations. [Learn more about sharing →](/instant-sharing) ## Collaboration on mobile ### Version history See past versions of your app and restore if needed: From the **More** tab, select **Version History**. See all saved versions with timestamps and descriptions of changes. Tap any version to preview it, then choose **Restore** if you want to revert to that state. Restoring a version will overwrite your current app state. Make sure you want to go back before confirming. ### Mobile vs. web: when to use each Quick iterations and idea sketching Native device testing Building simple apps start to finish On-the-go changes and updates In-person demos and sharing Learning Bloom while commuting or traveling Complex backend configuration Detailed code exploration (when available) Managing environment variables Advanced debugging with logs Setting up API integrations Exporting code or GitHub sync **Best practice:** Start on mobile for rapid prototyping, then move to web for refinement and configuration. Or vice versa—whatever fits your workflow! ## Limitations on mobile Some features are currently **web-only**: * Environment variable management * API connection configuration * Code export and GitHub sync * Detailed backend metrics For these tasks, switch to the web workspace. ## Syncing between devices Your apps sync automatically across all devices: Edit your app, add features, or fix issues from your phone. Open the same app in your web browser—all changes are already there. Work seamlessly across phone, tablet, and computer without manual syncing. Your entire app—code, data, settings—is always in sync across devices. ## What's next? Use the full workspace for complex features and backend configuration. Generate links and QR codes to demo your app to anyone. Monitor your app's health and performance (best on web). Ready to publish? Learn how to deploy to app stores. **New to app building?** The mobile app is a great way to start—experiment, learn, and create without the complexity of traditional development tools. # Building from Web Source: https://docs.bloom.diy/building-from-web 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. Bloom web workspace

## When to use the web app The web workspace is ideal for creating your first version and setting up core features. Browse your app's structure and understand how components connect to backend functions. Managing environment variables, API keys, and deployment settings is easiest on web. Access logs, backend dashboard, and all diagnostic tools in one place. Share your screen during meetings or work alongside teammates on larger displays. When building sophisticated logic, data models, or integrations, the web workspace provides more screen space and tools. ## Creating your first app Navigate to [bloom.diy](https://bloom.diy) and sign in to your account. If you don't have an account yet, sign up with Google, GitHub, or email. From your dashboard, click the **New App** button to start creating. New App Button

In the prompt, describe your app idea in natural language. **Be specific about:** * The main purpose (e.g., "habit tracker," "recipe manager") * Key features (e.g., "daily check-ins," "photo uploads") * User flows (e.g., "users can create, edit, and delete entries") **Good example:** ``` Build a daily journal app where users can write entries, add photos, and tag entries by mood. Include a calendar view showing which days have entries. ``` **Less helpful example:** ``` Make a journal app ``` Bloom creates your full-stack app: * **Frontend** — Expo project with screens and UI components * **Backend** — Convex functions, database schema, and API endpoints * **Authentication** — OAuth configuration ready to enable * **Preview** — Your app running live in the right panel This usually takes 2-10 minutes depending on complexity. Once generation completes, you'll see your app running in the preview panel. Click through the screens Test core functionality Identify what works and what needs refinement Use the chat to request changes: * "Add a search bar to the main screen" * "Change the primary color to blue" * "Let users upload profile photos" * "Add a settings screen with dark mode toggle" Each iteration updates your app and shows changes in the preview. ### Choosing a model 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. Model selector on web

**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. ## Working with the preview ### Testing your app The live preview lets you interact with your app as if you're using it on a real device: Tap buttons, fill out forms, navigate between screens—everything is interactive. Walk through complete user journeys from start to finish to verify functionality. Resize the preview to see how your app adapts to different screen sizes. For apps with live data, open multiple browser windows to test sync across devices. ### Switching between web and mobile preview 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. Preview switcher

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.

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.

Switch between views frequently as you build. Some layouts look great on web but need adjustment on mobile, and vice versa. ### Preview on your phone For the most accurate testing, preview your app natively on your device. Instant sharing on mobile

**App Clip Preview** On iOS, Bloom uses **App Clips**, a native iOS feature that lets users run apps instantly without installation. Open your iPhone camera and point it at the QR code in the preview modal. iOS shows a banner to open the App Clip. Your app runs natively with full performance and complete functionality. No download required. **Progressive Web App** On Android, shared apps run as progressive web apps (PWAs) in the browser. Scan with your camera app or tap the share link directly. The app loads in your default mobile browser. You can add it to your home screen for quick access. **Browser Preview** On desktop or any device with a web browser, apps open directly in the browser. The app runs immediately in the browser with no installation or setup. Keep your phone preview open while working. It's the best way to catch issues with touch targets, font sizes, or mobile-specific interactions. ## Making changes ### Using the chat The chat interface is your primary way to modify your app: **Example prompts:** * "Add a dark mode toggle to the settings screen" * "Let users filter the list by category" * "Include a search bar at the top of the home screen" * "Add push notifications when someone comments" **Example prompts:** * "Make the buttons larger and rounded" * "Change the color scheme to blue and white" * "Add icons to the navigation tabs" * "Show user avatars as circles instead of squares" **Example prompts:** * "The save button isn't working—can you fix it?" * "Users can't delete items from the list" * "The app crashes when I tap the profile icon" * "Photos aren't uploading correctly" **Example prompts:** * "Add validation so users can't submit empty forms" * "Only show items created by the current user" * "Send an email notification when someone signs up" * "Automatically delete items older than 30 days" Be specific in your requests. Instead of "make it better," describe exactly what you want: "increase the font size of headings to 24px." ### Monitoring changes Generation preview

After requesting a change: 1. **Watch the generation progress** — Bloom shows what it's updating 2. **Preview automatically updates** — See your changes as soon as generation completes 3. **Check the logs** — Verify no new errors appeared 4. **Test the modified feature** — Confirm it works as expected If a change doesn't work as you hoped, describe the issue in chat and Bloom will try again. ## Using backend tools ### Backend Dashboard Monitor your app's performance and health: Track failure rates, cache performance, and system status. View tables, documents, and database schema. See all Convex functions and their organization. [Learn more about the Backend Dashboard →](/backend-dashboard) ### Logs Debug issues and monitor activity: * **Filter by Frontend/Backend** to isolate issues * **Search for specific errors or events** * **Track logs since last deploy** to focus on recent changes [Learn more about Logs →](/logs) ### Authentication Configure user sign-in: * **Toggle OAuth providers** (Google, GitHub, Apple) * **Add custom OAuth credentials** for branded login * **Copy authorized origin URLs** for setup [Learn more about Authentication →](/authentication) ### API Connections Integrate external services: * **Use auto-provisioned Bloom keys** for instant setup * **Add your own API keys** for production use * **Manage environment variables** securely [Learn more about API Connections →](/api-connections) ## Troubleshooting **Try these steps:** 1. Refresh the preview (click refresh icon or `Cmd/Ctrl + R`) 2. Clear browser cache and reload the page 3. Check if generation is still in progress 4. Look for errors in logs that might prevent loading 5. Try opening preview in a new tab **Possible causes:** * Generation encountered an error (check logs) * Request was too vague (try being more specific) * Conflicting with existing code (describe the issue) * Browser cache needs clearing If stuck, describe what you attempted and ask Bloom to try a different approach. **Check:** * You're signed in to the correct account * Your plan includes backend dashboard access * The sidebar is expanded (click hamburger menu if collapsed) * No browser extensions are blocking content **Performance tips:** 1. Check Backend Dashboard for high failure rates 2. Review logs for slow queries or functions 3. Reduce number of database queries on each screen 4. Optimize image sizes before uploading 5. Consider pagination for long lists ## What's next? Learn how to create and iterate on apps from your phone. Generate links and QR codes to share your app instantly. Dive deeper into monitoring and managing your backend. Ready to publish? Learn how to deploy to app stores. # Building Your First App Source: https://docs.bloom.diy/building-your-first-app A step-by-step guide to creating your first full-stack app with Bloom. Go from idea to working app in minutes. No coding required. Bloom access is rolling out gradually. Existing admitted users can continue building their projects. New accounts join the waitlist unless explicitly admitted, and purchasing a plan or credits does not bypass admission. Use the full Bloom workspace at [bloom.diy](https://bloom.diy) in your browser. Download the [Bloom iOS app](https://apps.apple.com/us/app/bloom-build-apps-with-ai/id6740775687) and create apps from your phone. ## Built on the best Bloom is built on two industry-leading technologies for modern app development: ### Your frontend framework Your app's interface is powered by [Expo's React Native framework](https://docs.expo.dev), so every Bloom app runs smoothly on iOS, Android, and the web from a single codebase. **Why Expo?** * Cross-platform by default * Native performance * Hot reload during development * Easy updates without app store resubmission ### Your backend infrastructure [Convex](https://docs.convex.dev) handles your app logic, database, and real-time updates. It includes built-in hosting, functions, and storage. No need to set up servers, connect APIs, or manage credentials. **Why Convex?** * Real-time data sync * Type-safe queries * Built-in caching and optimization * Serverless and scalable **The power of integration:** By pre-wiring Expo and Convex together, Bloom eliminates the complexity of connecting frontend to backend, configuring authentication, or managing deployment pipelines. ## What's included in every Bloom app Each new Bloom project automatically includes: Expo + Convex projects pre-wired and synced. Your frontend and backend communicate seamlessly from day one. OAuth built-in with [Google](https://developers.google.com/identity), [GitHub](https://docs.github.com/en/apps/oauth-apps), [Apple ID](https://developer.apple.com/sign-in-with-apple/), and more. Toggle between Bloom-managed credentials or bring your own. [**Learn more →**](/authentication) Auto-provisioned Bloom keys for instant connections to AI models, analytics, and external services. Or bring your own API keys. [**Learn more →**](/api-connections) Monitor queries, cache health, and performance in real time without leaving Bloom. [**Learn more →**](/backend-dashboard) Track frontend and backend logs in one unified view. Filter by severity, source, and time. [**Learn more →**](/logs) Manage configuration securely right inside your project. No external configuration files needed. *** ## Create your first app Follow these steps to build your first Bloom app from the web. The entire process takes less than 5 minutes. Go to [bloom.diy](https://bloom.diy) and sign in with Google, GitHub, or email. If you don't have an account, you'll be prompted to create one. Create Account

Once an admitted account is signed in, you'll see the prompt field in the center of the screen asking "What do you want to create?" Waitlisted accounts see the waitlist instead. Describe your app idea in plain language. Be specific about the main purpose and key features you want. Bloom Dashboard

**A good first prompt includes:** * **Who** is using the app and in what situation * **What happens** when they use it (the journey) * **How it should feel** (the vibe) [**Learn about the D.N.A. prompting framework →**](/prompting-best-practices#the-dna-prompting-framework) **Journal app:** ``` I'm someone who wants to reflect on my day before bed. When I open the app, I see a simple prompt asking how my day went. I write a few sentences, tag my mood, and optionally add a photo. A calendar shows me which days I've journaled. The vibe should feel calm, private, and encouraging. ``` **Recipe app:** ``` I'm a home cook who finds recipes online but loses track of them. When I find a recipe I like, I can save it with a photo and organize it into collections like "weeknight dinners" or "meal prep." Before grocery shopping, I can quickly see what ingredients I need. It should feel organized and appetizing. ``` **Book club app:** ``` I run a small book club with friends. We pick a book, and as we read, we can share thoughts and reactions in a thread without spoiling ahead. I can see everyone's reading progress. When we finish, we vote on what to read next. Should feel cozy and social, like a group chat about books. ``` **Habit tracker:** ``` I'm trying to build better habits but forget to do them. Each morning I see today's habits and check them off as I go. When I complete one, it feels satisfying and I can see my streak growing. At the end of the week, I see a simple chart of my progress. The vibe should be motivating but not overwhelming. ``` **Avoid prompts that are too vague or too technical.** "Make an app" doesn't give Bloom context. "Build a database with CRUD operations" is too technical. Describe the user experience instead. After you submit your prompt, Bloom creates your full-stack app. This typically takes 1-3 minutes depending on complexity. Generating App

**During generation, Bloom is:** * Creating your **frontend** with Expo (screens, navigation, UI components) * Setting up your **backend** with Convex (database schema, API endpoints, functions) * Configuring **authentication** (ready to enable OAuth providers) * Connecting everything together automatically You can watch the progress in real time. Bloom shows you what it's building as it goes. Once generation completes, your app appears in the live preview panel. You can interact with it immediately. Previewing App

**Test your app by:** Clicking through all the screens Testing core features (create, edit, delete) Trying the user flows you described Noting what works and what needs refinement Use the **web/mobile toggle** in the preview toolbar to switch between a browser layout and a phone device frame. [**Learn more about the preview switcher →**](/building-from-web#switching-between-web-and-mobile-preview) ### Preview on your phone For the most accurate testing, preview on your actual device: 1. Click the **QR code icon** in the preview toolbar 2. Scan with your phone's camera 3. Your app opens natively on your device QR Code Preview

Keep your phone preview open while working. It's the best way to catch issues with touch targets, font sizes, or mobile-specific interactions. Your first version is a starting point. Use the chat to refine and add features. Refine chat

**Example refinement prompts:** * "When I'm on the home screen, I want to quickly search for items without scrolling through everything" * "I want to personalize my profile with a photo so other users recognize me" * "At night I use the app in bed. Add a dark mode so it's easier on my eyes" * "I want to know when someone interacts with my content, even when I'm not in the app" * "The buttons feel too small and hard to tap. Make them larger and friendlier" * "I want a calmer color scheme. Try soft blues and whites" * "The navigation tabs would be clearer with icons" * "User avatars should feel more personal. Show them as circles" * "When I tap save, nothing happens. I expected my changes to be saved" * "I can't figure out how to delete items from my list" * "I selected a photo to upload but it never appears" * "The app crashes when I tap the profile icon. I was trying to view my profile" * "I only want to see items I created, not everyone's items" * "Users are submitting empty forms. Prevent that and show a helpful message" * "The list feels random. Show newest items at the top" * "Old items are cluttering the list. Automatically clean up items older than 30 days" **Iteration is normal.** Expect your first version to be about 70% of what you want. Use chat to refine until it matches your vision. *** ## Tips for your first prompt The quality of your initial prompt directly affects the quality of your generated app. Here's how to write effective prompts: ### Focus on the user experience, not technical specs Bloom is a full-stack app builder, not a code assistant. Prompt like you're writing a product brief, not a technical spec. ``` I'm someone who wants to reflect on my day before bed. When I open the app, I see a simple prompt asking how my day went. I write a few sentences, tag my mood, and can add a photo. A calendar shows which days I've journaled so I can see my consistency. It should feel calm and private. ``` This prompt describes: * **Who** is using it (someone reflecting before bed) * **What happens** (open, write, tag, view calendar) * **How it feels** (calm and private) ``` Make a journal app with CRUD operations for entries ``` This is too technical. Bloom already knows how to build databases. Tell it about the experience instead. ### Start simple, then expand Don't try to build everything at once. Start with the core experience and add more through iteration. **First prompt:** ``` I'm someone who keeps forgetting tasks. When I open the app, I see today's tasks front and center. I can quickly add a new task and check things off as I go. Completed tasks disappear so I feel progress. Keep it minimal and focused. ``` **Then iterate:** * "I want to set due dates so I know when things are urgent" * "Let me mark tasks as high, medium, or low priority" * "Add a view that only shows what's due today" ``` Build a complete project management tool with tasks, subtasks, due dates, priorities, recurring tasks, team assignments, comments, file attachments, time tracking, reports, calendar sync, and notifications. ``` This is too complex for an initial prompt. Break it into smaller pieces. ### Set the vibe Tell Bloom how the app should feel emotionally. This influences design, animations, and overall experience. ``` I'm a home cook saving recipes I find online. I want to snap a photo and save recipes into collections like "quick weeknight meals." Before grocery shopping, I can see all the ingredients I need. Should feel organized and appetizing, like a beautiful cookbook. ``` "Organized and appetizing, like a beautiful cookbook" helps Bloom make design decisions. ``` Recipe database with relational data and search functionality ``` This is technical jargon with no emotional context. Describe what the user does and how it should feel. [**Learn more about prompting →**](/prompting-best-practices) *** ## What to expect ### Your first version Your generated app will typically include: * Working screens and navigation * Basic CRUD functionality (create, read, update, delete) * Database schema and API endpoints * Authentication setup (ready to enable) * Responsive design for mobile and web ### What you'll refine Plan to iterate on: * Visual polish and styling * Edge cases and validation * Additional features beyond the core * Performance optimization for large data sets **The goal is progress, not perfection.** Get a working version quickly, then refine through conversation. *** ## Next steps Detailed guide to the full web workspace, including backend tools and debugging. Learn how to create and iterate on apps directly from your phone. Explore examples and use cases for inspiration. Advanced techniques for getting better results from Bloom. # Bloom Changelog Source: https://docs.bloom.diy/changelog Latest updates and improvements to Bloom. ### Build Web Apps in Bloom Bloom now builds for the web, not just mobile. Every app you create works on iOS, Android, and the web from a single codebase. Go mobile-first, web-first, or both. The preview panel now includes a **web/mobile toggle** so you can switch between a browser layout and a phone device frame while you build. Preview switcher

If you're building something people will use on a computer, switch to web preview and make sure the layout takes advantage of the extra space. Available now for all users on web. [**Start building for web →**](https://bloom.diy) ### Opus 4.6 is Now the Default Model We've upgraded the default model for building your Blooms to Opus 4.6 and it's available to everyone, right now. No settings to change, no plan required. When you describe your app, Bloom is already using Opus 4.6 under the hood. **What this means for you**\ Opus 4.6 is meaningfully smarter at understanding what you're trying to build. Expect better first pass results, more accurate UI layouts, and fewer rounds of back and forth to get your app where you want it. **How to try it**\ Open Bloom and start describing something. That's it, you're already using it. If you notice a difference (good or bad), let us know. We read everything. [**Open Bloom →**](https://bloom.diy) ### Set a Custom Icon for Your Bloom App You can now set your own icon for any app you build in Bloom. Upload an image from your files or choose from the built-in options in the app settings. The icon shows up on your home screen when the app is installed, in the Bloom editor when browsing your apps, and anywhere the app is shared. Custom app icon picker

This is a small thing that makes your apps feel more finished. If you're building something you're going to share or use regularly, having a proper icon instead of a default placeholder makes a difference. To set one: open your app settings and look for the icon section. [**Update app icons →**](https://bloom.diy) ### The Agent Now Asks Before It Builds We've added a new step to how Bloom handles prompts. When you describe something and the agent needs more context to get it right, it now asks you a short set of clarifying questions before building. You answer them, the agent uses your answers, and the result is closer to what you actually wanted on the first try. Agent clarifying questions

**How it works**\ The questions are short and specific. Multiple choice where possible, short text input when needed. It takes 20 to 30 seconds to answer a typical set. The agent only asks when it genuinely needs to. Simple changes and clear prompts go straight to building as normal. **Why we built it**\ The biggest source of wasted credits and frustration was the agent guessing wrong and having to redo work. This fixes the root cause: giving the agent the information it needs before it starts. **Keyboard shortcuts**\ On web, you can use number keys to select multiple choice answers and Tab to move between questions without touching the mouse. Human in the Loop is available to all users on web and iOS. [**Experience a smarter Bloom →**](https://bloom.diy) ### Watch the Agent Write Code in Real Time Code streaming is now live in Bloom. When the agent writes or edits a file, you can now see the code appear line by line as it happens. Previously you'd send a prompt and wait for the result. Now you can follow along as the agent works. Code streaming in Bloom

This makes a few things better: **You know it's working**\ Long builds no longer feel like a black box. You can see progress in real time rather than waiting and wondering. **You can catch problems earlier**\ If the agent starts writing something that looks wrong, you can stop it before it finishes and rephrase. No need to wait for the full result. **It's just more satisfying**\ Watching code appear and an app take shape is a better experience than a spinner. Code streaming is on by default. Nothing to enable. [**Try code streaming →**](https://bloom.diy) ### Buy More Credits Without Changing Your Plan Credit top-ups are now available. If you run low on credits before your next billing cycle, you can buy more from your account page. Top-ups are one-time purchases that add to your current balance immediately. They don't affect your plan or your next renewal.

This is useful if you're in the middle of a big build and don't want to slow down, or if your monthly limit isn't quite enough but you don't need a full plan upgrade. Top-ups are available to all paid users. Head to your account page and look for the credits section to see the options. [**Buy credits →**](https://bloom.diy) ### Version History is Now Available in Bloom Every time the agent makes a change to your app, that state is saved as a version. Open version history to browse through the timeline of your app and revert to any point with one tap. This changes how you can work with Bloom: **Experiment without risk**\ Try something you're not sure about. If it doesn't work out, go back. You don't have to be careful about breaking things. **Recover from bad builds**\ If the agent makes a change that breaks something and you don't notice until a few builds later, version history lets you find the last good state and restore it. **Compare changes over time**\ Browse the history to see how your app evolved and understand what changed between versions. Version history is available in the editor under the history tab. All your existing apps already have their history saved. [**Try version history →**](https://bloom.diy) ### Upload Images and Assets Into Your App You can now upload media directly into Bloom and use it in your app. Upload images, icons, or other assets and they get stored in your app's file storage. The agent can then reference them when building, so you can say things like "use the logo I uploaded as the header image" and it will use the actual file. Assets show up in the asset panel in the editor. You can manage, replace, or delete them from there. This is available on all plans. Storage limits vary by plan, with Pro getting 5 GB. [**Upload images in Bloom →**](https://bloom.diy) ### Attach Files to Your Prompts You can now attach files directly in the chat when building your app. Drag a file into the input or use the attachment button to add it to your message. The agent reads the file and uses it as context for whatever you're asking it to build. File attachments in Bloom

A few ways people are using this: **CSV or JSON data**\ Describe a table or list view and attach the data file. The agent can model your schema directly from your actual data rather than guessing. **Design references**\ Attach a screenshot or mockup and tell the agent to match it. Works well for getting layouts close on the first pass. **Spec documents**\ If you have a requirements doc, product brief, or any structured description of what you want, attach it and the agent will use it. File attachments work on web and iOS. [**Try out attachments →**](https://bloom.diy) ### You Can Now Choose Your Model in Bloom The model selector is now available in the editor on web and iOS. Model selector in the Bloom editor

By default, Bloom uses the best available model for building. But if you want to switch, you can now do it from the editor without any settings changes. Different models have different strengths, and some builds benefit from switching. The selector shows you what's available on your plan. Some models are available to all users, others are on paid plans only. To try it: open the editor, look for the model indicator near the chat input, and tap it to see your options. [**Explore models →**](https://bloom.diy) ### We Redesigned the First-Run Experience If you sign up for Bloom today, the onboarding is different. When your first app is generating, Bloom now shows tips and context alongside the build. Instead of watching a loading state, you see what's happening, why it takes time, and what you can do once it's ready. We also updated the questions we ask during setup. They're shorter and more focused, so we can do a better job of tailoring your first experience to what you're actually trying to build. If you signed up before this change, you can replay onboarding from your account settings if you want to see it. [**Open Bloom →**](https://bloom.diy) ### We Updated Our Plans and Pricing We've made changes to the credit limits and features across our Starter, Premium, and Pro plans. Bloom pricing plans

Here's what's in each plan now: **Free**\ A limited number of credits to try Bloom and see what it can build. **Starter**\ 3,500 credits per month, downloadable code, and faster previews. **Premium**\ 8,750 credits per month, two-way GitHub sync, and early access to new features. **Pro**\ 17,500 credits per month, 5 GB file storage, and priority support. If you're on a paid plan, your account has already been updated to the new limits. Check your account page to see your current balance and plan details. If you have questions about what changed for your account specifically, reach out via in-app support. [**View pricing →**](https://bloom.diy/pricing) ### Bloom Apps Now Support App Clips Anyone can now try a Bloom app from a link on iOS without downloading or installing anything. When you share your app link, iPhone users who don't have it installed will get an App Clip experience instead of a blank page. They can use the core features of your app immediately, right from the share sheet or a browser tap. App Clip preview on mobile

This is useful for a few things: **Sharing with people who won't install an app**\ If you're showing your app to someone and don't want to ask them to go to the App Store, send them the link. It just works. **Getting faster feedback**\ Testers can try your app without any friction. No TestFlight, no setup. App Clip support is on by default for all Bloom apps. Nothing to configure. [**Try app clips →**](https://bloom.diy) ### In-App Support Is Now Powered by Intercom We've moved our support chat from Featurebase to Intercom. The help button is in the same place. Tap it from anywhere in Bloom to open a conversation. What's changed is the experience on the other side: faster responses, better routing, and a cleaner thread history. Paid users get priority responses. If you're on a free plan and have something urgent, you're still welcome to post in Community Support and we'll help. One thing to note: your old Featurebase conversations didn't carry over. If you had an open issue we hadn't resolved, please open a new thread in Intercom and reference the original so we can pick it up. [**Get support →**](https://bloom.diy) ### The Bloom iOS App Has a New Design We've redesigned the Bloom iOS app with native liquid glass effects throughout the editor and home screen. The glass surfaces, tab bar, and editor panels now use the same material design system that Apple uses in iOS itself. It adapts to your wallpaper, responds to light and dark mode, and feels like it belongs on iPhone rather than being a web app wrapped in a shell. This was a significant rewrite of how we render UI on mobile. Beyond looking better, it also performs better, especially when switching between apps or opening the editor. Update the app from the App Store to get it. [**Download app →**](https://apps.apple.com/us/app/bloom-build-apps-with-ai/id6740775687) ### See What the Agent Is Thinking Before It Builds The agent now shows its thinking step in real time before it starts writing code. When you send a prompt, you'll see the agent reason through the problem first. It figures out what needs to change, what files to look at, and what approach to take before touching anything. This is useful for a couple of reasons: **Catch misunderstandings early**\ If the agent has interpreted your prompt differently than you intended, you'll see it in the thinking step before any code is written. You can stop it and rephrase rather than waiting for a full build to come back wrong. **Understand what the agent is doing**\ Builds are less of a black box now. You can follow along and get a sense of how the agent thinks about your app. The thinking step appears automatically. No setting to turn on. ### Apple Sign In Is Now Available You can now sign in to Bloom with Apple. It works on [**bloom.diy**](https://bloom.diy) and in the iOS app, and sits alongside Google and email as a full sign in option. If you've been waiting to create an account, or want to switch how you log in, head to the sign in screen and you'll see the option there. [**Sign up with Apple →**](https://bloom.diy) # Code Preview Source: https://docs.bloom.diy/code-preview Browse and understand your generated codebase on web and mobile. Bloom lets you browse your generated code on both web and mobile. Code files are read-only within Bloom. To edit code directly, use [**GitHub Sync**](/github-sync) or [**export your code**](/exporting-code). ## On web Click the **Code view** button in the left panel (the second icon below Chat) to open the file browser. Code preview on web

The code view has two panels: * **File tree** (left) — Browse your project's folder structure. Click any folder to expand it and any file to open it. * **File viewer** (right) — Displays the contents of the selected file with syntax highlighting and line numbers. The filename appears in the top bar. The toolbar at the top includes: * **Refresh** to reload the file tree and contents * **Copy** (top right) to copy the current file's contents to your clipboard ## On mobile From the **More** tab, tap **View Code** to open a modal where you can browse your project files. Code preview on mobile

The code preview modal includes: * **File dropdown** (top left) to switch between files in your project * **Refresh** to reload the file contents * **Copy** to copy the current file's contents to your clipboard (Starter plan and above) * **Download** to download the file to your device (Starter plan and above) The copy and download buttons require a **Starter plan** (\$20/month) or above. On the Free plan, these actions are locked. ## What you can see Your Bloom app is a Turborepo monorepo containing an Expo frontend and a Convex backend. The code preview gives you visibility into the full project structure: * **`apps/default/`** — Your universal app (iOS, Android) using React Native StyleSheet * **`apps/web/`** — Your web app using Tailwind CSS and Framer Motion * **`packages/backend/convex/`** — Your Convex schema, functions, and backend logic * **`assets/`** — Shared images and fonts * **`package.json`** and **`turbo.json`** — Workspace configuration and build tasks For a detailed breakdown of every file and folder, see [**App Structure**](/app-structure). ## What's next? Detailed breakdown of every file and folder in your project. Download your code as a ZIP or sync with GitHub. Set up bidirectional sync to edit code in your preferred IDE. Learn more about building and managing apps from your phone. # Connect Bloom MCP to an AI client Source: https://docs.bloom.diy/connect-bloom-mcp Connect ChatGPT, Codex, Claude, Cursor, or another MCP client to Bloom's hosted server. Bloom's hosted MCP server is available at: ```text theme={null} https://api.bloom.diy/mcp ``` It uses **Streamable HTTP** and browser-based **OAuth**. Add that URL as a remote MCP server in your client, then sign in to Bloom and approve the connection in your browser. You do not need to create or copy an API token. Bloom's OAuth discovery endpoints tell compatible clients how to authenticate. Before sign-in, clients can discover the OAuth flow, but cannot initialize MCP or see the tool list. Your account needs Canvas early access to approve an MCP connection or use MCP tools. If that access is removed later, existing connections stop working. Each tool also respects your project permissions. ## Before you start You need: * A Bloom account with Canvas early access and access to at least one project. * An MCP client that supports remote Streamable HTTP servers and OAuth. * Permission to open a browser and approve the Bloom connection. The consent screen shows the access Bloom MCP is requesting. Review it before approving. Your client stores and refreshes its own OAuth session; it never needs your Bloom password. For a client without specific instructions below, choose **Streamable HTTP** or **remote MCP**, enter the URL above, and follow the client's OAuth sign-in flow. ## ChatGPT In ChatGPT settings, add a custom MCP connector with the server URL above, then connect your Bloom account through the browser OAuth flow. Availability of custom connectors depends on your ChatGPT plan and workspace settings. A workspace administrator may need to enable or add the connector. ## Cursor Add Bloom to your global Cursor MCP configuration at `~/.cursor/mcp.json`, or to a project's `.cursor/mcp.json`. If the file already contains other servers, add the `Bloom` entry to its existing `mcpServers` object instead of replacing the file. ```json theme={null} { "mcpServers": { "Bloom": { "type": "http", "url": "https://api.bloom.diy/mcp" } } } ``` Open **Cursor Settings → Tools & MCP**, then find **Bloom**. Select **Connect** or **Authenticate**. Sign in to Bloom in the browser, review the requested access, and approve it. Bloom should appear as connected, and its tools should be available to Agent. If you use Cursor Agent from the terminal, start authentication after saving the configuration: ```bash theme={null} cursor-agent mcp login Bloom ``` ## Claude ### Claude and Claude Desktop Remote custom connectors are available on Claude plans that support them. Open **Settings → Connectors**, select **Add custom connector**, and name it `Bloom`. Enter `https://api.bloom.diy/mcp` as the remote MCP server URL, then select **Add**. In a chat, open **Search and tools**, find Bloom, and select **Connect**. Sign in to Bloom in the browser, review the requested access, and approve it. On Team or Enterprise plans, an owner may need to add Bloom under **Organization connectors** before individual members can connect it. Claude Desktop remote connectors must be added through **Settings → Connectors**. Adding this hosted URL to `claude_desktop_config.json` does not configure a remote connector. ### Claude Code Run: ```bash theme={null} claude mcp add --transport http --scope user Bloom https://api.bloom.diy/mcp ``` Start Claude Code, enter `/mcp`, select **Bloom**, and follow the browser authentication flow. Verify the saved configuration with: ```bash theme={null} claude mcp get Bloom ``` Use `--scope project` instead of `--scope user` only if you intentionally want to share the server definition through the project's `.mcp.json`. Authentication remains personal to each user. ## Codex Run these commands once: ```bash theme={null} codex mcp add Bloom --url https://api.bloom.diy/mcp codex mcp login Bloom ``` Complete Bloom sign-in and consent in the browser, then start a new Codex task. The Codex CLI and desktop app use the same MCP configuration. Verify it with: ```bash theme={null} codex mcp get Bloom ``` If your organization manages Codex configuration centrally, ask an administrator to add the same URL as a Streamable HTTP MCP server. Each user still completes their own Bloom OAuth connection. ## Confirm the connection Open a new chat or task and ask: > Use Bloom's `whoami` tool to tell me which Bloom account is connected. Do not change anything. A working connection calls Bloom's `whoami` tool and identifies your Bloom account. Your client may ask you to approve the tool call. Bloom does not expose a `list_projects` MCP tool. Before allowing an edit, check the tool name and arguments shown by your client. Read-only tools are marked as read-only. Editing canvas content, deleting frames, and other writes can change project data. ## Disconnect or reconnect You can disconnect Bloom from your client's MCP or connector settings. To revoke the server-side session too, remove Bloom from your connected applications in Bloom account settings. The next tool call should require a new connection. If Bloom remains disconnected after you approve access: 1. Confirm the URL is exactly `https://api.bloom.diy/mcp`. 2. Remove any older Bloom MCP entry that uses a personal access token or `mcp-remote`. 3. Disconnect or clear Bloom authentication in the client, then connect again. 4. Restart the client or open a new chat so it reloads its MCP configuration. Never paste access tokens or authorization codes into chat, configuration files, support messages, or issue reports. # Deploying Your App Source: https://docs.bloom.diy/deploying-your-app Export your code and publish to the App Store and Google Play. Once you've built and tested your app in Bloom, you have two options for getting it into users' hands: 1. **Instant sharing** (covered in [Instant Sharing](/instant-sharing)) — Share immediately with links and QR codes 2. **App Store publishing** (this guide) — Deploy to official app stores for public distribution This guide covers **publishing to the iOS App Store and Google Play Store** for permanent, discoverable app listings. **Not sure which you need?** If you're testing, demoing, or building an internal tool, [instant sharing](/instant-sharing) is faster and easier. If you want public distribution, monetization, or app store credibility, follow this guide. ## Why publish to app stores? Users can find your app by searching app stores. You appear in categories, featured lists, and recommendations. Official app store listings build trust with users. Many people prefer downloading from stores they know. Sell your app, offer in-app purchases, or use subscription models through app store payment systems. Full push notification support (iOS requires App Store distribution for reliable push). Access to app store analytics, user reviews, and ratings to improve your product. Essential for businesses, brands, or apps serving large audiences. ## Requirements for publishing ### Plan requirements **Code export** is available on Starter plans and above. Export your full Expo + Convex project as a ZIP Deploy to any hosting platform Publish to app stores [View pricing →](/pricing-and-credits) **GitHub sync** is available on Premium plans and above. Two-way sync with GitHub Automatic code pushes Integrate with CI/CD pipelines Use GitHub Actions for automated builds [View pricing →](/pricing-and-credits) ### Developer accounts To publish to app stores, you'll need: **Cost:** \$99/year **Required for:** Publishing to the iOS App Store **Sign up:** [developer.apple.com/programs](https://developer.apple.com/programs/) **What you get:** * Ability to submit apps to App Store * Access to App Store Connect * TestFlight for beta testing * App analytics and sales reports * Certificate and provisioning profile management You can build and test iOS apps without this account using Bloom's instant sharing. You only need it when you're ready to publish officially. **Cost:** \$25 one-time fee **Required for:** Publishing to Google Play Store **Sign up:** [play.google.com/console](https://play.google.com/console/) **What you get:** * Ability to publish apps to Play Store * Access to Play Console * Internal testing and beta tracks * App analytics and user feedback * Revenue reports (for paid apps) Much cheaper than Apple's yearly fee—just a one-time \$25 payment and you can publish unlimited apps. ## Exporting your code ### Option 1: Download as ZIP (Starter+) In the top right corner of the editor, click the **Download Code** button. Download Code button

Bloom bundles your current project version and downloads it as a ZIP file. The export includes: * Full Expo project (frontend) * Complete Convex deployment (backend) * Configuration files * Package dependencies * Environment setup instructions Unzip the file on your computer. You'll see: ``` my-app/ ├── expo/ # Your frontend code ├── convex/ # Your backend functions ├── package.json # Dependencies ├── README.md # Setup instructions └── ... ``` Your exported code is a standard Expo + Convex project. You can run it locally, deploy it to your own infrastructure, or publish it to app stores. ### Option 2: GitHub Sync (Premium+) In the top right corner of the editor, click the **GitHub Sync** button.

Click **Create New Repository** to open GitHub directly. The repository must be empty for the initial sync to work correctly. Click **Install GitHub App** to install the Bloom GitHub App and grant it access to your repository. You can grant access to all repositories or only select repositories. Enter your repository name in the format `username/repository` or `organization/repository`, then click **Configure**. You can also click **Browse Available Repositories** to select from repositories you've already granted access to. With your code in GitHub, you can set up automated workflows: * **GitHub Actions** for automated builds * **Expo EAS** for app store submissions * **Automated testing** on every commit * **Deployment pipelines** for staging and production GitHub Sync is ideal for teams or developers who want version control and automated deployment workflows. ## Publishing to iOS App Store Before submitting, ensure you have: App name and description App icon (1024x1024px) Screenshots for required device sizes Privacy policy URL (if collecting user data) App category selection Age rating information 1. Log in to [App Store Connect](https://appstoreconnect.apple.com) 2. Click **My Apps** → **+** → **New App** 3. Fill in app information: * Platform: iOS * Name * Primary language * Bundle ID (must match your Expo app) * SKU (internal identifier) Your **Bundle ID** is in your Expo configuration. Find it in `app.json` or `app.config.js` in your exported code. Bloom apps are built with Expo, which means you'll use **Expo Application Services (EAS)** for building and submission. ```bash theme={null} npm install -g eas-cli ``` ```bash theme={null} eas login ``` ```bash theme={null} eas build:configure ``` This creates `eas.json` with build profiles. ```bash theme={null} eas build --platform ios ``` EAS builds your app in the cloud and provides a download link. Follow Expo's [App Store submission guide](https://docs.expo.dev/submit/ios/) for detailed instructions. Once your build completes: 1. Download the `.ipa` file from EAS 2. Upload to App Store Connect via Transporter or Xcode 3. Add screenshots, descriptions, and metadata 4. Submit for review Apple review typically takes 1-3 days but can be longer. Monitor your submission status in App Store Connect. Apple reviews your app for: * Compliance with App Store guidelines * Privacy policy requirements * Functionality and crashes * Accurate metadata If approved, your app goes live automatically (or on your scheduled release date). If rejected, you'll receive feedback and can resubmit after making changes. Expo's comprehensive guide to App Store submission ## Publishing to Google Play Store Before submitting, ensure you have: App name and short description (80 chars) Full description (4000 chars) App icon (512x512px) Feature graphic (1024x500px) Screenshots (at least 2 per device type) Privacy policy URL (if collecting user data) Content rating questionnaire completed 1. Log in to [Google Play Console](https://play.google.com/console) 2. Click **Create app** 3. Fill in basic information: * App name * Default language * App or game * Free or paid 4. Accept terms and create app ```bash theme={null} eas build:configure ``` ```bash theme={null} eas build --platform android ``` Choose **apk** for testing or **aab** (Android App Bundle) for Play Store submission. For Play Store, always use **aab** format—it's required and provides smaller download sizes. 1. In Play Console, go to **Production** → **Create new release** 2. Upload your `.aab` file from EAS 3. Add release notes 4. Review and roll out You can also use internal testing or closed testing tracks before going to production. Fill out all required fields in Play Console: * App details (name, description, category) * Graphics (icon, feature graphic, screenshots) * Categorization (app category, tags) * Contact details (email, website, privacy policy) * Content rating * Target audience and content Play Store requires more detailed content ratings than iOS. Complete the questionnaire carefully. Once all required fields are complete: 1. Click **Review release** 2. Check for any errors or warnings 3. Click **Start rollout to Production** Google's review is typically faster than Apple's (often within hours to 1 day). Expo's comprehensive guide to Play Store submission ## Managing your backend After publishing, your Convex backend continues to run and scale automatically. You can: Keep using Bloom's [Backend Dashboard](/backend-dashboard) to monitor health, view logs, and manage data. Your Convex deployment is accessible at the URL shown in your Backend Dashboard settings. Open in a new tab for full Convex dashboard access. Your Convex deployment URL remains the same after publishing. Your published app connects to the same backend you use in Bloom. ## Updating your published app ### For apps exported as ZIP: Continue editing your app in Bloom to add features, fix bugs, or update UI. Download a fresh ZIP export when you're ready to publish an update. * Update version number in `app.json` * Build with EAS: `eas build --platform ios|android` * Submit new build to app stores ### For apps with GitHub sync: Your GitHub repo updates as you work in Bloom. If you've set up GitHub Actions or automated builds, they run automatically on new commits. Automated pipelines can submit directly to app stores, or you can trigger manually. **Over-the-air updates:** With Expo's EAS Update, you can push JavaScript changes to users instantly without resubmitting to app stores. Native changes still require new builds. ## Common publishing questions * **Apple App Store:** 1-3 days on average (sometimes longer) * **Google Play Store:** Hours to 1 day typically First submissions often take longer as reviewers are more thorough. Both stores will provide reasons for rejection. Common issues: * Missing privacy policy * Crashes or bugs * Metadata that doesn't match functionality * Violations of content guidelines Fix the issues and resubmit. You can appeal if you believe the rejection is incorrect. **Native changes:** Yes, anything that modifies native code, dependencies, or app configuration requires a new build and submission. **JavaScript changes:** No. Use Expo's EAS Update to push JS changes instantly without rebuilding. Yes! Both platforms offer testing options: * **iOS:** Use TestFlight for beta testing * **Android:** Use internal testing or closed testing tracks You can also continue using Bloom's [**instant sharing**](/instant-sharing) for quick testing. After exporting: 1. Configure environment variables in your build profiles (EAS) 2. Keep sensitive keys in `.env` files (never commit to GitHub) 3. Use Expo's secure storage for production credentials Your Convex backend URL is automatically included in the build. * **Apple:** 30% commission on paid apps and in-app purchases (15% for small businesses earning under \$1M/year) * **Google:** 15% commission on first \$1M, then 30% after Free apps with no in-app purchases have no commissions. ## What's next? Track performance and health as users start using your published app. Debug issues and monitor user activity in production. Learn advanced build and deployment workflows with Expo. Understand how your backend scales and how to optimize for production. Contact Bloom support for assistance with app store submission and deployment. # Exporting Code Source: https://docs.bloom.diy/exporting-code Download your Bloom app as a ZIP file to run locally or host elsewhere. Export your Bloom app to get the complete source code as a ZIP file. Once exported, you can run it locally, deploy it to your own infrastructure, or continue development in your preferred IDE. Code export is available on **Starter plans and above**. [**View pricing →**](https://bloom.diy/pricing) ## Downloading Your Code Click the **Download as ZIP** button in your app's workspace to export the full codebase. The export includes everything you need to run your app independently: * Complete monorepo structure * Expo frontend (`apps/default/`) * Convex backend (`packages/backend/`) * All dependencies and configuration files * Environment variable template (`.env.example`) See [**App Structure**](/app-structure) for a detailed breakdown of what each file does. ## Running Locally After downloading, you can run your app on your own machine. ### Prerequisites Install these tools before getting started: Fast JavaScript runtime and package manager. Install with `curl -fsSL https://bun.sh/install | bash` Backend runtime for your Convex functions. Install with `bun add -g convex` ### Setup Steps Extract the ZIP file and open the folder in your terminal or IDE: ```bash theme={null} unzip your-app.zip cd your-app ``` Install all packages for the monorepo: ```bash theme={null} bun install ``` Copy the example environment file: ```bash theme={null} cp .env.example .env ``` Then fill in the required values: ```bash theme={null} CONVEX_DEPLOYMENT=your-deployment-name EXPO_PUBLIC_CONVEX_URL=https://your-deployment.convex.cloud EXPO_PUBLIC_CONVEX_SITE_URL=https://your-deployment.convex.site ``` You can find these values in your [**Convex dashboard**](https://dashboard.convex.dev) after creating a project. Run both the frontend and backend: ```bash theme={null} bun run dev ``` This starts: * **Expo dev server** for the mobile/web app * **Convex dev server** for the backend functions ## Setting Up Your Own Convex Backend If you want to run your app completely independently from Bloom, you'll need to create your own Convex project. Sign up at [**convex.dev**](https://convex.dev) if you don't have an account. From the Convex dashboard, create a new project. This gives you a fresh deployment URL. From your project directory, deploy the backend: ```bash theme={null} cd packages/backend bunx convex deploy ``` Follow the prompts to link your local project to your Convex deployment. Update your `.env` file with the new deployment details from your Convex dashboard. When using your own Convex deployment, you'll need to configure your own OAuth credentials for authentication. See the [**Convex Auth documentation**](https://docs.convex.dev/auth) for setup instructions. ## Export vs GitHub Sync Both options give you access to your code, but they serve different purposes. | Feature | Export (ZIP) | GitHub Sync | | --------------------- | ----------------------------------------- | --------------------------------- | | **Plan required** | Starter+ | Premium+ | | **One-time download** | Yes | No | | **Ongoing sync** | No | Yes | | **Bidirectional** | No | Yes | | **Best for** | Snapshots, archiving, independent hosting | Active development, collaboration | **Use ZIP export when you want to:** * Archive a version of your app * Move to fully self-hosted infrastructure * Share code with someone outside your team * Create a backup before major changes **Use GitHub Sync when you want to:** * Continue developing in Bloom and your IDE * Collaborate with a team using Git workflows * Maintain version history with commits * Set up CI/CD pipelines [**Learn more about GitHub Sync →**](/github-sync) ## What's Next? Understand how your exported code is organized Set up bidirectional sync for ongoing development # FAQ Source: https://docs.bloom.diy/faq Answers to frequently asked questions about Bloom. ## General Bloom is a full-stack app builder that lets you create cross-platform apps using natural language. Describe what you want to build, and Bloom generates a working app with a native UI, database, authentication, and real-time sync. No coding required. No. Bloom is designed for everyone, from complete beginners to experienced developers. You describe your app in plain language, and Bloom handles the technical implementation. If you do know how to code, you can export your project and continue development in your own environment. Every Bloom app runs on iOS, Android, and the web from a single codebase. You can build a mobile app, a web app, or both at the same time. The frontend is built with Expo (React Native), which compiles to native code on mobile devices and renders a full web experience in the browser. Yes. Your code is fully exportable and can be synced with GitHub. You own everything you build. If you want to continue development outside of Bloom, you can export your Expo + Convex project at any time. ## Building Apps Simple apps can be generated in minutes. More complex apps with multiple features might take a few hours of iteration. The time depends on the complexity of your idea and how much refinement you want. Bloom is great for SaaS products, consumer apps, marketplaces, internal tools, education platforms, and AI-powered apps. See [What You Can Build](/what-you-can-build) for examples and inspiration. Yes. Bloom supports integrations with AI models like GPT. You can build apps with chatbots, content generation, image analysis, and other AI capabilities using Bloom's [API connections](/api-connections). Use the chat interface to describe what you want to change. For example: "Add a dark mode toggle" or "Make the buttons larger." Bloom will update your app and show the changes in the live preview. Just tell Bloom what's wrong. Describe what you expected versus what happened, and Bloom will iterate on the design. You can refine your app as many times as needed. ## Backend and Data No. Every Bloom app automatically includes a Convex backend with a database, real-time sync, and file storage. Just describe what data your app needs to store, and Bloom handles the rest. Yes. Bloom uses Convex for the backend, which provides enterprise-grade security, automatic backups, and encryption. Authentication is handled through OAuth providers (Google, GitHub, Apple), so passwords are never stored in your app. Yes. The Convex backend is serverless and scales automatically. Whether you have 10 users or 10,000, your app's performance stays consistent without any configuration on your part. Yes. Convex provides real-time data sync out of the box. When data changes, all connected clients update instantly. This is great for chat apps, collaborative tools, live dashboards, and more. ## Sharing and Publishing Click the Share button to generate a link or QR code. Anyone with the link can try your app instantly. On iOS, apps open as native App Clips. On Android and web, they run as progressive web apps. See [Instant Sharing](/instant-sharing) for details. Yes. When your app is ready for a public launch, Bloom supports publishing to both the Apple App Store and Google Play Store. See [Deploying Your App](/deploying-your-app) for the process. Yes. Publishing to app stores requires an Apple Developer account ($99/year) for iOS and a Google Play Developer account ($25 one-time fee) for Android. These are set up directly with Apple and Google, not through Bloom. Custom domains are not currently supported for shared apps. Apps are shared via Bloom-generated links. If you need a custom domain, you can export your code and deploy it to your own hosting. ## Pricing and Plans Bloom access is currently rolling out gradually. Existing admitted users can continue building, while new accounts join the waitlist unless explicitly admitted. The Free plan has no recurring monthly credit allowance. Paid plans unlock additional features and included credits, but payment does not bypass admission. See [Pricing & Credits](/pricing-and-credits) for current options. You'll be notified when you're approaching your limits. You can upgrade your plan at any time to continue building. Your existing apps won't be affected. Yes. You can cancel your subscription at any time from your account settings. You'll retain access to your plan features until the end of your billing period. ## Technical Questions Bloom apps are built with **Expo** (React Native) for the frontend and **Convex** for the backend. This gives you native mobile performance, real-time data sync, and a serverless infrastructure that scales automatically. Yes. While Bloom provides auto-provisioned API keys for quick setup, you can add your own API keys for services like OpenAI, Stripe, and others. See [API Connections](/api-connections) for details. Yes. You can add push notifications to your app by describing the notification behavior you want. Bloom will configure the necessary infrastructure using Expo's notification system. Yes. Bloom supports integrations with many external APIs and services. You can connect payment processors, analytics tools, AI models, and more. See [Integrations](/integrations) for supported services. *** ## Still have questions? Ask questions and get help from the Bloom community. Reach out to the Bloom team directly. # Features Source: https://docs.bloom.diy/features Everything you need to build, test, and manage full-stack apps. Bloom includes everything you need to design, build, and manage full-stack apps in one environment. Your app's frontend and backend live in the same workspace, so you can move between building, testing, and managing without switching tools. ## Core Features Monitor queries, cache health, and performance in real time. Track frontend and backend activity in one unified stream. Built-in OAuth with Google, GitHub, Apple, and more. Connect external services with auto-provisioned or custom keys. Backend health metrics updated as your app runs. Share your app via link or QR code—no App Store required. ## Unified Workspace When you open an app in Bloom, you'll find everything in one place: your project files, preview, backend tools, and settings. Workspace Overview

You can switch seamlessly between building, running, and monitoring your app without leaving the workspace. ### Core Views **Explore your project structure** Browse and understand your generated Expo + Convex codebase. See how your frontend components connect to backend functions. **See changes instantly** Your app runs on the right side of the screen. Every change updates in real time—no manual refresh needed. Preview on web, iOS, and Android simultaneously Toggle between web and mobile preview to test both layouts Hot reload as you make changes Test user flows without deploying Preview switcher

Scan the QR code to preview your app natively on your phone while you build. **Access all tools in one place** The sidebar gives you quick access to: * **Backend Dashboard** — Performance metrics and health * **Logs** — Frontend and backend activity * **Authentication** — OAuth provider management * **API Connections** — External service integrations * **Settings** — Environment variables and configuration No context switching: everything you need to build, debug, and deploy is in the same interface. ### Why the unified workspace matters Go from idea to working feature in minutes, not hours. See frontend and backend issues in context, all in one view. Start building immediately—no local environment configuration needed. **The result:** You can go from "generate" to "test" to "deploy" without any local setup or external tools. ## What's next? Learn how to monitor your app's performance Debug your app with unified logging # GitHub Sync Source: https://docs.bloom.diy/github-sync Connect your Bloom app to GitHub for bidirectional code synchronization. GitHub Sync connects your Bloom app to a GitHub repository, enabling bidirectional synchronization. Changes you make in Bloom automatically push to GitHub, and changes pushed to GitHub sync back to Bloom. GitHub Sync is currently in **beta** and available on **Premium plans and above**. ## Setting Up GitHub Sync In the top right corner of the editor, click the **GitHub Sync** button.

Click **Create New Repository** to open GitHub directly. The repository must be empty for the initial sync to work correctly. Click **Install GitHub App** to install the Bloom GitHub App and grant it access to your repository. You can grant access to all repositories or only select repositories. Enter your repository name in the format `username/repository` or `organization/repository`, then click **Configure**. You can also click **Browse Available Repositories** to select from repositories you've already granted access to. Once connected, your app's code will sync to the repository automatically. ## How Sync Works GitHub Sync maintains bidirectional synchronization between Bloom and your repository. **Changes made in Bloom push to GitHub automatically.** When you generate new features or make any changes in Bloom, those changes are committed and pushed to your connected repository. * Each generation creates a new commit * Commits include descriptive messages * Your full commit history is preserved **Changes pushed to GitHub sync back to Bloom.** When you push commits to your repository (from your local IDE, GitHub's web editor, or any Git client), those changes automatically sync back to your Bloom app. * Pull the latest changes by refreshing your Bloom workspace * Merge conflicts are handled automatically when possible * You'll be notified if manual resolution is needed ## Use Cases Use VS Code, Cursor, or any editor you prefer. Push changes to GitHub and they'll appear in Bloom. Multiple team members can work on the same app using standard Git workflows. Full Git history lets you track changes, revert mistakes, and understand how your app evolved. Connect your repo to GitHub Actions or other CI/CD tools for automated testing and deployment. ## Working Locally Once your app is synced to GitHub, you can clone it and run it locally. ### Prerequisites * **Bun** (JavaScript runtime and package manager) * **Convex CLI** (for running the backend) ### Running Your App ```bash theme={null} git clone https://github.com/your-username/your-app.git cd your-app bun install ``` Copy the example environment file and fill in your Convex deployment details: ```bash theme={null} cp .env.example .env ``` You can find your Convex deployment URL in your [**Convex dashboard**](https://dashboard.convex.dev). ```bash theme={null} bun run dev ``` This starts both the Expo frontend and Convex backend. See [**App Structure**](/app-structure) to understand how your project files are organized. ## Requirements and Limitations GitHub Sync is available on **Premium plans and above** (\$50/month). [**View pricing →**](https://bloom.diy/pricing) * The repository must be **empty** when you first connect * You must have **write access** to the repository * The Bloom GitHub App must be installed and authorized GitHub Sync is currently in beta. You may encounter: * Occasional sync delays * Edge cases with complex merge conflicts Report any issues to [**support@bloom.diy**](mailto:support@bloom.diy) or in our [**Discord**](https://discord.com/invite/ZC3zgARtUY). ## What's Next? Understand how your synced codebase is organized Monitor your app's performance and database # Glossary Source: https://docs.bloom.diy/glossary Key terms and concepts used throughout Bloom. ## A A method of comparing two versions of a screen or feature to determine which performs better based on user behavior. Useful for optimizing conversion rates and user engagement. The portion of a screen visible to users without scrolling. Crucial for capturing attention and conveying essential information immediately. A collapsible UI component that expands or contracts to reveal or hide content dynamically. Useful for FAQs, settings, and organizing dense information. A way for different services to communicate. APIs define what kind of information you can get or send between systems. Bloom uses APIs to connect your app to external services. See [API Connections](/api-connections). A credential that authenticates your app when connecting to external services like OpenAI, Stripe, or analytics platforms. Bloom provides auto-provisioned keys for quick setup, or you can use your own. See [API Connections](/api-connections). A lightweight version of an iOS app that users can access instantly without downloading from the App Store. Bloom uses App Clips for [instant sharing](/instant-sharing), allowing testers to try your app by scanning a QR code. The process of verifying a user's identity. Bloom uses OAuth to let users sign in with existing accounts from Google, GitHub, or Apple. See [Authentication](/authentication). A text input that dynamically suggests matching results as users type, improving usability in search fields and forms. ## B The server-side part of your app that handles data storage, business logic, and integrations. In Bloom, your backend is powered by Convex and is automatically configured. See [Backend Dashboard](/backend-dashboard). A small visual indicator, often used on icons or buttons, to show notifications, counts, or status updates. API keys and OAuth credentials that Bloom provides and maintains for you. These let you get started immediately without creating accounts with external providers. You can switch to your own credentials at any time. A navigational aid displaying the user's current location within an app's hierarchy, often represented as a horizontal list of links. A clickable element that initiates an action or event, such as submitting a form, navigating to a screen, or triggering a feature. ## C An interactive box that users can check or uncheck to select or deselect an option, allowing multiple selections within a set. The percentage of users who complete a desired action, such as signing up, making a purchase, or completing onboarding. The backend platform that powers every Bloom app. Convex provides a real-time database, serverless functions, file storage, and scheduled tasks. Learn more at [docs.convex.dev](https://docs.convex.dev). The ability to run on multiple operating systems from a single codebase. Bloom apps are cross-platform by default, running on iOS, Android, and the web. An acronym for Create, Read, Update, Delete, the four basic operations for managing data. When you describe features to Bloom, it implements the appropriate CRUD operations automatically. A prompt, often in the form of a button or link, encouraging users to perform a specific action, such as "Sign Up," "Get Started," or "Learn More." ## D Bloom's recommended approach to prompting: **D**escribe the user, **N**arrate the journey, and set the **A**tmosphere. This framework helps you communicate your vision effectively. See [Prompting Best Practices](/prompting-best-practices). The main Bloom interface where you manage your apps, view usage, and access settings. Also refers to the Backend Dashboard for monitoring your Convex deployment. A UI element that lets users select a date from a calendar instead of manually typing it. The process of making your app available to users. In Bloom, this can mean generating a share link (instant) or publishing to app stores (requires review). A window that appears in front of the main content to capture user attention, often requiring an action before returning to the primary interface. A panel that slides in from the side of the screen to display navigation options or settings without disrupting the main content. A list of options that appears when a user taps a button or field, commonly used for navigation or selection. ## E Configuration values stored securely outside your code, typically used for API keys and secrets. Bloom lets you manage environment variables directly in the workspace. See [API Connections](/api-connections). The React Native framework that powers Bloom's frontend. Expo enables cross-platform development with native performance and features like hot reload and over-the-air updates. Learn more at [docs.expo.dev](https://docs.expo.dev). The ability to download your Bloom project as code. You can export your Expo + Convex codebase to continue development locally or sync with GitHub. ## F A small icon displayed in the browser tab, bookmarks, and search results, typically representing your app or brand. The bottom section of a screen, commonly containing supplementary information such as contact details, navigation links, and legal disclaimers. A structured collection of input fields allowing users to submit data, such as contact information, settings, or search queries. The user-facing part of your app, including screens, buttons, forms, and navigation. In Bloom, your frontend is built with Expo (React Native). An app that includes both frontend (user interface) and backend (server, database, logic). Every Bloom app is full-stack by default. A piece of backend logic that runs on the server. In Convex, functions handle database queries, mutations, and scheduled tasks. You can view your functions in the [Backend Dashboard](/backend-dashboard). ## G The process of Bloom creating or updating your app based on your prompts. Each time you describe a change, Bloom generates the necessary code and configuration. A web-based platform for version control and collaborative software development using Git. Bloom projects can be synced with GitHub for code export and collaboration. A gradual transition between two or more colors in design, often used for backgrounds, buttons, or decorative elements. ## H A development feature that updates your app instantly when changes are made, without losing the current state. Bloom's preview uses hot reload so you see changes in real time. ## I Bloom's feature that lets you share your app immediately via link or QR code, without app store approval. See [Instant Sharing](/instant-sharing). A connection between your app and an external service, like a payment processor, analytics tool, or AI model. See [Integrations](/integrations). ## L The real-time view of your app in the Bloom workspace. Changes you make appear in the preview immediately, letting you test as you build. A visual indicator that represents a process in progress, such as loading a screen or submitting a form. Records of events, errors, and activity in your app. Bloom provides unified logs for both frontend and backend. See [Logs](/logs). ## M A Convex function that modifies data in the database (create, update, or delete operations). Mutations are automatically generated when you describe data changes to Bloom. Minimum Viable Product. The simplest version of your app that delivers core value. Bloom is ideal for building MVPs quickly to test ideas with real users. ## O An authentication standard that lets users sign in using existing accounts (like Google or GitHub) without sharing their passwords with your app. Bloom uses OAuth for all authentication. A pattern where the interface updates immediately before the server confirms the change, making the app feel faster. Bloom implements optimistic updates automatically for a responsive user experience. ## N A horizontal or vertical menu providing links to essential sections of an app for easy navigation. Often appears at the top or bottom of mobile screens. ## P A method of dividing content into multiple pages, commonly used for long lists or search results to improve performance and user experience. A fictional representation of a target user, based on research, to guide design and development decisions. Useful when describing users to Bloom. A transient overlay that presents additional information or options related to a specific UI element, typically appearing upon user interaction. A horizontal bar that indicates the completion percentage of a task or process. A web app that can be installed on a device and used like a native app. On Android, Bloom apps shared via link run as PWAs. The natural language description you give Bloom to create or modify your app. Effective prompts describe the user, their journey, and the desired atmosphere. ## Q A Convex function that reads data from the database. Queries are reactive in Convex, meaning your UI updates automatically when the underlying data changes. A scannable code that links to your shared app. Users can scan the QR code with their phone camera to open your app instantly. ## R A set of related radio buttons permitting users to select only one option from multiple choices. A framework for building native mobile apps using JavaScript and React. Expo (which Bloom uses) is built on top of React Native. The automatic synchronization of data across all connected devices. When data changes in Convex, all users see the update instantly without refreshing. The process of restructuring existing code without changing its external behavior to improve readability, maintainability, or performance. An approach to design ensuring that content adapts seamlessly across various device sizes and orientations, providing an optimal user experience. The percentage of users who continue using your app over time. A key metric for measuring product success. ## S The structure of your database, defining what tables exist and what fields they contain. Bloom creates schemas automatically based on your descriptions. A cloud computing model where the provider manages servers automatically. Convex is serverless, meaning your backend scales without any infrastructure management. A placeholder UI that mimics the layout of the final content while waiting for it to load, improving perceived performance. A control that allows users to set a value within a range by sliding a handle along a track. A component used for multi-step processes, showing users their current step and guiding them through completion. A service for storing and managing files such as images, videos, and documents. Convex includes built-in file storage for your Bloom apps. A toggle control enabling users to switch between two states, such as on or off, often resembling a physical switch. ## T A component that organizes content into separate views within a single interface, allowing users to switch between sections without navigating away. A basic UI element where users can enter text, such as in search bars, login forms, or comments. A cohesive set of design choices, including colors, fonts, and layouts, that define the overall aesthetic and user experience of an app. A brief, non-intrusive notification that appears temporarily to inform users of an action's outcome or provide simple feedback. A small pop-up box that provides additional information when hovering over or focusing on an element. A security measure that requires users to provide two forms of identification before accessing an account. ## U The series of steps a user takes to achieve a specific goal within your app. Understanding user journeys helps you design better experiences and write more effective prompts. A short, simple description of a feature or requirement written from the perspective of an end user. Example: "As a user, I want to save my progress so I can continue later." ## V A style of AI-assisted development where you describe the feel and experience you want rather than technical specifications. Bloom is designed for vibe coding. ## W An event-driven HTTP callback that notifies external applications when specific actions occur in your app. The main Bloom interface for building your app, including the chat, code view, preview, and backend tools. Everything you need is in one place. *** ## Missing a term? Let us know if there's a term you'd like us to add to the glossary. # Instant Sharing Source: https://docs.bloom.diy/instant-sharing Share your app instantly with a link or QR code—no App Store required. **Instant Sharing** lets you share your app with others immediately, without waiting for App Store approval or going through complex deployment processes. Anyone with your share link can try your app on their device right away. Instant sharing on mobile

## Why instant sharing matters Traditional app distribution requires: * Submitting to app stores (days or weeks of review) * Managing certificates and provisioning profiles * Separate builds for iOS and Android * Users downloading and installing from stores **With Bloom's instant sharing:** Generate a link and share it in seconds—no waiting for approval. Get feedback from testers, clients, or team members before publishing. On iOS, apps run as native App Clips. On other platforms, they run as progressive web apps. Changes you make in Bloom are reflected immediately in shared links. ## How to share your app ### Generate a share link In the top toolbar of your Bloom workspace, click the **Share** button. Share button

A modal appears with a shareable URL for your app. Share modal

Click the **copy icon** to copy the link to your clipboard. Send the link to anyone via: * Text message or iMessage * Email * Slack, Discord, or other messaging apps * Social media * Embed in documentation or demos When someone opens your link, they'll see your app's landing page with options to preview it on their device. App share preview

**Your app link is public** by default—anyone with the link can access your app. If your app includes authentication, users will need to sign in to access protected features. ## Preview on device For the best testing experience, users can preview your app natively on their device: ### Platform options **App Clip Preview** On iOS, Bloom uses **App Clips**—a native iOS feature that lets users run apps instantly without installation. Users open their iPhone camera and point it at the QR code displayed in the preview modal. iOS shows a notification banner to open the App Clip. The app runs natively on their iPhone—full performance, native UI, and complete functionality. Runs as a native iOS app No download or installation required Full access to iOS features Seamless user experience **Optional: Download Bloom app** If users experience any issues with the App Clip, they can download the full Bloom app from the App Store for the most reliable experience. **Progressive Web App** On Android, shared apps run as progressive web apps (PWAs) in the browser. Users can scan the QR code with their camera app or tap the share link directly. The app loads in their default mobile browser (Chrome, Firefox, etc.) Users can add the app to their home screen for quick access—it will behave like a native app. Works in any modern browser Can be added to home screen Offline capabilities (if configured) No separate download needed **Browser Preview** On desktop or any device with a web browser, apps open directly in the browser. Users simply click the URL you shared. The app runs immediately in their web browser—no installation or setup. Full functionality available, optimized for web viewing. Works on any device with a browser Great for desktop testing Easy to embed in presentations or demos Responsive design adapts to screen size ## Common use cases Share your app link in Slack or email so your team can test on their devices immediately: * Designers can verify UI on real devices * Product managers can test flows and features * Developers can reproduce bugs in their environment * No need to set up development environments Since shared apps update live, your team always sees the latest version without needing new links. Show clients your work in progress without complicated setup: 1. Share the landing page URL in your meeting invite 2. During the demo, have the client scan the QR code 3. They can try the app on their own device in real-time 4. Get immediate feedback while you're together No installation barriers Works on client's preferred device Professional presentation Recruit testers and send them your share link: * Get feedback from real users before launching * Test across different devices and platforms * No TestFlight enrollment or Android beta setup * Users don't need Bloom accounts Combine with authentication to track which testers are using which features. Share early-stage ideas with stakeholders: * Validate concepts before building everything * Get buy-in from leadership or investors * Show progress to keep stakeholders engaged * Iterate based on feedback quickly Perfect for showing your app at events: 1. Display the QR code on a screen or printed material 2. Attendees scan with their phones 3. They experience your app instantly 4. No need for demo devices or complicated setups Create a short URL or branded link for easier verbal sharing at events. ## Understanding App Clips (iOS) **App Clips** are Apple's technology for instant app experiences on iOS. ### How App Clips work Your share link includes an App Clip identifier. The system shows a banner notification to open the app. A lightweight version of your app (under 10 MB) downloads instantly. The app runs with full native performance—indistinguishable from an installed app. iOS keeps the App Clip for a short time, so users can return to it easily. ### Benefits of App Clips Runs as a native iOS app, not a web view—full speed and responsiveness. Can use device features like camera, location, notifications (with permission). Feels exactly like using a regular app—users don't notice the difference. Takes up minimal space and is automatically cleaned up by iOS. **App Clips vs. full app:** If users love your App Clip, they can choose to download the full version from the App Store (if published) for a permanent installation. ## Updating shared apps One of the biggest advantages of instant sharing: **changes are live immediately**. Edit your app's UI, add features, fix bugs, or update content. Bloom updates your app in real-time (no manual deployment needed). Anyone with your share link sees the updated version instantly. The same share link works for the entire lifetime of your app. **This means:** Send one link at the start of a project, and everyone always has access to the latest version. Be careful with breaking changes! If users are actively testing, major updates might surprise them. Consider communicating updates in advance. ## Sharing vs. publishing **Best for:** * Testing and feedback * Internal team use * Client demos * Beta testing * Prototypes and MVPs **Characteristics:** * Instant—no approval process * Link-based access * Updates automatically * No app store listing * Limited to users with the link **Best for:** * Public launch * Monetization * Broad distribution * App Store discoverability * Official release **Characteristics:** * Requires app store review * Listed publicly in stores * More credibility with users * Access to app store features (ratings, search, etc.) * More control over versioning Ready to publish to app stores? Learn how to deploy your app. ## What's next? Ready to publish? Learn how to deploy your app to iOS and Android stores. Track how users interact with your shared app and catch issues. Monitor performance and health as users test your app. Add sign-in to control access to features in your shared app. # Welcome to Bloom Source: https://docs.bloom.diy/introduction Build and ship cross-platform apps with scalable database and auth built in, no coding required.