> For the complete documentation index, see [llms.txt](https://docs.buzzy.buzz/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.buzzy.buzz/the-ultimate-guide-for-vibe-coding-an-application-with-ai/building-examples.md). # Building Examples Building examples should show the way Buzzy apps are actually built now: start from a semantic app definition, use Builder MCP or Buzzy AI to shape it, add functions and code widgets where the app needs custom behavior, then test and review the result before release. These examples are not a gallery of toy prompts. They are reusable patterns for building apps that teams can own. The key ownership point is simple: AI can help write or modify the app, but the maintainable asset should be the Buzzy app definition and the governed runtime around it. Builder MCP is useful because it works with that definition directly instead of leaving the team with another large generated codebase to secure, patch, test, and explain. ## Recommended Examples ### [Short Stay to Care Connect](/the-ultimate-guide-for-vibe-coding-an-application-with-ai/building-examples/short-stay-template-adaptation.md) **Use this when:** you have a working template or app pattern that is close to the new app you want. This is the most important example for Builder MCP. A short-stay rental marketplace already has search, listings, providers, availability, bookings, pricing, admin review, and role-based access. Builder MCP can inspect that app definition and adapt it into a new domain such as care booking, where the same broad workflow has different data, wording, risk, and privacy requirements. This is the pattern behind the [Care Connect tutorial](/the-building-blocks/mcp/buzzy-builder-mcp/tutorial-carer-app-from-a-template.md). ### [Secure and Compliant Workflow App](/the-ultimate-guide-for-vibe-coding-an-application-with-ai/building-examples/secure-compliance-workflow.md) **Use this when:** the app handles sensitive records, review queues, role-based access, field-level privacy, or audit evidence. This example is still a strong reference. It shows how to combine row access, Field view/edit, Private Data, teams, and audit trails. Use it for legal review, compliance review, HR case management, clinical triage, finance approvals, vendor onboarding, and similar workflows. ### [Builder MCP Change and Extension Workflow](/the-ultimate-guide-for-vibe-coding-an-application-with-ai/building-examples/builder-mcp-change-workflows.md) **Use this when:** an app already exists and you need to change it safely. Use Builder MCP to inspect the current brief, flows, data model, blueprint, screens, functions, and code widgets before making changes. This is the right pattern for adding a custom dashboard, generating a code widget, creating a Buzzy Function, wiring an external API, or fixing a screen without losing the structure of the app. ### [External API Integration](/the-ultimate-guide-for-vibe-coding-an-application-with-ai/building-examples/external-api-integration.md) **Use this when:** the app needs data or actions from another service. This example covers Buzzy Functions, Constants, external HTTP APIs, secure API key storage, and error handling. It remains useful, but for production work you should now combine it with Builder MCP review, Release Tests, and Security Review. ### [AI-Powered App Features](/the-ultimate-guide-for-vibe-coding-an-application-with-ai/building-examples/ai-powered-app.md) **Use this when:** you want AI inside the app, not just AI helping build the app. This example now focuses on adding AI features through Buzzy Functions and, where needed, code widgets. It covers safe prompting, constants, function inputs/outputs, cost controls, review UX, and testing. ### [Hello World App](/the-ultimate-guide-for-vibe-coding-an-application-with-ai/building-examples/hello-world.md) **Use this when:** someone is new to Buzzy and needs a simple first build. This is still useful as a beginner exercise, but it is not the main path for production-minded app creation. For current Builder MCP practice, start with the template adaptation or change-workflow examples above. ## Coming Next ### [Buzzy Agents](/the-ultimate-guide-for-vibe-coding-an-application-with-ai/building-examples/buzzy-agents-placeholder.md) Buzzy Agents will bring app-side agent workflows into Buzzy. Keep this separate from Builder MCP: Builder MCP helps create and edit apps; Buzzy Agents will run inside app experiences and workflows. ### [Universal Data Connector](/the-ultimate-guide-for-vibe-coding-an-application-with-ai/building-examples/universal-data-connector-placeholder.md) The Universal Data Connector will be the pattern for connecting external data sources into Buzzy app workflows. Until the dedicated capability is documented, use Buzzy Functions, REST API, and Custom MCP depending on whether the app needs server-side integration, external programmatic access, or assistant-facing tools. ## How to Choose an Example | Goal | Start with | | ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Adapt a proven app pattern into a new domain | [Short Stay to Care Connect](/the-ultimate-guide-for-vibe-coding-an-application-with-ai/building-examples/short-stay-template-adaptation.md) | | Build a sensitive review or approval workflow | [Secure and Compliant Workflow App](/the-ultimate-guide-for-vibe-coding-an-application-with-ai/building-examples/secure-compliance-workflow.md) | | Modify an existing app safely with an AI coding agent | [Builder MCP Change and Extension Workflow](/the-ultimate-guide-for-vibe-coding-an-application-with-ai/building-examples/builder-mcp-change-workflows.md) | | Add a custom UI, chart, map, or advanced interaction | [Builder MCP Change and Extension Workflow](/the-ultimate-guide-for-vibe-coding-an-application-with-ai/building-examples/builder-mcp-change-workflows.md), then [Code Widget Examples](/the-building-blocks/code-widget-custom-code/examples.md) | | Call an external service | [External API Integration](/the-ultimate-guide-for-vibe-coding-an-application-with-ai/building-examples/external-api-integration.md) | | Add AI behavior inside the app | [AI-Powered App Features](/the-ultimate-guide-for-vibe-coding-an-application-with-ai/building-examples/ai-powered-app.md) | | Learn basic Buzzy app structure | [Hello World App](/the-ultimate-guide-for-vibe-coding-an-application-with-ai/building-examples/hello-world.md) | ## Standard Build Loop For serious apps, use this loop: 1. Start from the closest useful template or app pattern. 2. Review the brief and make the product intent explicit. 3. Review flows, data model, security posture, and blueprint before screen work. 4. Use Builder MCP for structural changes and app-aware edits. 5. Add Buzzy Functions for server-side logic, external APIs, webhooks, and AI calls. 6. Add code widgets only when standard Buzzy UI cannot express the interaction. 7. Generate sample data early so screens can be reviewed realistically. 8. Run Release Tests for key paths. 9. Run Security Review when the app exposes sensitive data, roles, APIs, MCP tools, or external integrations. ## What Good Examples Should Prove A good Buzzy example should show: * the app pattern and why it fits Buzzy * the brief, roles, data, and flow decisions * what Builder MCP changes and what Buzzy runtime owns * where functions, constants, code widgets, or APIs are used * how the app is tested * how privacy, permissions, and release risk are reviewed