# Where to Find Agent-Native Example Code: Templates and Samples Explained

> Find agent-native example code in the BuilderIO/agent-native repository. Explore full-stack templates like Calendar Mail and Video or minimal defineAction samples in the README.

- Repository: [Builder.io/agent-native](https://github.com/BuilderIO/agent-native)
- Tags: getting-started
- Published: 2026-06-21

---

**The best agent-native example code is located in the `templates/` directory of the BuilderIO/agent-native repository, which contains full-stack applications like Calendar, Mail, and Video, while minimal `defineAction` samples are documented in the root [`README.md`](https://github.com/BuilderIO/agent-native/blob/main/README.md) (lines 7-18).**

Agent-native is a full-stack framework that lets you build **agent-first** applications where the AI agent and the UI share the same action surface, SQL-backed state, and tooling. Finding production-ready **agent-native example code** is essential for understanding how the four-area contract (actions, UI, data, and agent) works in real projects.

## Where to Find Agent-Native Example Code

The repository organizes example code into two primary locations: the root documentation for quick snippets, and the `templates/` directory for complete applications.

### Root README.md: Minimal Action Examples

The fastest way to see the core pattern is in [`README.md`](https://github.com/BuilderIO/agent-native/blob/main/README.md) (lines 7-18), which shows a minimal ** `defineAction` ** export that inserts a reply into a database:

```ts
// src/actions/send-reply.ts
export default defineAction({
  schema: z.object({
    emailId: z.string(),
    body: z.string(),
  }),
  run: async ({ emailId, body }) => {
    await db.insert(replies).values({ emailId, body });
  },
});

```

This example demonstrates how actions serve as the single source of truth—callable from React components via `useActionMutation`, the agent runtime, Nitro API routes, or CLI commands according to the BuilderIO/agent-native source code.

### Templates Directory: Full-Stack SaaS Apps

For **production-ready agent-native example code**, explore the `templates/` directory, which includes complete Next.js/Nitro workspaces:

- **`templates/videos`** – A Remotion-based video studio with interactive compositions
- **`templates/calendar`** – Calendar app with event creation actions
- **`templates/mail`** – Email client with reply functionality
- **`templates/content`** – Content management system

Each template contains real **UI pages** ([`app/pages/...tsx`](https://github.com/BuilderIO/agent-native/blob/main/app/pages/...tsx)), **action files** ([`app/actions/...ts`](https://github.com/BuilderIO/agent-native/blob/main/app/actions/...ts)), **database schemas** ([`app/db/schema.ts`](https://github.com/BuilderIO/agent-native/blob/main/app/db/schema.ts) using Drizzle), and **agent-side skills** (`.agents/skills/...`).

## Deep Dive: Video Composition Examples

The Video template provides the most complete example of complex UI-agent interactions. In [`templates/videos/app/remotion/compositions/BlankComposition.tsx`](https://github.com/BuilderIO/agent-native/blob/main/templates/videos/app/remotion/compositions/BlankComposition.tsx), you'll find a ready composition with camera, cursor, and interactive components:

```tsx
// templates/videos/app/remotion/compositions/BlankComposition.tsx
import { Composition } from "remotion";

export const BlankComposition: React.FC = () => (
  <>
    {/* Camera track – required */}
    <CameraTrack duration={240} />

    {/* Cursor track – required for interactions */}
    <CursorTrack duration={240} />

    {/* Example interactive button */}
    <InteractiveButton
      id="example-button"
      label="Click me"
      onClick={() => console.log("Clicked!")}
    />
  </>
);

export const config = {
  width: 1920,
  height: 1080,
  fps: 30,
  durationInFrames: 240,
};

```

The composition registry in [`templates/videos/app/remotion/registry.ts`](https://github.com/BuilderIO/agent-native/blob/main/templates/videos/app/remotion/registry.ts) shows how these compositions are discovered by the app:

```ts
import { registerComposition } from "@agent-native/remotion";
import { BlankComposition } from "./compositions/BlankComposition";

registerComposition({
  id: "blank",
  title: "Blank Demo",
  component: BlankComposition,
});

```

## Copy-Paste Ready Action Examples

Below are self-contained snippets you can use in a fresh project created with the CLI.

### Minimal Action Definition

Create [`app/actions/hello.ts`](https://github.com/BuilderIO/agent-native/blob/main/app/actions/hello.ts):

```ts
import { defineAction } from "@agent-native/core";
import { z } from "zod";

export default defineAction({
  schema: z.object({
    name: z.string(),
  }),
  run: async ({ name }) => {
    console.log(`👋 Hello, ${name}!`);
    // Any DB work can go here, e.g. await db.insert(...);
  },
});

```

Call it from a React component:

```tsx
import { useActionMutation } from "@agent-native/core/client";

function Greet() {
  const greet = useActionMutation("hello");
  return (
    <button onClick={() => greet.mutate({ name: "World" })}>
      Say Hello
    </button>
  );
}

```

### Calendar Event Creation

For a real-world example, see [`templates/calendar/app/actions/create-event.ts`](https://github.com/BuilderIO/agent-native/blob/main/templates/calendar/app/actions/create-event.ts), which implements the full pattern with database insertion and validation.

## Key Files to Explore

| Path | What It Demonstrates |
|------|---------------------|
| [`README.md`](https://github.com/BuilderIO/agent-native/blob/main/README.md) (lines 7-18) | Minimal `defineAction` example and quick-start workflow |
| [`templates/videos/app/remotion/compositions/BlankComposition.tsx`](https://github.com/BuilderIO/agent-native/blob/main/templates/videos/app/remotion/compositions/BlankComposition.tsx) | Full **Remotion composition** with camera and cursor tracks |
| [`templates/videos/app/remotion/registry.ts`](https://github.com/BuilderIO/agent-native/blob/main/templates/videos/app/remotion/registry.ts) | How compositions are registered and exposed to the UI |
| [`templates/calendar/app/actions/create-event.ts`](https://github.com/BuilderIO/agent-native/blob/main/templates/calendar/app/actions/create-event.ts) | Real-world action that creates calendar events |
| [`packages/core/src/client/use-action-mutation.ts`](https://github.com/BuilderIO/agent-native/blob/main/packages/core/src/client/use-action-mutation.ts) | React hook for calling actions from the UI |
| [`packages/core/src/server/define-action.ts`](https://github.com/BuilderIO/agent-native/blob/main/packages/core/src/server/define-action.ts) | Core implementation of the `defineAction` function |
| `templates/*/README.md` | Overview of each full-featured template |

All files are directly viewable on GitHub:
- Minimal action: `https://github.com/BuilderIO/agent-native/blob/main/README.md#L7-L18`
- Video composition: `https://github.com/BuilderIO/agent-native/blob/main/templates/videos/app/remotion/compositions/BlankComposition.tsx`

## How to Scaffold a Project with All Examples

To get all example code locally for exploration:

```bash

# Scaffold a fresh project with all example templates

npx @agent-native/core@latest create my-app
cd my-app
pnpm install
pnpm dev   # opens http://localhost:3000

```

The generated `my-app` directory contains the same example code found in the repository, ready for local modification and extension.

## Summary

- **Agent-native example code** is primarily located in the `templates/` directory, containing full-stack SaaS applications like Video, Calendar, and Mail.
- The root [`README.md`](https://github.com/BuilderIO/agent-native/blob/main/README.md) (lines 7-18) provides the minimal `defineAction` pattern for understanding the core action abstraction.
- **Video compositions** in `templates/videos/app/remotion/compositions/` demonstrate complex UI-agent interactions using Remotion.
- Use `npx @agent-native/core@latest create my-app` to scaffold a local copy of all examples for hands-on learning.
- Every action defined with `defineAction` is automatically available to both the UI (via `useActionMutation`) and the agent runtime.

## Frequently Asked Questions

### Where is the simplest agent-native example code?

The simplest example is in the root [`README.md`](https://github.com/BuilderIO/agent-native/blob/main/README.md) at lines 7-18, showing a basic `defineAction` that inserts data into a database. This demonstrates the core pattern where actions serve as the single source of truth for both UI and agent operations.

### What templates are available in the agent-native repository?

The repository includes templates for **Calendar**, **Mail**, **Video**, **Content**, and **Analytics**. Each is a complete Next.js/Nitro workspace in the `templates/` directory, demonstrating end-to-end SaaS patterns with Drizzle database schemas, UI components, and agent skills.

### How do I run the agent-native examples locally?

Run `npx @agent-native/core@latest create my-app` to scaffold a new project that includes all example templates. After running `pnpm install` and `pnpm dev`, you'll have a local development server at `http://localhost:3000` with the example code ready to explore and modify.

### Where can I find examples of Remotion video compositions?

The Video template at [`templates/videos/app/remotion/compositions/BlankComposition.tsx`](https://github.com/BuilderIO/agent-native/blob/main/templates/videos/app/remotion/compositions/BlankComposition.tsx) contains a complete example with camera tracks, cursor tracks, and interactive buttons. The registry file at [`templates/videos/app/remotion/registry.ts`](https://github.com/BuilderIO/agent-native/blob/main/templates/videos/app/remotion/registry.ts) shows how to register these compositions for use in the UI.