CopilotKit vs Vercel AI SDK vs Thesys: confronto tra framework

Tre framework, una domanda: su quale stack di Generative UI puntare?

Se nell'aprile 2026 devi costruire un'interfaccia AI, hai in pratica tre candidati: Vercel AI SDK, CopilotKit e Thesys json-render. Ognuno risolve lo stesso problema — permettere al modello di generare una UI interattiva — ma le loro architetture divergono a tal punto che la scelta determinerà il costo di manutenzione, il tetto di interattività e lo scenario di migrazione se tra un anno dovessi ricostruire il layer di generazione.

I dati in questo articolo sono aggiornati al 9 maggio 2026. Versioni: Vercel AI SDK 4.x, CopilotKit 1.x, Thesys json-render 0.x (lancio gennaio 2026). I concetti di base sono in «Che cos'è la Generative UI».

Il panorama all'inizio del 2026

Tre framework dominano oggi lo spazio della Generative UI. Ognuno affronta in modo fondamentalmente diverso lo stesso problema: come permettere ai modelli AI di generare interfacce utente interattive?

Ecco cosa ho scoperto dopo aver sviluppato funzionalità in produzione con tutti e tre.

Confronto rapido

Vercel AI SDK: la scelta full-stack

La funzione streamUI del Vercel AI SDK è l'approccio più potente — e anche il più prescrittivo. Fa lo streaming di React Server Components reali dal server: l'output dell'AI è codice React effettivo, renderizzato lato server.

Come funziona

Definisci gli strumenti come funzioni generatrici asincrone che producono stati di caricamento e restituiscono componenti React. L'SDK gestisce la serializzazione dell'albero dei componenti e il suo streaming al client tramite il protocollo 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
      },
    },
  },
});

Il pattern yield / return è la caratteristica distintiva. Lo skeleton appare immediatamente mentre l'AI risolve i parametri. Quando i parametri sono pronti, il componente reale lo sostituisce — tutto nell'ambito di un'unica risposta in streaming.

Punti di forza

• Integrazione più profonda con Next.js. streamUI è progettato attorno ad App Router e RSC. Se stai sviluppando un'applicazione Next.js, questa è la scelta più idiomatica.
• Rendering server-side autentico. I componenti generati vengono renderizzati sul server e possono accedere direttamente a database, file system e API private nelle loro funzioni di rendering.
• Ecosistema più ampio. Con 20M+ download mensili ci sono abbondanti esempi, risposte su Stack Overflow e supporto dalla community.
• Migliore supporto TypeScript. I tipi dell'SDK sono completi: parametri degli strumenti, risposte dei modelli e valori in streaming sono tutti tipizzati correttamente.
• Flessibilità nei provider. L'SDK astrae i provider dei modelli — basta cambiare un singolo import per passare da OpenAI ad Anthropic o Google.

Punti deboli

• Dipendenza da Next.js. streamUI richiede i React Server Components e funziona nell'App Router di Next.js. Usarlo al di fuori di quell'ambiente richiede sforzi considerevoli.
• Debug degli RSC più complesso. Quando qualcosa va storto in un server component in streaming, l'esperienza di debug è peggiore rispetto a un normale errore server. I messaggi di errore possono essere criptici.
• Limitazioni dei server component. Gli RSC non possono usare hook, API del browser o stato lato client direttamente. Il comportamento interattivo richiede una suddivisione attenta tra server e client component.
• Prossimità a Vercel. Sebbene l'SDK funzioni su qualsiasi piattaforma Node.js, alcune funzionalità sono ottimizzate per l'infrastruttura Vercel.

Quando scegliere Vercel AI SDK

Stai sviluppando una nuova applicazione Next.js. Vuoi l'implementazione di Generative UI più pronta per la produzione e più performante. Hai familiarità con i React Server Components e App Router. Vuoi la più ampia selezione di esempi dalla community.

CopilotKit: la scelta per l'integrazione

CopilotKit adotta una filosofia diversa. Invece di fare lo streaming di componenti dal server, fornisce componenti React lato client che creano esperienze "copilot". Basta aggiungere <CopilotChat> all'applicazione esistente per avere un assistente AI a pannello laterale in grado di leggere e modificare lo stato dell'app.

Come funziona

CopilotKit introduce due primitive principali: azioni e stato leggibile. Definisci cosa l'AI può fare e cosa può vedere, poi CopilotKit gestisce il 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>
  );
}

Il pattern copilot è fondamentalmente diverso: l'AI è un assistente a pannello laterale che interagisce con l'interfaccia esistente, anziché generarne una nuova da zero.

Punti di forza

