YOHO AI

标签： React

  • Meta 开源设计系统 Astryx：一套让人和 AI 智能体一起「建界面」的组件体系

    Meta 开源设计系统 Astryx：一套让人和 AI 智能体一起「建界面」的组件体系

    Astryx 开源设计系统

    在 Meta 内部生长了 8 年的设计系统 Astryx，于 2026 年初正式开源。它驱动着 Meta 内部 13,000+ 应用，如今以 MIT 协议对外释放——一套「可完全定制、且为智能体而生（agent-ready）」的组件体系：你导入预编译 CSS，再使用带完整 TypeScript 类型的 React 组件；人用它写界面，AI 助手也用同一套工具写界面。

    一、项目简介

    Astryx 是 Meta 开源的、可完全定制、且「为人和智能体协同构建而生」的设计系统。它基于 React + StyleX，内置 150+ 无障碍组件、品牌级主题、暗色模式、可即用的模板，以及一套 CLI——所有能力作为一个 cohesive 系统统一交付。它的独特之处在于：消费端不需要引入任何构建插件或样式库，人和 AI 助手从同一份参考文档出发构建界面。

    二、安装要求和过程

    环境要求：

    • Node 22+（活跃 LTS 线）；包管理器 pnpm 11（可通过 corepack enable 自动安装固定版本）
    • 已有 React 项目（Next.js / Vite / Tailwind / 甚至 CDN 引入均支持）
    • 无需额外构建插件，也无需 PostCSS / Babel 配置

    快速安装：

    # npm
npm install @astryxdesign/core @astryxdesign/theme-neutral
npm install -D @astryxdesign/cli

