A day-one demo in Next.js

npx create-next-app@latest reply-demo --typescript --app --eslint
cd reply-demo
npm install @anthropic-ai/sdk

ANTHROPIC_API_KEY=your-key-here

import Anthropic from '@anthropic-ai/sdk';

const client = new Anthropic();

// Bump on every prompt change. It goes into every log line, so you can compare versions later.
const PROMPT_VERSION = 'reply-v3';
const SYSTEM = 'Draft a concise, friendly reply to the customer message. Plain text, under 120 words, no greeting line.';
const MODEL = 'claude-opus-5-5';
const TIME_LIMIT_MS = 30_000;

type StreamEvent =
  | { type: 'text'; text: string }
  | { type: 'done'; stopReason: Anthropic.Message['stop_reason'] }
  | { type: 'error'; retryable: boolean };

export async function POST(request: Request): Promise<Response> {
  const { prompt } = (await request.json()) as { prompt?: unknown };
  if (typeof prompt !== 'string' || prompt.length === 0 || prompt.length > 8000) {
    return Response.json({ error: 'Prompt must be 1 to 8,000 characters.' }, { status: 400 });
  }

  const started = Date.now();
  // Cancel the model call if the user leaves or presses Stop, or if it takes longer than the limit.
  const signal = AbortSignal.any([request.signal, AbortSignal.timeout(TIME_LIMIT_MS)]);
  const encoder = new TextEncoder();

  const body = new ReadableStream<Uint8Array>({
    async start(controller) {
      const send = (event: StreamEvent) => controller.enqueue(encoder.encode(`${JSON.stringify(event)}\n`));
      let outcome = 'unknown';
      let usage: Anthropic.Usage | undefined;
      try {
        const stream = client.messages.stream(
          {
            model: MODEL,
            max_tokens: 4096,
            output_config: { effort: 'low' },
            system: SYSTEM,
            messages: [{ role: 'user', content: prompt }],
          },
          { signal },
        );
        for await (const event of stream) {
          if (event.type === 'content_block_delta' && event.delta.type === 'text_delta') {
            send({ type: 'text', text: event.delta.text });
          }
        }
        const message = await stream.finalMessage();
        usage = message.usage;
        outcome = String(message.stop_reason);
        send({ type: 'done', stopReason: message.stop_reason });
      } catch (error) {
        outcome = request.signal.aborted ? 'cancelled' : signal.aborted ? 'timeout' : 'error';
        if (!request.signal.aborted) {
          const retryable =
            outcome === 'timeout' ||
            error instanceof Anthropic.RateLimitError ||
            error instanceof Anthropic.InternalServerError ||
            error instanceof Anthropic.APIConnectionError;
          send({ type: 'error', retryable });
        }
      } finally {
        // One structured line per request: enough to answer "what happened?" on day two.
        console.log(
          JSON.stringify({
            route: 'draft',
            promptVersion: PROMPT_VERSION,
            model: MODEL,
            outcome,
            ms: Date.now() - started,
            inputTokens: usage?.input_tokens,
            outputTokens: usage?.output_tokens,
          }),
        );
        try {
          controller.close();
        } catch {
          // Already closed because the client disconnected.
        }
      }
    },
  });

  return new Response(body, {
    headers: { 'Content-Type': 'application/x-ndjson; charset=utf-8', 'Cache-Control': 'no-store' },
  });
}

// Imports the DraftReply component from the streaming article; that file is type-checked there.
import { DraftReply } from '../components/draft-reply';

const sampleMessage = 'Hi, I was charged twice for my October invoice. Can you help?';

export default function Page() {
  return (
    <main style={{ maxWidth: 640, margin: '2rem auto', padding: '0 1rem' }}>
      <h1>Support reply demo</h1>
      <p>Customer message:</p>
      <blockquote>{sampleMessage}</blockquote>
      <DraftReply customerMessage={sampleMessage} />
    </main>
  );
}