Get started with OpenAI

// Agent-side. This runs on your own infrastructure, so it holds the key.
import { after } from 'next/server';
import OpenAI from 'openai';
import * as Ably from 'ably';
import { createAgentTransport } from '@ably/ai-transport';
import { ResponsesCodec } from '@ably/ai-transport/openai';
import { appendItems, loadConversation } from '../../store';

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

export async function POST(req) {
  const { conversationId, eventId } = await req.json();

  const transport = createAgentTransport({
    channel: ably.channels.get(conversationId),
    codec: ResponsesCodec,
    clientId: 'agent',
  });
  await transport.connect();

  after(async () => {
    try {
      // locateInput scans channel history for the input carrying this event id.
      // It is the one history read the SDK does for you.
      const trigger = await transport.locateInput(eventId);
      const prompt = trigger?.inputs.find((input) => input.kind === 'message');

      // Passing inputCodecMessageId lets a cancel keyed on the input find this
      // run, including one that arrived before the run opened.
      const run = transport.openRun({ inputCodecMessageId: trigger?.meta.codecMessageId });

      const input = [...loadConversation(conversationId), ...prompt.payload.items];
      appendItems(conversationId, prompt.payload.items);

      const stream = await openai.responses.create(
        { model: 'gpt-5.5', input, stream: true },
        { signal: run.abortSignal },
      );

      const { reason } = await run.pipe(stream);
      await run.end({ reason });

      if (reason === 'complete') {
        const final = await stream.finalResponse();
        appendItems(conversationId, final.output);
      }
    } finally {
      transport.close();
    }
  });

  return Response.json({ ok: true });
}

'use client';

// Client-side. The browser fetches a token; never put an API key here.
import { useEffect, useRef, useState } from 'react';
import * as Ably from 'ably';
import { createClientTransport } from '@ably/ai-transport';
import { ResponsesCodec } from '@ably/ai-transport/openai';
import { createFold } from './fold';

export function Chat({ conversationId, seed }) {
  const [messages, setMessages] = useState(seed);
  const [input, setInput] = useState('');
  const [activeRunId, setActiveRunId] = useState(undefined);
  const transportRef = useRef(null);

  useEffect(() => {
    const ably = new Ably.Realtime({ authUrl: '/api/auth/token' });
    const fold = createFold();
    const transport = createClientTransport({
      channel: ably.channels.get(conversationId),
      codec: ResponsesCodec,
    });
    transportRef.current = transport;

    transport.subscribe((event) => {
      if (event.kind === 'run-lifecycle') {
        setActiveRunId(event.event.type === 'start' ? event.event.runId : undefined);
        return;
      }
      fold.apply(event);
      setMessages([...seed, ...fold.render()]);
    });

    void transport.connect();
    return () => {
      transport.close();
      ably.close();
    };
  }, [conversationId]);

  const send = async (text) => {
    const sent = await transportRef.current.publishInput({
      kind: 'message',
      payload: {
        role: 'user',
        items: [{ type: 'message', role: 'user', content: [{ type: 'input_text', text }] }],
      },
    });
    // The SDK publishes; waking the agent is yours.
    await fetch('/api/chat', {
      method: 'POST',
      body: JSON.stringify({ conversationId, eventId: sent.eventId }),
    });
  };

  return (
    <div>
      {messages.map((m, i) => (
        <div key={i}><strong>{m.role}:</strong> {m.text}</div>
      ))}
      <form onSubmit={(e) => { e.preventDefault(); void send(input); setInput(''); }}>
        <input value={input} onChange={(e) => setInput(e.target.value)} />
        {activeRunId ? (
          <button type="button" onClick={() => transportRef.current.cancel(activeRunId)}>Stop</button>
        ) : (
          <button type="submit">Send</button>
        )}
      </form>
    </div>
  );
}

// Client-side. Fold the transport's event stream into a renderable list.
export function createFold() {
  const messages = new Map();     // codecMessageId -> { role, text, stepId, stepStartSerial }
  const canonical = new Map();    // stepId -> the newest attempt's start serial

  function apply(event) {
    if (event.kind !== 'message') return;
    const { codecMessageId, stepId, stepStartSerial, role } = event.meta;
    if (!codecMessageId) return;

    // A retry publishes under the same step id with a higher start serial.
    // Record the newest, so render drops the attempt it replaced.
    if (stepId && stepStartSerial && (canonical.get(stepId) ?? '') < stepStartSerial) {
      canonical.set(stepId, stepStartSerial);
    }

    const entry = messages.get(codecMessageId) ?? { role, text: '', stepId, stepStartSerial };
    for (const input of event.inputs) {
      if (input.kind === 'message') entry.text = textOf(input.payload.items);
    }
    for (const output of event.outputs) {
      if (output.type === 'response.output_text.delta') entry.text += output.delta;
    }
    messages.set(codecMessageId, entry);
  }

  function render() {
    return [...messages.values()].filter(
      (m) => !m.stepId || canonical.get(m.stepId) === m.stepStartSerial,
    );
  }

  return { apply, render };
}

const textOf = (items) =>
  items
    .filter((item) => item.type === 'message')
    .flatMap((item) => item.content)
    .filter((part) => part.type === 'input_text' || part.type === 'output_text')
    .map((part) => part.text)
    .join('');