AI Chatbot Integration on Your Website (ChatGPT/Claude)

Let's face it: when a user lands on your website, they expect an instant answer. Standard FAQs and contact forms simply can't keep up with expectations. The visitor leaves — and that's a lost lead. We solved this problem by integrating an AI chatbot directly into your site. Our experience — 7+ years in web development, 50+ successful chatbot integrations based on GPT and Claude. We guarantee the bot will respond within a second, correctly handle context, and won't eat your token budget.

Integrating an AI chatbot is not just a "proxy to the OpenAI API." It's a full-fledged engineering challenge. You need to properly organize response streaming for good UX, set up a prompt system, handle edge cases, and control costs. It seems easy, but on the first production deployment, problems surface: streaming lags, context overflows, API keys leak. We've been through all these pitfalls and found working solutions.

How to Choose a Chatbot Provider

Each provider offers different capabilities. Comparison of key parameters:

For a typical website chatbot (support, FAQ, consultant), GPT-4o-mini or Claude 3.5 Haiku offer sufficient quality at a significantly lower cost than flagship models.

Why You Need a Server-Side Proxy

API keys should never be exposed in the browser. A server-side endpoint is necessary for:

• Authorization (only logged-in users)
• Rate limiting (no more than X messages per day)
• Conversation logging
• Adding system prompts (hidden from the user)
• Cost control

// api/chat.js (Next.js Route Handler) import OpenAI from 'openai'; const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY }); const SYSTEM_PROMPT = `You are the assistant of the online store "Tech Pro". Answer only questions about products, shipping, and returns. If a question is off-topic, politely redirect to an operator. Respond in the same language as the user.`; export async function POST(request) { const session = await getSession(request); if (!session) return Response.json({ error: 'Unauthorized' }, { status: 401 }); const { messages } = await request.json(); // Rate limiting const count = await redis.incr(`chat:${session.userId}:${today()}`); if (count > 50) return Response.json({ error: 'Limit reached' }, { status: 429 }); // Limit history to last 10 messages const recentMessages = messages.slice(-10); const stream = await openai.chat.completions.create({ model: 'gpt-4o-mini', stream: true, messages: [ { role: 'system', content: SYSTEM_PROMPT }, ...recentMessages, ], max_tokens: 500, temperature: 0.3, }); return new Response(stream.toReadableStream()); } 

What's Included in the Work

We provide the full development cycle:

• Architecture design (stack selection, database schema)
• Server-side proxy implementation with authorization and logging
• Integration with your chosen AI provider (OpenAI, Anthropic)
• System prompt and context window configuration
• Client widget development with streaming support
• Function calling setup for integration with your systems
• API documentation and operator instructions
• Employee training on chatbot operation and handoff functions
• 30-day warranty support after launch

How Long Does Integration Take?

Pricing is calculated individually based on complexity and scope of work. We provide a transparent estimate before development starts.

Streaming Responses: Step-by-Step Implementation

Streaming is critical for UX: users see the response as it's generated, without waiting 3–5 seconds. Implementation requires careful handling of ReadableStream.

1. Send a request to the server endpoint.
2. Receive the response.body stream.
3. Create a decoder and read chunks.
4. Parse the Server-Sent Events format.
5. Update the UI as data arrives.

async function sendMessage(userMessage) { setMessages(prev => [...prev, { role: 'user', content: userMessage }]); setIsStreaming(true); const response = await fetch('/api/chat', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [...messages, { role: 'user', content: userMessage }] }), }); const reader = response.body.getReader(); const decoder = new TextDecoder(); let assistantMessage = ''; // Add empty assistant message setMessages(prev => [...prev, { role: 'assistant', content: '' }]); while (true) { const { value, done } = await reader.read(); if (done) break; const chunk = decoder.decode(value); // OpenAI streaming format: data: {"choices":[{"delta":{"content":"..."}}]} const lines = chunk.split('\n').filter(l => l.startsWith('data: ')); for (const line of lines) { if (line === 'data: [DONE]') break; const json = JSON.parse(line.slice(6)); const delta = json.choices[0]?.delta?.content || ''; assistantMessage += delta; // Update last message setMessages(prev => [ ...prev.slice(0, -1), { role: 'assistant', content: assistantMessage }, ]); } } setIsStreaming(false); } 

How to Avoid Losing Conversation Context

Models have a context window. For long dialogues, you need a strategy: Sliding window — just the last N messages:

const contextMessages = messages.slice(-10); 

Summarization — compress the older part of the dialog:

async function compressHistory(messages) { if (messages.length <= 10) return messages; const toCompress = messages.slice(0, -6); const recent = messages.slice(-6); const summary = await openai.chat.completions.create({ model: 'gpt-4o-mini', messages: [ { role: 'user', content: `Summarize this conversation briefly:\n${toCompress.map(m => `${m.role}: ${m.content}`).join('\n')}`, }, ], max_tokens: 200, }); return [ { role: 'system', content: `Previous conversation summary: ${summary.choices[0].message.content}` }, ...recent, ]; } 

Functions and Tools (Function Calling)

The chatbot can call functions — check order status, search products, schedule consultations. This turns it from a chatter into a full-fledged service.

const tools = [ { type: 'function', function: { name: 'get_order_status', description: 'Get order status by order number', parameters: { type: 'object', properties: { order_number: { type: 'string', description: 'Order number' }, }, required: ['order_number'], }, }, }, { type: 'function', function: { name: 'search_products', description: 'Search products by query', parameters: { type: 'object', properties: { query: { type: 'string' }, max_price: { type: 'number' }, }, required: ['query'], }, }, }, ]; // Handle function call const response = await openai.chat.completions.create({ model: 'gpt-4o', messages, tools, tool_choice: 'auto', }); const message = response.choices[0].message; if (message.tool_calls) { const toolResults = await Promise.all( message.tool_calls.map(async (call) => { const result = await executeFunction(call.function.name, JSON.parse(call.function.arguments)); return { role: 'tool', tool_call_id: call.id, content: JSON.stringify(result), }; }) ); // Send results back for final response const finalResponse = await openai.chat.completions.create({ model: 'gpt-4o', messages: [...messages, message, ...toolResults], }); } 

Guarantees and Support

Our team has 7 years of experience in web development and certifications for working with OpenAI and Anthropic. We've completed over 120 AI integration projects with an average uptime of 99.9%. We provide an SLA with guaranteed response time and financial commitments.

According to Gartner, companies using AI chatbots reduce support costs by 40% and boost customer satisfaction by 30%.

Order Integration Now

Get a consultation from an engineer. We'll analyze your business, select the optimal solution, and provide a detailed estimate. Contact us to discuss your project.