Builder.io 开源 Agent-Native：将自主 Agent 与定制 UI 深度融合的 TypeScript 框架

Agent-Native 是一个开源 TypeScript 框架，用于构建将自主工作流与定制 UI 相结合的 Agent 应用。只需将每项能力定义一次为 Action（动作）：Agent 可以将其作为工具调用，UI 也可以直接在代码中调用。

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

请参考入门指南以全面了解该框架。

为什么为 Agent 构建 UI？

代码编写类 Agent 的工作环境远不止一个文本框。其环境提供了上下文、工具、文件、测试和预览，使它们的能力与输出结果一目了然。

知识型工作同样需要这样的环境。UI 能够直观展示 Agent 具备哪些能力，并让人们通过熟悉的操作方式来检查、编辑、审批和共享其工作成果。

• 共享 Actions： Agent 将每项能力作为工具调用，UI 则通过代码直接调用。两种路径复用相同的校验逻辑、权限体系和底层实现。
• 共享数据： Agent 完成的工作会即时呈现在 UI 中，而在 UI 中进行的操作也可以被 Agent 感知和使用。
• 共享应用状态： Agent 会接收到相关的 UI 状态，例如当前页面、所选记录或活动视图。

Agent 不会通过模拟点击 UI 来操作应用，而是与 UI 一样，通过同一套 Action 层来工作。

创建 actions/hello.ts：

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

// 单个 Action 即可赋能所有应用终端：UI、Agent、HTTP、MCP、A2A 以及 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}! }; }, });

Agent 会将 hello 作为工具接收。React 则通过 useActionQuery("hello", { name: "Alex" }) 调用相同的函数。Agent-Native 还会将其通过 HTTP、MCP、A2A 以及 CLI 进行暴露。

• Agent 对话： 让用户在同一 UI 内委派工作、提出疑问并审查结果。
• 鉴权与权限： 控制谁可以访问和修改共享的工作成果。
• 技能与记忆： 赋予 Agent 可复用的专业知识和持久化上下文。
• 自动化： 按计划定时或基于事件触发 Agent 任务。
• Agent 团队： 将任务委派给同一工作区内的专业 Agent 或跨连接的 Agent。
• PostgreSQL 后端： 生产环境使用 PostgreSQL，本地开发使用 PGlite，支持部署到任何兼容 Nitro 的托管平台。

你可以自由接入自己的 LLM、SQL 数据库、工具和基础设施。你构建的一切完全归你所有。

查看 Agent-Native 实际运行效果：

视频/嵌入内容：Agent-Native 演示视频

你可以从以下预置 Agent 开始构建，或将其作为自建 Agent 的参考示例。

Clips 记录并理解会议、屏幕与语音备忘录。	Design 生成并细化可交互设计。	Slides 创建并编辑符合品牌规范的演示文稿。
Analytics 基于数据提问并构建数据看板。	Calendar 协调时间、安排活动并管理预约。	Mail 邮件优先级排序、起草回复与跟进。
Assets 创建并整理符合品牌规范的媒体素材。	Content 起草、组织并发布内容。	Plans 借助图表、线框图和原型创建并审查可视化方案。

欢迎探索完整应用画廊，或阅读框架开发指南开启实践。

文档与社区

打算直接参与本仓库本身的开发？请参阅 DEVELOPMENT.md 获取本地环境搭建、工作区架构和防护脚本说明。

开源协议：MIT

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.

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.

• 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.

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.

• 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.

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

See Agent-Native in action:

Agent-Native.Demo.mp4

Start from one of these agents or use it as an example for your own.

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.
|
Mail 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

Working on this repository itself? See DEVELOPMENT.md for local setup, workspace structure, and guard scripts.

MIT