Guide: Build a Composable RAG Chatbot on your Docs

A step-by-step guide to creating a RAG chatbot on your documentation files using Langbase Pipes and Memory.

In this guide, we will create a RAG Chatbot on your documentation and synchronize your documentation files with Langbase. This will enable you to:

• Build an AI question-answer chatbot on your documentation.
• Effortlessly upload and manage your documentation files as embeddings in Langbase Memory.
• Ensure very low hallucination in the responses due to the refined Pipe + Memory RAG system.
• Keep the RAG chatbot updated with the latest changes in your documentation.

We'll use our GitHub Docs Sync script to synchronize your GitHub documentation with Langbase and build a powerful chatbot on your docs.

Let's get started!

Prerequisites

• Node.js and npm: Ensure you have Node.js and npm installed on your system.
• Langbase Account: Sign up at https://langbase.com.
• GitHub Personal Access Token: You will need it to fetch your documentation files from a GitHub repository. Generate a personal access token with access to your repo from your GitHub account settings.

Step #0Create a Memory

In Langbase dashboard, navigate to the Memory section and create a new memory. Name it something like my-docs.

Step #1Get your API Key

You will need to generate an API key to authenticate your requests. Follow this guide and create your key.

Step #2Project Setup

1. Clone the example repository:

   git clone https://github.com/LangbaseInc/langbase-examples.git
   cd langbase-examples/starters/github-docs-sync-script
   

   CopyCopied!

2. Install the dependencies:

   npm install
   

   CopyCopied!

Your script is ready to be configured.

Step #3Configure the script

1. Copy the .env.example file, rename to .env. It looks like this:

# GitHub Configuration:
# Your GitHub Personal Access Token Eg: github_pat_abc
GITHUB_ACCESS_TOKEN=
# GitHub Repository Owner and Repository Name Eg: meta and react
GITHUB_OWNER=
GITHUB_REPO=
# Base and Head Commit SHAs for commit comparison mode, Eg: 1234567890abcdef1234567890abcdef12345678
BASE_COMMIT_SHA=
HEAD_COMMIT_SHA=

# Langbase Configuration:

# Your Org/User API key. Org key if working in an org, otherwise user key. Eg: org_abc1235
LANGBASE_API_KEY=
# Your Langbase Org/User name. Case sensitive. Eg: 'langbase' or 'langbase-123'
LANGBASE_ORG_USER_NAME=
# The memory name on Langbase, in which want to upload the documents to. Eg: langbase-docs
LANGBASE_MEMORY_NAME=

Add the following variable values.

• GITHUB_ACCESS_TOKEN: Your GitHub personal access token.
• GITHUB_OWNER: The username or organization of the GitHub repository.
• GITHUB_REPO: The name of the GitHub repository containing your documentation.
• LANGBASE_API_KEY: Find your API key on your Langbase dashboard.
• LANGBASE_ORG_USER_NAME: Add your Langbase username or organization name (if org).
• LANGBASE_MEMORY_NAME: Add the name of the memory you created in Step 0 (eg., 'my-docs').

Step #4Upload All your Documentation files

The script has two modes:

1. Upload all docs
2. Upload only the changed docs between two commits (commit comparision mode)

Initially, we need to upload all documentation files in the repository to Langbase. This will help you create a baseline memory for your documentation.

To upload all documentation files in the repository, change the processAllFiles variable to true in the start of script.js file:

// script.js
const processAllFiles = true;

Now run the script:

   node script.js

The script will:

• Automatically find Markdown files (.md, .mdx) in your GitHub repo.
• Upload them to your specified Langbase memory.

Monitor the terminal for output/errors as the script uploads your files to the memory.

Once your your script finishes running, you can navigate to your memory on Langbase dashboard. You should be able to see your docs files there. Once their embeddings are created and saved, their status will change to Ready.

Step #5Create a Pipe

Now, you need to create a pipe that will use this memory and send it to LLM. Get started quickly by forking this ask-my-docs pipe from the Langbase dashboard. Click Fork, select an owner, and click create.

You will notice that the forked pipe is already configured with system prompts, and model settings.

In variables section on the right side, add your company name and a breif description. These are used in the prompt. Click deploy to save your changes. You can also customize the pipe further to suit your needs.

Step #6Connect Memory to Pipe

Open the newly created pipe and click on the Memory button. From dropdown, select the memory you created in the previous steps. Deploy the pipe and that's it.

Your RAG pipe for your documentation is ready!

Step #7Use Your RAG Pipe

You can try out your RAG pipe in the playground. Ask questions about your documentation and see the answers. Here is a how it looks like for our RAG pipe we created for Langbase documentation:

As you can see, it accurately answers queries by retreiving relevant chunks and sending them to the LLM i.e., Retrieval-Augmented Generation (RAG).

Step #8Keep Your Memory Updated (Optional)

In the future, your documentation will receive updates, and you will want to keep your chatbot up-to-date.

The script makes it easy to keep your Langbase memory in sync with your GitHub documentation. Here's how you can update your memory efficiently:

1. Configure the .env file and add the BASE_COMMIT_SHA and HEAD_COMMIT_SHA values:

# Base and Head Commit SHAs for commit comparison mode, Eg: 1234567890abcdef1234567890abcdef12345678
BASE_COMMIT_SHA=
HEAD_COMMIT_SHA=

• BASE_COMMIT_SHA: The last commit's SHA until which your memory is updated. We reminded you to save it in Step 3 (eg., '1234567890abcdef1234567890abcdef12345678').

• HEAD_COMMIT_SHA: The latest commit's SHA from your GitHub repository. You can find it in your GitHub repository's commit history.

2. Change the processAllFiles variable to false in the start of script.js file:

// script.js
const processAllFiles = false;

3. Run the script:

   node script.js

The script will compare the two commits and upload only the changed files to your Langbase memory. This way, you can keep your memory updated with the latest changes in your documentation while saving cost and time.

Step #9Integrate

You can integrate your pipe anywhere using the Langbase API and SDK. Here are a few ideas:

• Chatbot Web App

  Use our Next.js Ask Docs app example and integrate your pipe to create a chatbot webapp.

• Discord/Slack Bot

  Use our Discord bot example, integrate your pipe and offer an Ask Docs Bot to your Discord server members for querying your docs directly.

• CLI

  Build a CLI tool that uses your pipe to answer questions from your documentation.

For this guide, let's build a Chatbot Web App using the ask-my-docs pipe.

Step #10Build a Chatbot Web App for your Docs RAG

Clone the Ask My Docs Example project to get started. The example app contains a single page with complete chatbot UI for your chatbot usecase. It uses:

1. Langbase SDK
2. Langbase Pipe
3. Langbase Memory
4. Next.js
5. Tailwind CSS

After cloning, navigate to the project directory and install the dependencies:

npm install

Step #11Add your Pipe API key

Copy the .env.example file, rename to .env and add your pipe API key:

LANGBASE_PIPE_API_KEY=

To get your pipe API key, navigate to your ask-my-docs pipe on Langbase dashboard, open the API tab and copy the API key. Paste it in the .env file.

Step #12Run the project

Run the project using the following command:

npm run dev

Voila! Your chatbot web app is ready. It is that easy. Navigate to its link (usually on http://localhost:3000). You can now ask questions about your documentation and get answers from your RAG pipe in this app.

Live Demo

You can see the live demo of this project here, which we built for React Query Docs. Ask any questions about React Query and see the RAG chatbot in action.

By following this guide, you've leveraged Langbase and a bit of code to build an automated and powerful RAG system on top of your documentation. Join our Discord community for further help, support, and share what you build with Langbase.