Skip to main content

Building a Chatbot

Learn how to build a simple chatbot using BrilliantAI's Chat API.

Basic Chatbot​

from openai import OpenAI
from typing import List, Dict

class Chatbot:
    def __init__(self, api_key: str):
        self.client = OpenAI(
            base_url="https://api.brilliantai.co",
            api_key=api_key
        )
        self.conversation_history: List[Dict] = []
    
    def add_message(self, role: str, content: str):
        self.conversation_history.append({
            "role": role,
            "content": content
        })
    
    def chat(self, message: str) -> str:
        # Add user message to history
        self.add_message("user", message)
        
        try:
            # Get response from API
            response = self.client.chat.completions.create(
                model="mistral-nemo",
                messages=self.conversation_history,
                temperature=0.7
            )
            
            # Extract and store response
            assistant_message = response.choices[0].message.content
            self.add_message("assistant", assistant_message)
            
            return assistant_message
            
        except Exception as e:
            print(f"Error: {str(e)}")
            return "I'm sorry, I encountered an error."

# Usage
bot = Chatbot("your-api-key")
response = bot.chat("Hello! How are you?")
print(response)

Web Interface​

FastAPI Backend​

from fastapi import FastAPI, WebSocket
from fastapi.middleware.cors import CORSMiddleware
import json

app = FastAPI()
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

@app.websocket("/chat")
async def websocket_endpoint(websocket: WebSocket):
    await websocket.accept()
    bot = Chatbot("your-api-key")
    
    try:
        while True:
            message = await websocket.receive_text()
            response = bot.chat(message)
            await websocket.send_text(json.dumps({
                "message": response
            }))
    except Exception as e:
        print(f"WebSocket error: {str(e)}")

React Frontend​

import React, { useState, useEffect, useRef } from 'react';
import './Chat.css';

function Chat() {
    const [messages, setMessages] = useState([]);
    const [input, setInput] = useState('');
    const [ws, setWs] = useState(null);
    const messagesEndRef = useRef(null);

    useEffect(() => {
        const websocket = new WebSocket('ws://localhost:8000/chat');
        
        websocket.onmessage = (event) => {
            const response = JSON.parse(event.data);
            setMessages(prev => [...prev, {
                role: 'assistant',
                content: response.message
            }]);
        };
        
        setWs(websocket);
        
        return () => websocket.close();
    }, []);

    const sendMessage = (e) => {
        e.preventDefault();
        if (!input.trim()) return;

        // Add user message
        setMessages(prev => [...prev, {
            role: 'user',
            content: input
        }]);

        // Send to websocket
        ws.send(input);
        setInput('');
    };

    return (
        <div className="chat-container">
            <div className="messages">
                {messages.map((msg, idx) => (
                    <div key={idx} className={`message ${msg.role}`}>
                        {msg.content}
                    </div>
                ))}
                <div ref={messagesEndRef} />
            </div>
            <form onSubmit={sendMessage} className="input-form">
                <input
                    type="text"
                    value={input}
                    onChange={(e) => setInput(e.target.value)}
                    placeholder="Type a message..."
                />
                <button type="submit">Send</button>
            </form>
        </div>
    );
}

export default Chat;

CSS Styling​

.chat-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    height: 80vh;
    display: flex;
    flex-direction: column;
}

.messages {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
    background: #f5f5f5;
    border-radius: 10px;
    margin-bottom: 20px;
}

.message {
    margin: 10px 0;
    padding: 10px 15px;
    border-radius: 10px;
    max-width: 70%;
}

.message.user {
    background: #007bff;
    color: white;
    margin-left: auto;
}

.message.assistant {
    background: white;
    color: black;
    margin-right: auto;
}

.input-form {
    display: flex;
    gap: 10px;
}

input {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

button {
    padding: 10px 20px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background: #0056b3;
}

Next Steps​