AIChatbotClaude API

Building an AI Chatbot with Next.js and Claude API

5 May 2026 · by Yunmin Shin

Why Build a Chatbot with Claude?

Anthropic's Claude models are known for instruction-following, long context windows, and nuanced reasoning — qualities that matter for business chatbots that need to handle real customer questions rather than pre-scripted flows.

For Bangkok businesses, an AI chatbot can handle Thai and English inquiries simultaneously, operate 24/7 without staffing costs, and escalate to a human agent via LINE when needed. The combination of Claude's multilingual capability and Thailand's LINE-centric communication culture makes this a particularly practical use case.

How Do You Set Up the Claude API?

Install the Anthropic SDK:

npm install @anthropic-ai/sdk

Store your API key securely:

ANTHROPIC_API_KEY=sk-ant-...

Create a client singleton in lib/anthropic.ts:

import Anthropic from "@anthropic-ai/sdk";
export const anthropic = new Anthropic({ apiKey: process.env.ANTHROPIC_API_KEY });

Never expose this in client-side code. All Claude API calls must happen in Route Handlers, Server Actions, or server components.

How Do You Stream the Response?

Streaming is essential for chatbot UX — users should see the response appear word by word rather than waiting for the full answer.

Use the Vercel AI SDK alongside the Anthropic provider:

npm install ai @ai-sdk/anthropic

Create a Route Handler at app/api/chat/route.ts:

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

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({
    model: anthropic("claude-sonnet-4-5"),
    system: "You are a helpful assistant for [Business Name] in Bangkok...",
    messages,
  });
  return result.toDataStreamResponse();
}

On the client side, use the useChat hook from the ai package. It manages the message history, streaming state, and input handling with minimal boilerplate.

How Do You Write an Effective System Prompt?

The system prompt defines your chatbot's personality, knowledge, and limits. A good system prompt for a Bangkok business chatbot should:

Define the role clearly: "You are a customer support agent for [Restaurant Name] in Bangkok."
Include key business information: hours, location, menu categories, pricing policy.
Set language rules: "Respond in Thai if the user writes in Thai, English if they write in English."
Define escalation: "If the user wants to place an order or speaks to a human, provide the LINE contact @handle."
Set limits: "Do not discuss competitors. Do not make promises about delivery times."

How Do You Maintain Conversation History?

The Claude API is stateless — you must send the full conversation history with every request. The useChat hook handles this automatically on the client side. For server-side persistence, store messages in your database and retrieve the last N messages (keeping within the context window) at the start of each conversation.

For most business chatbots, limiting context to the last 20 messages balances memory and cost effectively.