CopilotKit vs Vercel AI SDK vs Thesys：框架对比

三个框架，一个问题：哪个 GenUI 技术栈值得押注？

如果你需要在 2026 年 4 月发布一个真正的 AI 驱动界面，实际上有三个候选：Vercel AI SDK、CopilotKit 和 Thesys json-render。它们解决同一个问题——让模型产出实时 UI——但架构上的分歧足以让这个选择影响维护成本、交互能力的上限，以及一年后你需要迁移时的代价。

本文数据截至 2026-05-09。版本：Vercel AI SDK 4.x，CopilotKit 1.x，Thesys json-render 0.x（2026 年 1 月发布）。更广泛的行业背景见 2026 年第二季度 Generative UI 现状；基础概念见 什么是 Generative UI。

2026 年初的格局

目前有三个框架主导着 Generative UI 领域。每个框架对同一个问题——如何让 AI 模型生成可交互的用户界面——采取了根本不同的方法。

以下是我在用三者都构建过生产功能后的发现。

快速对比

Vercel AI SDK：全栈首选

Vercel AI SDK 的 streamUI 函数是最强大的方式——也是最有主见的方式。它从服务端流式传输真正的 React Server Components，意味着 AI 输出是在服务端渲染的真实 React 代码。

工作原理

你将工具定义为 yield 加载状态并返回 React 组件的异步生成器函数。SDK 处理序列化组件树，并通过 RSC 协议将其流式传输到客户端。

import { streamUI } from 'ai/rsc';

const result = await streamUI({
  model: openai('gpt-4o'),
  prompt: 'Show revenue for Q1',
  tools: {
    revenueChart: {
      description: 'Display a revenue chart',
      parameters: z.object({ period: z.string(), data: z.array(...) }),
      generate: async function* (params) {
        yield <ChartSkeleton />;          // 立即显示加载状态
        return <RevenueChart {...params} />; // 最终组件
      },
    },
  },
});

yield / return 模式是定义性特征。骨架屏在 AI 解析参数时立即出现。参数就绪时，真实组件替换它——全部在一次流式响应中完成。

优势

• 与 Next.js 深度集成。 streamUI 围绕 App Router 和 RSC 设计。如果你在构建 Next.js 应用，这是最符合惯例的选择。
• 真正的服务端渲染。 生成的组件在服务端渲染，意味着它们可以直接在渲染函数中访问数据库、文件系统和私有 API。
• 最大的生态系统。 每月 2000 万+ 下载量意味着丰富的示例、Stack Overflow 答案和社区支持。
• 最佳 TypeScript 支持。 SDK 的类型非常完善。工具参数、模型响应和流式传输值都有正确的类型。
• 提供商灵活性。 SDK 对模型提供商做了抽象——只需更改一个导入就能从 OpenAI 切换到 Anthropic 或 Google。

弱点

• 依赖 Next.js。 streamUI 需要 React Server Components。它在 Next.js App Router 中工作。在该环境之外运行需要大量变通工作。
• RSC 调试复杂性。 当正在流式传输的服务端组件出错时，调试体验比普通服务端错误更糟。错误信息可能晦涩难懂。
• 服务端组件限制。 RSC 不能直接使用 hooks、浏览器 API 或客户端状态。交互行为需要仔细地拆分服务端和客户端组件。
• 与 Vercel 相邻。 虽然 SDK 在任何支持 Node.js 的平台上都能工作，但某些功能针对 Vercel 的基础设施进行了优化。

何时选择 Vercel AI SDK

你在构建新的 Next.js 应用。你想要最生产就绪、性能最好的 Generative UI 实现。你熟悉 React Server Components 和 App Router。你想要最广泛的社区示例选择。

CopilotKit：集成首选

CopilotKit 采取了不同的理念。它不是从服务端流式传输组件，而是提供客户端 React 组件来创建"副驾驶"体验。将 <CopilotChat> 放入你现有的应用，你就有了一个能读取和修改应用状态的侧边栏 AI。

工作原理

CopilotKit 引入了两个主要原语：动作和可读状态。你定义 AI 能做什么以及能看到什么，然后 CopilotKit 处理其余的事情。

import { CopilotKit, CopilotChat } from '@copilotkit/react-core';
import { useCopilotAction, useCopilotReadable } from '@copilotkit/react-core';

function Dashboard() {
  const [filters, setFilters] = useState({ period: 'month', metric: 'revenue' });

  // 让 AI 读取当前状态
  useCopilotReadable({
    description: 'Current dashboard filters',
    value: filters,
  });

  // 让 AI 修改筛选器
  useCopilotAction({
    name: 'updateFilters',
    description: 'Update the dashboard view',
    parameters: [
      { name: 'period', type: 'string' },
      { name: 'metric', type: 'string' },
    ],
    handler: ({ period, metric }) => setFilters({ period, metric }),
  });

  return (
    <div className="flex">
      <DashboardView filters={filters} />
      <CopilotChat instructions="Help the user explore their dashboard data." />
    </div>
  );
}

