AI in Vercel SDK, Agents e AI Gateway

Nel nostro viaggio all'interno dell'ecosistema Vercel abbiamo già fatto una panoramica introduttiva che ci ha permesso di comprendere l'approccio moderno al deployment e all'hosting offerto dalla piattaforma. Ora, in questa seconda lezione, entriamo in un territorio particolarmente interessante e attuale: l'intelligenza artificiale. In questa lezione capiremo come Vercel stia integrando l'AI direttamente nell'infrastruttura, semplificando l'accesso a modelli intelligenti tramite strumenti come l'SDK AI, gli Agents e l'AI Gateway. Questi componenti rappresentano una parte fondamentale del futuro del web, dove AI e frontend non sono più mondi separati ma strettamente connessi.

Perché l'AI su Vercel?

Negli ultimi anni, l'intelligenza artificiale è passata da strumento di nicchia a componente centrale di moltissime applicazioni web. In questo nuovo panorama Vercel ha colto una grande opportunità: offrire agli sviluppatori frontend un accesso immediato e nativo a strumenti di AI, senza dover configurare complessi sistemi di backend o orchestrare deployment su infrastrutture cloud esterne. La promessa è semplice ma potente: integrare l'AI nei nostri progetti React (e Next.js) con la stessa naturalezza con cui gestiamo una rotta o una funzione API. Iniziamo quindi ad esplorare come Vercel ci mette a disposizione questi strumenti, e come possiamo usarli per rendere le nostre app più intelligenti e reattive.

L'AI SDK

L'AI SDK di Vercel è il cuore dell'integrazione con modelli di linguaggio e altre tecnologie AI. Si tratta di una libreria JavaScript e TypeScript progettata per offrire una sintassi familiare e moderna a chi lavora con React, Next.js o ambienti simili. Quando lavoriamo con l'AI SDK, possiamo creare esperienze dinamiche come chatbot, assistenti intelligenti, sistemi di completamento automatico o strumenti di sintesi testuale con pochissime righe di codice.

Una delle caratteristiche principali dell'AI SDK è il supporto allo streaming dei contenuti generati. Questo significa che possiamo visualizzare le risposte AI in tempo reale, man mano che vengono generate. In un contesto UX, si tratta di una funzionalità cruciale, perché avvicina l'esperienza dell'utente a quella di un'interazione “live”, simile a una chat con un essere umano.

Possiamo utilizzare l'SDK sia lato client che lato server, con la possibilità di sfruttare React Server Components e altre funzionalità moderne del framework. Tutto questo senza doverci preoccupare della gestione di token di autenticazione o del caricamento manuale di librerie esterne: l'SDK di Vercel è progettato per integrarsi perfettamente con il resto della piattaforma.

Per fare un esempio pratico, andiamo su https://vercel.com/dashboard e selezioniamo il nostro progetto. Andiamo poi su "AI" nel menu in alto e, come mostrato in figura, nel menu a sinistra clicchiamo su "API Keys". A questo punto possiamo cliccare su "Add Key" e creare una nuova Key.

Questa chiave la possiamo inserire nel codice all'interno del nostro progetto in modo da poter usare features di AI.

Gli AI Agents

Un altro strumento chiave nella suite AI di Vercel sono gli AI Agents. Questi rappresentano un'evoluzione rispetto ai classici chatbot: non sono semplici wrapper su un modello di linguaggio, ma vere e proprie entità software capaci di agire in modo più autonomo e ragionato. Un Agent può, ad esempio, ricevere un messaggio dall'utente, consultare un insieme di funzioni definite da noi, invocarle se necessario, elaborare i risultati e poi rispondere in modo coerente.

Possiamo costruire agenti definendo le loro “capacità” (chiamate anche tools) come se stessimo creando delle API. Un esempio concreto potrebbe essere un agente per l'assistenza clienti, che accede al nostro database degli ordini, verifica lo stato di una spedizione e risponde in linguaggio naturale all'utente. Grazie alla potenza dei modelli LLM (Large Language Models) e alla struttura degli Agents, il passaggio da codice a dialogo naturale è sorprendentemente fluido.

La cosa più interessante è che possiamo istruire l'agente direttamente tramite prompt: una serie di istruzioni scritte in linguaggio naturale che guidano il comportamento dell'intelligenza artificiale. Questo ci offre un controllo elevato, senza costringerci a scrivere codice complesso di logica conversazionale.

Per definire un Agente, quello che dobbiamo fare è:

