# Checkpoints Source: https://docs.theopenbuilder.com/best-practices/checkpoints Best practices for using checkpoints in your workflow. ## Checkpoints *Best practices for using checkpoints.* # Context Management Source: https://docs.theopenbuilder.com/best-practices/context-management Best practices for managing context in your project. ## Context Management *Best practices for managing context.* # Security Source: https://docs.theopenbuilder.com/best-practices/security Best practices for keeping your project secure. ## Security *Best practices for security.* # Task Breakdown Source: https://docs.theopenbuilder.com/best-practices/task-breakdown How to break down tasks for better productivity. ## Task Breakdown *Best practices for breaking down tasks.* # Quick Start Source: https://docs.theopenbuilder.com/get-started/quick-start Get started with OpenBuilder in 5 minutes This quickstart guide will walk you through building a full stack app using OpenBuilder's core features. By the end, you will be familiar with the end to end process from planning to deployment. Open OpenBuilder directly in your browser — no installation required. As an example, we will use the following app idea: > ``` > Build a notes app with user authentication > ``` ## 1. Plan your app * Enter app idea * Give app name * Review the plan * **Accept**, **Reject**, or **Chat** to modify the plan If you alraedy have a detailed PRD, you can copy and paste the PRD into the initial prompt and OpenBuilder will break it down to logical steps. ## 2. Build the first screen * Approve agent's context selection * Wait for code changes to finish * Click **Open App** to inspect the app inside OpenBuilder Browser * **Chat** to make adjustment or **Start Next Step** The app is still a mock up at this stage, core functionalities are likely not implemented yet and will be added during later steps. ## 3. Connect Supabase * Connect to your Supabase * Approve access to organization * Return to OpenBuilder and **create a new project**. * Approve Supabase changes Currently we only integrate with new Supabase projects. If you'd like to use your existing Supabase project, let us know here and you will be the first to know when it becomes available. ## 4. Deploy your app * Click **Deploy** -> **Deploy App** in the OpenBuilder menu bar * Wait for deployment to complete * Inspect the deployed URL Support for custom domain is coming soon. ## Next Steps Fix errors the right way. Integrate with 3rd party APIs such as OpenAI, Stripe (coming soon), etc. ## Common Problems * Make sure you still have available project slots in your Supabase organization. If you are on a free Supabase plan, you will have 2 project slots. * If you already have 2 or more projects, you can pause one of the projects to make room for new projects. If all fails, try creating a New Organization in Supabase on a free tier, and click "Connect to Supabase" again from within OpenBuilder to initiate the access authorization. Make sure all linter errors and runtime errors are fixed before trying to deploy. After fixing any remaining errors, initiate deployment again. Use OpenBuilder's debugging tools: * For compile/lint errors: Use the automatic quick fix prompts * For runtime errors: Click "Fix Error" in the Flow Diagram * For UI issues: Use Built-in Screenshot, Attach Image, or Element Selector * For unexpected behaviors: Use the Interactive Debugger when prompted Check the [Debugging Guide](../guides/debugging) for detailed instructions. # Build the Front End Source: https://docs.theopenbuilder.com/guides/build-the-front-end Learn how to build the front end of your application. * Approve agent's context selection * Wait for code changes to finish * Click **Open App** to inspect the app inside OpenBuilder Browser * **Chat** to make adjustment or **Start Next Step** # Connect APIs Source: https://docs.theopenbuilder.com/guides/connect-APIs Make your app work with 3rd party APIs. 3rd party APIs gives your app the additional capablities, for example you may want to: * connect OpenAI API to build a chatbot. * connect with Weather API to build a weather app. * connect with Stripe to process payment. OpenBuilder has **native integration** with many 3rd party APIs, this means that: ✅ easy to integrate - simply add the API keys ✅ already has access to the correct documentation \[images/guides/connect-api.gif] All API keys are stored locally and not shared with anyone elese. OpenBuilder Agent will always store them server side so they are not exposed to the public. ## Native Integrations Authentication, Database, realtime, etc. Everything payment related - coming soon! ## Popular Integrations ## Other Integrations # Connect Supabase Source: https://docs.theopenbuilder.com/guides/connect-supabase How to connect your project to Supabase. * Connect to your Supabase * Approve access to organization * Return to OpenBuilder and **create a new project**. * Approve Supabase changes Currently we only integrate with new Supabase projects. If you'd like to use your existing Supabase project, let us know here and you will be the first to know when it becomes available. # Debugging Source: https://docs.theopenbuilder.com/guides/debugging Techniques and tools for debugging your application. The key to AI debugging is: * knowing which type of error you have * choosing the right tool/technique to fix it * using AI debugging best practices ## General Best Practices * use advanced models for bug fixing * be specific when prompting the AI (use images, what's working, what's not working, etc) * use checkpoints to create "backups" of your codebase * if you notice the AI is getting stuck, revert to a previous checkpoint and try different approach For more on debugging workflow, check out our comprehensive debugging flow chart. ## Fix Lint/Compile Errors Lint/compile errors happen before the execution of your app. It can be a failed type check, a formatting issue, an unused import, etc. You can easily spot lint/compile errors because OpenBuilder runs lint and build checks after each edit, catch errors, and display them either in the **Chat Panel** or in the **App Preview**. Compile Error Screenshot You will be prompted with a **automatic quick fix**. You can either Accept or Reject. Some lint errors do not break your app's functionality. However, we recommend you try to fix them as they come up to prevent accumulation of errors. ## Fix Runtime Errors Runtime errors happens during the execution of your app. It can be an unhandled exception, a failed network request, etc. You can find them inside server side or client side console logs. To make things easier, OpenBuilder constantly checks for runtime errors in your logs and display them in the **Flow Diagram**.