Building AI Applications with Anthropic's SDK and Next.js

As artificial intelligence continues to evolve, integrating powerful AI models into web applications has become increasingly accessible. In this guide, we'll explore how to use Anthropic's SDK with Next.js to create intelligent applications powered by Claude.

Getting Started

First, let's set up a new Next.js project and install the necessary dependencies:

1npx create-next-app@latest ai-app
2cd ai-app
3npm install @anthropic-ai/sdk

You'll also need to set up your environment variables. Create a `.env.local` file in your project root:

1ANTHROPIC_API_KEY=your_api_key_here

Creating an AI Chat Component

Let's create a simple chat interface that interacts with Claude. We'll build this step by step.

First, create a new API route in `app/api/chat/route.ts`:

1import { Anthropic } from '@anthropic-ai/sdk';
2import { NextResponse } from 'next/server';
3
4const anthropic = new Anthropic({
5  apiKey: process.env.ANTHROPIC_API_KEY,
6});
7
8export async function POST(req: Request) {
9  try {
10    const { messages } = await req.json();
11
12    const response = await anthropic.messages.create({
13      model: 'claude-3-opus-20240229',
14      max_tokens: 1000,
15      messages: messages,
16    });
17
18    return NextResponse.json({ content: response.content[0].text });
19  } catch (error) {
20    console.error('Error:', error);
21    return NextResponse.json(
22      { error: 'Failed to process request' },
23      { status: 500 }
24    );
25  }
26}

Next, let's create a chat component in `app/components/Chat.tsx`:

1'use client';
2
3import { useState } from 'react';
4
5interface Message {
6  role: 'user' | 'assistant';
7  content: string;
8}
9
10export default function Chat() {
11  const [messages, setMessages] = useState<Message[]>([]);
12  const [input, setInput] = useState('');
13  const [isLoading, setIsLoading] = useState(false);
14
15  async function handleSubmit(e: React.FormEvent) {
16    e.preventDefault();
17    if (!input.trim()) return;
18
19    const newMessages = [
20      ...messages,
21      { role: 'user', content: input },
22    ];
23
24    setMessages(newMessages);
25    setInput('');
26    setIsLoading(true);
27
28    try {
29      const response = await fetch('/api/chat', {
30        method: 'POST',
31        headers: {
32          'Content-Type': 'application/json',
33        },
34        body: JSON.stringify({ messages: newMessages }),
35      });
36
37      const data = await response.json();
38
39      setMessages([
40        ...newMessages,
41        { role: 'assistant', content: data.content },
42      ]);
43    } catch (error) {
44      console.error('Error:', error);
45    } finally {
46      setIsLoading(false);
47    }
48  }
49
50  return (
51    <div className="max-w-2xl mx-auto p-4">
52      <div className="space-y-4 mb-4">
53        {messages.map((message, index) => (
54          <div
55            key={index}
56            className={`p-4 rounded-lg ${
57              message.role === 'user'
58                ? 'bg-blue-100 ml-auto'
59                : 'bg-gray-100'
60            }`}
61          >
62            {message.content}
63          </div>
64        ))}
65      </div>
66
67      <form onSubmit={handleSubmit} className="flex gap-2">
68        <input
69          type="text"
70          value={input}
71          onChange={(e) => setInput(e.target.value)}
72          placeholder="Type your message..."
73          className="flex-1 p-2 border rounded"
74          disabled={isLoading}
75        />
76        <button
77          type="submit"
78          disabled={isLoading}
79          className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:bg-gray-400"
80        >
81          {isLoading ? 'Sending...' : 'Send'}
82        </button>
83      </form>
84    </div>
85  );
86}

Finally, update your `` to use the Chat component:

1import Chat from './components/Chat';
2
3export default function Home() {
4  return (
5    <main className="min-h-screen p-4">
6      <h1 className="text-2xl font-bold text-center mb-8">
7        Chat with Claude
8      </h1>
9      <Chat />
10    </main>
11  );
12}
13

Advanced Features

Streaming Responses

To make the application more responsive, we can implement streaming responses. Update your API route:

1import { Anthropic } from '@anthropic-ai/sdk';
2import { StreamingTextResponse, Message } from 'ai';
3
4const anthropic = new Anthropic({
5  apiKey: process.env.ANTHROPIC_API_KEY,
6});
7
8export async function POST(req: Request) {
9  const { messages } = await req.json();
10
11  const response = await anthropic.messages.create({
12    model: 'claude-3-opus-20240229',
13    messages: messages,
14    stream: true,
15  });
16
17  const stream = new ReadableStream({
18    async start(controller) {
19      for await (const chunk of response) {
20        if (chunk.type === 'content_block_delta') {
21          controller.enqueue(chunk.delta.text);
22        }
23      }
24      controller.close();
25    },
26  });
27
28  return new StreamingTextResponse(stream);
29}
30

Error Handling and Rate Limiting

For production applications, you'll want to implement proper error handling and rate limiting:

1import { Anthropic } from '@anthropic-ai/sdk';
2import { rateLimit } from '@/lib/rate-limit';
3import { NextResponse } from 'next/server';
4
5export async function POST(req: Request) {
6  try {
7    // Implement rate limiting
8    const identifier = req.headers.get('x-forwarded-for') || 'anonymous';
9    const { success } = await rateLimit(identifier);
10
11    if (!success) {
12      return NextResponse.json(
13        { error: 'Too many requests' },
14        { status: 429 }
15      );
16    }
17
18    // Rest of your code...
19  } catch (error) {
20    console.error('Error:', error);
21    
22    if (error instanceof Anthropic.APIError) {
23      return NextResponse.json(
24        { error: error.message },
25        { status: error.status }
26      );
27    }
28
29    return NextResponse.json(
30      { error: 'Internal server error' },
31      { status: 500 }
32    );
33  }
34}
35

Best Practices

When building AI applications with Next.js and Anthropic's SDK, keep these best practices in mind:

1. Environment Variables: Always use environment variables for sensitive information like API keys.

2. Error Handling: Implement comprehensive error handling for both client and server-side errors.

3. Rate Limiting: Protect your API routes with rate limiting to prevent abuse.

4. Streaming: Use streaming responses for better user experience with long responses.

5. Type Safety: Leverage TypeScript for better code quality and developer experience.

6. Loading States: Always show loading states to provide feedback to users.

7. Validation: Validate user input before sending it to the API.

Conclusion

Integrating Anthropic's SDK with Next.js opens up exciting possibilities for building AI-powered applications. The combination of Next.js's robust framework and Claude's powerful AI capabilities allows developers to create sophisticated applications with relatively little code.

Remember to check Anthropic's documentation for the latest updates and best practices, as the AI landscape is constantly evolving.

Note: Make sure to replace placeholder API keys with your actual Anthropic API key, and never commit sensitive information to version control.