In-Browser RAG Demo

A live demonstration of building a RAG (Retrieval-Augmented Generation) system entirely in the browser using WebMCP, Transformers.js, and Dexie.

Presented at AI Tinkerers

What This Demo Shows

An AI agent implements a complete RAG pipeline live, using Chrome DevTools MCP to:

1. Ingest documents - Chunk text and generate embeddings
2. Search semantically - Find relevant content using cosine similarity
3. Inspect the index - Debug embeddings and verify storage

All running 100% in the browser - no backend required.

Tech Stack

Layer	Tool
Agent Tools	WebMCP - Expose browser tools to AI agents
Embeddings	Transformers.js + Supabase/gte-small
Storage	Dexie.js (IndexedDB wrapper)
UI	React + shadcn/ui + Tailwind CSS v4

WebMCP Tools

The demo exposes 4 tools via WebMCP:

Tool	Description	Implementation
rag_ingest	Ingest a document into the index	Agent implements live
rag_search	Semantic search over indexed content	Agent implements live
rag_stats	Get index statistics	Pre-built
rag_get_chunk	Inspect a specific chunk + embedding	Pre-built

Quick Start

# Install dependencies
pnpm install

# Start dev server
pnpm dev

Open http://localhost:5173 and connect Chrome DevTools MCP.

Demo Flow

1. Setup: Agent connects via Chrome DevTools MCP, lists available tools
2. Implement rag_ingest: Agent writes chunking logic + embedding pipeline
3. Test ingestion: Upload a document, verify chunks are stored
4. Implement rag_search: Agent writes cosine similarity from scratch
5. Test search: Query the index, verify semantic matching works

Project Structure

src/
  components/
    RAGPanel.tsx      # Main UI component
    ui/               # shadcn/ui components
  tools/
    rag.ts            # WebMCP tool definitions (skeleton)
  lib/
    embedder.ts       # Transformers.js wrapper
  db/
    index.ts          # Dexie database schema
  schemas/
    index.ts          # Zod schemas for validation
  types/
    index.ts          # TypeScript types

The Agent's Task

The skeleton tools throw "Not implemented" - the agent fills in:

// rag_ingest: Agent decides chunking strategy
// - By sentences? Paragraphs? Fixed characters?
// - Overlap between chunks?

// rag_search: Agent writes cosine similarity
// - No libraries - pure math from scratch

Links

• WebMCP Documentation
• Chrome DevTools MCP
• Transformers.js

License

MIT