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

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 (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 (lines 7-18), which shows a minimal ** defineAction ** export that inserts a reply into a database:

// 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), action files (app/actions/...ts), database schemas (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, you'll find a ready composition with camera, cursor, and interactive components:

// 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 shows how these compositions are discovered by the app:

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:

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:

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, which implements the full pattern with database insertion and validation.

Key Files to Explore

Path	What It Demonstrates
README.md (lines 7-18)	Minimal defineAction example and quick-start workflow
templates/videos/app/remotion/compositions/BlankComposition.tsx	Full Remotion composition with camera and cursor tracks
templates/videos/app/remotion/registry.ts	How compositions are registered and exposed to the UI
templates/calendar/app/actions/create-event.ts	Real-world action that creates calendar events
packages/core/src/client/use-action-mutation.ts	React hook for calling actions from the UI
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:

# 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 (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 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 contains a complete example with camera tracks, cursor tracks, and interactive buttons. The registry file at templates/videos/app/remotion/registry.ts shows how to register these compositions for use in the UI.

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