🚀 Talk Box React Chat Interface

Modern React component with full Talk Box + Chatlas integration

🌐 Open React Interface

🔧 Traditional Approach

The classic chat.show("browser") method

import talk_box as tb

bot = (
    tb.ChatBot()
    .model("gpt-4")
    .preset("technical_advisor")
    .temperature(0.3)
)

# Launch traditional interface
bot.show("browser")
✅ Quick setup
❌ Limited customization

⚡ React Component

Modern React-based interface with full control

import { TalkBoxChat } from '@talk-box/react-chat';

function App() {
  return (
    <TalkBoxChat
      chatBot={{
        model: "gpt-4",
        preset: "technical_advisor",
        temperature: 0.3
      }}
      theme="light"
      apiBaseUrl="http://127.0.0.1:8000"
    />
  );
}
✅ Full customization
✅ Modern React ecosystem

🔍 Server Status

FastAPI Server (Backend)
Checking...

http://127.0.0.1:8000

React Dev Server (Frontend)
Checking...

http://localhost:5173

🚀 Quick Start Commands

1. Start FastAPI Server

cd talk_box/web_components/python_server
python3 chat_server.py

2. Start React Dev Server

cd talk_box/web_components/react-chat
npm run dev

3. Open Chat Interface

Visit http://localhost:5173

🔗 API Integration Examples

Health Check

Create Conversation