Agent-Native Content MCP Server

io.github.BuilderIO/agent-native-content

Open-source TypeScript framework for building agents with purpose-built UIs and shared actions.

What is the Agent-Native Content MCP server?

Agent-Native is an open-source TypeScript framework for building agents that pair autonomous work with a purpose-built UI. It lets you define capabilities once as actions that both the agent and UI can use, with shared data and application state. The framework includes agent chat, authentication, skills, automations, agent teams, and a PostgreSQL backend.

Agent-Native enables you to build agentic applications where agents and UIs work through the same action layer rather than agents clicking through interfaces. Define each capability once and it's available to the agent as a tool, to the UI as code, and through HTTP, MCP, A2A, and CLI. Use it to create knowledge-work applications where agents handle autonomous tasks while users inspect, edit, approve, and share results in a familiar interface.

How to install Agent-Native Content

Copy-paste configuration for popular MCP clients.

transport: http

Config generated by PluginBench — verify against the source before use.

~/.cursor/mcp.json

{
  "mcpServers": {
    "agent-native-content": {
      "url": "https://content.agent-native.com/mcp"
    }
  }
}

Tools & capabilities

Tools this server exposes to the agent.

Shared actions — Define capabilities once that work as agent tools, UI code, HTTP endpoints, MCP tools, A2A calls, and CLI commands
Agent chat — Delegate work, ask questions, and review agent results in the same UI
Authentication and permissions — Control who can access and change shared work
Skills and memory — Give agents reusable expertise and persistent context
Automations — Run agent work on schedules or events
Agent teams — Delegate work to specialist agents in the same workspace or across connected agents
Visual edit — Edit running apps on a canvas in Claude Code instead of prompting for each UI change

Use cases

Build agentic applications where agents and UIs share the same action layer and data
Create knowledge-work tools like content editors, design systems, or analytics dashboards with agent assistance
Delegate specialized tasks to teams of agents while maintaining a unified UI for review and approval
Edit running applications visually while Claude applies changes to source code
Generate and refine interactive designs, presentations, or content with agent help

Agent-Native Content MCP server FAQ

What is Agent-Native?

Agent-Native is a TypeScript framework for building agents paired with purpose-built UIs. Both the agent and UI use the same actions, data, and application state, so you define capabilities once and they work everywhere: as agent tools, UI code, HTTP endpoints, MCP tools, and CLI commands.

Is Agent-Native free?

Yes, Agent-Native is open-source under the MIT license.

How do I install Agent-Native?

Start with `npx --yes @agent-native/core@latest create my-agent --standalone --template chat` and follow the getting started guide at agent-native.com/docs/getting-started.

Does Agent-Native work with Claude and Cursor?

Yes. Agent-Native exposes actions through MCP (Model Context Protocol), so agents can use them as tools. It also includes a `/visual-edit` skill for Claude Code to edit running apps on a canvas.

What database does Agent-Native use?

Agent-Native uses PostgreSQL in production and PGlite for local development on any Nitro-compatible host.

Do I need to bring my own LLM?

Yes, you bring your own LLM, SQL database, tools, and infrastructure. Everything you build stays yours.

README (reference)

Source of truth, from the repository.

Agent-Native

Agent-Native is an open-source TypeScript framework for building agents that pair autonomous work with a purpose-built UI. Define each capability once as an action: the agent uses it as a tool, and the UI calls it from code.

Quick start

npx --yes @agent-native/core@latest create my-agent --standalone --template chat

Follow the getting started guide for a full intro to the framework.

Why build agents with UIs?

Coding agents work with more than a text box. Their environment provides context, tools, files, tests, and previews that make their capabilities and results visible.

Knowledge work needs that same kind of environment. A UI shows what an agent can do and gives people familiar ways to inspect, edit, approve, and share its work.

How Agent-Native works

Shared actions. The agent calls each capability as a tool, and the UI calls it from code. Both paths use the same validation, permissions, and implementation.
Shared data. Work done by the agent appears in the UI, and work done in the UI is available to the agent.
Shared application state. The agent receives relevant UI state, such as the current page, selected record, or active view.

The agent does not click through the UI. It works through the same action layer as the UI.

Example: a shared action

Create actions/hello.ts:

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

// One action powers every app surface: UI, agent, HTTP, MCP, A2A, and CLI.
export default defineAction({
  description: "Return a friendly greeting.",
  schema: z.object({
    name: z.string().default("world").describe("Name to greet"),
  }),
  http: { method: "GET" },
  run: async ({ name }) => {
    return { message: `Hello, ${name}!` };
  },
});

The agent receives hello as a tool. React calls the same function with useActionQuery("hello", { name: "Alex" }). Agent-Native also exposes it through HTTP, MCP, A2A, and the CLI.

Included

Agent chat: Let people delegate work, ask questions, and review results in the same UI.
Authentication and permissions: Control who can access and change shared work.
Skills and memory: Give agents reusable expertise and persistent context.
Automations: Run agent work on schedules or events.
Agent teams: Delegate work to specialist agents in the same workspace or across connected agents.
PostgreSQL backend: Use PostgreSQL in production and PGlite for local development on any Nitro-compatible host.

Example: edit a running app visually

Use /visual-edit in Claude Code to edit a running app on a canvas instead of prompting for each small UI nudge. Compare live pages together, then ask Claude to apply the chosen edits to your source. For example:

/visual-edit the onboarding flow, plus home at every breakpoint

Review the onboarding screens alongside Home at desktop, tablet, and mobile sizes, adjust a button's color or spacing directly, then ask Claude to apply the pending edits to your source. See the Visual Edit guide for the full walkthrough and sharing details.

Bring your LLM, SQL database, tools, and infrastructure. Everything you build stays yours.

See Agent-Native in action:

https://github.com/user-attachments/assets/ef51644b-6506-46d8-8083-0af7b7e5b65c