Get started with useChat

// Server code. Only the server holds the API key.
import { createHttpClient } from '@ably/pubsub-server';

// Replace with your app's auth: validate the request (session cookie, bearer
// token) and return the authenticated user's id.
async function authenticateUser(req) {
  return 'user-abc';
}

const ably = createHttpClient({ key: process.env.ABLY_API_KEY });

export async function GET(req) {
  const userId = await authenticateUser(req);

  const tokenRequest = await ably.auth.createTokenRequest({
    clientId: userId,
    capability: { 'conversations:*': ['subscribe', 'history', 'publish'] },
  });

  return Response.json(tokenRequest);
}

// Agent code. Replace these functions with queries to your database.
const conversations = new Map();
const running = new Set();

export function loadMessages(chatId) {
  return conversations.get(chatId) ?? [];
}

export function saveMessages(chatId, messages) {
  conversations.set(chatId, messages);
}

// Returns false if the conversation already has a response in progress.
export function startTurn(chatId) {
  if (running.has(chatId)) return false;
  running.add(chatId);
  return true;
}

export function endTurn(chatId) {
  running.delete(chatId);
}

// Agent code. This runs on your own infrastructure, so it holds the API key.
import { createRealtimeClient } from '@ably/pubsub-server';
import { after } from 'next/server';
import { anthropic } from '@ai-sdk/anthropic';
import { convertToModelMessages, streamText, toUIMessageStream } from 'ai';
import { vercelAdaptor } from '@ably/ai-transport/vercel';
import { endTurn, loadMessages, saveMessages, startTurn } from '../../store';

export async function POST(req) {
  // chatId is useChat's id, which is the conversation's channel name.
  const { chatId, trigger, messages } = await req.json();
  if (!startTurn(chatId)) return new Response('A response is already streaming', { status: 409 });
  saveMessages(chatId, messages);
  // Call endTurn however the agent ends, even if the agent cannot start.
  after(() => respond(chatId, trigger, messages).finally(() => endTurn(chatId)));
  return new Response(null, { status: 202 });
}

async function respond(chatId, trigger, messages) {
  // A client for this response only. Closing the client when the response ends also removes the cancel subscription.
  const ably = createRealtimeClient({ key: process.env.ABLY_API_KEY });
  const channel = ably.channels.get(chatId);
  const agent = vercelAdaptor(channel);
  const controller = new AbortController();

  try {
    // Subscribing attaches the channel. Wait until the channel is attached before publishing anything,
    // so a cancel message sent after the response starts reaches this agent.
    await channel.subscribe('cancel', () => controller.abort());

    // Publish a new prompt for other clients. A regenerated response reuses a prompt already on
    // the channel, and a tool result arrives as 'submit-message' with the assistant's message last.
    const prompt = messages.at(-1);
    if (trigger === 'submit-message' && prompt.role === 'user') {
      await agent.send({ type: 'user-message', message: prompt });
    }

    const result = streamText({
      model: anthropic('claude-sonnet-4-20250514'),
      messages: await convertToModelMessages(messages),
      // Abort the model call only, so a stopped response still ends with an abort chunk.
      abortSignal: controller.signal,
    });
    await agent.pipe(
      toUIMessageStream({
        stream: result.stream,
        originalMessages: messages,
        // Give each response a new id, which useChat and the store share.
        generateMessageId: () => crypto.randomUUID(),
        onEnd: ({ messages: conversation }) => saveMessages(chatId, conversation),
      }),
    );
  } catch (error) {
    // useChat waits until a chunk ends the response, so publish error.
    console.error(error);
    await agent.send({ type: 'error', errorText: 'The agent failed to respond.' });
  } finally {
    ably.close();
  }
}

export function GET(req) {
  const chatId = new URL(req.url).searchParams.get('chat');
  return Response.json({ messages: loadMessages(chatId) });
}

'use client';

// Client code. The browser fetches a token, so it never holds an API key.
import { useEffect, useMemo, useState } from 'react';
import { useChat } from '@ai-sdk/react';
import { createChatTransport } from '@ably/ai-transport/vercel';

export function Chat({ client, chatId, initialMessages }) {
  const channel = client.channels.get(chatId);
  const transport = useMemo(() => createChatTransport({ channel }), [channel]);
  const { messages, sendMessage, status, stop, error } = useChat({
    id: chatId,
    messages: initialMessages,
    transport,
    resume: true,
  });
  // useChat does not close its transport. Closing the transport leaves the agent running.
  useEffect(() => () => transport.close(), [transport]);

  const [input, setInput] = useState('');
  // Disable sending while this tab's response is in progress.
  const busy = status === 'submitted' || status === 'streaming';

  const send = (e) => {
    e.preventDefault();
    const text = input.trim();
    if (!text || busy) return;
    setInput('');
    void sendMessage({ text });
  };

  const stopResponse = () => {
    void channel.publish('cancel', {});
    void stop();
  };

  return (
    <div>
      {messages.map((m) => (
        <p key={m.id}>
          <strong>{m.role}:</strong> {m.parts.map((p) => (p.type === 'text' ? p.text : '')).join('')}
        </p>
      ))}
      {error && <p>{error.message}</p>}
      <form onSubmit={send}>
        <input value={input} onChange={(e) => setInput(e.target.value)} />
        {status === 'streaming' ? (
          <button type="button" onClick={stopResponse}>Stop</button>
        ) : (
          <button type="submit" disabled={busy}>Send</button>
        )}
      </form>
    </div>
  );
}

'use client';

// Client code.
import { useEffect, useState } from 'react';
import { createClient } from '@ably/pubsub-device';
import { Chat } from './chat';

const chatId = 'conversations:demo';

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

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

  useEffect(() => {
    fetch(`/api/chat?chat=${encodeURIComponent(chatId)}`)
      .then((res) => res.json())
      .then(({ messages }) => setInitialMessages(messages));
  }, []);

  if (!client || !initialMessages) return null;

  return <Chat client={client} chatId={chatId} initialMessages={initialMessages} />;
}