FrameRef MCP

FrameRef MCP keeps framework documentation at your fingertips inside VS Code. Install curated docsets for React, Vue, TypeScript, 100+ more frameworks, and feed them straight into GitHub Copilot—even when you're offline.

Quickstart for Everyday Use

1. Install the extension from the VS Code Marketplace.
2. Open the FrameRef sidebar (📚 icon in the Activity Bar).
3. Click "Install Suggested Bundles" or the 💡 Show Suggestions button to pull in docs that match your workspace.
4. Search or browse the Catalog view to open documentation instantly.
5. Ask Copilot with #frameref (for example #frameref /react hooks) to inject the docs you just installed.

After these five steps, FrameRef keeps serving the right documentation automatically—no browser windows and no internet required.

Why Developers Use FrameRef

• 🚀 Zero friction getting started – auto-detection installs the frameworks you already use.
• 🔌 Copilot-aware – FrameRef streams doc snippets straight into Copilot Chat for better AI answers.
• 🔍 Fast search, from code or catalog – highlight text, hit search, and jump to the relevant section.
• ✈️ Offline-first – once installed, every docset works without connectivity.
• 🤝 Team-friendly – export .frameref.json so teammates get identical docsets with one command.

What a Normal Day Feels Like

Start your session

• Open VS Code and glance at the FrameRef Home view.
• If the 💡 Show Suggestions button lights up, click it to install any newly detected frameworks.

Look up an API mid-task

• Select the symbol in your editor and run FrameRef: Search Documentation for Selection.
• FrameRef opens the exact doc page; you never leave VS Code.

Ask Copilot with confidence

• Type #frameref useEffect in Copilot Chat.
• Copilot receives the React hook docs you installed and answers with accurate examples.

Share context with the team

• Run FrameRef: Export Project Reference Config to commit .frameref.json.
• Teammates run FrameRef: Install Project References and match your setup instantly.

Installing & Managing Docsets

• Browse the catalog in the sidebar to see what's available. Items marked with 📥 are ready to install; ✅ means already installed; ⭐ highlights your favorites.
• Install for the current file with FrameRef: Install Framework for Current File. Perfect when you open a new tech stack file.
• Update or remove docsets by right-clicking an entry (Update, Toggle Enabled, Delete, Favorite).
• Filter the catalog using the toolbar buttons to focus on installed-only or favorites-only lists.
• Keep storage organized by moving docsets between global and workspace locations from the same context menu.

Searching Documentation

• Instant sidebar search – click the search view, type a topic, hit enter.
• Command Palette – run FrameRef: Lookup Reference to search without leaving the keyboard.
• From code – select text, right-click, choose FrameRef: Search Documentation for Selection for a contextual lookup.
• Recent history – run FrameRef: Open Recent Documentation to jump back to something you just read.

Working with Copilot Chat

• Just ask a question. FrameRef feeds Copilot the right snippets automatically when the docset is enabled.
• Manual control. Type #frameref to open a picker, or #frameref /framework query to search a specific docset.
• Insert exact references from the catalog by choosing Insert Reference into Copilot. Copilot responds with authoritative answers tied to those docs.

Power Tips

• Keyboard shortcuts – assign keys to frameref-mcp.catalogSearch, frameref-mcp.lookupReference, and frameref-mcp.installForCurrentFile in VS Code settings.
• Travel mode – install the docsets you need before you go offline; everything keeps working without connectivity.
• Workspace hygiene – disable docsets you rarely use to keep Copilot context focused while leaving them installed for later.
• Health check – use Check Server Health from the Home view if you ever need to confirm the MCP server is running.

Settings Overview

{
  "frameref-mcp.globalStoragePath": "~/.frameref/global",
  "frameref-mcp.localStoragePath": ".frameref/local",
  "frameref-mcp.autoSuggest": true,
  "frameref-mcp.maxSearchResults": 50,
  "frameref-mcp.enableMcpServer": true
}

Adjust these in File → Preferences → Settings (Ctrl+,) to tune where docsets live, how suggestions behave, and how much data appears in search.

Commands You Will Use Most

See the full list via the VS Code Command Palette (Ctrl+Shift+P) and typing "FrameRef".

Available Docsets

FrameRef ships a curated catalog that covers the stacks you rely on:

• Frontend – React, Vue, Svelte, Angular, Next.js, Nuxt
• Backend – Node.js, Express, NestJS, Django, FastAPI
• Mobile – React Native, Flutter, Ionic
• Styling – Tailwind CSS, Bootstrap, Material UI
• Testing – Jest, Vitest, Cypress, Playwright
• Data – PostgreSQL, MongoDB, Redis, Prisma

If something is missing, run FrameRef: Submit Dataset Request directly from VS Code.

Troubleshooting & Support

• Large docsets may take a minute to index on first install—watch the status bar for progress.
• Performance issues? Try disabling unused docsets or lowering frameref-mcp.maxSearchResults.
• Need help or want to report a bug? Visit the issue tracker.

Additional resources:

• GitHub Wiki
• GitHub Discussions

Built with ❤️ for the VS Code community. If FrameRef saves you from tab-hoarding, please consider leaving a review on the VS Code Marketplace.