# pnpm / yarn 等价
pnpm add @astryxdesign/core @astryxdesign/theme-neutral
pnpm add -D @astryxdesign/cli

    为让 AI 助手和新人都能可靠调用，建议在 package.json 的 scripts 里加一行，避免路径错误：

    "scripts": {
  "astryx": "node node_modules/@astryxdesign/cli/bin/astryx.mjs"
}

    最简接入 = 几行 CSS import + 一个 ThemeProvider，无需配置构建链。详见 @astryxdesign/core 的 Quick Start。

    三、核心功能

    Astryx 架构总览：Foundations / Components / Patterns + 四大包
    Astryx 架构总览：Foundations / Components / Patterns + 四大包
    1. 150+ 无障碍组件 + 完整 TS 类型：从基础输入到复杂数据表格统一命名、属性与组合约定——学会几个，剩下的就「似曾相识」，人和 AI 都能预测未知组件的行为。
    2. 开放内部实现（Open internals）：组件可在任意层级组合，基础构件直接导出；需要深入时，swizzle 一键把组件完整源码「弹出」到你的项目里，让你真正拥有它。
    3. 无样式锁定（No styling lock-in）：内部用 StyleX 编写样式，但对使用者完全透明；用 className 即可用 Tailwind / CSS Modules / 原生 CSS 覆盖。
    4. 免包裹即可品牌化：主题就是一组 CSS 自定义属性覆盖，设计师无需 Fork 或封装就能重塑观感；内置 7 套主题（neutral / butter / chocolate / matcha / stone / gothic / y2k）。
    5. 为人和智能体而生：API、文档、CLI 一同设计，人和 AI 助手用同一套参考、同一方式构建；CLI 提供组件文档、模板、脚手架、主题与 codemods。
    为什么 Astryx 不一样：开放内部 / 无样式锁定 / 免包裹定制 / 人 AI 同体系
    为什么 Astryx 不一样：开放内部 / 无样式锁定 / 免包裹定制 / 人 AI 同体系

    四、典型使用场景

    7 套开箱即用且完全可定制的主题
    7 套开箱即用且完全可定制的主题
    1. 统一中后台 UI：150+ 组件 + Patterns（表格页 / 详情页 / 表单向导 / 导航模式）直接拼出一致的企业后台，不必从零造轮子，也便于团队沉淀设计共识。
    2. AI 辅助开发（Agent-ready）：把 Astryx 接入 Claude Code / Codex / Cursor，让 AI 按同一套组件约定生成界面；CLI 的组件文档与 codemods 让「人审 AI 生成的代码」更顺畅、对得上约定。
    3. 快速品牌换肤：用 CSS 变量主题或多套内置主题，几行覆盖就完成暗色模式与品牌色切换，无需改动组件源码——适合需要多品牌、多租户外观的产品。

    五、推荐理由

    作为长期被「组件库要么封闭、要么强约定打架」困扰的开发者，Astryx 最打动我的是「引导而非强制」的设计哲学——它把设计意见放在文档和示例里，而不是用 guardrail 跟你对抗。swizzle 能从顶层 API 一路下沉到源码（对需要深度定制的团队太关键），而 className 覆盖又让 Tailwind 老用户零摩擦接入。更难得的是它真把「AI 助手」当成一等公民：同一套 API 与 CLI 既给人用、也给智能体用，省去了「AI 生成代码和团队约定对不上」的尴尬。Meta 8 年、13,000+ 应用的实战背书，也让它的稳定性比多数个人项目更可信。如果你正在选型一套能陪团队和 AI 一起长大的设计系统，Astryx 值得一试。

    六、下载地址

    （本文配图：GitHub 社交预览卡 + 作者原创架构/特性/主题信息图）

  • Next AI Draw.io：用自然语言一句话生成 draw.io 架构图的 AI 绘图神器

    Next AI Draw.io：用自然语言一句话生成 draw.io 架构图的 AI 绘图神器

    还在为画架构图、流程图熬夜对峙 draw.io？Next AI Draw.io 让你用一句话描述需求，AI 就直接生成、修改并渲染出标准的 draw.io 图表——支持 RAG 架构、云架构（AWS/Azure/GCP）、认证流程、甚至”会动的” Transformer 连接线。

    📌 项目简介

    Next AI Draw.io 是一个基于 Next.js 的开源 Web 应用，把大语言模型（LLM）与 draw.io 深度结合，让你通过自然语言命令创建、修改和增强专业图表——”Chat, Draw, Visualize” 三者合一。

    🖼️ 效果一览（原项目示例）

    下面是项目 README 中的真实生成效果，输入只是几句提示词：

    RAG 架构图示例
    提示词：为聊天应用生成 RAG 架构图，数据入采用连通图
    React + AWS 认证架构图
    提示词：用 React + AWS（Serverless）生成认证流程
    Transformer 架构动画连线
    提示词：用动画连线展示 Transformer 架构

    ⚙️ 安装要求与过程

    环境要求

    • Node.js 18+（项目基于 Next.js 16.x / React 19.x）
    • 包管理器：npm（或 pnpm/yarn）
    • 大模型 API Key：默认走 AWS Bedrock，也支持 OpenAI / Anthropic / Google / DeepSeek / Ollama 等 15+ .provider；可自带 Key，也可由管理员配置服务端模型
    • 推荐模型：Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro、DeepSeek V3.2/R1（需强长文本+严格格式能力来生成 draw.io XML）

    快速安装（本地开发）

    # 1. 克隆仓库
git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io

# 2. 安装依赖并配置环境变量
npm install
cp env.example .env.local

# 3. 启动开发服务器
npm run dev

