CopilotKit vs Vercel AI SDK vs Thesys: Framework Comparison

Three frameworks, one question: which GenUI stack should you bet on?

If you have to ship a real AI-driven interface in April 2026, you effectively have three candidates: Vercel AI SDK, CopilotKit, and Thesys json-render. They solve the same problem — letting a model produce a live UI — but architecturally they diverge enough that the choice drives maintenance cost, the ceiling of interactivity, and what a migration looks like if you outgrow the framework in a year.

Data in this article is current as of 2026-05-09. Versions: Vercel AI SDK 4.x, CopilotKit 1.x, Thesys json-render 0.x (launched January 2026). For fundamentals see What is Generative UI.

The Landscape in Early 2026

Three frameworks dominate the Generative UI space right now. Each takes a fundamentally different approach to the same problem: how do you let AI models generate interactive user interfaces?

Here is what I have found after building production features with all three.

Quick Comparison

Vercel AI SDK: The Full-Stack Choice

The Vercel AI SDK's streamUI function is the most powerful approach — and the most opinionated. It streams actual React Server Components from the server, which means AI output is real React code rendered server-side.

How It Works

You define tools as async generator functions that yield loading states and return React components. The SDK handles serializing the component tree and streaming it to the client via the RSC protocol.

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

The yield / return pattern is the defining characteristic. The skeleton appears instantly while the AI resolves parameters. When parameters are ready, the real component replaces it — all in one streaming response.

Strengths

• Deepest Next.js integration. streamUI is designed around App Router and RSC. If you are building a Next.js application, this is the most idiomatic choice.
• True server-side rendering. Generated components render on the server, which means they can access databases, file systems, and private APIs directly in their render functions.
• Largest ecosystem. 20M+ monthly downloads means abundant examples, Stack Overflow answers, and community support.
• Best TypeScript support. The SDK's types are thorough. Tool parameters, model responses, and streaming values are all properly typed.
• Provider flexibility. The SDK abstracts over model providers — switch from OpenAI to Anthropic to Google by changing one import.

Weaknesses

• Next.js dependency. streamUI requires React Server Components. It works in Next.js App Router. Running it outside that environment requires significant workaround effort.
• RSC debugging complexity. When something goes wrong in a server component that is being streamed, the debugging experience is worse than a regular server error. Error messages can be cryptic.
• Server component limitations. RSC cannot use hooks, browser APIs, or client-side state directly. Interactive behavior requires careful splitting of server and client components.
• Vercel-adjacent. While the SDK works on any platform that supports Node.js, some features are optimized for Vercel's infrastructure.

When to Choose Vercel AI SDK

You are building a new Next.js application. You want the most production-ready, performant Generative UI implementation. You are comfortable with React Server Components and the App Router. You want the widest selection of community examples.

CopilotKit: The Integration Choice

CopilotKit takes a different philosophy. Instead of streaming components from the server, it provides client-side React components that create "copilot" experiences. Drop <CopilotChat> into your existing application and you have a sidebar AI that can read and modify your app's state.

How It Works

CopilotKit introduces two main primitives: actions and readable state. You define what the AI can do and what it can see, then CopilotKit handles the rest.

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>
  );
}

The copilot pattern is distinct: the AI is a sidebar assistant that interacts with the existing UI, rather than generating new UI from scratch.

Strengths

• Fastest time-to-integration. Adding a copilot sidebar to an existing React app takes hours, not days. The components work out of the box.
• Works with any React setup. Create React App, Vite, Remix, Next.js — CopilotKit does not require RSC or a specific bundler.
• Natural copilot pattern. The sidebar AI that assists with the existing UI is a well-understood pattern that users immediately understand.
• State synchronization built in. useCopilotReadable and useCopilotAction create a clean bidirectional contract between your app and the AI.
• Strong default UI. The <CopilotChat> component is production-quality and customizable without requiring you to build your own chat interface.

Weaknesses

• Client-side rendering model. CopilotKit renders AI output on the client. There is no SSR for generated components, which impacts performance and SEO for public-facing content.
• The copilot pattern is not universal. If your use case is not "sidebar AI assistant that helps with the main interface," CopilotKit requires more customization to fit.
• Less control over rendering pipeline. For complex custom component generation, the Vercel AI SDK gives you more flexibility.
• Bundle size. Client-side rendering means the component library ships to the browser. For performance-sensitive applications, this requires attention.

When to Choose CopilotKit

You have an existing React application and want to add AI-powered features quickly. The copilot pattern — an AI sidebar that can read and modify the main interface — fits your product. You do not want to deal with RSC.

Thesys (json-render): The Universal Choice

Thesys, launched in January 2026 and already at 13K GitHub stars, takes the most framework-agnostic approach. AI models output JSON that describes a UI component tree, and a renderer turns that JSON into interactive components.

How It Works

The AI outputs JSON instead of triggering React tool calls. That JSON describes a component hierarchy, and the Thesys renderer interprets it:

// 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);

The JSON schema is the artifact. It can be logged, cached, replayed, and rendered on any platform that has a Thesys renderer.

Strengths

• Framework-agnostic. The same JSON schema renders in React, Vue, Angular, or native mobile. One AI response, many renderers.
• Debuggable. The JSON output is a plain data structure you can inspect in any JSON viewer. Debugging "why did the AI generate this?" is straightforward.
• Cacheable. Cache by prompt hash and the AI response is reused without inference cost. This is harder with RSC streaming.
• Inspectable history. Storing generated UI as JSON means you can audit exactly what was shown to users, replaying any interaction.
• Simpler mental model. JSON in, UI out. The abstraction is easy to explain to non-React developers.

