copilotkit

name	copilotkit
description	SDK para construir aplicaciones agent-native con Generative UI, AG-UI Protocol, shared state y human-in-the-loop. Multi-framework: React, Angular, Vue, React Native. Makers del AG-UI Protocol adoptado por Google, LangChain, AWS, Microsoft.
url	https://github.com/CopilotKit/CopilotKit
category	ia
fecha	2026-06-06T00:00:00.000Z

CopilotKit — Frontend Stack for Agents & Generative UI

¿Qué hace?

CopilotKit es un SDK full-stack para construir aplicaciones agent-native con Generative UI, shared state y human-in-the-loop. Lo que empezó como una librería React es ahora un framework agéntico multi-plataforma: el mismo agente puede impulsar tu web app, app móvil y Slack workspace.

Es la empresa detrás del AG-UI Protocol — adoptado por Google, LangChain, AWS, Microsoft, Mastra, PydanticAI y más.

Características clave

• Chat UI — Interfaz de chat personalizable con streaming, tool calls y respuestas de agentes
• Backend Tool Rendering — Agentes llaman tools del backend que retornan componentes UI renderizados en el cliente
• Generative UI — Agentes generan y actualizan componentes UI dinámicamente en runtime
• Shared State — Capa de estado sincronizada entre agentes y UI components en tiempo real
• Human-in-the-Loop — Agentes pausan ejecución para pedir input/confirmación al usuario
• Self-Learning (early access) — Agentes que mejoran continuamente con feedback vía CLHF
• Multi-framework — React/Next.js (GA), Angular, Vue, React Native
• Beyond Browser — Slack, Microsoft Teams (Discord, Google Chat coming soon)

Casos de uso

1. Chatbots agent-native — Integrar un agente IA con UI generativa en tu app React/Next.js
2. Herramientas internas — Dashboards con agentes que generan UI dinámica según el contexto
3. Slack/Teams bots — Mismo agente que funciona en web y en mensajería empresarial
4. Human-in-the-loop workflows — Agentes que piden confirmación antes de acciones críticas
5. Multi-platform agents — Un backend de agente, múltiples frontends (web + móvil + Slack)

Snippets útiles

Quickstart React/Next.js

npm install @copilotkit/react-core @copilotkit/react-ui @copilotkit/shared @copilotkit/runtime

// App.tsx
import { CopilotKit } from '@copilotkit/react-core';
import { CopilotSidebar } from '@copilotkit/react-ui';

export default function App() {
  return (
    <CopilotKit runtime="/api/copilot-runtime" publicApiKey="your-key">
      <CopilotSidebar />
      {/* tu app */}
    </CopilotKit>
  );
}

Backend Runtime

// app/api/copilot-runtime/route.ts
import { CopilotRuntime, OpenAIAdapter, copilotRuntimeNextJSAppRouter } from '@copilotkit/runtime';
import { llmCompletion } from '@copilotkit/runtime-providers-openai';

export const { POST } = copilotRuntimeNextJSAppRouter({
  runtime: new CopilotRuntime(),
  adapters: [
    new OpenAIAdapter({ model: llmCompletion("gpt-4o") }),
  ],
});

Generative UI con Tool Rendering

// Tu componente que el agente puede renderizar
import { useCopilotAction } from '@copilotkit/react-core';

function FlightCard({ flight }) {
  return (
    <div className="border rounded p-4">
      <h3>{flight.airline}</h3>
      <p>{flight.from} → {flight.to}</p>
      <p>${flight.price}</p>
    </div>
  );
}

// Registrar action para que el agente pueda invocarla
useCopilotAction({
  name: "showFlight",
  description: "Show a flight card for the user",
  parameters: [
    { name: "flight", type: "object" },
  ],
  render: ({ flight }) => <FlightCard flight={flight} />,
});

Shared State

import { useCopilotReadable, useCopilotWritable } from '@copilotkit/react-core';

function MyComponent() {
  // Leer estado que el agente puede ver
  useCopilotReadable({
    description: "Current user preferences and context",
    value: { userId, theme, language },
  });

  // Escribir estado que el agente puede modificar
  const setPreference = useCopilotWritable({
    key: "userPreference",
  });

  return <button onClick={() => setPreference({ theme: "dark" })}>Dark Mode</button>;
}

Cómo integrarlo

1. Instalar paquetes: @copilotkit/react-core, @copilotkit/react-ui, @copilotkit/shared, @copilotkit/runtime
2. Configurar runtime: Crear endpoint /api/copilot-runtime con CopilotRuntime
3. Envolver app: Usar <CopilotKit> como provider
4. Añadir UI: <CopilotSidebar> o <CopilotPopup> o custom UI
5. Registrar actions: useCopilotAction para tool rendering
6. Shared state: useCopilotReadable y useCopilotWritable

Pitfalls

• API key: Necesitas clave de CopilotKit (gratis) + provider de LLM (OpenAI, Anthropic, etc.)
• Runtime: El /api/copilot-runtime necesita un provider de LLM configurado
• Generative UI: Solo funciona en el framework soportado (React, Angular, Vue, React Native)
• Slack/Teams: Early access, requiere onboarding con el equipo de CopilotKit
• AG-UI Protocol: Si quieres interoperabilidad con otros frameworks, usar el protocolo AG-UI directamente

Fecha de descubrimiento

2026-06-06 — 32.7K⭐, trending diario + semanal