### Development Setup and Bootstrapping Source: https://github.com/builderio/agent-native/blob/main/packages/core/docs/content/multi-app-workspace.md Commands to set up your environment and boot the Agent Native workspace. This includes copying environment variables, installing dependencies, and starting the development server. ```bash cd my-company-platform cp .env.example .env # fill in ANTHROPIC_API_KEY, BETTER_AUTH_SECRET, ... pnpm install pnpm dev # opens Dispatch; other apps start on first visit ``` -------------------------------- ### Quick Start Project Setup Source: https://github.com/builderio/agent-native/blob/main/packages/core/docs/content/template-brain.md Use this command to create a new Brain project locally. It sets up a standalone instance with the brain template. After creation, navigate into the project directory, install dependencies, and start the development server. ```bash npx @agent-native/core@latest create my-brain --standalone --template brain cd my-brain pnpm install pnpm dev ``` -------------------------------- ### Install and Run Video Studio Source: https://github.com/builderio/agent-native/blob/main/templates/videos/README.md Installs project dependencies and starts the development server for the Video Studio. Access the studio at http://localhost:8080. ```bash pnpm install pnpm run dev ``` -------------------------------- ### Local Development Setup Source: https://github.com/builderio/agent-native/blob/main/packages/core/docs/content/template-analytics.md Commands to install dependencies and start the local development server for the Analytics app. ```bash cd my-analytics pnpm install pnpm dev ``` -------------------------------- ### Install Dependencies and Start Development Server Source: https://github.com/builderio/agent-native/blob/main/templates/clips/desktop/README.md Install dependencies and start the Tauri development server for the desktop application. Ensure you are in the desktop workspace directory. ```bash cd templates/clips/desktop pnpm install pnpm tauri dev ``` -------------------------------- ### Install Dependencies and Start Development Gateway Source: https://github.com/builderio/agent-native/blob/main/packages/core/src/templates/workspace-root/README.md Run these commands to install dependencies, set up environment variables, repair workspace organization identity, and start the development gateway. ```bash pnpm install cp .env.example .env # fill in DATABASE_URL, BETTER_AUTH_SECRET, and an LLM provider key pnpm repair:workspace-org -- --name "Example Co" --domain example.com --owner-email owner@example.com pnpm dev # starts the workspace gateway; opens Dispatch when present ``` -------------------------------- ### Quick Start for Plans Template Source: https://github.com/builderio/agent-native/blob/main/packages/core/docs/content/template-plan.md Steps to create, install, and run a new Plans project locally. This is for developers forking or self-hosting the template. ```bash npx @agent-native/core@latest create my-plans --standalone --template plan cd my-plans pnpm install pnpm dev ``` -------------------------------- ### Install Dependencies and Run Development Server Source: https://github.com/builderio/agent-native/blob/main/packages/core/docs/content/multi-app-workspace.md After adding a new app, install the workspace dependencies and start the development server. This ensures all packages are correctly linked and the workspace is ready for development. ```bash pnpm install # at the workspace root pnpm dev ``` -------------------------------- ### Install Dependencies and Run Locally Source: https://github.com/builderio/agent-native/blob/main/packages/core/docs/content/template-dispatch.md From the workspace root, run these commands to install project dependencies and start the development server for local testing. ```bash pnpm install pnpm dev ``` -------------------------------- ### List All Resources via Action API Source: https://github.com/builderio/agent-native/blob/main/packages/core/docs/content/workspace.md Use this command to list all available resources. No specific setup is required beyond having the agent-native CLI installed. ```bash pnpm action resource-list --scope all ``` -------------------------------- ### Product Architecture Plan Example Source: https://github.com/builderio/agent-native/blob/main/skills/visual-plans/references/exemplar.md Shows the initial structure of a broad product-architecture plan, starting with a plain recommendation and a concrete app state before abstracting into mechanics and separating core components. ```html

Recommendation: Adopt New Feature Flag System

Current App State

Users see...

System Mechanics

