Business Site

Add an AI assistant to a business website so visitors can quickly find information about your services, products, pricing, and policies.

Overview

An AI assistant can make a business website easier to explore.

Visitors can ask questions about your services, pricing, availability, policies, contact information, and other business details without searching through multiple pages.

react-ai-chat can use your business content as its knowledge base with RAG.

What we're building

This example uses:

Chatbot for the visitor-facing UI
createChatRoute() for the server-side API route
RAG for retrieving relevant business information
An embedding provider for indexing and retrieving your content

The flow looks like this:

Business content
       ↓
Embedding index
       ↓
createChatRoute()
       ↓
Retrieve relevant information
       ↓
Generate response
       ↓
Chatbot

Example use cases

A business chatbot can answer questions such as:

What services do you offer?
How much does this service cost?
What are your business hours?
Where are you located?
How can I contact you?
Do you offer custom packages?
What is your cancellation policy?
How long does delivery take?

The exact questions depend on the information your business provides.

1. Prepare your business content

Create a directory containing the information you want the chatbot to know.

For example:

content/
├── about.md
├── services.md
├── pricing.md
├── faq.md
├── policies.md
├── contact.md
└── locations.md

Keep each document focused on a specific topic.

For example:

# Web Development

We build custom websites and web applications for businesses.

## Services

- Business websites
- E-commerce websites
- Custom web applications
- Website maintenance

## Process

Projects start with a discovery call followed by planning, design, development, testing, and deployment.

The chatbot can retrieve this information when a visitor asks a related question.

2. Generate the embedding index

Use the CLI to create an embedding index from your business content:

npx react-ai-chat embed

The CLI walks you through the embedding configuration.

You select:

Embedding provider
Embedding model
Output dimensions
Optional fallback model
Source directory
Output path

For example, select ./content as the source directory and ./chatbot/embeddings.json as the output path.

The generated index contains the embeddings used to find relevant business information.

See CLI for more details.

3. Configure the chat route

Create an API route for your chatbot.

With Next.js App Router:

app/
└── api/
    └── chat/
        └── route.ts

Configure createChatRoute():

import { google } from "@ai-sdk/google";
import { GoogleGenAI } from "@google/genai";
import {
  createChatRoute,
  googleEmbedding,
} from "react-ai-chat/server";

import embeddings from "@/chatbot/embeddings.json";

const client = new GoogleGenAI({
  apiKey: process.env.GOOGLE_GENERATIVE_AI_API_KEY,
});

const embeddingProvider = googleEmbedding(client, {
  model: embeddings.model,
});

export const POST = createChatRoute({
  model,

  systemPrompt: `
    You are the AI assistant for our business.

    Answer questions using the provided business information.
    Be helpful and concise.

    If the requested information is not available,
    tell the visitor that you do not have that information.
    Do not invent prices, policies, services, availability,
    or other business details.
  `,

  rag: {
    index: embeddings,
    provider: embeddingProvider,
    topK: 3,
  },
});

Use the embedding provider configuration required by your selected provider.

Keep provider credentials on the server.

4. Add the chatbot

Render the chatbot on your website:

"use client";

import { Chatbot } from "react-ai-chat";
import "react-ai-chat/style.css";

export function BusinessChatbot() {
  return (
    <Chatbot
      title="How can we help?"
      subtitle="Ask us about our services"
      placeholder="Ask a question..."
      starterPrompts={[
        "What services do you offer?",
        "How can I contact you?",
        "What are your business hours?",
      ]}
      apiEndpoint="/api/chat"
      themeMode="auto"
    />
  );
}

The chatbot can appear as a floating assistant throughout the website or inside a dedicated support section.

5. Match your brand

Use the theme prop to match your business website's visual identity:

<Chatbot
  theme={{
    primaryColor: "#2563eb",
    primaryForeground: "#ffffff",
    background: "#ffffff",
    foreground: "#111827",
    mutedBackground: "#f3f4f6",
    mutedForeground: "#6b7280",
    borderColor: "#e5e7eb",
  }}
/>

For a website with dark mode:

<Chatbot
  themeMode="auto"
  theme={{
    primaryColor: "#2563eb",
    primaryForeground: "#ffffff",

    light: {
      background: "#ffffff",
      foreground: "#111827",
      mutedBackground: "#f3f4f6",
      mutedForeground: "#6b7280",
      borderColor: "#e5e7eb",
    },

    dark: {
      background: "#111827",
      foreground: "#f9fafb",
      mutedBackground: "#1f2937",
      mutedForeground: "#9ca3af",
      borderColor: "#374151",
    },
  }}
/>

See Theming for more options.

6. Give the assistant clear instructions

A business assistant should have clear boundaries.

For example:

systemPrompt: `
  You are the customer support assistant for Acme.

  Use the provided business information to answer questions.

  You can help visitors with:
  - Services
  - Pricing
  - Business hours
  - Locations
  - Policies
  - Contact information

  Only provide information supported by the provided references.

  If information is unavailable, tell the visitor that
  you do not have enough information to answer.

  Never invent prices, discounts, availability, or policies.
`,

This is especially important for information such as pricing and availability. Your source content should remain the authority.

7. Organize information for better answers

A useful business knowledge base might look like:

content/
├── about.md
├── services/
│   ├── web-development.md
│   ├── consulting.md
│   └── maintenance.md
├── pricing.md
├── faq.md
├── policies/
│   ├── refunds.md
│   └── cancellations.md
├── locations.md
└── contact.md

For each service, include details that visitors are likely to ask about:

Service name
Description
What's included
Pricing
Duration
Requirements
Process
Frequently asked questions

This gives retrieval enough relevant context to answer specific questions.

8. Control the retrieved context

Use topK to control how many relevant chunks are retrieved:

rag: {
  index: embeddings,
  provider: embeddingProvider,
  topK: 3,
},

The default is 3.

A smaller value keeps the context focused. A larger value can help when a question requires information from several parts of your business documentation.

Keep business information current

Your embedding index represents the content available when it was generated.

When you change important information, regenerate the embedding index:

npx react-ai-chat embed

Select the same embedding configuration and update the source and output paths as needed.

This matters especially for:

Pricing
Services
Business hours
Locations
Policies
Contact information

A chatbot should not be allowed to answer from outdated business information.

Recommended project structure

A Next.js business website could look like:

business-site/
├── app/
│   └── api/
│       └── chat/
│           └── route.ts
│
├── chatbot/
│   └── embeddings.json
│
├── content/
│   ├── about.md
│   ├── services/
│   ├── pricing.md
│   ├── faq.md
│   ├── policies/
│   ├── locations.md
│   └── contact.md
│
└── package.json

Keep the source content separate from the generated embedding index.

Complete client example

"use client";

import { Chatbot } from "react-ai-chat";
import "react-ai-chat/style.css";

export function BusinessChatbot() {
  return (
    <Chatbot
      title="How can we help?"
      subtitle="Ask us anything about our business"
      placeholder="Ask a question..."
      starterPrompts={[
        "What services do you offer?",
        "How much does it cost?",
        "What are your business hours?",
      ]}
      apiEndpoint="/api/chat"
      themeMode="auto"
      theme={{
        primaryColor: "#2563eb",
        primaryForeground: "#ffffff",
      }}
    />
  );
}

The client handles the interface while the server handles the model and RAG configuration.

RAG

createChatRoute

Theming

On this page