CopilotKit vs Vercel AI SDK vs Thesys: сравнение фреймворков

Три фреймворка, один вопрос: на какой стек Generative UI делать ставку?

Если в апреле 2026 года вам нужно собрать AI-интерфейс, у вас фактически три кандидата: Vercel AI SDK, CopilotKit и Thesys json-render. Каждый решает одну задачу — позволить модели генерировать живой UI, — но архитектурно они расходятся настолько, что выбор определит и стоимость поддержки, и потолок интерактивности, и сценарий миграции, если через год придётся пересобирать слой генерации.

Данные в статье актуальны на 9 мая 2026 года. Версии: Vercel AI SDK 4.x, CopilotKit 1.x, Thesys json-render 0.x (запуск январь 2026). Базовые понятия — в «Что такое Generative UI».

Расклад сил в начале 2026 года

Сегодня пространство Generative UI делят три фреймворка. Каждый предлагает принципиально разный подход к одной и той же задаче: как позволить AI-моделям генерировать интерактивные пользовательские интерфейсы?

Вот что я выяснил, построив production-фичи на всех трёх.

Краткое сравнение

Vercel AI SDK: выбор для полного стека

Функция streamUI из Vercel AI SDK — самый мощный подход и при этом самый требовательный к соблюдению архитектурных соглашений. Она стримит настоящие React Server Components с сервера — то есть AI-вывод представляет собой реальный React-код, отрисованный на стороне сервера.

Как это работает

Вы определяете инструменты как асинхронные функции-генераторы, которые отдают состояния загрузки и возвращают 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 />;          // immediate loading state
        return <RevenueChart {...params} />; // final component
      },
    },
  },
});

Паттерн yield / return — это главная особенность подхода. Скелетон появляется мгновенно, пока AI разбирается с параметрами. Как только параметры готовы, реальный компонент заменяет скелетон — всё в рамках одного потокового ответа.

Сильные стороны

• Глубокая интеграция с Next.js. streamUI спроектирован вокруг App Router и RSC. Если вы строите Next.js-приложение — это самый органичный выбор.
• Полноценный серверный рендеринг. Генерируемые компоненты рендерятся на сервере, а значит, прямо в функциях рендеринга они могут обращаться к базам данных, файловой системе и приватным API.
• Крупнейшая экосистема. Более 20 млн загрузок в месяц означают обилие примеров, ответов на Stack Overflow и поддержки сообщества.
• Лучшая поддержка TypeScript. Типы SDK проработаны детально: параметры инструментов, ответы моделей и потоковые значения — всё типизировано должным образом.
• Гибкость в выборе провайдера. SDK абстрагирует работу с поставщиками моделей — достаточно поменять один импорт, чтобы переключиться с OpenAI на Anthropic или Google.

Слабые стороны

• Зависимость от Next.js. streamUI требует React Server Components и работает в Next.js App Router. Использование за пределами этой среды потребует значительных обходных решений.
• Сложная отладка RSC. Когда что-то идёт не так в серверном компоненте при стриминге, разобраться в проблеме сложнее, чем при обычной серверной ошибке. Сообщения об ошибках могут быть непонятными.
• Ограничения серверных компонентов. RSC не может напрямую использовать хуки, браузерные API или клиентское состояние. Интерактивное поведение требует тщательного разделения на серверные и клиентские компоненты.
• Близость к Vercel. SDK работает на любой платформе с поддержкой Node.js, однако часть возможностей оптимизирована под инфраструктуру Vercel.

Когда выбирать Vercel AI SDK

Вы строите новое Next.js-приложение. Вам нужна наиболее production-ready и производительная реализация 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' });

  // Let the AI read the current state
  useCopilotReadable({
    description: 'Current dashboard filters',
    value: filters,
  });

  // Let the AI modify the filters
  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>
  );
}

// Wrap the app with CopilotKit
function App() {
  return (
    <CopilotKit runtimeUrl="/api/copilotkit">
      <Dashboard />
    </CopilotKit>
  );
}

Паттерн «копилот» принципиально иной: AI выступает как панель-ассистент, взаимодействующий с существующим UI, а не генерирующий новый UI с нуля.

Сильные стороны

• Быстрейшая интеграция. Добавить копилот-панель в существующее React-приложение — это часы, а не дни. Компоненты работают без дополнительной настройки.
• Работает с любым React-окружением. Create React App, Vite, Remix, Next.js — CopilotKit не требует RSC или конкретного бандлера.
• Интуитивно понятный паттерн. AI-ассистент в боковой панели, помогающий работать с основным интерфейсом, — паттерн, который пользователи понимают сразу.
• Встроенная синхронизация состояния. useCopilotReadable и useCopilotAction создают чёткий двусторонний контракт между приложением и AI.
• Качественный UI из коробки. Компонент <CopilotChat> готов к production и поддаётся кастомизации — вам не нужно строить собственный чат-интерфейс.

