Lets an AI client define actions once and use them as tools to build and edit visual designs and agent-powered apps.
Also known as BuilderIO/agent-native, agent-native-design
- Stars
- 7,696
- Tools
- —
- Downloads, 30 days
- —
- Latest version
- 1.0.0
- Last commit
- Nov 13, 2026
- License
- MIT
What is Agent-Native MCP?
Agent-Native lets an AI client define actions once and use them as tools to build and edit visual designs and agent-powered apps.
Summary generated from the project's README
About Agent-Native MCP server
Building autonomous agents that work alongside purpose-built user interfaces is the primary goal of this TypeScript framework. Developers can define a capability once as an action, which then serves as a tool for the agent and a callable function for the UI. This ensures that both the AI and the human user interact with the same validation, permissions, and implementation logic.
Users can manage shared data and application state, such as the current page or selected record, so the agent remains context-aware. The framework includes features like agent teams, skills, memory, and automations. It supports a PostgreSQL backend for production and PGlite for local development. By using the visual-edit command in Claude Code, developers can modify running applications on a canvas and then ask the AI to apply those changes to the source code.
What you can do with it
- 1Perform visual application editingModify application layouts and styles on a canvas and apply those changes to your codebase.
- 2Maintain agent context awarenessProvide the agent with information about the user's current view or selected data.
- 3Deploy agentic applicationsBuild and run agents with persistent memory and specialized skills using a PostgreSQL backend.
Written from the project's README. Every use case is checked against a quote from it.
How to install Agent-Native MCP
Formats verified 10 Nov 2026Install Agent-Native MCP in Claude Code
$ claude mcp add --transport http agent-native-design https://design.agent-native.com/mcpInstall Agent-Native MCP in Cursor
~/.cursor/mcp.json
{
"mcpServers": {
"agent-native-design": {
"url": "https://design.agent-native.com/mcp"
}
}
}Install Agent-Native MCP in VS Code
.vscode/mcp.json
{
"servers": {
"agent-native-design": {
"type": "http",
"url": "https://design.agent-native.com/mcp"
}
}
}Install Agent-Native MCP in Codex
~/.codex/config.toml
[mcp_servers.agent-native-design] url = "https://design.agent-native.com/mcp"
Install Agent-Native MCP in Gemini CLI
~/.gemini/settings.json
{
"mcpServers": {
"agent-native-design": {
"httpUrl": "https://design.agent-native.com/mcp"
}
}
}Automated checks
Ran Nov 12, 2026Full report →Passed our automated checks. That is not a security audit: read the code and give the server the narrowest access it needs. How checks work
- Source repository linked and reachablePass
- Open source license (OSI)Pass
- Commit or release in the last yearPass
- Package name not close to a popular packageNot checked
- Remote endpoint uses HTTPSPass
- Destructive tools are labelledNot checked
- No hidden instructions to the modelPass
- No critical advisory in the package or its dependenciesNot checked
README
View on GitHubAgent-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
Open-source agents
Start from one of these agents or use it as an example for your own. For a source-to-answer architecture example, see Brain’s visual overview.
Clips
Record and understand meetings, screens, and voice notes.
Design
Generate and refine interactive designs.
Slides
Create and edit on-brand presentations.
Analytics
Ask questions of your data and build dashboards.
Calendar
Find time, schedule events, and manage bookings.
Prioritize email, draft replies, and follow up.
Assets
Create and organize on-brand media.
Content
Draft, organize, and publish content.
Plans
Create and review visual plans with diagrams, wireframes, and prototypes.
Explore the full app gallery, or start with the framework guide.
Documentation and community
- Read the documentation.
- Join Discord to ask questions, share what you're building, and get help.
Contributing
Want to send a change back? Start with CONTRIBUTING.md. DEVELOPMENT.md covers local setup, workspace structure, and guard scripts.
License
MIT
Agent-Native MCP questions
How do I add Agent-Native MCP to Claude Code?
Run claude mcp add --transport http agent-native-design https://design.agent-native.com/mcp in your terminal. Add --scope user to make it available in every project.
How do I add Agent-Native MCP to Cursor?
Open ~/.cursor/mcp.json and add the server under mcpServers, using the Cursor config shown in the install section above.
What is Agent-Native?
Agent-Native is an open-source TypeScript framework for building agents that pair autonomous work with a purpose-built UI. Capabilities are defined once as actions shared by the agent and the UI.
How do I create a new Agent-Native agent?
Run the create command with the standalone flag and a template, such as the chat template.
Can the agent and UI share the same actions?
Yes. Each action is called by the agent as a tool and from UI code, using the same validation, permissions, and implementation. Actions are also exposed through HTTP, MCP, A2A, and the CLI.
Does Agent-Native support visual editing of a running app?
Yes, you can use /visual-edit in Claude Code to edit a running app on a canvas, compare live pages, and then apply the chosen edits to your source.
What database does Agent-Native use?
It uses PostgreSQL in production and PGlite for local development on any Nitro-compatible host.