Using Vercel AI SDK with Amazon Bedrock

Why Vercel AI SDK?

The Vercel AI SDK provides React hooks and streaming utilities that make building chat interfaces straightforward. The useChat hook handles message state, streaming, and error handling out of the box.

Setting Up the Bedrock Provider

Install the provider:

npm install ai @ai-sdk/amazon-bedrock

Create an API route that streams responses:

import { bedrock } from "@ai-sdk/amazon-bedrock";
import { streamText } from "ai";

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

  const result = streamText({
    model: bedrock("anthropic.claude-3-5-sonnet-20241022-v2:0"),
    messages,
    system: "You are a helpful assistant.",
  });

  return result.toDataStreamResponse();
}

Client-Side Chat

On the client, the useChat hook handles everything:

"use client";
import { useChat } from "ai/react";

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

  return (
    <div>
      {messages.map((m) => (
        <div key={m.id}>{m.role}: {m.content}</div>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
      </form>
    </div>
  );
}

That's it. Messages stream in real-time, the UI updates automatically, and error handling is built in.