creare un file agent nel backend del nostro progetto Next.js, in /lib/agent.ts:

// lib/agent.ts
import { createAI, createAgent, defineTool } from 'ai/rsc';
// Simuliamo una funzione che fornisce il meteo
const getWeather = defineTool({
  name: 'getWeather',
  description: 'Restituisce il meteo attuale per una città specifica.',
  parameters: z.object({
    city: z.string().describe('Nome della città di cui vuoi sapere il meteo'),
  }),
  execute: async ({ city }) => {
    // In un'app reale faresti una chiamata API qui
    return `A ${city}, oggi ci sono 28°C e cielo sereno.`;
  },
});
export const agent = createAgent({
  tools: [getWeather],
  system: `Sei un assistente meteo intelligente. Rispondi con precisione e cordialità.`,
});

Usiamo le Server Actions

Ora aggiungiamo il file per l'AI SDK e l'interfaccia utente nel progetto Next.js, usando le Server Actions.

// app/page.tsx
'use client';
import { useState } from 'react';
import { useActions, useAIState } from 'ai/rsc';
import type { AI } from './action';
export default function Home() {
  const [input, setInput] = useState('');
  const [messages, setMessages] = useAIState<typeof AI>();
  const { submitUserMessage } = useActions<typeof AI>();
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const response = await submitUserMessage(input);
    setMessages([...messages, response]);
    setInput('');
  };
  return (
    <main className="max-w-xl mx-auto p-4">
      <h1 className="text-xl font-bold mb-4">Assistente Meteo AI</h1>
      <div className="space-y-2 border p-4 rounded min-h-[150px]">
        {messages.map((m, i) => (
          <div key={i} className={m.role === 'user' ? 'text-blue-600' : 'text-gray-800'}>
            <strong>{m.role === 'user' ? 'Tu' : 'AI'}:</strong> {m.content}
          </div>
        ))}
      </div>
      <form onSubmit={handleSubmit} className="mt-4 flex gap-2">
        <input
          className="border px-3 py-2 rounded flex-1"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Chiedimi il meteo..."
        />
        <button type="submit" className="bg-black text-white px-4 py-2 rounded">
          Invia
        </button>
      </form>
    </main>
  );
}

Creiamo il file app/action.ts per collegare l'agent al frontend:

// app/action.ts
'use server';
import { createAI } from 'ai/rsc';
import { agent } from '../lib/agent';
export const { AI, handleAIRequest } = createAI({
  agent,
  actions: {
    submitUserMessage: async (input: string) => {
      const response = await agent.respondToUserMessage(input);
      return response;
    },
  },
});

Nel file app/api/ai/route.ts:

// app/api/ai/route.ts
import { handleAIRequest } from '@/app/action';
export const runtime = 'edge';
export { handleAIRequest as POST };

Per testare l'app possiamo avviarla e scrivere "Che tempo fa oggi a Milano?". L'agente risponderà usando la funzione getWeather.

AI Gateway: controllo, tracciamento e performance

L'AI Gateway è un servizio di proxy intelligente che si interpone tra la nostra app e i provider AI esterni (come OpenAI, Anthropic o altri). Invece di esporre direttamente le API key del provider all'interno del codice, possiamo configurare un endpoint di AI Gateway che le incapsula in modo sicuro, come già visto nel paragrafo precedente sulle API AI. Inoltre, il Gateway ci offre metriche dettagliate su ogni chiamata: da dove proviene, quanto tempo ha impiegato, quanti token sono stati usati e via dicendo.

Oltre alla sicurezza, l'AI Gateway offre anche funzionalità di caching, che possono migliorare le prestazioni e ridurre i costi, soprattutto in contesti dove le stesse domande vengono fatte frequentemente. Possiamo quindi integrare l'intelligenza artificiale nei nostri flussi di lavoro con la tranquillità di avere tutto sotto controllo.

Questa interfaccia si trova sempre andando su https://vercel.com/dashboard e selezionando il nostro progetto, cliccando su "AI" nel menu in alto. Nell'immagine in basso possiamo vedere la dashboard di AI Gateway:

Conclusioni

Con questa lezione abbiamo compreso che Vercel non si limita a essere una piattaforma di hosting o deploy, ma si propone sempre più come uno spazio completo per lo sviluppo moderno, dove AI e interfaccia utente si incontrano nativamente. L'integrazione dell'AI SDK, degli Agents e dell'AI Gateway ci apre a possibilità incredibili, sia dal punto di vista tecnico che creativo.