Data Flow Diagram
``` -------------------------------- ### Install Visual Plan Skill for Specific Client Source: https://github.com/builderio/agent-native/blob/main/packages/core/docs/content/template-plan.md When you want to narrow the setup to a specific host, use the `--client` flag with the desired client name, such as `codex` or `claude-code`. ```bash npx @agent-native/core@latest skills add visual-plan --client codex ``` -------------------------------- ### Example Script Action Source: https://github.com/builderio/agent-native/blob/main/packages/core/src/templates/default/AGENTS.md The `hello` action serves as an example script. It can optionally take a name argument. ```bash pnpm action hello ``` ```bash pnpm action hello --name ``` -------------------------------- ### Setup PR Visual Recap Source: https://github.com/builderio/agent-native/blob/main/templates/plan/README.md Run the setup helper for the PR Visual Recap to configure GitHub Actions secrets and variables. This command also prints any missing manual setup steps. ```sh npx @agent-native/core@latest recap setup ``` -------------------------------- ### Install Dependencies Source: https://github.com/builderio/agent-native/blob/main/packages/core/docs/content/getting-started.md After creating your app, navigate to the project directory and install the necessary dependencies using pnpm. ```bash cd my-agent pnpm install ``` -------------------------------- ### Create and Run a New Slides App Source: https://github.com/builderio/agent-native/blob/main/packages/core/docs/content/template-slides.md Use the CLI to create a new standalone Slides application, install dependencies, and start the development server. ```bash npx @agent-native/core@latest create my-slides --standalone --template slides cd my-slides pnpm install pnpm dev ``` -------------------------------- ### Install Dependencies and Run Action Source: https://github.com/builderio/agent-native/blob/main/packages/core/src/templates/headless/DEVELOPING.md Install project dependencies and then execute a specific agent action with provided arguments. ```bash pnpm install pnpm action hello '{"name":"Builder"}' ``` -------------------------------- ### Install Skill in Local Files Mode Source: https://github.com/builderio/agent-native/blob/main/packages/skills/README.md Installs the 'visual-plan' skill using the local-files mode. ```bash npx @agent-native/skills@latest add --skill visual-plan --mode local-files ``` -------------------------------- ### Install Default Skills Source: https://github.com/builderio/agent-native/blob/main/packages/skills/README.md Run this command to install the default set of skills. ```bash npx @agent-native/skills@latest add ``` -------------------------------- ### Install Skill for All Clients with GitHub Action Source: https://github.com/builderio/agent-native/blob/main/packages/skills/README.md Installs the 'visual-recap' skill for all clients and includes a GitHub Action. ```bash npx @agent-native/skills@latest add --skill visual-recap --client all --with-github-action ``` -------------------------------- ### Install Collaboration Packages Source: https://github.com/builderio/agent-native/blob/main/packages/core/docs/content/real-time-collaboration.md Install the necessary packages for real-time collaboration with TipTap and Yjs. ```bash pnpm add @tiptap/extension-collaboration @tiptap/extension-collaboration-caret @tiptap/y-tiptap @tiptap/core ``` -------------------------------- ### Start Development Runner Source: https://github.com/builderio/agent-native/blob/main/packages/desktop-app/README.md Use the `dev-electron.ts` script to start the development server, specifying the apps to run. ```bash node scripts/dev-electron.ts --apps calendar,content,notes ``` -------------------------------- ### Install and Run Brain Source: https://github.com/builderio/agent-native/blob/main/templates/brain/README.md Installs project dependencies and starts the Brain development server. Ensure all dependencies are installed before running the development server. ```bash pnpm install pnpm --filter brain dev ``` -------------------------------- ### MCP Client Status Response Example Source: https://github.com/builderio/agent-native/blob/main/packages/core/docs/content/mcp-clients.md An example JSON response for the GET /_agent-native/mcp/status endpoint. This response details configured and connected servers, total tools, a list of available tools, and any connection errors. ```json { "configuredServers": ["claude-in-chrome", "playwright"], "connectedServers": ["claude-in-chrome", "playwright"], "totalTools": 21, "tools": [ { "source": "claude-in-chrome", "name": "mcp__claude-in-chrome__navigate", "description": "Navigate the browser to a URL" } ], "errors": {} } ``` -------------------------------- ### App to Dispatch Authorization Request Source: https://github.com/builderio/agent-native/blob/main/packages/core/docs/content/cross-app-sso.md Example of an HTTP GET request from the client app to the Dispatch identity authority to initiate the authorization flow. ```http GET https://dispatch.agent-native.com/_agent-native/identity/authorize ?app= &redirect_uri= &state= ``` -------------------------------- ### Start Production Server Source: https://github.com/builderio/agent-native/blob/main/templates/chat/DEVELOPING.md Run this command to start the production server using the built output. Ensure you have completed the build step first. ```bash node .output/server/index.mjs ``` -------------------------------- ### Starter Global Resources Examples Source: https://github.com/builderio/agent-native/blob/main/packages/core/src/templates/workspace-root/README.md Provides examples of starter global resource files that can be used for company context, brand guidelines, messaging, instructions, and skills. ```text context/company.md # company overview, ICP, products, canonical links context/brand.md # brand voice, visual identity, spelling, terms to avoid context/messaging.md # positioning, value props, proof points, objections instructions/guardrails.md # compliance, escalation, and approval rules skills/company-voice/SKILL.md # copywriting/review guidance for customer-facing work ``` -------------------------------- ### Setup Checklist Diagram Source: https://github.com/builderio/agent-native/blob/main/packages/core/docs/content/onboarding.md This diagram illustrates the setup checklist for an app built on the agent-native framework. It shows required and optional configuration steps and their completion status. ```an-diagram { "html": "
requiredConnect an AI engineConnect Builder (one click) or paste an LLM key
optionalDatabaseset DATABASE_URL
optionalAuthenticationOAuth / access token
optionalEmail deliveryResend / SendGrid
→
all required done → panel auto-hides
", "css": ".ob{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.ob .diagram-card{display:flex;flex-direction:column;gap:3px;padding:12px 14px}.ob .diagram-arrow{font-size:22px}" } ``` -------------------------------- ### Custom MCP Server Setup Source: https://github.com/builderio/agent-native/blob/main/packages/core/docs/content/mcp-protocol.md Mount the MCP server manually in a server plugin for custom behavior. This example shows how to import and use `mountMCP` and `autoDiscoverActions`. ```typescript // server/plugins/mcp.ts import { mountMCP } from "@agent-native/core/mcp"; import { autoDiscoverActions } from "@agent-native/core/server"; export default defineNitroPlugin(async (nitro) => { const actions = await autoDiscoverActions(import.meta.url); mountMCP(nitro, { name: "My App", description: "Custom MCP server", actions, // Optional: provide ask-agent handler askAgent: async (message) => { // Your custom agent logic return "Response"; }, // Optional: override the route prefix (default "/_agent-native") // routePrefix: "/_agent-native", }); }); ``` -------------------------------- ### Route File Examples Source: https://github.com/builderio/agent-native/blob/main/packages/core/src/templates/default/DEVELOPING.md Illustrates how filename conventions in the 'app/routes/' directory map to URL paths, including root, static, and dynamic routes. ```text app/routes/_index.tsx → / app/routes/settings.tsx → /settings app/routes/inbox.tsx → /inbox app/routes/inbox.$threadId.tsx → /inbox/:threadId app/routes/$id.tsx → /:id (dynamic param) ``` -------------------------------- ### SKILL.md Frontmatter Example Source: https://github.com/builderio/agent-native/blob/main/packages/core/docs/content/writing-agent-instructions.md Defines the name and description for a skill. The description should clearly state the skill's purpose and when to use it, guiding the agent's decision-making process. ```markdown --- name: project-imports description: >- How to import projects from the legacy CSV export. Use when the user uploads a project CSV or asks to migrate projects from the old system. --- ``` -------------------------------- ### Scaffold a New Chat App Source: https://github.com/builderio/agent-native/blob/main/packages/core/docs/content/template-chat.md Use this command to create a new project with the chat template. After creation, navigate to the project directory, install dependencies, and start the development server. ```bash npx @agent-native/core@latest create my-chat-app --template chat cd my-chat-app pnpm install pnpm dev ``` -------------------------------- ### Create New Agent Native Project Source: https://github.com/builderio/agent-native/blob/main/README.md This command initiates a new Agent Native project. After creation, navigate into the project directory, install dependencies, and start the development server. ```bash npx @agent-native/core@latest create my-app cd my-app pnpm install pnpm dev ``` -------------------------------- ### Initialize and Help CLI Commands Source: https://github.com/builderio/agent-native/blob/main/packages/pinpoint/README.md Use the CLI to initialize actions and skills in your project or to display help information. ```sh npx @agent-native/pinpoint@latest init # Copy actions and skill to your project ``` ```sh npx @agent-native/pinpoint@latest # Show help ``` -------------------------------- ### Create a Standalone Forms Project Source: https://github.com/builderio/agent-native/blob/main/packages/core/docs/content/template-forms.md Use this command to create a new project with the Forms template as a standalone application. Navigate into the project directory, install dependencies, and start the development server. ```bash npx @agent-native/core@latest create my-forms --standalone --template forms cd my-forms pnpm install pnpm dev ``` -------------------------------- ### Backend Architecture Review Plan Example Source: https://github.com/builderio/agent-native/blob/main/skills/visual-plans/references/exemplar.md Presents a structure for a backend architecture review plan that omits a top canvas, starting with context and legend, followed by recommendation cards with file paths and diagrams. ```html

Context

...

Legend

  • Box: Service
  • Arrow: Data Flow

Service Discovery

High Confidence Core Component 
/services/discovery/v1/...
/config/discovery.yaml
Discovery Architecture

Problem: Inconsistent service registration.

Solution: Centralized registry.

Why: Improves reliability and reduces errors.

``` -------------------------------- ### Resource Path Resolution Example Source: https://github.com/builderio/agent-native/blob/main/packages/core/docs/content/workspace.md Demonstrates how the agent resolves resource files, showing the hierarchy from global workspace resources down to personal overrides. ```text workspace context/brand.md -> shared/app context/brand.md -> personal context/brand.md ``` -------------------------------- ### Run Dispatch Dream Actions Locally Source: https://github.com/builderio/agent-native/blob/main/packages/core/docs/content/template-dispatch.md Execute Dispatch Dream actions from the command line using pnpm. These examples demonstrate how to get settings, set settings with specific parameters, and create a dream report. ```bash pnpm action get-dream-settings ``` ```bash pnpm action set-dream-settings --enabled true --schedule "0 9 * * 1" --allSources true --limit 8 ``` ```bash pnpm action create-dream-report --allSources true --sourceTimeoutMs 30000 --limit 8 ``` -------------------------------- ### Run Development Server Source: https://github.com/builderio/agent-native/blob/main/packages/docs/README.md Starts the local development server for the Agent-Native docs package. ```bash pnpm --filter @agent-native/docs dev ``` -------------------------------- ### Create a New Video App Source: https://github.com/builderio/agent-native/blob/main/packages/core/docs/content/template-videos.md Scaffold a new standalone Video application using the Agent Native CLI with the videos template. After creation, navigate to the app directory, install dependencies, and start the development server. ```bash npx @agent-native/core@latest create my-video-app --standalone --template videos cd my-video-app pnpm install pnpm dev ``` -------------------------------- ### Fetch Block Catalog (Schema Format) Source: https://github.com/builderio/agent-native/blob/main/skills/visual-recap/SKILL.md Use `get-plan-blocks` with `format: "schema"` to get full JSON Schema for each block, including examples. This is useful for understanding exact field types, enums, and nesting. ```javascript get-plan-blocks({ format: "schema" }) ``` -------------------------------- ### Run Development Server Source: https://github.com/builderio/agent-native/blob/main/packages/core/docs/content/getting-started.md Start the development server to make your application and its actions accessible through various interfaces, including the chat UI. ```bash pnpm dev ``` -------------------------------- ### Define Action with GET HTTP Method Source: https://github.com/builderio/agent-native/blob/main/packages/core/docs/content/actions.md Configure an action to be accessible via a GET request by setting the `http.method` to 'GET'. For GET actions, parameters are passed as query parameters. ```typescript export default defineAction({ description: "Get details for a lead.", schema: z.object({ leadId: z.string() }), http: { method: "GET" }, run: async ({ leadId }) => { return await db.select().from(leads).where(eq(leads.id, leadId)); }, }); ``` -------------------------------- ### Run Local Plan with File Mirroring Source: https://github.com/builderio/agent-native/blob/main/plans/how-visual-plan-file-sync-works/plan.mdx Starts the local Plan development server with file mirroring enabled. Ensure the `PLAN_LOCAL_DIR` points to your repository's plans directory. The `agent-native skills add visual-plan --mcp-url` command then connects the skill to this local runtime. ```bash PLAN_LOCAL_ODE=1 PLAN_LOCAL_DIR=/path/to/repo/plans pnpm dev agent-native skills add visual-plan --mcp-url http://localhost:8105 ```