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

> Explore Builder.io Agent Native examples and demo code within the BuilderIO/agent-native repository. Find fully functional apps in templates/ demonstrating real-world use cases.

- Repository: [Builder.io/agent-native](https://github.com/BuilderIO/agent-native)
- Tags: examples
- Published: 2026-07-18

---

**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`](https://github.com/BuilderIO/agent-native/blob/main/templates/design/app/actions/example.ts) that demonstrates the standard pattern:

```typescript
// 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`](https://github.com/BuilderIO/agent-native/blob/main/templates/design/app/routes/examples.tsx):

```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:

```text
/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`](https://github.com/BuilderIO/agent-native/blob/main/templates/clips/app/routes/index.tsx) – Complete interface for recording and uploading video
- **Action**: [`templates/clips/app/actions/saveClip.ts`](https://github.com/BuilderIO/agent-native/blob/main/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`](https://github.com/BuilderIO/agent-native/blob/main/templates/plan/app/routes/index.tsx)) – Demonstrates visual-plan mode and agent-driven code generation workflows
- **Analytics** ([`templates/analytics/app/routes/dashboard.tsx`](https://github.com/BuilderIO/agent-native/blob/main/templates/analytics/app/routes/dashboard.tsx)) – Shows data source connections and agent-generated chart creation
- **Chat** ([`templates/chat/app/routes/index.tsx`](https://github.com/BuilderIO/agent-native/blob/main/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`](https://github.com/BuilderIO/agent-native/blob/main/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`](https://github.com/BuilderIO/agent-native/blob/main/templates/design/app/actions/example.ts) file is imported by both the UI route at [`examples.tsx`](https://github.com/BuilderIO/agent-native/blob/main/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.