// 用 CopilotKit 包裹应用
function App() {
  return (
    <CopilotKit runtimeUrl="/api/copilotkit">
      <Dashboard />
    </CopilotKit>
  );
}

副驾驶模式是独特的：AI 是一个与现有 UI 交互的侧边栏助手，而不是从头生成新 UI。

优势

• 集成速度最快。 向现有 React 应用添加副驾驶侧边栏需要几小时，而不是几天。组件开箱即用。
• 适用于任何 React 设置。 Create React App、Vite、Remix、Next.js——CopilotKit 不需要 RSC 或特定的打包器。
• 自然的副驾驶模式。 协助现有 UI 的侧边栏 AI 是用户立即能理解的成熟模式。
• 内置状态同步。 useCopilotReadable 和 useCopilotAction 在应用和 AI 之间创建了清晰的双向契约。
• 强大的默认 UI。 <CopilotChat> 组件是生产质量的，无需构建自己的聊天界面即可定制。

弱点

• 客户端渲染模型。 CopilotKit 在客户端渲染 AI 输出。生成的组件没有 SSR，这影响面向公众内容的性能和 SEO。
• 副驾驶模式不是万能的。 如果你的用例不是"帮助使用主界面的侧边栏 AI 助手"，CopilotKit 需要更多定制才能适配。
• 对渲染管道控制较少。 对于复杂的自定义组件生成，Vercel AI SDK 给你更多灵活性。
• Bundle 大小。 客户端渲染意味着组件库会发送到浏览器。对于性能敏感的应用，这需要关注。

何时选择 CopilotKit

你有一个现有的 React 应用，想快速添加 AI 驱动的功能。副驾驶模式——能读取和修改主界面的 AI 侧边栏——适合你的产品。你不想处理 RSC。

Thesys（json-render）：通用首选

Thesys 于 2026 年 1 月推出，已拥有 13K GitHub stars，采取了最与框架无关的方式。AI 模型输出描述 UI 组件树的 JSON，渲染器将该 JSON 转换为可交互组件。

工作原理

AI 输出 JSON 而不是触发 React 工具调用。该 JSON 描述一个组件层次结构，Thesys 渲染器对其进行解释：

// AI 输出类似这样的内容：
const aiOutput = {
  type: "layout",
  direction: "grid",
  columns: 2,
  children: [
    {
      type: "MetricCard",
      props: {
        label: "Monthly Revenue",
        value: "$84,200",
        change: 12.4,
        period: "vs last month"
      }
    },
    {
      type: "AlertBanner",
      props: {
        type: "info",
        title: "New record",
        message: "Best month in company history"
      }
    }
  ]
};

// 渲染器将其转换为 UI
import { render } from '@thesys/json-render';
const ui = render(aiOutput, componentRegistry);

JSON schema 是核心产物。它可以被记录、缓存、重播，并在任何有 Thesys 渲染器的平台上渲染。

优势

• 与框架无关。 同一个 JSON schema 可以在 React、Vue、Angular 或原生移动端渲染。一个 AI 响应，多个渲染器。
• 易于调试。 JSON 输出是可以在任何 JSON 查看器中检查的纯数据结构。调试"AI 为什么生成了这个"很简单直接。
• 可缓存。 按提示词哈希缓存，AI 响应无需推理成本即可复用。这比 RSC 流式传输更难实现。
• 历史可审查。 将生成的 UI 存储为 JSON 意味着你可以审计向用户展示了什么，重播任何交互。
• 更简单的心智模型。 JSON 进，UI 出。这个抽象很容易向非 React 开发者解释。

弱点

• 较新的项目。 Thesys 于 2026 年 1 月推出。比其他选项经过生产验证的程度要低。破坏性变更的可能性更高。
• JSON 抽象限制了交互性。 复杂的交互模式——带有校验逻辑的表单、实时数据、动画过渡——比在 React 代码中更难用 JSON schema 表达。
• 客户端渲染。 与 CopilotKit 一样，渲染在客户端进行。没有 SSR。
• 社区较小。 3 个月 13K stars 是令人印象深刻的增长，但社区规模只是 Vercel AI SDK 的一小部分。

何时选择 Thesys

你的项目使用多个前端框架或需要支持移动端客户端。你重视检查、缓存和重播生成 UI 的能力。你想要更简单的心智模型。你愿意成为早期采用者。

迁移注意事项

之后在框架之间切换并不是免费的，但比看起来要便宜。

可移植的部分：

• 你的组件库（纯 React，无框架依赖）
• 你的系统提示和工具描述
• 工具参数的 Zod schema

