Get started with the Vercel AI SDK

// Agent code. This runs on your own infrastructure, so it holds the API key.
import * as Ably from 'ably';
import { anthropic } from '@ai-sdk/anthropic';
import { convertToModelMessages, streamText, toUIMessageStream } from 'ai';
import { createTransport, ErrorCode } from '@ably/ai-transport';
import { vercel } from '@ably/ai-transport/vercel';
import { loadConversation, recordMessages } from '../../store';

const ably = new Ably.Realtime({ key: process.env.ABLY_API_KEY });

export async function POST(req) {
  const { channelName, message } = await req.json();
  recordMessages(channelName, [message]);
  const { messages } = loadConversation(channelName);
  const headers = { requestId: message.id };
  const responseId = crypto.randomUUID();

  const transport = createTransport({ client: ably, channelName, codec: vercel });

  // Optionally: publish the user's input to the channel
  await transport.send({ type: 'user-message', message }, { headers });

  try {
    const result = streamText({
      model: anthropic('claude-sonnet-4-20250514'),
      messages: await convertToModelMessages(messages),
      abortSignal: req.signal,
    });

    let response;
    const { serial } = await transport.pipe(
      toUIMessageStream({
        stream: result.fullStream,
        originalMessages: messages,
        generateMessageId: () => responseId,
        onEnd: ({ responseMessage }) => {
          response = responseMessage;
        },
      }),
      { signal: req.signal, headers },
    );

    if (response && serial) recordMessages(channelName, [response], serial);
    return new Response(null, { status: 204 });
  } catch (error) {
    if (error instanceof Ably.ErrorInfo && error.code === ErrorCode.OperationCancelled) {
      await transport.send({ type: 'abort' }, { headers });
      return new Response(null, { status: 204 });
    }
    throw error;
  } finally {
    await transport.close();
  }
}

export function GET(req) {
  const channelName = new URL(req.url).searchParams.get('channel');
  return Response.json(loadConversation(channelName));
}

'use client';

// Client code. The browser fetches a token, so it never holds an API key.
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { fromSerial, untilEvent } from '@ably/ai-transport';
import { useTransport } from '@ably/ai-transport/react';
import { createMerge } from './merge';

// With no stored serial, nothing is stored yet, so replay the whole channel.
const allHistory = untilEvent(() => false);

export function Chat({ channelName }) {
  const { transport } = useTransport();
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');
  const lastSeen = useRef(undefined);

  // Put a message in the list by id, so each fuller state of a response replaces the last one.
  const upsert = useCallback((message) => {
    setMessages((prev) =>
      prev.some((m) => m.id === message.id) ? prev.map((m) => (m.id === message.id ? message : m)) : [...prev, message],
    );
  }, []);
  const merge = useMemo(() => createMerge(upsert), [upsert]);

  const apply = useCallback(
    ({ event, message }) => {
      if (lastSeen.current === undefined || message.serial > lastSeen.current) lastSeen.current = message.serial;
      if (event !== undefined) merge(event, message.extras?.headers?.requestId);
    },
    [merge],
  );

  useEffect(() => {
    if (!transport) return;
    let unsubscribe;
    let cancelled = false;
    const subscribeFrom = (serial) => {
      unsubscribe?.();
      unsubscribe = transport.subscribe(apply, { history: { replay: serial ? fromSerial(serial) : allHistory } });
    };

    (async () => {
      const res = await fetch(`/api/chat?channel=${encodeURIComponent(channelName)}`);
      const stored = await res.json();
      if (cancelled) return;
      setMessages(stored.messages);
      lastSeen.current = stored.serial;
      subscribeFrom(stored.serial);
    })();

    const off = transport.on('discontinuity', () => subscribeFrom(lastSeen.current));
    return () => {
      cancelled = true;
      off();
      unsubscribe?.();
    };
  }, [transport, channelName, apply]);

  const send = async (e) => {
    e.preventDefault();
    const text = input.trim();
    if (!text || !transport) return;
    setInput('');
    const message = { id: crypto.randomUUID(), role: 'user', parts: [{ type: 'text', text }] };
    upsert(message);
    await fetch('/api/chat', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ channelName, message }) });
  };

  return (
    <div>
      {messages.map((m) => (
        <p key={m.id}>
          <strong>{m.role}:</strong> {m.parts.map((p) => (p.type === 'text' ? p.text : '')).join('')}
        </p>
      ))}
      <form onSubmit={send}>
        <input value={input} onChange={(e) => setInput(e.target.value)} />
        <button type="submit" disabled={!transport}>Send</button>
      </form>
    </div>
  );
}

// Client code.
import { readUIMessageStream } from 'ai';

export function createMerge(onMessage) {
  const responses = new Map();

  return (event, requestId) => {
    if (event.type === 'start') {
      if (event.messageId) onMessage({ id: event.messageId, role: 'assistant', parts: [] });
      const stream = new ReadableStream({ start: (controller) => responses.set(requestId, controller) });
      (async () => {
        for await (const message of readUIMessageStream({ stream })) onMessage(message);
      })();
    }
    responses.get(requestId)?.enqueue(event);
    if (event.type === 'finish' || event.type === 'abort') {
      responses.get(requestId)?.close();
      responses.delete(requestId);
    }
  };
}

// Stand-in for your own database. Replace both functions with real queries.
const conversations = new Map();

export function loadConversation(channelName) {
  return conversations.get(channelName) ?? { messages: [] };
}

export function recordMessages(channelName, messages, serial) {
  const current = conversations.get(channelName) ?? { messages: [] };
  const merged = [...current.messages];
  for (const message of messages) {
    const at = merged.findIndex((m) => m.id === message.id);
    if (at === -1) merged.push(message);
    else merged[at] = message;
  }
  conversations.set(channelName, { messages: merged, serial: serial ?? current.serial });
}

'use client';

// Client code.
import { useEffect, useState } from 'react';
import * as Ably from 'ably';
import { AblyProvider } from 'ably/react';
import { TransportProvider } from '@ably/ai-transport/react';
import { vercel } from '@ably/ai-transport/vercel';
import { Chat } from './chat';

const channelName = 'conversations:demo';

export default function Page() {
  const [client, setClient] = useState();

  useEffect(() => {
    const realtime = new Ably.Realtime({ authUrl: '/api/auth/token' });
    setClient(realtime);
    return () => realtime.close();
  }, []);

  if (!client) return null;

  return (
    <AblyProvider client={client}>
      <TransportProvider channelName={channelName} codec={vercel}>
        <Chat channelName={channelName} />
      </TransportProvider>
    </AblyProvider>
  );
}