CopilotKit vs Vercel AI SDK vs Thesys: Comparativa de frameworks

Tres frameworks, una pregunta: ¿en qué stack de Interfaz Generativa apostar?

Si en abril de 2026 necesitas construir una interfaz con IA, tienes tres candidatos reales: Vercel AI SDK, CopilotKit y Thesys json-render. Los tres resuelven la misma tarea — dejar que el modelo genere UI interactiva —, pero sus arquitecturas divergen tanto que la elección determinará el coste de mantenimiento, el techo de interactividad y el escenario de migración si toca reescribir la capa de generación dentro de un año.

Los datos de este artículo son válidos a 9 de mayo de 2026. Versiones: Vercel AI SDK 4.x, CopilotKit 1.x, Thesys json-render 0.x (lanzamiento enero 2026). Conceptos básicos en «Qué es la Interfaz Generativa».

El panorama a principios de 2026

Tres frameworks dominan el espacio de la Interfaz Generativa. Cada uno adopta un enfoque fundamentalmente diferente ante el mismo problema: ¿cómo permites que los modelos de IA generen interfaces de usuario interactivas?

Esto es lo que he descubierto después de construir funcionalidades en producción con los tres.

Comparación rápida

Vercel AI SDK: la opción full-stack

La función streamUI del Vercel AI SDK es el enfoque más potente — y también el más opinado en cuanto a convenciones arquitectónicas. Transmite React Server Components reales desde el servidor, lo que significa que la salida de la IA es código React auténtico renderizado en el lado del servidor.

Cómo funciona

Defines las herramientas como funciones generadoras asíncronas que devuelven estados de carga y retornan componentes React. El SDK se encarga de serializar el árbol de componentes y transmitirlo al cliente a través del protocolo 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
      },
    },
  },
});

El patrón yield / return es su característica definitoria. El skeleton aparece de inmediato mientras la IA resuelve los parámetros. Cuando estos están listos, el componente real lo reemplaza — todo en una única respuesta en streaming.

Puntos fuertes

• Integración más profunda con Next.js. streamUI está diseñado en torno al App Router y RSC. Si estás construyendo una aplicación Next.js, es la opción más idiomática.
• Renderizado en servidor auténtico. Los componentes generados se renderizan en el servidor, lo que significa que pueden acceder directamente a bases de datos, sistemas de archivos y APIs privadas desde sus funciones de renderizado.
• Ecosistema más amplio. Más de 20 millones de descargas mensuales se traducen en abundantes ejemplos, respuestas en Stack Overflow y soporte de la comunidad.
• Mejor soporte de TypeScript. Los tipos del SDK son exhaustivos: parámetros de herramientas, respuestas del modelo y valores en streaming están todos correctamente tipados.
• Flexibilidad de proveedores. El SDK abstrae sobre los proveedores de modelos — cambia de OpenAI a Anthropic o Google modificando un único import.

Puntos débiles

• Dependencia de Next.js. streamUI requiere React Server Components y funciona en el App Router de Next.js. Ejecutarlo fuera de ese entorno requiere un esfuerzo considerable de adaptación.
• Complejidad al depurar RSC. Cuando algo falla en un server component que se está transmitiendo, la experiencia de depuración es peor que con un error de servidor normal. Los mensajes de error pueden ser crípticos.
• Limitaciones de los server components. RSC no puede usar hooks, APIs del navegador ni estado del lado del cliente directamente. El comportamiento interactivo requiere una división cuidadosa entre componentes de servidor y de cliente.
• Proximidad a Vercel. Aunque el SDK funciona en cualquier plataforma compatible con Node.js, algunas funcionalidades están optimizadas para la infraestructura de Vercel.

Cuándo elegir Vercel AI SDK

Estás construyendo una nueva aplicación Next.js. Quieres la implementación de Interfaz Generativa más madura y de mayor rendimiento. Te sientes cómodo con React Server Components y el App Router. Quieres la mayor selección de ejemplos de la comunidad.

CopilotKit: la opción de integración

CopilotKit adopta una filosofía diferente. En lugar de transmitir componentes desde el servidor, proporciona componentes React del lado del cliente que crean experiencias de «copilot». Añade <CopilotChat> a tu aplicación existente y tendrás una barra lateral de IA capaz de leer y modificar el estado de tu app.

Cómo funciona

CopilotKit introduce dos primitivas principales: acciones y estado legible. Defines lo que la IA puede hacer y lo que puede ver, y CopilotKit se encarga del resto.

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

El patrón copilot es distintivo: la IA actúa como barra lateral asistente que interactúa con la interfaz existente, en lugar de generar una interfaz nueva desde cero.

Puntos fuertes

