Interactive playground

Build your chatbot before you build your app.

Change the chatbot configuration and see how it feels instantly. When you're happy with it, copy the generated configuration into your React application.

Read the docsGitHub

Interactive playground

Change the configuration and preview the result.

Live preview
Mock responseUI only

Your app, your chatbot.

The controls on the right change the chatbot preview. Try different combinations to find the interface you want.

Generated configuration

This is the React component configuration based on your selections.

chatbot.tsx
<Chatbot
  title="Ask AI Assistant"
  subtitle="Trained on custom project data and experience"
  triggerText="Ask AI"
  placeholder="Ask a question..."
  position="bottom-right"
  themeMode="auto"
  starterPrompts={[
    "What can you help me with?",
    "Show me an example",
    "How does this chatbot work?",
  ]}
/>

Ready for real AI?

Connect the Chatbot to your own API route using the package's server utilities.

Configure API route→
From playground to production

Like the configuration?
Drop it into your app.

The playground controls map directly to the Chatbot component. Configure the experience here, then connect it to your own API route when you're ready.

Start building
chatbot.tsx
import { Chatbot } from "react-ai-chat";

export default function App() {
  return (
    <Chatbot
      title="Ask AI Assistant"
      position="bottom-right"
      themeMode="dark"
      triggerText="Ask AI"
    />
  );
}
Connect your own API route for live AI responses.

Need more control?

Generate the chatbot UI directly into your project with the CLI. Edit the components, styles, and structure however you want.

Explore generated UI