Add a fully functional AI chatbot to your website using Anthropic's Claude API — handle conversations, stream responses, maintain history, and deploy it securely.
In this guide
Sign up at console.anthropic.com. Create an API key in the API Keys section. Add it to your .env.local: ANTHROPIC_API_KEY=sk-ant-.... Never expose this key client-side. All calls to the Claude API must go through a server-side API route — the API key gives full access to your Anthropic account and should be treated like a password.
Install: npm install @anthropic-ai/sdk. Create src/app/api/chat/route.ts: import Anthropic from "@anthropic-ai/sdk"; const client = new Anthropic(); export async function POST(req) { const { messages } = await req.json(); const response = await client.messages.create({ model: "claude-sonnet-4-6", max_tokens: 1024, system: "You are a helpful assistant for [your company name].", messages }); return Response.json({ content: response.content[0].text }); }
Create a client component with message history state. On submit, append the user message to history, POST to /api/chat with the full messages array, then append the assistant response. The messages array format for Claude: [{ role: "user", content: "Hello" }, { role: "assistant", content: "Hi!" }, { role: "user", content: "Next question" }]. Always send the full history to maintain conversation context.
Streaming shows the response word-by-word instead of waiting for the full response. In your API route: const stream = client.messages.stream({ ... }); return new Response(stream.toReadableStream()). In your component, use the Fetch API with a reader: const reader = res.body.getReader(); while loop reading chunks and updating state. This dramatically improves perceived performance for longer responses.
The system prompt defines your chatbot's personality and knowledge. Write it with your business context: "You are a support assistant for NexWorldTech, a custom software agency. Help visitors understand our services, pricing, and process. If asked about specific pricing, direct them to /pricing. If they want to start a project, direct them to /book. Always be helpful and concise." A good system prompt is the difference between a generic chatbot and one that actually converts visitors.
Need Help?
Our engineering team handles implementations like this every week. Get a free scoping call — we will tell you exactly what it takes and what it costs.
Book a free callCompetitive Intelligence
Efficiency Modeling
© 2026 NexWorldTech — Built for Global Dominance.