# 4. 浏览器打开 http://localhost:6002

    不想装？直接访问官方在线 Demo next-ai-drawio.jiang.jp，或下载 Windows / macOS / Linux 桌面端（Releases 页），也能一键部署到 EdgeOne Pages / Vercel / Cloudflare Workers。

    ✨ 核心功能

    • 自然语言生成与编辑：用中文/英文命令直接创建、修改 draw.io 图表，AI 输出标准 XML 并实时渲染。
    • 图片 / PDF / 文本复用：上传已有草图、截图、PDF 或文档，AI 自动”仿绘+增强”成规范图表。
    • 云架构图专精：内置 AWS、Azure、GCP 等云厂商图标，生成云原生/Serverless 架构图尤其拿手（Claude 系列对云图标训练充分）。
    • AI 推理过程可见 + 版本历史：可查看模型思考链路，并对每次编辑前的版本做版本控制、随时回滚。
    • 动画连线 & MCP 服务：支持”会动”的连接线提升表达力；并提供 MCP Server，让 Claude Desktop / Cursor / VS Code 等 Agent 也能调用它画图。

    🎯 典型使用场景

    1. 技术方案评审 & 架构设计：架构师口述”用 React + AWS 做认证流程”，秒出 Serverless 架构图，评审会直接拿去讨论，省去手拖元件的半天。
    2. 知识沉淀与教学：把 Henry Chesbrough 开放式创新模型、RAG 数据流等抽象概念，用一句提示词变成可读可视化的示意图，写文档、做 PPT 事半功倍。
    3. AI Agent 自动化出图：在 Claude Code / Cursor 里装好 MCP，让编码 Agent 边写代码边自动产出”用户登录 + MFA + 会话管理”流程图，图直接实时出现在浏览器。

    💡 推荐理由

    我自己最吃它的”零摩擦”：打开网页、打一句话，图就出来了——对不擅长画图、或只想快点把脑子里的结构固定下来的人太友好了。它不像某些”AI 画图”只给不可编辑的图片，Next AI Draw.io 产出的是标准 draw.io XML，可继续在 draw.io 里精修，这点对工程场景很重要。多 Provider 支持 + 可自带 Key + 服务端模型配置，部署灵活；搭配 MCP 还能塞进 Agent 工作流。缺点是要出高质量云架构图对模型有要求（建议 Claude/GPT-5/Gemini 档位），弱模型偶尔 XML 会错位。总体 33K+ Star、Apache-2.0 协议，值得一试。

    📥 下载地址

  • Vercel AI SDK：构建流式 AI 应用的官方 TypeScript 工具包，25K+ Stars 让 Next.js 开发 AI 应用变得简单

    Vercel AI SDK：构建流式 AI 应用的官方 TypeScript 工具包，25K+ Stars 让 Next.js 开发 AI 应用变得简单

    🤖 Vercel AI SDK：构建 AI 应用的官方 TypeScript 工具包

    The AI Toolkit for TypeScript. From the creators of Next.js, the AI SDK is a free open-source library for building AI-powered applications and agents

    ⭐ GitHub Stars
    25.251
    💻 主要语言
    TypeScript
    📜 开源许可
    NOASSERTION
    🏢 开发团队
    Vercel
    📦 最新版本
    @ai-sdk/xai@4.0.3
    🔄 周下载量
    100万+

    📌 项目简介

    Vercel AI SDK 是 Vercel 官方推出的 TypeScript 工具包，专为构建跨框架、跨平台的流式 AI 应用而设计。它提供了一套统一的 API，让开发者可以在 Next.js、React、Vue、Svelte 等任何 JavaScript 框架中，轻松集成 OpenAI、Anthropic、Google 等主流 LLM，并以流式方式将 AI 生成内容实时渲染到 UI 中。

    作为 Vercel AI 工程平台 的开源核心，AI SDK 已被广泛用于构建 ChatGPT 类应用、AI 写作助手、智能客服等场景。它不仅是 Vercel 官方 AI 解决方案的基石，也是 TypeScript 生态中最流行的 AI 应用开发工具包，GitHub 星标超过 25,000+，npm 周下载量超过 100 万次。

    ⚙️ 安装要求和过程

    环境要求

    • 运行环境：Node.js 18.0+（推荐 20+）
    • 框架支持：Next.js 14+（App Router 优先）、React 18+、Vue 3+、Svelte 4+
    • TypeScript：推荐 5.0+（完整类型支持）
    • 包管理器：npm / pnpm / yarn / bun 均可

    快速安装

    在 Next.js 项目中一键安装：

    // 核心包 + OpenAI 提供商