• El tiempo de integración más corto. Añadir una barra lateral copilot a una aplicación React existente lleva horas, no días. Los componentes funcionan sin configuración adicional.
• Compatible con cualquier configuración de React. Create React App, Vite, Remix, Next.js — CopilotKit no requiere RSC ni un bundler específico.
• Patrón copilot natural. La barra lateral de IA que asiste con la interfaz existente es un patrón que los usuarios entienden de inmediato.
• Sincronización de estado integrada. useCopilotReadable y useCopilotAction crean un contrato bidireccional limpio entre tu app y la IA.
• Interfaz lista para producción. El componente <CopilotChat> es de calidad para producción y personalizable — no necesitas construir tu propio chat desde cero.

Puntos débiles

• Renderizado en el cliente. CopilotKit renderiza la salida de la IA en el cliente. No hay SSR para los componentes generados, lo que afecta al rendimiento y al SEO del contenido público.
• El patrón copilot no es universal. Si tu caso de uso no encaja en el patrón de «asistente IA en barra lateral que ayuda con la interfaz principal», CopilotKit requiere más personalización.
• Menos control sobre el pipeline de renderizado. Para la generación de componentes personalizados complejos, el Vercel AI SDK te da más flexibilidad.
• Tamaño del bundle. El renderizado en el cliente implica que la biblioteca de componentes se envía al navegador. En aplicaciones sensibles al rendimiento, esto requiere atención.

Cuándo elegir CopilotKit

Tienes una aplicación React existente y quieres añadir funcionalidades potenciadas por IA rápidamente. El patrón copilot — una IA en barra lateral que puede leer y modificar la interfaz principal — encaja con tu producto. No quieres lidiar con RSC.

Thesys (json-render): la opción universal

Thesys, lanzado en enero de 2026 y ya con 13K estrellas en GitHub, adopta el enfoque más agnóstico al framework. Los modelos de IA producen JSON que describe un árbol de componentes de UI, y un renderizador convierte ese JSON en componentes interactivos.

Cómo funciona

La IA produce JSON en lugar de activar llamadas a herramientas de React. Ese JSON describe una jerarquía de componentes que el renderizador de Thesys interpreta así:

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

El esquema JSON es el artefacto. Puede registrarse, guardarse en caché, reproducirse y renderizarse en cualquier plataforma que tenga un renderizador de Thesys.

Puntos fuertes

• Agnóstico al framework. El mismo esquema JSON se renderiza en React, Vue, Angular o en apps nativas para móvil. Una respuesta de IA, múltiples renderizadores.
• Fácil de depurar. La salida JSON es una estructura de datos plana que puedes inspeccionar en cualquier visor. Entender «por qué la IA generó esto» es directo.
• Cacheable. Almacena en caché por hash del prompt y la respuesta de la IA se reutiliza sin coste de inferencia. Con el streaming de RSC esto es más difícil de lograr.
• Historial inspeccionable. Guardar la UI generada como JSON te permite auditar exactamente qué se mostró a los usuarios y reproducir cualquier interacción.
• Modelo mental más sencillo. JSON de entrada, UI de salida. La abstracción es fácil de explicar a desarrolladores que no trabajan con React.

Puntos débiles

• Proyecto más joven. Thesys se lanzó en enero de 2026. Menos probado en producción que las alternativas. Los cambios que rompen compatibilidad son más probables.
• La abstracción JSON limita la interactividad. Los patrones interactivos complejos — formularios con lógica de validación, datos en tiempo real, transiciones animadas — son más difíciles de expresar en un esquema JSON que en código React.
• Renderizado en el cliente. Como CopilotKit, el renderizado ocurre en el cliente. Sin SSR.
• Comunidad más pequeña. 13K estrellas en 3 meses es un crecimiento impresionante, pero la comunidad es una fracción del tamaño del Vercel AI SDK.

Cuándo elegir Thesys

Tu proyecto usa múltiples frameworks frontend o necesita soportar clientes móviles. Valoras la capacidad de inspeccionar, cachear y reproducir interfaces generadas. Quieres un modelo mental más sencillo. Estás dispuesto a ser adoptador temprano.

Consideraciones para la migración

Cambiar de framework más adelante no es gratuito, pero es menos costoso de lo que parece.

Qué es portable:

• Tu biblioteca de componentes (React puro, sin dependencia del framework)
• Tus prompts de sistema y descripciones de herramientas
• Tus esquemas Zod para los parámetros de herramientas

Qué requiere reescritura:

• La estructura de la server action o del endpoint de API
• El código de integración del streaming
• La configuración del renderizado en el cliente

Calcula entre 2 y 5 días para migrar entre frameworks en una funcionalidad de complejidad media. La biblioteca de componentes — habitualmente la mayor parte de la inversión — se traslada sin cambios.

Evaluación de riesgos y escenarios de fallo

Cada uno de los tres frameworks tiene su propio perfil de riesgo. Si la decisión se toma con un horizonte de 12–24 meses, conviene tener en cuenta estos escenarios de antemano.

Escenario «el framework se abandona»: la biblioteca de componentes se porta en 2–5 días; lo que hay que reescribir es la capa servidor (streaming o endpoint JSON) y el renderizador cliente. Si los componentes se escribieron desde el principio sin imports duros al SDK concreto, el coste real de reconstrucción cabe en una semana-persona por funcionalidad en producción.