Слабые стороны

• Клиентский рендеринг. CopilotKit рендерит AI-вывод на клиенте. Серверного рендеринга для генерируемых компонентов нет — это влияет на производительность и SEO для публичного контента.
• Паттерн «копилот» применим не везде. Если ваш кейс не укладывается в схему «AI-панель, помогающая работать с основным интерфейсом», CopilotKit потребует существенной доработки.
• Меньше контроля над пайплайном рендеринга. Для сложной генерации нестандартных компонентов Vercel AI SDK даёт больше гибкости.
• Размер бандла. Клиентский рендеринг означает, что библиотека компонентов загружается в браузер. В приложениях, чувствительных к производительности, это требует внимания.

Когда выбирать CopilotKit

У вас есть существующее React-приложение, и вы хотите быстро добавить AI-возможности. Паттерн «копилот» — AI-панель, умеющая читать и изменять основной интерфейс, — соответствует вашему продукту. Вы не хотите иметь дело с RSC.

Thesys (json-render): универсальный выбор

Thesys, запущенный в январе 2026 года и уже набравший 13K звёзд на GitHub, предлагает наиболее независимый от фреймворков подход. AI-модели генерируют JSON, описывающий дерево UI-компонентов, а рендерер превращает этот JSON в интерактивный интерфейс.

Как это работает

AI выдаёт JSON вместо вызовов React-инструментов. Этот JSON описывает иерархию компонентов, которую рендерер Thesys интерпретирует следующим образом:

// The AI outputs something like this:
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"
      }
    }
  ]
};

// The renderer turns it into UI
import { render } from '@thesys/json-render';
const ui = render(aiOutput, componentRegistry);

JSON-схема — это артефакт. Её можно логировать, кэшировать, воспроизводить и рендерить на любой платформе, имеющей рендерер Thesys.

Сильные стороны

• Независимость от фреймворка. Одна и та же JSON-схема рендерится в React, Vue, Angular или нативных мобильных приложениях. Один AI-ответ — множество рендереров.
• Простая отладка. JSON-вывод — это обычная структура данных, которую можно изучить в любом JSON-просмотрщике. Разобраться в том, «почему AI сгенерировал именно это», не составляет труда.
• Возможность кэширования. Кэшируйте по хешу промпта — и AI-ответ переиспользуется без затрат на инференс. С RSC-стримингом это реализовать сложнее.
• Инспектируемая история. Хранение сгенерированного UI в виде JSON позволяет отслеживать, что именно показывалось пользователям, и воспроизводить любое взаимодействие.
• Более простая ментальная модель. JSON на входе, UI на выходе. Абстракцию легко объяснить разработчикам, не знакомым с React.

Слабые стороны

• Молодой проект. Thesys запущен в январе 2026 года. В production он обкатан меньше, чем альтернативы. Обратно несовместимые изменения более вероятны.
• JSON-абстракция ограничивает интерактивность. Сложные интерактивные паттерны — формы с логикой валидации, данные в реальном времени, анимированные переходы — труднее выразить в JSON-схеме, чем в React-коде.
• Клиентский рендеринг. Как и CopilotKit, рендеринг происходит на клиенте. Серверного рендеринга нет.
• Меньшее сообщество. 13K звёзд за 3 месяца — впечатляющий рост, но сообщество несопоставимо по размеру с Vercel AI SDK.

Когда выбирать Thesys

Ваш проект использует несколько frontend-фреймворков или требует поддержки мобильных клиентов. Вам важна возможность инспектировать, кэшировать и воспроизводить сгенерированный UI. Вы хотите более простую ментальную модель. Вы готовы быть ранним пользователем.

Соображения о миграции

Переход между фреймворками не бесплатен, но обходится дешевле, чем кажется.

Что переносится без изменений:

• Библиотека компонентов (чистый React, без зависимости от фреймворка)
• Системные промпты и описания инструментов
• Zod-схемы для параметров инструментов

Что требует переписывания:

• Структура серверных экшенов / API-эндпоинтов
• Код интеграции стриминга
• Клиентская настройка рендеринга

На миграцию между фреймворками для фичи средней сложности уходит от 2 до 5 дней. Библиотека компонентов — обычно основная часть инвестиций — переходит без изменений.

Оценка рисков и режимы отказа

Каждый из трёх фреймворков несёт свой профиль риска. Если решение принимается на горизонт 12–24 месяцев, эти режимы отказа стоит учитывать заранее.