npm install ai @ai-sdk/openai
// 或使用 pnpm
pnpm add ai @ai-sdk/openai

// Vue/Nuxt 项目
npm install ai @ai-sdk/vue @ai-sdk/openai

// Svelte/SvelteKit 项目
npm install ai @ai-sdk/svelte @ai-sdk/openai

    最小可用示例（Next.js App Router）

    // app/api/chat/route.ts
import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';

export async function POST(req: Request) {
  const { prompt } = await req.json();

  const result = await streamText({
    model: openai('gpt-4o'),
    prompt,
  });

  return result.toDataStreamResponse();
}

    前端调用（React hooks）：

    // app/components/Chat.tsx
'use client';
import { useChat } from 'ai/react';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();

  return (
    <div>
      {messages.map(m => (
        <div key={m.id}>
          <strong>{m.role}:</strong> {m.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
      </form>
    </div>
  );
}

    无需手动管理流式响应、无需手写 ReadableStream 解析，AI SDK 全部帮你搞定。

    🌟 核心功能

    • 📡 流式输出（Streaming） — 内置完整的流式响应处理，AI 生成内容可逐字实时渲染到 UI，用户体验媲美 ChatGPT。支持 streamText、streamObject、streamData 等多种流式 API，兼容 Edge Runtime。
    • 🧩 多框架支持 — 提供 React、Vue、Svelte 专用 hooks（useChat、useCompletion、useObject），一套核心逻辑适配所有主流前端框架。每个框架都有独立的 @ai-sdk/xxx 适配器包。
    • 🔌 多模型统一接口 — 通过 @ai-sdk 系列提供商适配器，统一接入 OpenAI、Anthropic、Google Gemini、AWS Bedrock、Azure、Ollama、Groq 等 30+ LLM 提供商，切换模型只需改一行代码。
    • 🛠️ 工具调用（Tool Calling） — 原生支持 LLM 工具调用（Function Calling），可用 TypeScript 函数定义 AI 可调用的”工具”，LLM 自行决定调用哪些工具。支持多步工具调用链（maxSteps），轻松构建自主 Agent。
    • 💾 对话持久化 — 内置 useChat 的持久化支持，可对接 Vercel KV、Upstash Redis、PostgreSQL 等存储方案，轻松实现对话历史管理与多会话管理。
    • 🖼️ 多模态支持 — 支持图像输入（Vision）、语音转文字（Transcription）、文字转语音（Speech）、图像生成（Image Generation）等多模态能力，覆盖 AI 应用全链路。

    💡 典型使用场景

    场景一：构建类 ChatGPT 的对话应用

    AI SDK 的 useChat hook 封装了完整的对话状态管理（消息列表、输入状态、提交处理、流式更新），开发者只需几行代码即可构建支持流式输出的多轮对话 UI。配合 Next.js App Router 的 Server Actions，可实现端到端的类型安全。

    适用项目：AI 聊天助手、智能客服系统、企业内部知识库问答、教育辅导机器人。

    场景二：AI 辅助写作与内容生成

    利用 useCompletion hook，可在任意输入框中集成 AI 续写、改写、翻译、摘要等功能。流式输出让用户实时看到生成结果，配合 streamObject 还可生成结构化 JSON 数据（如自动填充表单、结构化数据提取）。

    适用项目：AI 写作工具、邮件智能助手、代码补全插件、SEO 内容生成器。

    场景三：AI Agent 与自动化工作流

    AI SDK 的 Tool Calling 功能允许定义 JavaScript 函数作为 AI 可调用的”工具”，LLM 可自行决定调用哪些工具来完成任务。配合 maxSteps 参数可实现多轮工具调用链，构建能自主规划并执行任务的 AI Agent。Vercel 还提供了 Agent 专用 API，支持中断/恢复、状态持久化等高级能力。

    适用项目：智能数据分析助手、自动化工作流编排、AI 运维助手、个人生产力 Agent。

    🔥 推荐理由

    为什么选择 Vercel AI SDK？

    1. Vercel 官方背书，生态最完整
    作为 Next.js 母公司 Vercel 的官方 AI 解决方案，AI SDK 与 Next.js App Router 深度集成，部署到 Vercel 平台可享受零配置体验。同时支持 Netlify、Cloudflare Pages 等所有主流部署平台，Edge Runtime 全面兼容。

    2. 流式输出体验最佳
    AI SDK 的流式处理是 TypeScript 生态中最成熟的实现，支持文字、对象、工具调用结果、Data Stream 附件等多种数据类型的流式传输，前端渲染延迟低至毫秒级。内置的 Data Stream Protocol 还支持在流式响应中夹带自定义数据（如推理过程、来源引用）。

    3. 跨框架复用，学习成本低
    核心 API 设计高度一致，从 React 迁移到 Vue 只需更换 import 路径。官方文档提供各框架的完整示例，且每个示例都有 TypeScript 类型标注，上手非常快。AI SDK Core（模型调用）甚至可以脱离前端框架在纯 Node.js 环境中使用。

    4. 内置多模态 AI 工具链
    除了基础对话，还内置了 generateImage（图像生成）、embed（文本嵌入向量化）、transcribe（语音转文字）、speech（文字转语音）等多模态能力，并支持通过统一接口调用。未来还将支持视频生成等更多模态。

    5. 活跃的社区与持续迭代
    Vercel 团队保持高频迭代（平均每周发布），积极跟进 LLM 最新能力（如 Anthropic 的 Computer Use、OpenAI 的 o1 推理模式）。GitHub 上 25K+ Stars，npm 周下载量 100 万+，社区提供的示例项目和模板非常丰富。

    💡 个人使用感受：我用 AI SDK 构建过两个 AI 聊天项目，最深刻的印象是”省心”——流式输出不用自己处理 ReadableStream，工具调用不用手写 JSON Schema 解析，连 TypeScript 类型都是自动推导的。如果你在用 Next.js，这基本上是唯一选择；如果你在用其他框架，它同样是最好的 TypeScript AI 工具包。

    📥 下载地址

    📦 GitHub 仓库
    📚 官方文档
    🚀 Vercel AI 模板
    📦 npm 包

    开源许可：NOASSERTION（实际以仓库 LICENSE 文件为准）
    GitHub：github.com/vercel/ai
    官网/文档：sdk.vercel.ai
    所属公司：Vercel（Next.js 母公司）
    适合人群：Next.js/React/Vue 开发者、AI 应用创业者、全栈工程师、前端 AI 集成需求者

  • 【开源推荐】CopilotKit：34.8K+ Stars！面向AI Agent与生成式UI的前端技术栈

    【开源推荐】CopilotKit：34.8K+ Stars！面向AI Agent与生成式UI的前端技术栈

    ⭐ GitHub 34.8K+ Stars · MIT 开源

    CopilotKit

    The Frontend Stack for Agents & Generative UI

    📌 项目简介

    CopilotKit 是专为 AI Agent 和 生成式 UI 打造的前端技术栈，支持 React、Next.js、Angular、Vue、React Native 及 Slack 等多端场景。它不仅是 SDK，更是 AG-UI 协议 的发起方，已被 Google、LangChain、AWS、Microsoft 等主流厂商采用。

    🚀 核心功能

    ① 全场景聊天 UI

    完全可定制的聊天界面组件，支持消息流式传输、工具调用可视化、Agent 响应实时渲染，接入仅需几行代码。

    ② 生成式 UI（Generative UI）

    Agent 可在运行时根据用户意图动态生成、更新 UI 组件，支持三种模式：静态模式（AG-UI 协议）、声明式模式（A2UI）、开放式模式（MCP Apps）。

    ③ 共享状态层

    Agent 和 UI 组件可同时读写同一份状态，实现真正的双向交互——UI 可以驱动 Agent，Agent 也可以更新 UI。

    ④ 人在回路（Human-in-the-Loop）

    Agent 执行过程中可暂停，等待用户确认、修改输入后再继续，确保关键操作始终在人的掌控之下。

    ⑤ 自学习 Agent（Beta）

    基于人类反馈的持续学习（CLHF）能力，无需微调模型即可通过用户交互自动优化行为，支持按用户偏好个性化适配。

    ⚙️ 安装要求与步骤

    环境要求

    • Node.js 18+（React/Next.js 项目）
    • 一个 LLM API Key（OpenAI / Anthropic / Gemini 等）
    • 现有前端项目或新建 Next.js 项目

    ① 快速初始化项目（5分钟内启动）

    npx copilotkit@latest create

    按提示输入 LLM 密钥，自动完成项目脚手架搭建。

    ② 安装 Agent 技能包（支持 Claude Code / Cursor / Codex）

    npx copilotkit@latest skills install

    可重复运行，随时更新到最新版技能包。

    💡 典型使用场景

    🤖

    AI 聊天助手集成

    为现有 SaaS 产品嵌入智能聊天界面，支持流式输出和工具调用展示，用户体验媲美 ChatGPT。

    📊

    动态数据仪表盘

    Agent 根据用户问题动态生成图表和可视化组件，用户可与生成的内容实时交互。

    🔄

    跨平台 Agent 应用

    同一套 Agent 后端同时支持 Web、移动端和 Slack，无需重复开发，大幅降低维护成本。

    🌐 AG-UI 协议：Agent 与原生 UI 的桥梁

    CopilotKit 是 AG-UI 协议的发起方。该协议定义了 Agent 与工作流如何与用户端应用无缝连接，已被 Google、LangChain、AWS、Microsoft、Mastra、PydanticAI 等主流厂商采用。

    npx create-ag-ui-app my-agent-app

    ✨ 推荐理由

    如果你正在开发 AI Agent 产品，CopilotKit 几乎是前端层的最佳选择。它解决了 Agent 与 UI 之间的核心痛点——如何让 LLM 的推理过程优雅地呈现在用户界面上。

    最打动我的是它的 生成式 UI 能力：Agent 不再只能返回文字，而是可以动态生成真正可交互的 UI 组件。结合 AG-UI 协议，你的 Agent 可以无缝对接任意前端框架。

    另外，CopilotKit 对 人在回路 的支持也非常完善，这对于企业级应用场景至关重要——让 AI 处理繁琐操作，关键决策点由人确认，既提高效率又保障安全。

    适合人群：AI 产品前端开发者、SaaS 创业者、企业数字化转型团队。

  • CopilotKit：32.7K Stars！构建Agent原生应用的最佳SDK，让AI真正融入你的产品

    CopilotKit：32.7K Stars！构建Agent原生应用的最佳SDK，让AI真正融入你的产品

    项目简介

    做AI应用开发的朋友，大概率都遇到过一个尴尬：

    你接了LLM，写了Prompt，聊天窗口跑起来了。然后用户说”帮我查订单”，你的Agent调用了工具，返回一段文字——但用户真正想要的，是一个可以点击的订单卡片、一个可以筛选的表单、一张可以交互的图表。

    CopilotKit 要解决的，就是这个问题。32.7K Stars，MIT协议，一句话说清楚：它是构建Agent原生应用的全栈SDK，让AI不仅能”说”，还能”做界面”。

    安装要求和过程

    环境要求

    • Node.js 18+
    • React 18+（React版本）；Angular/Vue也已支持
    • TypeScript（推荐）

    快速开始（新项目）

    npx copilotkit@latest create -f nextjs

    已有项目接入

    npx copilotkit@latest init

    执行后自动完成：核心包安装、Provider配置、Agent与UI连接、部署就绪配置。

    安装React核心包

    npm install @copilotkit/react-core @copilotkit/react-ui

    核心功能

    1. 生成式UI（Generative UI）

    这是CopilotKit最招牌的能力。传统聊天AI返回的是文字，CopilotKit让Agent在运行时动态生成前端组件。比如用户说”画一个销售漏斗图”，Agent可以直接生成一个React组件渲染在聊天窗口里，而不是返回一段描述。

    2. AG-UI协议的主导者

    CopilotKit主导了AG-UI协议的制定，这个协议已经被Google、LangChain、AWS、Microsoft、Mastra、PydanticAI等主流AI厂商采纳。它的作用是实现Agent与用户界面的标准化通信——你可以理解为”AI界面的HTTP协议”。用了CopilotKit，你的Agent天然支持这个协议，未来对接其他厂商的生态会很顺畅。

    3. 人机协同工作流

    有些操作，AI不能自己拍板。CopilotKit支持Agent执行过程中主动暂停，请求人工确认后再继续。比如”我准备删除这三条数据，确认？”——用户点确认，Agent再执行。这个能力在金融、医疗、企业审批等场景里几乎是必需的。

    4. 共享状态管理

    Agent和UI组件之间有一层可实时读写同步的状态层。Agent更新了状态，UI立刻响应；用户在UI上操作，Agent也能立刻感知。这种双向实时交互，是”真正Agent原生应用”和”套壳聊天窗口”之间最本质的差别。

    5. 自学习Agent（早期访问）

    通过人类反馈持续学习（RLHF），Agent可以不用微调模型，就能通过用户反馈自动优化行为。而且支持按用户偏好做个性化适配——也就是说，同一个Agent，给不同用户用，会越来越”懂”那个用户。

    典型使用场景

    场景一：AI客服系统

    用户在聊天窗口说”查我的订单”。传统方案：Agent返回一段文字”您的订单号是xxx，状态是已发货”。

    用了CopilotKit：Agent动态生成一个可交互的订单卡片，用户可以直接在聊天窗口里点击”退款”、”查看物流”、”联系卖家”。整个过程不需要跳转页面，也不需要用户去别的地方操作。

    场景二：企业知识库助手

    结合RAG，用户问”帮我分析Q1各区域的销售趋势”。Agent不仅返回文字结论，还直接生成一张交互式图表，用户可以在聊天窗口里筛选区域、切换时间维度、导出数据。这种体验，是传统”一问一答”的AI客服完全给不了的。

    推荐理由

    我自己试CopilotKit最直接的原因是：受够了”AI聊天窗口”的局限。

    接LLM很方便，但接完之后你会发现，用户真正想要的不是”聊天”，而是”完成任务”。查订单、填表单、看报表——这些事情，纯文字交互的效率是很低的。

    CopilotKit的Generative UI把这个问题解决了。Agent可以动态生成界面，用户可以在聊天窗口里直接操作，整个体验是对话式+界面式的混合——这其实更像人跟人打交道的方式，而不是人跟搜索引擎打交道的方式。

    另外一点是AG-UI协议。现在AI应用开发有个痛点：每接一个平台（Web、移动端、Slack、Teams），都要重新写一套UI逻辑。CopilotKit的AG-UI协议让同一套Agent逻辑可以同时驱动多个平台的UI——这个在多端部署的场景下，省的工作量是很可观的。

    下载地址

    GitHub仓库：https://github.com/CopilotKit/CopilotKit（32.7K+ Stars）

    官方网站：https://www.copilotkit.ai/

    开发文档：https://docs.copilotkit.ai/

    npm安装：npm install @copilotkit/react-core @copilotkit/react-ui