Escenario «cambia el modelo»: los tres frameworks abstraen al proveedor, así que pasar de OpenAI a Anthropic o Google es cambiar un import y ajustar los prompts de sistema a las particularidades del nuevo modelo.

TCO para responsables de ingeniería

Para poner el coste total de propiedad en perspectiva, estimaré tres partidas: tiempo de puesta en marcha, infraestructura y mantenimiento a un año. Las cifras son rangos estimados para una funcionalidad media en producción (4–6 tipos de componentes, ~5 herramientas de servidor).

Hoja de ruta de adopción para un equipo de 2–5 ingenieros:

1. Semanas 1–2. Un desarrollador construye una funcionalidad piloto con el framework elegido. El objetivo es cubrir un caso de uso real de principio a fin.
2. Semanas 3–4. Se incorpora el ingeniero de biblioteca de componentes; se formalizan los design tokens y la lista de componentes que la IA puede invocar.
3. Mes 2. Instrumentación y observabilidad — trazas de llamadas LLM, logging de artefactos (streaming RSC / JSON), presupuestos de tokens.
4. Mes 3. Expansión a 2–3 funcionalidades, formación del equipo en prompts de sistema y esquemas Zod.

Si el presupuesto para experimentar se limita a un trimestre — elige CopilotKit: el camino más rápido hasta un resultado medible. Si construyes un producto a largo plazo en Next.js — Vercel AI SDK amortiza el onboarding más largo. Thesys tiene sentido cuando el requisito multiplataforma está en el pliego desde el inicio.

Guía de inicio para el desarrollador en solitario

Si construyes el proyecto tú solo, lo que importa no es tanto la arquitectura como la velocidad hasta la primera demo funcional y la previsibilidad del coste de inferencia LLM.

Vercel AI SDK — empieza en un fin de semana.

1. npx create-next-app@latest my-genui-app --typescript --app — el App Router es obligatorio.
2. npm install ai @ai-sdk/openai zod.
3. Copia el ejemplo streamUI de la documentación oficial y sustituye la herramienta de demo por la tuya.
4. Despliega en Vercel — vercel deploy; el plan gratuito cubre hasta ~100K peticiones/mes.
5. Presupuesto: 0 $ de hosting + 5–50 $/mes en OpenAI o Anthropic para un proyecto personal.

CopilotKit — empieza en una tarde.

1. Instala en tu aplicación React existente: npm install @copilotkit/react-core @copilotkit/react-ui.
2. Envuelve el componente raíz en <CopilotKit> y levanta el endpoint /api/copilotkit.
3. Añade <CopilotChat> al layout y describe 1–2 acciones con useCopilotAction.
4. Presupuesto: 0 $ de hosting (Vercel/Netlify gratuito) + 5–30 $/mes en el proveedor LLM; CopilotKit Cloud tiene plan gratuito para prototipos.

Thesys json-render — empieza en un día.

1. npm install @thesys/json-render más tu stack frontend preferido.
2. Define el componentRegistry — la lista de componentes UI que la IA puede invocar.
3. El endpoint de servidor recibe la petición del usuario, devuelve JSON conforme al esquema de Thesys; el cliente lo pasa por render().
4. Presupuesto: 0 $ de hosting + 5–50 $/mes en LLM. Prepárate para cambios que rompen compatibilidad — fija la versión del paquete de forma estricta.

Consejo general: no elijas el framework de producción a priori. Construye 3 prototipos mínimos, uno por tarde — después de eso, la elección se hará con conocimiento de causa, no basándose en una tabla comparativa.

Matriz de recomendación

Empezando una nueva app Next.js desde cero: Vercel AI SDK. Sin discusión para proyectos puramente Next.js.

Añadiendo IA a una app React existente: CopilotKit. El tiempo de obtención de valor más corto para el caso de integración.

Stack multi-framework o no React: Thesys. La única opción práctica para necesidades agnósticas al framework.

Indeciso y queriendo explorar: Vercel AI SDK. La comunidad más grande significa más ejemplos y más respuestas a tus preguntas.

Apostando por el futuro de las interfaces de IA: observa los tres. El espacio avanza rápido y los ganadores de hoy puede que no sean los de dentro de 18 meses.

Un principio más que merece formularse con claridad: no sobreinviertas en la elección del framework al principio. Los componentes que construyes son el artefacto valioso y duradero. El framework es la fontanería. Construye grandes componentes, mantenlos libres de código específico del framework, y podrás cambiar de framework con una semana de esfuerzo si lo necesitas.

Artículos relacionados:

• Qué es la Interfaz Generativa — mecánica básica
• Construir Interfaz Generativa con Vercel AI SDK — capa servidor de herramientas y structured output
• Primeros pasos con Interfaz Generativa — introducción práctica

¿Construyendo con alguno de estos frameworks y necesitas orientación? Reserva una consultoría — tengo experiencia en producción con los tres.