Examples

Explore practical examples of react-ai-chat for business websites, documentation, portfolios, and custom interfaces.

See how react-ai-chat can be used in different types of applications.

Each example focuses on a practical use case and shows how to combine the chatbot UI, server-side route, and optional RAG setup.

Explore the examples

Add an AI assistant that answers questions about your services, pricing, policies, and business information.

Build a documentation assistant that answers questions using your project's own documentation.

Help visitors explore your projects, skills, experience, and services with an AI assistant.

Build a completely custom chatbot interface using ChatbotProvider and useChatbotContext.

A business chatbot can help visitors find information without searching through multiple pages.

It can answer questions about:

Services
Pricing
Business hours
Locations
Contact information
Policies
Availability

See Business Site for a complete RAG setup using business content.

A documentation chatbot can search your project's documentation and provide answers based on the relevant sections.

Documentation
      ↓
Embedding index
      ↓
RAG retrieval
      ↓
AI model
      ↓
Answer

See Documentation Site for a complete documentation chatbot setup.

A portfolio assistant can help visitors learn about your work without manually searching through every section of your portfolio.

You can index information about:

About
Skills
Experience
Projects
Services
Education
Contact

See Portfolio for a complete portfolio chatbot example.

The ready-made Chatbot component handles the interface for you. Some applications need more control over the experience.

With ChatbotProvider and useChatbotContext(), you can create your own:

Message list
Chat input
Header
Loading state
Starter prompts
Message components
Actions
Layout

See Custom UI to build a chatbot interface around your own design system.

Choose the example closest to your application:

Each example can be adapted to your own API route, model, content, and design.