Solutions - AI Orchestration Outcomes

Cost at Scale

Costs verified: October 17, 2025

Implementation

// app/api/chat/route.ts
// Dependencies (October 17, 2025):
// - Next.js: 16.0.0-beta.0
// - Vercel AI SDK: 5.0.48
// - @ai-sdk/anthropic: 2.0.22
// Last verified: 2025-10-17

import { createAnthropic } from '@ai-sdk/anthropic';
import { streamText } from 'ai';

export const runtime = 'edge';

const anthropic = createAnthropic({
  apiKey: process.env.ANTHROPIC_API_KEY,
});

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = streamText({
    model: anthropic('claude-3-7-sonnet-20250219'),
    messages,
    system: `You are a helpful customer support agent.
Answer questions based on our knowledge base.
Be concise, friendly, and professional.`,
  });

  return result.toDataStreamResponse();
}

Frontend Component

// components/chat.tsx
'use client';
import { useChat } from 'ai/react';

export function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();

  return (
    <div className="flex flex-col h-screen max-w-2xl mx-auto p-4">
      <div className="flex-1 overflow-y-auto mb-4 space-y-4">
        {messages.map(m => (
          <div key={m.id} className={`p-4 rounded-lg ${
            m.role === 'user' ? 'bg-slate-100 dark:bg-slate-800 ml-auto' : 'bg-muted/30'
          } max-w-[80%]`}>
            <p className="text-sm font-semibold mb-1">
              {m.role === 'user' ? 'You' : 'Support Agent'}
            </p>
            <p>{m.content}</p>
          </div>
        ))}
      </div>

      <form onSubmit={handleSubmit} className="flex gap-2">
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="Ask a question..."
          className="flex-1 p-2 border rounded"
        />
        <button type="submit" className="px-4 py-2 bg-slate-600 dark:bg-slate-700 text-white hover:bg-slate-700 dark:hover:bg-slate-600 rounded">
          Send
        </button>
      </form>
    </div>
  );
}