Skip to main content

Package React Docs for AI

Step-by-step guide to creating a searchable RAG library from React documentation

In this tutorial, you’ll create a libragen library from the React documentation. By the end, you’ll have a searchable library that any AI tool can query for accurate React answers.

Time required: ~10 minutes

What you’ll learn:

  • Downloading documentation from a repository
  • Building a library with custom metadata
  • Querying the library from CLI and MCP
  • Versioning and updating libraries

Prerequisites

  • Node.js 20 or later
  • Basic familiarity with the command line

Step 1: Get the React Documentation

First, let’s download the React documentation. The React team maintains their docs as MDX files in their GitHub repository.

Terminal window
# Create a working directory
mkdir react-library && cd react-library


# Clone just the docs (sparse checkout)
git clone --depth 1 --filter=blob:none --sparse \
  https://github.com/reactjs/react.dev.git
cd react.dev
git sparse-checkout set src/content/reference src/content/learn

You now have the React reference and learning docs locally.

Step 2: Build the Library

Build a libragen library from the documentation:

Terminal window
libragen build ./src/content \
  --name react-docs \
  --description "React documentation including hooks, components, and APIs" \
  --content-version 19.0.0

You’ll see output like:

Processing files...
  ✓ 142 files processed
  ✓ 1,847 chunks created
  ✓ Embeddings generated
  ✓ Full-text index built


Library saved: react-docs-19.0.0.libragen (12.4 MB)

The library is now ready to use.

Step 3: Query from the CLI

Test your library with a query:

Terminal window
libragen query --library react-docs "When should I use useEffect vs useLayoutEffect?"

You’ll get results with relevance scores:

Results for: "When should I use useEffect vs useLayoutEffect?"


[0.92] reference/react/useLayoutEffect.md
  useLayoutEffect is a version of useEffect that fires before the browser
  repaints the screen. useLayoutEffect can hurt performance. Prefer useEffect
  when possible...


[0.89] reference/react/useEffect.md
  useEffect is a React Hook that lets you synchronize a component with an
  external system. Effects run after render, so they don't block painting...


[0.84] learn/synchronizing-with-effects.md
  Some components need to synchronize with external systems. For example,
  you might want to control a non-React component based on React state...

Step 4: Use with Your AI Tool

Install the MCP server for your AI tool:

Terminal window
npx -y install-mcp @libragen/mcp

This automatically configures Claude Desktop, Cursor, Windsurf, or other MCP-compatible tools. Now you can ask your AI:

“Using my React library, explain the difference between controlled and uncontrolled components”

The AI will search your library and provide accurate, grounded answers.

Option B: Programmatic Access

Use the library in your own code:

import { Searcher, VectorStore } from '@libragen/core';


const store = await VectorStore.open('react-docs');
const searcher = new Searcher(store);


const results = await searcher.search('useState best practices', { topK: 5 });


for (const result of results) {
  console.log(`[${result.score.toFixed(2)}] ${result.source}`);
  console.log(result.content);
}

Step 5: Update When React Updates

When a new React version is released, update your library:

Terminal window
# Pull latest docs
cd react.dev
git pull


# Rebuild with new version
libragen build ./src/content \
  --name react-docs \
  --content-version 19.1.0

Both versions are now available. Query a specific version:

Terminal window
libragen query \
  --library react-docs \
  --content-version 19.0.0 \
  "useEffect cleanup"

Step 6: Share Your Library

Option A: Direct File Sharing

The .libragen file is self-contained. Share it via:

  • File hosting (S3, GitHub Releases, etc.)
  • Direct transfer
  • Package registry

Others can install it:

Terminal window
libragen install ./react-docs-19.0.0.libragen

Option B: Add to a Collection

Create a collection manifest to bundle related libraries:

{
  "name": "frontend-stack",
  "description": "Frontend development documentation",
  "libraries": [
    {
      "name": "react-docs",
      "url": "https://example.com/react-docs-19.0.0.libragen"
    },
    {
      "name": "typescript-docs",
      "url": "https://example.com/typescript-docs-5.7.0.libragen"
    }
  ]
}

Others can install the entire collection:

Terminal window
libragen install --collection https://example.com/frontend-stack.json

Troubleshooting

”Out of memory” during embedding

Large documentation sets may need more memory:

Terminal window
NODE_OPTIONS="--max-old-space-size=8192" libragen build ./docs

Slow embedding generation

Use the --batch-size flag to process fewer chunks at once:

Terminal window
libragen build ./docs --batch-size 50

Files not being processed

Check that your files have supported extensions (.md, .mdx, .txt, .html). Use --include to add custom patterns:

Terminal window
libragen build ./docs --include "**/*.rst"

Next Steps

Now that you’ve built your first library: