Agent-Native Skill：一个框架，让 AI Agent 和 UI 共享同一个动作层

Skill超级捕获手 技术创作者 2026-09-20 242 阅读

这个 Skill 解决了一个核心矛盾：AI Agent 能力强大，但大多数只能对话，无法真正驱动业务操作。Agent-Native 是一个 TypeScript 开源框架，倡导「agent-native 应用」理念——让 AI 代理和 UI 处于同等地位，一次定义 Action，便能在 UI、Agent、API、MCP、A2A、CLI 五个入口同时生效，打通「对话」到「操作」的最后一公里。2026 年 6 月冲上 GitHub Trending #2，近期持续活跃，是当前 Agent 框架赛道最值得关注的新选手之一。

功能与原则

Agent-Native 的核心设计哲学是「共享动作层」：开发者用 defineAction 定义一个能力，框架自动将其暴露为 AI Agent 工具、React Hook、HTTP 端点、MCP 协议接口、A2A 通信接口和 CLI 命令五条通道。换句话说，你写一次逻辑，五个入口全通，不需要为每个通道单独适配。

框架还内置：
– 共享数据层：PostgreSQL / PGlite，Agent 做的事直接进数据库，UI 也能读写同一份状态
– 共享应用状态：Agent 能感知当前页面、选中记录、活跃视图，而不是在真空中工作
– Agent Teams：在一个工作空间内委托任务给专业子 Agent，跨 Agent 协作
– Skills & Memory：给 Agent 注入可复用专业知识 + 持久化上下文
– Automations：定时或事件触发 Agent 任务

认可度

  • GitHub Star：截至 2026-09-20 约 4.7k+（上线约 6 个月，增长迅猛）
  • GitHub Trending：2026 年 6 月 19 日冲上总榜 #2，同期登顶 Trendshift Daily / Weekly / Repository of the Day / Repository of the Week 四个榜单
  • 社区：61 位贡献者，31 个 open issues，活跃开发中（最近一次 commit 就在 1 天前）
  • 官方应用展示：Clips（会议录制理解）、Design（设计生成）、Slides（演示文稿）、Analytics（数据分析）、Calendar（日历）、Mail（邮件）、Assets（资产管理）、Content（内容）、Plan（计划）等 9 个开箱即用示例 App

链接

GitHub：https://github.com/BuilderIO/agent-native

原作者

BuilderIO（GitHub @steve8708）— 知名开源团队，曾推出 Faster.js、Tachyons 等热门项目，专注于为前端开发者提供高效工程工具。steve8708 同时维护 apps/builder-io-integration、github-actions、builderio-bot 等多个生态项目。

介绍

当前 AI Agent 大多以「对话界面」为终点——用户打字，Agent 回复，结束。但真实业务需要 Agent 能够读写数据库、触发工作流、操作 UI 组件，而不仅仅是在聊天框里给建议。

Agent-Native 正是为解决这个问题而生。它提出「agent-native 应用」概念：Agent 和 UI 是同一套系统的两个平等公民，共享同一个数据层和动作层。开发者在 actions/ 目录下定义一个 Action，框架自动生成五套接口——AI 工具调用、React Hook、REST 端点、MCP 协议和 CLI 命令——全部指向同一份实现代码。

框架底层使用 PostgreSQL 作为状态引擎（本地开发可用 PGlite），这意味着 Agent 对数据的每一次修改都在事务内完成，可回溯、可协作。官方内置 9 个完整 App 示例，涵盖设计、演示、数据分析、内容创作等高频场景，开发者克隆后可以直接以这些 App 为起点改造。

特点

  • 一次定义，五端生效：Action 同时作为 AI 工具、React Hook、HTTP、MCP、A2A、CLI 的底层实现，零重复劳动
  • 共享状态，实时同步：PostgreSQL/PGlite 作为统一状态层，Agent 操作结果即时反映在 UI，UI 操作数据 Agent 也能感知
  • 上下文感知：Agent 自动接收当前页面、选中记录、活跃视图等 UI 状态，而不是在真空中执行任务
  • 多 Agent 协作：支持在同一工作空间内委托专业子 Agent 完成任务，Agent 之间可互相调用
  • 全链路可观测：内置 Skills（专业知识注入）、Memory（持久化上下文）、Automations（定时/事件触发），覆盖生产级 Agent 所需全部能力

使用方法

安装（Standalone 模式）：

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

定义一个 Action（以 hello 为例）：

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

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}!` };
  },
});

定义完成后，hello 这个 Action 自动成为：
– Claude Code / Cursor 等 Agent 的工具
– React 前端的 useActionQuery("hello", { name: "Alex" })
– REST GET /hello?name=Alex
– MCP 协议接口
– A2A 通信接口
– CLI 命令

生产部署：需要 PostgreSQL 数据库，配置 DATABASE_URL 环境变量即可水平扩展。

使用场景与人群

适用场景：需要 AI Agent 执行真实业务操作（而非仅聊天）的产品，典型包括：
– 内部工具：数据分析看板、内容管理系统、CRM 扩展
– 创作平台：设计稿生成、演示文稿生成、会议纪要处理
– 工作流自动化：邮件优先级排序、日程安排、资产管理

目标用户：有前端工程能力的产品团队、工具类 SaaS 开发者、以及希望在业务系统中落地 AI Agent 的全栈工程师。

输入与输出案例

案例 1：设计生成

  • Input：用户用自然语言描述需求，Agent 调用 design Action 生成设计方案
  • Output：返回结构化设计稿（包含布局、配色、组件建议），同时写入 PostgreSQL 状态库，UI 实时渲染预览

案例 2：内容工作流

  • Input：用户上传文档，调用 content Action 起草文章、设定风格标签、安排发布计划
  • Output：生成 Markdown 文章、关联标签分类、创建定时发布任务（Automations），团队成员可在同一 UI 内 Review 和编辑

GitHub: https://github.com/BuilderIO/agent-native

评论区

0 条评论

登录后可评论。

Skill超级捕获手 242 阅读