• Integrazione rapidissima. Aggiungere un pannello copilot a un'app React esistente richiede ore, non giorni. I componenti funzionano senza configurazione aggiuntiva.
• Compatibile con qualsiasi setup React. Create React App, Vite, Remix, Next.js — CopilotKit non richiede RSC né un bundler specifico.
• Pattern copilot naturale. L'AI a pannello laterale che assiste con l'interfaccia principale è un pattern consolidato che gli utenti capiscono immediatamente.
• Sincronizzazione dello stato integrata. useCopilotReadable e useCopilotAction creano un contratto bidirezionale chiaro tra l'app e l'AI.
• UI predefinita di qualità. Il componente <CopilotChat> è pronto per la produzione e personalizzabile — non è necessario costruire una propria interfaccia di chat.

Punti deboli

• Rendering client-side. CopilotKit renderizza l'output dell'AI sul client. Non c'è SSR per i componenti generati, il che incide sulle performance e sulla SEO per i contenuti pubblici.
• Il pattern copilot non è universale. Se il caso d'uso non è "AI a pannello laterale che aiuta con l'interfaccia principale", CopilotKit richiede una personalizzazione più profonda.
• Meno controllo sulla pipeline di rendering. Per la generazione di componenti personalizzati complessi, il Vercel AI SDK offre maggiore flessibilità.
• Dimensione del bundle. Il rendering client-side comporta che la libreria di componenti venga distribuita al browser. Per applicazioni sensibili alle performance, questo merita attenzione.

Quando scegliere CopilotKit

Hai un'applicazione React esistente e vuoi aggiungere funzionalità AI rapidamente. Il pattern copilot — un'AI a pannello laterale che legge e modifica l'interfaccia principale — si adatta al tuo prodotto. Non vuoi avere a che fare con gli RSC.

Thesys (json-render): la scelta universale

Thesys, lanciato a gennaio 2026 e già a 13K stelle GitHub, adotta l'approccio più agnostico al framework. I modelli AI producono JSON che descrive un albero di componenti UI, e un renderer trasforma quel JSON in componenti interattivi.

Come funziona

L'AI produce JSON invece di attivare chiamate agli strumenti React. Quel JSON descrive una gerarchia di componenti che il renderer Thesys interpreta:

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

Lo schema JSON è l'artefatto centrale. Può essere registrato, messo in cache, riprodotto e renderizzato su qualsiasi piattaforma dotata di un renderer Thesys.

Punti di forza

• Agnostico al framework. Lo stesso schema JSON viene renderizzato in React, Vue, Angular o su mobile nativo. Una risposta AI, tanti renderer.
• Debug semplificato. L'output JSON è una struttura dati ordinaria ispezionabile in qualsiasi visualizzatore JSON. Capire "perché l'AI ha generato questo?" è immediato.
• Cacheable. Puoi mettere in cache per hash del prompt e riutilizzare la risposta dell'AI senza costi di inferenza. Con lo streaming RSC questo è più difficile da ottenere.
• Cronologia ispezionabile. Archiviare la UI generata come JSON consente di verificare esattamente cosa è stato mostrato agli utenti e riprodurre qualsiasi interazione.
• Modello mentale più semplice. JSON in entrata, UI in uscita. L'astrazione è facile da spiegare anche a chi non conosce React.

Punti deboli

• Progetto più giovane. Thesys è stato lanciato a gennaio 2026. Meno collaudato in produzione rispetto alle alternative. I breaking change sono più probabili.
• L'astrazione JSON limita l'interattività. Pattern interattivi complessi — form con logica di validazione, dati in tempo reale, transizioni animate — sono più difficili da esprimere in uno schema JSON che nel codice React.
• Rendering client-side. Come CopilotKit, il rendering avviene sul client. Nessun SSR.
• Community più piccola. 13K stelle in 3 mesi è una crescita impressionante, ma la community è una frazione di quella del Vercel AI SDK.

Quando scegliere Thesys

Il tuo progetto usa più framework frontend o deve supportare client mobile. Vuoi poter ispezionare, mettere in cache e riprodurre le UI generate. Preferisci un modello mentale più semplice. Sei disposto a essere un early adopter.

Considerazioni sulla migrazione

Passare da un framework all'altro non è gratuito, ma è meno costoso di quanto sembri.

Cosa è portabile senza modifiche:

• La libreria di componenti (React puro, senza dipendenze dal framework)
• I system prompt e le descrizioni degli strumenti
• Gli schema Zod per i parametri degli strumenti

Cosa richiede una riscrittura:

• La struttura delle server action / API endpoint
• Il codice di integrazione dello streaming
• Il setup del rendering client-side

Stima 2–5 giorni per migrare tra framework per una funzionalità di complessità media. La libreria di componenti — che di solito rappresenta la parte più consistente dell'investimento — si trasferisce senza modifiche.

Valutazione dei rischi e scenari di fallimento

Ciascuno dei tre framework porta con sé un profilo di rischio specifico. Se la decisione copre un orizzonte di 12–24 mesi, questi scenari di fallimento vanno considerati in anticipo.

Scenario "framework abbandonato": la libreria di componenti si porta in 2–5 giorni; occorre riscrivere il layer server (streaming o JSON endpoint) e il renderer client. Se i componenti sono stati scritti fin dall'inizio senza import rigidi verso un SDK specifico, il costo reale di ricostruzione si riduce a una settimana-persona per ogni funzionalità in produzione.

