Agent-Native Vibe 项目

产品简介

Agent-Native 是由 Builder.io 开源的一款 TypeScript 框架，专为构建「AI 代理与 UI 深度融合」的应用程序而设计。与传统做法不同，Agent-Native 不是在现有应用上外挂一个聊天机器人，而是将 AI 代理能力与产品 UI 作为同一套架构的一体两面来设计——两者共享同一个 Action 层、同一份数据模型和同一个应用状态。这使得 AI 代理能够以编程方式调用 UI 功能，而 UI 也能直接触发代理能力，用户和 AI 在同一个界面中自然协作。

核心功能

共享 Action 层：开发者只需定义一次 Action，该 Action 同时对 AI 代理可见（作为工具调用）和对 UI 可用（作为函数调用），无需分别为代理和界面各写一套逻辑。

共享数据与状态：代理完成的任何工作会实时出现在 UI 中；用户在 UI 中的操作结果也会即时反馈给代理上下文，实现双向同步。

多端暴露能力：同一个 Action 自动暴露给 HTTP 接口、MCP（Model Context Protocol）、A2A（Agent-to-Agent）协议、CLI 命令行以及 React 前端，一条定义多处生效。

内置代理聊天界面：脚手架命令可快速生成带聊天 UI 的完整应用，包含身份认证、持久化对话和实时状态同步。

PostgreSQL 后端：生产环境使用 PostgreSQL，本地开发使用 PGlite，完全兼容 Nitro 兼容的各种部署平台。

支持主流大模型：连接 Anthropic、OpenAI、Builder.io 或本地 Ollama，灵活切换无需改动业务代码。

多代理团队协作：内置 Agent Teams 支持，可在同一工作空间或跨实例连接多个专业代理，协同完成复杂任务。

技术实现

Agent-Native 的核心设计思想是「代理即应用，应用即代理」。传统 AI 应用将代理作为后端服务，通过 API 调用后以文本形式展示结果；Agent-Native 则将代理的每一次工具调用映射为 UI 上的具体操作——用户说「帮我预约明天下午3点的会议室」，代理调用 calendar.createEvent 这一 Action，UI 端直接渲染出日历事件确认卡片。

框架基于 TypeScript 和 React 构建，使用 Zod 进行输入输出校验，确保 Action 的 schema 声明与实际参数一致。Action 采用声明式写法，通过 defineAction 包装函数，附带 description、schema 和 run 实现。代理侧通过工具调用协议发现和调用 Action，UI 侧通过 useActionQuery 或 useActionMutation 在 React 组件中调用同一个函数，路径不同但执行逻辑完全相同。

快速上手

第一步：创建项目

在终端执行以下命令，基于 Chat 模板初始化一个完整应用：

npx --yes @agent-native/core@latest create my-app --standalone --template chat cd my-app corepack enable pnpm install

第二步：启动开发服务器

pnpm dev

浏览器自动打开本地地址。初次使用选择「Continue as local dev」即可，无需配置邮箱或密码。

第三步：连接大模型

在 UI 界面选择 Builder.io（使用免费额度）或 Custom Keys（填入 Anthropic / OpenAI 等 API Key）。

第四步：体验 Action 调用

在聊天面板输入：「Call the hello action for Alex.」代理会找到 hello Action，将参数 Alex 传入并返回：「Hello, Alex!」同时打开 actions/hello.ts 文件，可以看到同一个函数在 UI 端如何通过 useActionQuery 调用。

第五步：扩展自定义 Action

在 actions/ 目录下新建 TypeScript 文件，使用 defineAction 定义自己的业务能力，代理和 UI 同时获得调用能力，无需额外配置。

适用人群

全栈工程师：希望在同一代码库中同时构建 AI 代理功能和用户界面，减少重复逻辑和维护成本。

AI 应用开发者：需要将 AI 能力深度嵌入产品交互中，而不是仅作为对话窗口的团队。

React 技术栈开发者：正在使用 React，希望快速获得生产级 AI 应用脚手架（包含认证、数据库、实时同步）的开发者。

官方链接

官网：https://agent-native.com GitHub：https://github.com/BuilderIO/agent-native 文档：https://www.agent-native.com/docs/