Builder.io Agent Native Examples and Demo Code: A Complete Guide

Yes, the BuilderIO/agent-native repository contains multiple fully-functional demonstration applications in the templates/ directory, each providing complete source code for real-world apps including UI pages, actions, agents, and configuration.

The Builder.io Agent Native framework ships with a comprehensive suite of example code designed to illustrate end-to-end implementation patterns. These templates serve as both learning resources and starter scaffolding, demonstrating how actions, React UI components, and AI agents interact within the monorepo architecture.

Template Architecture Overview

The templates/ folder at the repository root houses self-contained demo applications such as Clips, Plans, Design, Content, Analytics, and Chat. Each template follows a standardized Agent-Native structure that separates concerns across distinct directories:

• app/ – React UI built with shadcn/ui primitives, with pages defined under app/routes/…
• actions/ – Shared action definitions using defineAction that power UI, agent runtime, CLI, and A2A calls
• server/ – Nitro-compatible backend routes and plugins for authentication and guards
• provider-api/ – Optional provider-API substrates that agents invoke for external services

Every template demonstrates the One-Action-Power-All tenet: a single action definition can be called from any surface including the React UI, agent chat interface, HTTP API, or CLI. Additionally, all demos ship with a live agent runtime accessible via /_agent-native/* routes, allowing you to inspect memory and watch real-time action invocation.

Core Demo Code Examples

Basic Action Definition

The foundation of any Agent Native app is the action definition. The Design template includes a minimal example at templates/design/app/actions/example.ts that demonstrates the standard pattern:

// templates/design/app/actions/example.ts
import { defineAction } from '@agent-native/core';
import { z } from 'zod';
import { db, replies } from '@/server/db';

export default defineAction({
  // Schema describes input fields the UI/Agent will provide
  schema: z.object({
    emailId: z.string(),
    body: z.string(),
  }),
  // The `run` function is executed wherever the action is called
  run: async ({ emailId, body }) => {
    await db.insert(replies).values({ emailId, body });
  },
});

This file illustrates how Zod schemas enforce type safety across all surfaces, while the run function contains the actual business logic executed by the database.

UI Integration with React Hooks

To demonstrate how actions connect to React components, the Design template provides templates/design/app/routes/examples.tsx:

// templates/design/app/routes/examples.tsx
import { useActionMutation } from '@agent-native/core';
import ExampleAction from '../../actions/example';

export default function ExamplesPage() {
  const { mutate, isLoading, error } = useActionMutation(ExampleAction);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    await mutate({ emailId: 'demo@builder.io', body: 'Hello world' });
  };

  return (
    <section>
      <h2>Demo Action</h2>
      <form onSubmit={handleSubmit}>
        <button type="submit" disabled={isLoading}>Run Example Action</button>
      </form>
      {error && <p>🚨 {error.message}</p>}
    </section>
  );
}

The useActionMutation hook handles loading states, error boundaries, and type-safe parameter passing between the React UI and the action's server-side implementation.

Agent Chat Invocation

The same action can be invoked directly from the built-in agent chat interface without additional boilerplate. Inside the agent surface at /_agent-native/*, you can type:

/run exampleAction emailId="demo@builder.io" body="Hello from the agent"

The agent runtime resolves exampleAction, executes the identical run implementation shown in the first example, and stores the reply in the database. This demonstrates the single-source-of-truth principle where one action definition serves both human users and AI agents.

Full-Featured Application Templates

Clips (Video Capture Demo)

The Clips template provides a sophisticated demonstration of video recording and AI analysis. Located in templates/clips/, this example includes:

• UI Page: templates/clips/app/routes/index.tsx – Complete interface for recording and uploading video
• Action: templates/clips/app/actions/saveClip.ts – Handles video persistence and triggers agent analysis

Running pnpm dev launches the Clips demo at http://localhost:3000/clips, where you can record footage and observe the agent automatically generating transcripts through the integrated provider API.

Plans, Analytics, and Chat Templates

Beyond the Design and Clips examples, the repository includes specialized demonstrations:

• Plans (templates/plan/app/routes/index.tsx) – Demonstrates visual-plan mode and agent-driven code generation workflows
• Analytics (templates/analytics/app/routes/dashboard.tsx) – Shows data source connections and agent-generated chart creation
• Chat (templates/chat/app/routes/index.tsx) – Minimal ChatGPT-style scaffold featuring durable conversation threads and action invocation

Running the Examples Locally

To execute the demonstration code from the BuilderIO/agent-native repository:

1. Clone the repository and install dependencies with pnpm install
2. Navigate to a specific template directory (e.g., cd templates/design)
3. Start the development server with pnpm dev
4. Access the demo at http://localhost:3000 and the agent interface at /_agent-native/chat

The templates use Drizzle with SQLite for development, allowing you to run examples immediately without external database configuration. For production deployments, you can swap the database provider without modifying action code, showcasing the backend-agnostic design.

Summary

• The templates/ directory contains six fully-functional demo applications illustrating every major Agent Native feature
• Each template demonstrates One-Action-Power-All through shared defineAction definitions consumed by both React UIs and AI agents
• Key entry points include templates/design/app/actions/example.ts for basic action patterns and templates/clips/ for complex integrations
• All examples include live agent runtimes accessible via /_agent-native/* routes for immediate interaction
• The demos use database-agnostic Drizzle ORM with SQLite defaults, requiring zero configuration to run locally

Frequently Asked Questions

How do I run the Builder.io Agent Native examples locally?

Clone the repository, run pnpm install at the root, then navigate to any template folder (such as templates/design or templates/clips) and execute pnpm dev. This starts a local development server with the agent runtime, database, and UI ready for interaction.

Can the demo templates be used as production starting points?

Yes, the templates are production-ready scaffolds. According to the BuilderIO/agent-native source code, each template follows the standard monorepo structure with proper separation between app/, actions/, and server/ directories, making them suitable as foundations for real applications provided you configure production databases and authentication guards.

How do the examples demonstrate the One-Action-Power-All principle?

The templates implement actions using defineAction in @agent-native/core that can be called from React components via useActionMutation, from the agent chat interface using /run commands, or from HTTP endpoints. The templates/design/app/actions/example.ts file is imported by both the UI route at examples.tsx and the agent runtime, proving that identical code powers all surfaces.

What database do the demonstration apps use?

The examples use Drizzle ORM with SQLite in development mode, configured in the server/ directory of each template. Because Agent Native is database-agnostic, you can replace SQLite with PostgreSQL, MySQL, or other supported databases without changing action code, as demonstrated by the consistent db imports across all templates.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}