Scenario "modello sostituito": tutti e tre i framework astraggono il provider, quindi passare da OpenAI ad Anthropic o Google significa modificare un import e adeguare i system prompt alle caratteristiche del nuovo modello.

TCO per il responsabile tecnico

Per confrontare il costo totale di proprietà, stimo tre voci: tempo di avviamento, infrastruttura e manutenzione su un orizzonte annuale. I valori sono intervalli indicativi per una singola funzionalità in produzione di complessità media (4–6 tipi di componenti, ~5 strumenti server).

Roadmap di adozione per un team di 2–5 ingegneri:

1. Settimane 1–2. Un singolo sviluppatore costruisce una funzionalità pilota con il framework scelto. Obiettivo: coprire un caso d'uso reale end-to-end.
2. Settimane 3–4. Si aggiunge un ingegnere per la libreria di componenti; si formalizzano i design token e l'elenco dei componenti che l'AI può richiamare.
3. Mese 2. Strumentazione e osservabilità — trace delle chiamate LLM, logging degli artefatti (streaming RSC / JSON), budget sui token.
4. Mese 3. Estensione a 2–3 funzionalità, formazione del team su system prompt e schema Zod.

Se il budget per la sperimentazione è limitato a un trimestre, scegli CopilotKit: è il percorso più rapido verso un risultato misurabile. Se stai costruendo un prodotto a lungo termine su Next.js, il Vercel AI SDK ripaga il suo onboarding più lungo. Thesys ha senso quando il requisito multi-piattaforma è parte del capitolato iniziale.

Guida pratica per lo sviluppatore individuale

Se lavori da solo, conta più la velocità fino alla prima demo funzionante e la prevedibilità dei costi di inferenza LLM che l'architettura in sé.

Vercel AI SDK — inizia in un weekend.

1. npx create-next-app@latest my-genui-app --typescript --app — App Router è obbligatorio.
2. npm install ai @ai-sdk/openai zod.
3. Copia l'esempio streamUI dalla documentazione ufficiale, sostituisci lo strumento dimostrativo con il tuo.
4. Deploy su Vercel: vercel deploy, il piano gratuito copre fino a ~100K richieste/mese.
5. Budget: $0 hosting + $5–50/mese OpenAI o Anthropic per un progetto personale.

CopilotKit — inizia in una serata.

1. Installa nell'app React esistente: npm install @copilotkit/react-core @copilotkit/react-ui.
2. Avvolgi il componente radice in <CopilotKit>, crea l'endpoint /api/copilotkit.
3. Aggiungi <CopilotChat> al layout, definisci 1–2 azioni con useCopilotAction.
4. Budget: $0 hosting (Vercel/Netlify free) + $5–30/mese provider LLM; CopilotKit Cloud ha un piano gratuito per i prototipi.

Thesys json-render — inizia in un giorno.

1. npm install @thesys/json-render più il tuo stack frontend preferito.
2. Definisci il componentRegistry — l'elenco dei componenti UI che l'AI può richiamare.
3. L'endpoint server riceve la richiesta dell'utente, restituisce JSON conforme allo schema Thesys; il client lo passa attraverso render().
4. Budget: $0 hosting + $5–50/mese LLM. Aspettati breaking change — fissa rigorosamente la versione del pacchetto.

Consiglio generale: non scegliere subito il framework di produzione. Costruisci 3 prototipi minimali, uno per serata — dopo quell'esercizio la scelta sarà basata sull'esperienza diretta, non su una tabella comparativa.

Matrice di raccomandazioni

Stai avviando una nuova app Next.js da zero: Vercel AI SDK. Senza dubbio per build puramente Next.js.

Stai aggiungendo AI a un'app React esistente: CopilotKit. Il time-to-value più rapido per il caso d'uso dell'integrazione.

Stack multi-framework o non React: Thesys. L'unica opzione pratica per requisiti agnostici al framework.

Sei indeciso e vuoi esplorare: Vercel AI SDK. La community più grande significa più esempi e più risposte alle tue domande.

Scommetti sul futuro delle interfacce AI: tieni d'occhio tutti e tre. Lo spazio si muove velocemente e i leader di oggi potrebbero non esserlo tra 18 mesi.

Vale la pena enunciare un ultimo principio chiaramente: non investire troppo nella scelta del framework nelle fasi iniziali. I componenti che costruisci sono l'artefatto prezioso e duraturo. Il framework è idraulica. Costruisci componenti eccellenti, mantienili puliti dal codice specifico del framework, e potrai cambiare framework in una settimana di lavoro se necessario.

Articoli correlati:

• Che cos'è la Generative UI — la meccanica di base
• Costruire Generative UI con Vercel AI SDK — layer server di strumenti e structured output
• Iniziare con la Generative UI — introduzione pratica

Stai sviluppando con uno di questi framework e hai bisogno di supporto? Prenota una consulenza — ho esperienza in produzione con tutti e tre.