React SDK

Building conversational AI interfaces in React applications just got significantly easier. ChatBotKit's React SDK provides production-ready components that handle all the complexity of chat interactions, token streaming, session management, and real-time communication—so you can focus on creating exceptional user experiences rather than wrestling with WebSocket connections and state management.

Whether you're building a customer support widget, an AI-powered assistant, or an interactive chat experience, the React SDK gives you the building blocks you need. With TypeScript support, comprehensive documentation, and a developer-friendly API, you can integrate sophisticated conversational AI into your React applications in minutes, not days.

What You Can Build

Chat Widgets and Interfaces

Create beautiful, responsive chat interfaces that work seamlessly across devices:

• Widget Component: Drop-in chat widget with customizable appearance and behavior
• Messaging Component: Full-featured messaging interface for embedded chat experiences
• Whitelabel Component: Fully customizable chat interface that matches your brand
• Conversation UI: Pre-built conversation layouts with message bubbles, timestamps, and status indicators

Interactive Conversational Experiences

Build engaging AI-powered interactions with full control:

• Real-time Streaming: Token-by-token message streaming for natural, responsive conversations
• Typing Indicators: Visual feedback showing when the AI is processing responses
• Message History: Automatic conversation persistence and retrieval
• Multi-turn Conversations: Maintain context across multiple exchanges seamlessly

Custom Integration Options

Integrate conversational AI exactly how you need it:

• Headless Components: Use the SDK's logic without the default UI for complete customization
• Event Handlers: Hook into conversation events like message sent, received, and errors
• Custom Styling: Apply your own CSS or use popular styling frameworks
• Popup Mode: Display chat interfaces as floating popups or embedded components

Key Features

Zero-Configuration Setup

Get started immediately with sensible defaults that work out of the box. The SDK handles authentication, connection management, and error recovery automatically, so your chat experience remains reliable without complex setup:

TypeScript First

Built with TypeScript from the ground up, the React SDK provides comprehensive type definitions that make development faster and safer. Your IDE will help you discover available props, catch errors before runtime, and navigate the SDK with confidence.

Flexible Customization

Start with the default components and customize as much or as little as you need:

• Theme System: Apply custom colors, fonts, and spacing through configuration
• Component Overrides: Replace individual UI elements while keeping core functionality
• CSS Control: Use className props and CSS modules for complete styling freedom
• Render Props: Inject custom rendering logic at specific points in the component tree

Production-Ready Performance

The SDK is optimized for real-world applications with features that matter:

• Efficient Rendering: Smart memoization prevents unnecessary re-renders
• Connection Pooling: Reuse WebSocket connections for optimal performance
• Automatic Reconnection: Handles network issues gracefully without user intervention
• Memory Management: Properly cleans up resources when components unmount

Common Use Cases

Customer Support Chat

Add an intelligent support assistant to your website or application. The chat widget can answer common questions, collect information, and seamlessly escalate to human agents when needed. Users get instant help without leaving your site, and your support team focuses on complex issues.

Product Recommendations

Create an interactive shopping assistant that helps customers find exactly what they need. The AI can ask clarifying questions, suggest products based on preferences, and guide users through your catalog in a conversational, helpful way.

Interactive Documentation

Transform static documentation into an interactive experience where users can ask questions and get personalized guidance. The AI assistant becomes a knowledgeable companion that helps users find information faster than searching through pages of docs.

Onboarding Flows

Guide new users through your application with a conversational onboarding experience. The AI can answer questions, provide tips, and adjust the onboarding pace based on user responses, creating a more engaging and effective introduction to your product.

Getting Started

Installation

Install the React SDK from npm:

Or using yarn:

Basic Setup

Import and use the Widget component in your React application:

Customization Example

Tailor the chat experience to match your brand and requirements:

Advanced Features

Session Management

The SDK automatically handles user sessions, maintaining conversation context across page reloads and visits. You can also manage sessions programmatically for multi-user applications or custom authentication flows.

Custom Actions and Skillsets

Integrate with ChatBotKit's skillset system to enable custom actions and tool usage within conversations. The SDK handles the execution flow and presents results seamlessly to users.

File Attachments

Support file uploads and sharing within conversations when enabled for your bot. The SDK handles file validation, upload progress, and secure transmission to ChatBotKit's services.

Conversation Analytics

Access conversation metadata and analytics through event handlers. Track user engagement, message counts, response times, and other metrics to understand how users interact with your AI.

Integration with Next.js

The React SDK works perfectly with Next.js applications, including support for both App Router and Pages Router. For server-side rendering scenarios, check out the dedicated Next.js SDK that provides enhanced integration features specifically designed for the Next.js framework.

Developer Resources

• npm Package: @chatbotkit/react
• API Documentation: Comprehensive prop references and method documentation
• Example Projects: Sample implementations showing common patterns
• Community Support: Active developer community and support channels

Ready to add conversational AI to your React application? The React SDK makes it simple to create engaging, intelligent chat experiences that your users will love. Install the package and start building in minutes!