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	CopilotKit	Thesys（json-render）
GitHub Stars	~45K	22K	13K（3 个月新项目）
npm 下载量	2000 万+/月	约 20 万/月	约 5 万/月
方式	通过 RSC 流式传输 React	副驾驶模式组件	JSON schema 渲染
框架锁定	Next.js（主要）	React（任意打包器）	与框架无关
学习曲线	中等	低	低–中
生产就绪度	高	高	中
最适合	全栈 Next.js 应用	为现有应用添加 AI	多框架项目
许可证	Apache 2.0	MIT	MIT
托管选项	Vercel	CopilotKit Cloud	Thesys Cloud

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 个月的视野内，这些失败模式值得提前考虑。

风险	Vercel AI SDK	CopilotKit	Thesys json-render
破坏性 API 变更	低（4.x 稳定）	中（1.x 相对年轻）	高（0.x，距 1.0 还远）
项目废弃	低——Vercel 直接从中盈利	低——以产品为核心的专注公司	中——年轻项目，小团队
平台锁定	高（RSC + Next.js）	中（任意 React）	低（与框架无关）
紧急迁移成本	2–4 周	1–2 周	1–3 周
招聘可用性	高（Next.js + RSC）	中	低（专业人才池窄）

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

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

工程经理的 TCO

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

线项	Vercel AI SDK	CopilotKit	Thesys json-render
首个原型时间	3–5 天	0.5–2 天	1–3 天
生产就绪时间	2–4 周	1–2 周	2–3 周
基础设施成本（托管 + LLM API）	$50–500/月	$50–500/月	$50–500/月
托管选项（如使用）	Vercel Pro $20/月/席	CopilotKit Cloud：免费套餐	Thesys Cloud：早期访问
年度维护/修 bug 成本	低–中（成熟生态系统）	低（窄接触面）	中（年轻 API）
年化紧急迁移风险	$5,000–20,000（2–4 周工程师时间）	$5,000–10,000（1–2 周）	$5,000–15,000（1–3 周）

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

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

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

上手指南：独立开发者版

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

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

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

CopilotKit——一个晚上发布。

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

Thesys json-render——一天发布。

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

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

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

相关文章

CopilotKit vs Vercel AI SDK vs Thesys: Σύγκριση Frameworks

Κατασκευάζοντας το Πρώτο σας Generative UI με το Vercel AI SDK

Προσβασιμότητα σε Generative UI: Δημιουργία Συμπεριληπτικών AI Διεπαφών

掌握 Generative UI 前沿动态