Weaknesses

• Younger project. Thesys launched in January 2026. Less battle-tested in production than alternatives. Breaking changes are more likely.
• JSON abstraction limits interactivity. Complex interactive patterns — forms with validation logic, real-time data, animated transitions — are harder to express in a JSON schema than in React code.
• Client-side rendering. Like CopilotKit, the rendering happens on the client. No SSR.
• Smaller community. 13K stars in 3 months is impressive growth, but the community is a fraction of Vercel AI SDK's size.

When to Choose Thesys

Your project uses multiple frontend frameworks or needs to support mobile clients. You value the ability to inspect, cache, and replay generated UIs. You want a simpler mental model. You are comfortable being an early adopter.

Migration Considerations

Switching between frameworks later is not free, but it is less expensive than it looks.

What is portable:

• Your component library (pure React, no framework dependency)
• Your system prompts and tool descriptions
• Your Zod schemas for tool parameters

What requires rewriting:

• The server action / API endpoint structure
• The streaming integration code
• The client-side rendering setup

Estimate 2–5 days to migrate between frameworks for a medium-complexity feature. The component library itself — usually the majority of the investment — moves without changes.

Risk Assessment and Failure Modes

Each of the three frameworks carries a distinct risk profile. On a 12–24 month horizon, these failure modes deserve up-front consideration.

"The framework was sunsetted" scenario: the component library ports in 2–5 days; what you rewrite is the server layer (streaming or JSON endpoint) and the client renderer. If components were written without hard SDK-specific imports from day one, the actual cost of a rebuild stays under one person-week per production feature.

"The model changed" scenario: all three frameworks abstract over the provider, so swapping OpenAI for Anthropic or Google is a one-import edit plus prompt tuning for the new model's quirks.

TCO for an Engineering Manager

To put total cost of ownership side by side, here are three line items: time to ship, infrastructure, and a year of maintenance. The numbers are estimated ranges for a single medium-complexity production feature (4–6 component types, ~5 server-side tools).

Adoption roadmap for a team of 2–5 engineers:

1. Week 1–2. One engineer builds a pilot feature on the chosen framework. Target: close one real user use-case end to end.
2. Week 3–4. A second engineer joins on the component library; design tokens and the list of AI-callable components get formalized.
3. Month 2. Instrumentation and observability — LLM call traces, artifact logging (RSC stream or JSON), token budgets.
4. Month 3. Scale to 2–3 features; team training on system prompts and Zod schemas.

If the experimental budget is one quarter, take CopilotKit — fastest path to a measurable outcome. For a long-lived Next.js product, Vercel AI SDK pays back the longer onboarding. Thesys is the right call only when multi-platform output is in the original requirements.

Getting Started: An Indie Hacker's Guide

If you are building solo, what matters is speed to first working demo and predictable LLM inference costs — not architectural purity.

Vercel AI SDK — ship over a weekend.

1. npx create-next-app@latest my-genui-app --typescript --app — App Router is required.
2. npm install ai @ai-sdk/openai zod.
3. Copy the streamUI example from the official docs and swap the demo tool for yours.
4. Deploy on Vercel — vercel deploy; the free tier covers ~100K requests/mo.
5. Budget: $0 hosting + $5–50/mo for OpenAI or Anthropic on a side project.

CopilotKit — ship in an evening.

1. Install into an existing React app: npm install @copilotkit/react-core @copilotkit/react-ui.
2. Wrap your root in <CopilotKit> and stand up an /api/copilotkit endpoint.
3. Drop <CopilotChat> into the layout, define 1–2 actions via useCopilotAction.
4. Budget: $0 hosting (Vercel/Netlify free tier) + $5–30/mo LLM provider; CopilotKit Cloud has a free tier suitable for prototypes.

Thesys json-render — ship in a day.

1. npm install @thesys/json-render plus your frontend stack of choice.
2. Define a componentRegistry — the list of UI components the AI is allowed to call.
3. Server endpoint takes the user request, returns JSON conforming to the Thesys schema; the client passes it through render().
4. Budget: $0 hosting + $5–50/mo LLM. Expect breaking changes — pin the package version strictly.

General advice: do not commit to a production framework upfront. Build three minimal prototypes, one evening each — then the decision is made from felt pain, not from a table.

Recommendation Matrix

Starting a new Next.js app from scratch: Vercel AI SDK. No contest for pure Next.js builds.

Adding AI to an existing React app: CopilotKit. Fastest time-to-value for the integration use case.

Multi-framework or non-React stack: Thesys. The only practical option for framework-agnostic needs.

Undecided and want to start exploring: Vercel AI SDK. The largest community means the most examples and the most answers to your questions.

Betting on the future of AI interfaces: Watch all three. The space is moving fast and the winners of today may not be the winners in 18 months.

One more principle worth stating plainly: do not over-invest in framework choice early. The components you build are the valuable, durable artifact. The framework is plumbing. Build great components, keep them clean of framework-specific code, and you can switch frameworks with a week of effort if you need to.

Related reading:

• What is Generative UI — the underlying mechanics
• Building Generative UI with Vercel AI SDK — the server-side tool and structured-output layer
• Getting Started with Generative UI — hands-on primer

Building with one of these frameworks and need guidance? Book a consultation — I have production experience with all three.