agent-native

A framework for building agentic apps

Generate Convert Improve

Install / Use

claude mcp add BuilderIO -- npx -y github:BuilderIO/agent-native

If the server publishes to npm under a different name, use that package instead — check the repo README.

About this skill

🔌

MCP Server

Model Context Protocol server

Quality Score

87/100

Our assessment of agent-native

agent-native scores 87/100 on our quality scale, 2057th of 4,622 Development & Engineering skills we index (top 45%).

Its MCP Server is 11 KB long, well organised into 11 sections with 3 code examples: a thorough specification that gives an agent plenty to work with.

With 7,612 GitHub stars, it is one of the more widely adopted skills in the catalogue.

Substance

29/30

Structure

18/20

Description

8/15

Adoption

17/20

Freshness

15/15

Maintenance, license and trust

The repository was last updated today, so agent-native is actively maintained.
It is released under the MIT license, a permissive license that allows use, modification and commercial use with attribution.
Its trust signals score 95/100, with 1 caution from licensing, adoption, age or documentation. These come from repository metadata, not a code audit — read the skill file before letting an agent act on it.

agent-native compared with similar skills

All 4 of these similar skills score higher than agent-native; compare them before choosing.

Skill	Score	Stars	Updated	Format
agent-native (this skill)by BuilderIO	87	7.6k	today	MCP Server
taste-skillby Leonxlnx	100	110.1k	today	CLAUDE.md
Agent-Reachby Panniantong	100	108.9k	1d ago	CLAUDE.md
headroomby headroomlabs-ai	100	78.9k	today	CLAUDE.md
ai-job-searchby ai-job-search-dev	100	69.6k	1d ago	CLAUDE.md

Frequently asked questions

How do I install agent-native?: Run claude mcp add BuilderIO -- npx -y github:BuilderIO/agent-native. The install tabs above show the steps for each supported agent.
Which AI agents does agent-native work with?: It is written for Claude Code and Claude Desktop, as a MCP Server file. Other agents that read the same format can often use it too.
Is agent-native safe to use?: It is MIT-licensed and scores 95/100 on trust signals. Skills are instructions an agent will follow, so read the file before installing it and do not approve commands you do not understand.
Is agent-native still maintained?: The repository was last updated today, so agent-native is actively maintained.

Skill content

View source on GitHub

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

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.