需要重写的部分：

• Server Action / API 端点结构
• 流式传输集成代码
• 客户端渲染设置

对于中等复杂度的功能，在框架之间迁移估计需要 2–5 天。组件库本身——通常是大部分投资——无需更改即可移植。

风险评估和失败模式

三个框架各有独特的风险特征。在 12–24 个月的视野内，这些失败模式值得提前考虑。

"框架被废弃"的场景： 组件库 2–5 天就能移植；需要重写的是服务端层（流式传输或 JSON 端点）和客户端渲染器。如果组件从第一天起就没有硬性 SDK 特定导入，实际重建成本不超过每个生产功能一人周。

"模型更换"的场景： 三个框架都对提供商做了抽象，所以将 OpenAI 换成 Anthropic 或 Google 只需更改一个导入，再针对新模型的特性进行提示词调优。

工程经理的 TCO

为了并排对比总拥有成本，这里列出三个线项：上线时间、基础设施和一年维护。数字是单个中等复杂度生产功能（4–6 种组件类型，约 5 个服务端工具）的估算范围。

2–5 名工程师团队的采用路线图：

1. 第 1–2 周。 一名工程师在选定框架上构建试点功能。目标：端到端完成一个真实用户用例。
2. 第 3–4 周。 第二名工程师加入组件库；设计 token 和 AI 可调用组件列表正式化。
3. 第 2 个月。 仪器和可观测性——LLM 调用追踪、产物记录（RSC 流或 JSON）、token 预算。
4. 第 3 个月。 扩展到 2–3 个功能；团队培训系统提示和 Zod schema。

如果实验预算是一个季度，选 CopilotKit——到达可测量结果最快。对于长期的 Next.js 产品，Vercel AI SDK 的较长上手期会得到回报。Thesys 只有在多平台输出是原始需求时才是正确选择。

上手指南：独立开发者版

如果你是独立开发，重要的是快速出第一个可用演示和可预测的 LLM 推理成本——而不是架构纯粹性。

Vercel AI SDK——一个周末发布。

1. npx create-next-app@latest my-genui-app --typescript --app — 需要 App Router。
2. npm install ai @ai-sdk/openai zod。
3. 从官方文档复制 streamUI 示例，将演示工具换成你自己的。
4. 部署到 Vercel——vercel deploy；免费套餐覆盖约 10 万请求/月。
5. 预算： $0 托管 + $5–50/月 OpenAI 或 Anthropic（副业项目）。

CopilotKit——一个晚上发布。

1. 安装到现有 React 应用：npm install @copilotkit/react-core @copilotkit/react-ui。
2. 用 <CopilotKit> 包裹根组件，搭建 /api/copilotkit 端点。
3. 将 <CopilotChat> 放入布局，通过 useCopilotAction 定义 1–2 个动作。
4. 预算： $0 托管（Vercel/Netlify 免费套餐）+ $5–30/月 LLM 提供商；CopilotKit Cloud 有适合原型的免费套餐。

Thesys json-render——一天发布。

1. npm install @thesys/json-render 加上你选择的前端技术栈。
2. 定义 componentRegistry——AI 允许调用的 UI 组件列表。
3. 服务端端点接受用户请求，返回符合 Thesys schema 的 JSON；客户端通过 render() 传递。
4. 预算： $0 托管 + $5–50/月 LLM。预期会有破坏性变更——严格锁定包版本。

通用建议： 不要提前承诺生产框架。构建三个最简原型，每个花一个晚上——然后从亲身感受的痛点做决策，而不是从一张表格。

推荐矩阵

从头开始新的 Next.js 应用： Vercel AI SDK。纯 Next.js 构建毫无悬念。

为现有 React 应用添加 AI： CopilotKit。集成用例价值实现最快。

多框架或非 React 技术栈： Thesys。与框架无关需求的唯一实际选项。

未决定，想开始探索： Vercel AI SDK。最大的社区意味着最多的示例和最多你问题的答案。

押注 AI 界面的未来： 关注三者。这个空间变化很快，今天的赢家可能不是 18 个月后的赢家。

还有一个值得直说的原则：不要在早期过度投入框架选择。你构建的组件才是有价值的、持久的产物。框架是管道。构建出色的组件，保持它们不含框架特定代码，如果需要你可以用一周时间切换框架。

相关阅读：

• 2026 年第二季度 Generative UI 现状：14 个框架，4 个类别 — 更广泛的行业调查
• 什么是 Generative UI — 底层机制
• Vercel AI SDK + Vue + SSE on Cloudflare — Next.js 之外的实用配方
• 生产中的结构化输出与 Zod — 三个框架共享的模式
• 工具使用：生产模式 — 服务端工具层

正在使用其中一个框架，需要指导？预约咨询——我在三个框架上都有生产经验。