Mixedbread Docs Chat

A Next.js starter template for building AI documentation chatbot using AI SDK and Mixedbread Search.

mxbai-docs-chat-demo.mp4

Getting Started

Prerequisites

• Bun (or Node.js 22+)
• Git

1. Clone the Repository

git clone https://github.com/mixedbread-ai/mxbai-docs-chat
cd mxbai-docs-chat

2. Install Dependencies

bun install

3. Set Up Environment Variables

Create a .env file in the root directory:

cp .env.example .env

Add your credentials to the .env file:

MXBAI_API_KEY=your-api-key-here
MXBAI_STORE_ID=your-store-id
GEMINI_API_KEY=your-api-key-here
GITHUB_TOKEN=your-github-token-here

To get your API key and Store ID, you have two options:

1. From Vercel Integration (Recommended if deploying to Vercel):

   • Go to your Vercel dashboard
   • Navigate to your project's Integrations tab
   • Install or access the Mixedbread integration
   • Copy your API key and Store ID from the integration settings

2. From Mixedbread Platform (For standalone use):

   • Visit the Mixedbread Platform
   • Sign up or log in to your account
   • Navigate to API Keys and create a new key
   • Navigate to Stores and create a new Store, then copy the Store ID

4. Upload Documentation Files to Store

This script fetches the Next.js documentation from GitHub and uploads it to your Mixedbread Store for semantic search:

bun ingest-docs

Note: If you're on the free plan, your Store has a limit of 100 files. The Next.js documentation exceeds this limit, so not all files will be ingested. The docs chat will not know about files that were not ingested and won't be able to answer questions related to those topics. Consider upgrading your plan or using your own smaller documentation set.

Note: By default, this ingests Next.js documentation from the official repository. See the Customization section below to index your own documentation.

5. Run the Application

Start the development server:

bun dev

Customization

Using Your Own Documentation

To index your own documentation instead of Next.js docs, modify scripts/ingest-docs.ts:

1. Change the repository settings:

const REPO_OWNER = "your-org";
const REPO_NAME = "your-repo";
const REPO_BRANCH = "main"; // or your default branch
const DOCS_PATH = "docs"; // path to your docs folder

2. Update the source URL construction in the constructSourceUrl() function to match your documentation site structure.

3. Adjust file extensions if needed:

const VALID_EXTENSIONS = [".md", ".mdx"]; // add other formats if needed

4. Run the ingestion script:

bun ingest-docs

Alternative: Upload Local Documentation Files

If want to upload your local documentation files, you can use the Mixedbread CLI to upload them directly to your Store.

Customizing the LLM Behavior

Edit app/api/chat/route.ts to customize:

• System Prompt: Modify the SYSTEM_PROMPT constant to change the LLM's behavior and instructions
• Model: Change the model variable if you want to use a different LLM

Learn More

Mixedbread Resources

• Mixedbread Documentation - Learn about Mixedbread's features and APIs
• Quickstart Guide - Get started with creating Stores and uploading files
• Mixedbread Discord - Join the community and get support

License

This project is licensed under the MIT License.