Сценарий «фреймворк остановили»: компонентная библиотека переносится за 2–5 дней; переписать предстоит серверный слой (стриминг или JSON-эндпоинт) и клиентский рендерер. Если компоненты с самого начала писались без жёстких импортов из конкретного SDK, реальная стоимость пересборки укладывается в человеконеделю на одну production-фичу.

Сценарий «модель сменилась»: все три фреймворка абстрагируют провайдера, так что замена OpenAI на Anthropic или Google — это правка одного импорта плюс корректировка системных промптов под особенности новой модели.

TCO для инженерного руководителя

Чтобы поставить рядом совокупную стоимость владения, прикину три статьи: время на ввод в строй, инфраструктура и поддержка на горизонте года. Цифры — оценочные диапазоны для одной production-фичи среднего уровня (4–6 типов компонентов, ~5 серверных инструментов).

Дорожная карта внедрения для команды из 2–5 инженеров:

1. Неделя 1–2. Один разработчик собирает pilot-фичу на выбранном фреймворке. Цель — закрыть один реальный пользовательский кейс end-to-end.
2. Неделя 3–4. Подключается инженер по компонентной библиотеке; формализуются дизайн-токены и список компонентов, которые AI имеет право вызывать.
3. Месяц 2. Инструментирование и наблюдаемость — трейсы LLM-вызовов, логирование артефактов (RSC-стриминг / JSON), бюджеты на токены.
4. Месяц 3. Расширение на 2–3 фичи, тренинг команды по системным промптам и Zod-схемам.

Если бюджет на эксперимент ограничен одним кварталом — берите CopilotKit: самый быстрый путь до measurable-результата. Если строите долгий продукт на Next.js — Vercel AI SDK окупит более длительный onboarding. 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, бесплатный тариф покроет до ~100K запросов/мес.
5. Бюджет: $0 хостинг + $5–50/мес OpenAI или Anthropic для пет-проекта.

CopilotKit — старт за вечер.

1. Установите в существующее React-приложение: npm install @copilotkit/react-core @copilotkit/react-ui.
2. Оберните корневой компонент в <CopilotKit>, поднимите endpoint /api/copilotkit.
3. Добавьте <CopilotChat> в layout, опишите 1–2 действия через useCopilotAction.
4. Бюджет: $0 хостинг (Vercel/Netlify free) + $5–30/мес LLM-провайдер; CopilotKit Cloud имеет бесплатный тариф для прототипов.

Thesys json-render — старт за день.

1. npm install @thesys/json-render плюс ваш фронтенд-стек на выбор.
2. Опишите componentRegistry — список ваших UI-компонентов, которые AI имеет право вызывать.
3. Серверный эндпоинт принимает запрос пользователя, возвращает JSON, отвечающий схеме Thesys; клиент пропускает его через render().
4. Бюджет: $0 хостинг + $5–50/мес LLM. Будьте готовы к брейкинг-чейнджам — пиньте версию пакета строго.

Общий совет: не выбирайте сразу production-фреймворк. Соберите 3 минимальных прототипа по одному вечеру каждый — после этого выбор будет сделан с пониманием боли, а не по таблице.

Матрица рекомендаций

Новое Next.js-приложение с нуля: Vercel AI SDK. Для чистого Next.js-стека — без вариантов.

Добавление AI в существующее React-приложение: CopilotKit. Наибыстрейший путь к результату для задачи интеграции.

Мультифреймворковый стек или не-React: Thesys. Единственный практичный вариант для нужд, не привязанных к конкретному фреймворку.

Не определились и хотите начать изучение: Vercel AI SDK. Самое большое сообщество — больше всего примеров и ответов на вопросы.

Делаете ставку на будущее AI-интерфейсов: следите за всеми тремя. Пространство меняется стремительно, и лидеры сегодняшнего дня могут сдать позиции через 18 месяцев.

Стоит сформулировать ещё один принцип прямо: не зарывайтесь слишком глубоко в выбор фреймворка на раннем этапе. Компоненты, которые вы строите, — это ценный и долговечный артефакт. Фреймворк — всего лишь обвязка. Создавайте отличные компоненты, держите их чистыми от фреймворк-специфичного кода, и при необходимости вы сможете сменить фреймворк за неделю.

Связанные материалы:

• Что такое Generative UI — базовая механика
• Создание Generative UI с Vercel AI SDK — серверный слой инструментов и structured output
• Начало работы с Generative UI — практическое введение

Работаете с одним из этих фреймворков и нужна помощь? Запишитесь на консультацию — у меня есть production-опыт со всеми тремя.