--- url: /clients/chatgpt.md --- # ChatGPT Connect Vue Docs MCP to [ChatGPT](https://chatgpt.com/) (Web and Desktop). ChatGPT supports MCP servers through remote connectors via [Developer Mode](https://platform.openai.com/docs/guides/developer-mode) (beta). Available for Pro, Plus, Team, Enterprise, and Edu plans. ## Setup ### 1. Enable Developer Mode Go to **Settings** > **Apps** > **Advanced settings** > Enable **Developer Mode** ### 2. Create an App Go to **Settings** > **Apps** > **Create App** Fill in: | Field | Value | |---|---| | **Name** | `Vue Docs` | | **Description** | `Search and retrieve Vue.js documentation` | | **MCP Server URL** | `https://mcp.vue-mcp.org/mcp` | Accept the security notice to complete setup. ### 3. Use in a Conversation Start a new chat > click the **+** icon > hover over **More** > select the **Vue Docs** app. ## Desktop App The ChatGPT desktop app shares apps configured on the web. Complete the setup on [chatgpt.com](https://chatgpt.com) first, then the app will automatically be available in the desktop client. ## Usage Ask ChatGPT about Vue: * "How does computed caching work in Vue 3?" * "What's the difference between ref and reactive?" * "Help me migrate from Options API to Composition API" See the [OpenAI MCP docs](https://platform.openai.com/docs/mcp) for more info. --- --- url: /clients/claude-code.md --- # Claude Code Connect Vue Docs MCP to [Claude Code](https://docs.anthropic.com/en/docs/claude-code) with a single command. ## Setup Run this in your terminal: ```bash claude mcp add --scope user vue-docs --transport streamable-http https://mcp.vue-mcp.org/mcp ``` That's it. Claude Code will now use Vue documentation tools automatically when you ask Vue-related questions. ### Verify Check that the server is connected: ```bash claude mcp list ``` You should see `vue-docs` in the list. ### Remove ```bash claude mcp remove vue-docs ``` ## Scope Options | Flag | Effect | |---|---| | `--scope user` | Available in all projects (recommended) | | `--scope project` | Only available in the current project | ## Usage Just ask Claude anything about Vue. It will call the MCP tools automatically: ``` > How does computed caching work in Vue 3? > What's the difference between ref and reactive? > Show me the defineProps API ``` You can also be explicit: ``` > Use vue_docs_search to find documentation about Transition animations > Look up the onMounted lifecycle hook using vue_api_lookup ``` ## Self-Hosted Server If you're running your own instance with [stdio transport](/guide/self-hosting): ```bash claude mcp add --scope user vue-docs -- uv run --directory /path/to/vue-mcp vue-docs-server ``` --- --- url: /clients/claude-desktop.md --- # Claude Desktop Connect Vue Docs MCP to [Claude Desktop](https://claude.ai/download). ## Setup ### Option A: Via Settings UI 1. Open Claude Desktop 2. Go to **Settings** > **Connectors** > **Add Custom Connector** 3. Enter name: `Vue Docs` 4. Enter URL: `https://mcp.vue-mcp.org/mcp` 5. Click **Save** ### Option B: Via Config File Edit the Claude Desktop configuration file for your platform: ::: code-group ```json [macOS] // ~/Library/Application Support/Claude/claude_desktop_config.json { "mcpServers": { "vue-docs": { "url": "https://mcp.vue-mcp.org/mcp" } } } ``` ```json [Windows] // %APPDATA%\Claude\claude_desktop_config.json { "mcpServers": { "vue-docs": { "url": "https://mcp.vue-mcp.org/mcp" } } } ``` ```json [Linux] // ~/.config/Claude/claude_desktop_config.json { "mcpServers": { "vue-docs": { "url": "https://mcp.vue-mcp.org/mcp" } } } ``` ::: Restart Claude Desktop after saving. ## Verify After restarting, you should see a tools icon in the chat input area. Click it to confirm `vue-docs` tools are listed. ## Usage Ask Claude anything about Vue in the chat: * "How does `v-model` work on custom components?" * "What lifecycle hooks are available in Vue 3?" * "Compare `watch` vs `watchEffect`" Claude will automatically call the MCP tools and include documentation references in its response. ## Self-Hosted Server For a [self-hosted instance](/guide/self-hosting) using stdio transport: ::: code-group ```json [macOS] // ~/Library/Application Support/Claude/claude_desktop_config.json { "mcpServers": { "vue-docs": { "command": "uv", "args": ["run", "--directory", "/path/to/vue-mcp", "vue-docs-server"] } } } ``` ```json [Windows] // %APPDATA%\Claude\claude_desktop_config.json { "mcpServers": { "vue-docs": { "command": "uv", "args": ["run", "--directory", "C:\\path\\to\\vue-mcp", "vue-docs-server"] } } } ``` ::: --- --- url: /clients/cursor.md --- # Cursor Connect Vue Docs MCP to [Cursor](https://cursor.com/). ## Setup ### Option A: One-Click Install Since Cursor 1.0, you can install MCP servers with a single click: [![Install MCP Server](https://cursor.com/deeplink/mcp-install-dark.svg)](https://cursor.com/en/install-mcp?name=vue-docs\&config=eyJ1cmwiOiJodHRwczovL21jcC52dWUtbWNwLm9yZy9tY3AifQ%3D%3D) ### Option B: Via Settings UI 1. Open Cursor 2. Go to **Settings** > **Cursor Settings** > **MCP** > **Add new global MCP server** 3. Paste the JSON configuration below ### Option C: Via Config File Add to your Cursor MCP config file. You can install globally or per-project: ::: code-group ```json [Global (~/.cursor/mcp.json)] { "mcpServers": { "vue-docs": { "url": "https://mcp.vue-mcp.org/mcp" } } } ``` ```json [Project (.cursor/mcp.json)] { "mcpServers": { "vue-docs": { "url": "https://mcp.vue-mcp.org/mcp" } } } ``` ::: ::: tip **Global** is recommended for Vue Docs MCP since you'll want it in all Vue projects. Use **project-level** config if you only want it in specific projects. ::: ## Verify After adding the server, check the MCP section in Cursor Settings. The `vue-docs` server should show a green status indicator. ## Usage Ask Cursor about Vue in chat or Composer mode: * "How does computed caching work?" * "Show me the defineProps TypeScript API" * "Help me migrate from Options API to Composition API" ## Self-Hosted Server For a [self-hosted instance](/guide/self-hosting): ```json { "mcpServers": { "vue-docs": { "command": "uv", "args": ["run", "--directory", "/path/to/vue-mcp", "vue-docs-server"] } } } ``` --- --- url: /frameworks/formkit.md --- # FormKit 4.59 / 5 composite score · 100.0% API recall · 55 questions evaluated Vue Docs MCP provides deep access to the official [FormKit documentation](https://formkit.com), covering Vue's most ergonomic form framework: `` and `` components, the core node primitive, validation rules, all 42+ input types, the official plugin set (auto-animate, multi-step, local-storage, zod, floating-labels, ...), the i18n system, theming, and the full @formkit/\* package surface (~320 API entries). ::: tip Big API surface FormKit ships 12 packages. The MCP indexes them all: `@formkit/vue`, `@formkit/core`, `@formkit/inputs`, `@formkit/validation`, `@formkit/i18n`, `@formkit/icons`, `@formkit/themes`, `@formkit/utils`, `@formkit/observer`, `@formkit/schema`, `@formkit/addons`, plus the official plugin packages. ::: ## Activation FormKit is not enabled by default. Call `set_framework_preferences` to activate it: ``` set_framework_preferences(formkit=true) ``` ## Tools ### `formkit_docs_search` Semantic search over FormKit documentation. Uses the standard 6-step retrieval pipeline: embed query, hybrid search (dense + BM25), resolve HyPE hits, expand cross-references, rerank, and reconstruct into readable markdown. | Parameter | Type | Default | Description | |---|---|---|---| | `query` | `string` | | Developer question or topic (max 2000 chars) | | `scope` | `string` | `"all"` | Documentation section to search within | | `max_results` | `integer` | `3` | Number of sections to return (1-20) | **Scope values:** `all`, `1.getting-started`, `2.essentials`, `3.inputs`, `4.plugins`, `5.guides`, `6.api-reference` ### `formkit_api_lookup` Fast exact-match API reference lookup with fuzzy fallback. Returns type signatures, descriptions, and usage examples directly from the documentation. | Parameter | Type | Default | Description | |---|---|---|---| | `api_name` | `string` | | API name to look up (e.g. `FormKit`, `createInput`, `createNode`, `useFormKitNodeById`) | ### `formkit_get_related` Find related APIs, concepts, and documentation pages for a given API or topic. | Parameter | Type | Default | Description | |---|---|---|---| | `topic` | `string` | | API name or concept to explore | ## Resources | URI | Description | |---|---| | `formkit://topics` | Full table of contents | | `formkit://topics/{section}` | TOC for a specific section (e.g. `formkit://topics/3.inputs`) | | `formkit://pages/{path}` | Raw markdown of any doc page (e.g. `formkit://pages/3.inputs/text`) | | `formkit://api/index` | Complete API entity index grouped by type | | `formkit://api/entities/{name}` | Details for a specific API (e.g. `formkit://api/entities/createInput`) | | `formkit://scopes` | All valid search scope values | ## Prompts | Prompt | Parameters | Description | |---|---|---| | `debug_formkit_issue` | `symptom`, `code_snippet` (optional) | Systematic debugging workflow | | `compare_formkit_apis` | `items` (comma-separated) | Side-by-side comparison (e.g. `group, list`) | | `migrate_formkit_pattern` | `from_pattern`, `to_pattern` | Migration guide between patterns | ## Coverage | Area | What's indexed | |---|---| | Core components | ``, ``, ``, ``, `` | | Input types | All 42 official inputs: text, email, password, autocomplete, datepicker, taglist, repeater, multi-step, ... | | Form composition | `form`, `group`, `list`, `repeater` — nested data structuring without prop drilling | | Validation | Built-in rules, custom rules, async validation, message localization, conditional rules | | Schema | `FormKitSchema`, `$formkit`/`$el`/`$cmp` shorthands, `if`/`for`/`bind` directives, reactive `$`-expressions | | Core node | `createNode`, `getNode`, `useFormKitNodeById`, events (input, commit, prop, child, submit) | | Plugins | auto-animate, auto-height-textarea, floating-labels, local-storage, multi-step, barcode, inertia, zod | | i18n | `@formkit/i18n` locales, runtime locale switching, message overrides | | Theming | Genesis / Regenesis themes, Tailwind theme guide, sectionsSchema overrides | | API reference | ~320 typed API entries across 12 `@formkit/*` packages | | Guides | Custom inputs, Tailwind themes, restructuring sections, production optimization | | Integration | Nuxt module (`@formkit/nuxt`), SSR-safe hydration | ## Benchmarks vs Context7 Evaluated on 50 FormKit questions scored by an LLM judge (Gemini, temperature 0) across 5 dimensions on a 1-5 scale. ::: info Methodology Each question has a ground-truth answer with expected API names and documentation paths. Both providers receive the same question and return documentation context. The judge scores the retrieved context on relevance, completeness, correctness, API coverage, and conciseness. See the `eval/` directory in the repository for the full evaluation framework. ::: ### Overall Scores | Metric | Vue Docs MCP | Context7 | |---|---|---| | Relevance | **4.85** | 4.62 | | Completeness | **4.33** | 4.20 | | Correctness | **4.55** | 4.47 | | API Coverage | **4.58** | 4.53 | | Conciseness | 4.62 | **4.80** | | **Composite** | **4.59** | 4.52 | ### Retrieval and Cost | Metric | Vue Docs MCP | Context7 | |---|---|---| | Path Recall | **95.5%** | 80.9% | | API Recall | 100.0% | 100.0% | | Avg Response Tokens | 2,751 | **893** | | Avg Latency | **0.70s** | 1.75s | | P95 Latency | **1.14s** | 2.15s | | Cost per Query (user-facing) | **Free** | $0.002 | ### Notes on Fairness * Context7 is a general-purpose service covering 9000+ libraries. Vue Docs MCP is purpose-built for the Vue ecosystem. * Both providers index `formkit/docs-content` (the same source markdown). * The evaluation framework is open source in the `eval/` directory. Run `make eval-compare` to reproduce. --- --- url: /clients/gemini-cli.md --- # Gemini CLI Connect Vue Docs MCP to [Gemini CLI](https://google-gemini.github.io/gemini-cli/). ## Setup Open the Gemini CLI settings file at `~/.gemini/settings.json` and add: ```json { "mcpServers": { "vue-docs": { "httpUrl": "https://mcp.vue-mcp.org/mcp", "headers": { "Accept": "application/json, text/event-stream" } } } } ``` ::: warning Note Gemini CLI uses `httpUrl` instead of `url`, and requires the `Accept` header for streamable HTTP connections. ::: ## Verify After saving, restart Gemini CLI. The Vue Docs tools should be available. ## Usage Ask Gemini about Vue: * "How does `v-model` work on custom components?" * "Show me the reactivity API reference" * "Help me migrate from mixins to composables" ## Self-Hosted Server For a [self-hosted instance](/guide/self-hosting): ```json { "mcpServers": { "vue-docs": { "command": "uv", "args": ["run", "--directory", "/path/to/vue-mcp", "vue-docs-server"] } } } ``` --- --- url: /guide/getting-started.md --- # Getting Started The fastest way to start using Vue Docs MCP is to connect to the free hosted server at **`mcp.vue-mcp.org`**. No API keys or setup required. ## Connect Your Client ### Claude Code One command: ```bash claude mcp add --scope user vue-docs --transport streamable-http https://mcp.vue-mcp.org/mcp ``` ### Cursor One-click install: [![Install MCP Server](https://cursor.com/deeplink/mcp-install-dark.svg)](https://cursor.com/en/install-mcp?name=vue-docs\&config=eyJ1cmwiOiJodHRwczovL21jcC52dWUtbWNwLm9yZy9tY3AifQ%3D%3D) Or add to `.cursor/mcp.json`: ```json { "mcpServers": { "vue-docs": { "url": "https://mcp.vue-mcp.org/mcp" } } } ``` ### Other Clients See the [MCP Clients](/clients/) section for detailed setup instructions for Claude Desktop, Windsurf, VS Code, JetBrains, Zed, ChatGPT, and more. For any client not listed, use the streamable HTTP transport with this URL: ``` https://mcp.vue-mcp.org/mcp ``` ## Try It Out Once connected, ask your AI assistant a Vue question. It will use the MCP tools automatically: * "How does `v-model` work on custom components?" * "What lifecycle hooks are available in Vue 3?" * "Show me the `defineProps` API" * "Compare `watch` vs `watchEffect`" Look for tool calls like `vue_docs_search` or `vue_api_lookup` in the response. ## What's Available | Type | What it does | |---|---| | [**Tools**](/reference/tools) | Search docs, look up APIs, find related content | | [**Resources**](/reference/resources) | Browse the documentation tree, read raw pages | | [**Prompts**](/reference/prompts) | Guided workflows for debugging, comparison, migration | ## Next Steps * [Supported Frameworks](/frameworks/): See all available frameworks, their tools, and benchmarks * [MCP Clients](/clients/): Setup guides for all supported clients * [How It Works](/reference/how-it-works): Technical details of the search pipeline * [Self-Hosting](/guide/self-hosting): Run your own instance --- --- url: /reference/how-it-works.md --- # How It Works Vue Docs MCP uses a two-stage architecture: an offline **ingestion** pipeline that indexes the Vue documentation, and an online **query** pipeline that handles search requests. ## Ingestion Pipeline The ingestion pipeline runs periodically (every 24 hours on the hosted server) and processes the official Vue.js documentation source. ``` Vue docs (markdown) -> Parse -> Enrich -> Embed -> Store ``` ### 1. Structure-Aware Parsing Markdown files are parsed respecting the heading hierarchy. Each document is split into structural chunks at heading boundaries instead of fixed-size token windows. Code examples stay paired with their explanations. The parser uses `markdown-it-py` and produces chunks at multiple levels: * **Page**: top-level document * **Section**: H2 headings * **Subsection**: H3 headings * **Code block**: standalone code examples ### 2. Entity Extraction API entities are extracted deterministically from the documentation. Each entity gets a type (lifecycle hook, composable, directive, component, compiler macro, global API, etc.) and is linked to its documentation section. A curated synonym table maps common aliases and variations. For example, `v-model` maps to two-way binding, and `ref` maps to reactivity primitives. ### 3. Contextual Enrichment Each chunk receives a contextual prefix generated by Gemini that situates it within the broader documentation. This helps the embedding model understand chunks that would be ambiguous in isolation. ### 4. HyPE Question Generation For key chunks, the system generates **Hy**pothetical **P**revious **E**mbeddings: synthetic developer questions that someone might ask when looking for this content. These are embedded alongside the original content as separate Qdrant points to improve recall at query time. ### 5. Embedding All content is embedded using Jina's unified embedding model (`jina-embeddings-v4`). Dense embeddings and BM25 sparse vectors are generated for every chunk and stored in Qdrant. ### 6. Storage * **Qdrant**: Dense and sparse vectors for hybrid search * **PostgreSQL**: Entities, synonyms, page metadata, BM25 model, and index state ## Query Pipeline When your AI assistant calls `vue_docs_search`, the query goes through a 6-step pipeline: ``` Query -> Embed & Detect -> Hybrid Search -> Resolve HyPE -> Expand -> Rerank -> Reconstruct ``` ### 1. Embed Query & Detect Entities Three things happen in parallel: * **Dense embedding.** The query is embedded via Jina (`jina-embeddings-v4`) into the same vector space as the documentation. * **Sparse vector.** A BM25 sparse vector is generated locally for keyword matching. * **Entity detection.** The query is scanned for Vue API names using exact matching, bigram matching (e.g., "watch effect" matches `watchEffect`), synonym lookup, and fuzzy matching via `rapidfuzz` for typo tolerance. All of this is deterministic except the Jina embedding call. No LLM is involved at query time. ### 2. Hybrid Search The dense and sparse vectors are sent to Qdrant in a single hybrid search query, retrieving up to 50 candidates. Qdrant combines dense semantic similarity with BM25 keyword matching internally. If the search scope is narrowed (e.g., `scope: "guide/components"`) and returns no results, the pipeline automatically falls back to searching all scopes. ### 3. Resolve HyPE Hits HyPE question chunks (synthetic questions generated during ingestion) are resolved back to their parent content chunks. If both a HyPE question and its parent appear in results, they are deduplicated, keeping the highest score. ### 4. Cross-Reference Expansion Top results are checked for outgoing cross-references in their metadata. Referenced documentation sections are fetched from Qdrant and added as additional candidates: * **High-priority** cross-references (guide to API) are always followed * **Medium-priority** (same folder) are followed for the top 10 results * **Low-priority** (cross-folder) are followed for the top 5 results only Only one hop is followed. There is no recursive expansion. ### 5. Reranking All candidates are reranked by Jina's reranker model (`jina-reranker-v3`) for final precision. Hits scoring below -0.5 after reranking are discarded. ### 6. Reconstruction Final results are sorted by their position in the documentation (by reading order, not by score) and reassembled into readable markdown fragments. Adjacent chunks from the same page are merged. The result reads like a coherent mini-document rather than a list of search snippets. ## Cost The hosted server is free. For self-hosted instances, per-query cost is approximately **$0.0005**, dominated by the Jina embedding and reranking calls. No LLM calls happen at query time. --- --- url: /clients/jetbrains.md --- # JetBrains IDEs Connect Vue Docs MCP to any [JetBrains IDE](https://www.jetbrains.com/) (WebStorm, IntelliJ IDEA, PyCharm, etc.) with AI Assistant. ## Setup See the [JetBrains AI Assistant MCP docs](https://www.jetbrains.com/help/ai-assistant/configure-an-mcp-server.html) for full details. ### Via Settings UI 1. Go to **Settings** > **Tools** > **AI Assistant** > **Model Context Protocol (MCP)** 2. Click **+ Add** 3. Select the **HTTP** tab 4. Paste the configuration: ```json { "mcpServers": { "vue-docs": { "url": "https://mcp.vue-mcp.org/mcp" } } } ``` 5. Click **Apply** ### Via Config File Alternatively, add the JSON above directly to your MCP config file. ## Verify After applying, the Vue Docs tools should appear in the AI Assistant MCP tools list. ## Usage Ask AI Assistant about Vue: * "How does `v-model` work with custom components?" * "Show me the `computed` API reference" * "Compare `ref` and `reactive`" ## Self-Hosted Server For a [self-hosted instance](/guide/self-hosting): ```json { "mcpServers": { "vue-docs": { "command": "uv", "args": ["run", "--directory", "/path/to/vue-mcp", "vue-docs-server"] } } } ``` --- --- url: /impressum.md --- # Legal Notice (Impressum) This legal notice applies to the website **vue-mcp.org** and the hosted MCP service operated at **mcp.vue-mcp.org**. ## Operator / Provider **LatentSpace Labs GmbH** c/o Joel Barmettler Hirschgartnerweg 18 8057 Zürich Switzerland ## Represented by Joel Barmettler — Managing Director (Geschäftsführer), with sole signing authority. ## Contact * Email: * Website: ## Commercial Register * **Legal form:** Gesellschaft mit beschränkter Haftung (GmbH) — Swiss limited liability company * **Registered office:** Zürich, Switzerland * **Register:** Commercial Register of the Canton of Zürich (Handelsregisteramt des Kantons Zürich) * **Company identification number (UID):** CHE-170.986.632 * **Official excerpt:** [Cantonal commercial register extract](https://zh.chregister.ch/cr-portal/auszug/auszug.xhtml?uid=CHE-170.986.632) ## VAT In Switzerland, the company identification number (UID) also serves as the value-added-tax (VAT/MWST) number. Where the company is registered for VAT, the number is shown as **CHE-170.986.632 MWST**. If no VAT suffix is displayed, the company is not (or not yet) liable for Swiss VAT. ## Liability for Content The content of this website has been compiled with the greatest possible care. However, we assume no liability for the accuracy, completeness, or timeliness of the content provided. As a service provider, we are responsible for our own content on these pages in accordance with general law. We are not obligated to monitor transmitted or stored third-party information or to investigate circumstances that indicate unlawful activity. Obligations to remove or block the use of information under general law remain unaffected. The documentation indexed and served through this service belongs to the respective open-source projects (Vue.js, Vue Router, VueUse, and others) and is used under their respective licenses. All trademarks and product names are the property of their respective owners. ## Liability for Links This website may contain links to external third-party websites over whose content we have no control. We therefore cannot accept any liability for this external content. The respective provider or operator of the linked pages is always responsible for their content. The linked pages were checked for possible legal violations at the time of linking; no unlawful content was discernible at that time. Permanent monitoring of the content of linked pages is not reasonable without concrete evidence of a legal violation. Upon notification of any such violation, we will remove the relevant links immediately. ## Copyright The content and works created by the operator on these pages are subject to copyright law. The source code of this project is published on [GitHub](https://github.com/joelbarmettlerUZH/vue-mcp) under the [FSL-1.1-ALv2 License](https://github.com/joelbarmettlerUZH/vue-mcp/blob/main/LICENSE.md); the terms of that license govern its reuse. Reproduction, processing, distribution, and any form of exploitation beyond the limits of copyright law or the applicable open-source license require the prior written consent of the respective author or creator. ## Data Protection We process personal data in accordance with the Swiss Federal Act on Data Protection (FADP/DSG) and, where applicable, the EU General Data Protection Regulation (GDPR). The hosted service is designed to operate without requiring user accounts. Standard server logs (such as IP address and request metadata) may be processed for the technical operation and security of the service and are retained only as long as necessary for these purposes. For data-protection inquiries, please contact us at the email address listed above. ## Consumer Dispute Resolution We are neither obligated nor generally willing to participate in dispute resolution proceedings before a consumer arbitration board. The European Commission's Online Dispute Resolution (ODR) platform was discontinued in 2025 and is therefore no longer available. *** *Last updated: June 2026.* --- --- url: /clients.md --- # MCP Clients Vue Docs MCP works with any client that supports the [Model Context Protocol](https://modelcontextprotocol.io/). The hosted server is free and requires no API key. ::: tip Quickest Setup Most clients just need this URL: ``` https://mcp.vue-mcp.org/mcp ``` ::: ## Dedicated Guides Detailed setup instructions for popular clients: | Client | Type | Guide | |---|---|---| | [Claude Code](/clients/claude-code) | CLI | One command setup | | [Claude Desktop](/clients/claude-desktop) | Desktop app | JSON config | | [Cursor](/clients/cursor) | IDE | One-click or JSON config | | [Windsurf](/clients/windsurf) | IDE | JSON config | | [VS Code (Copilot)](/clients/vscode) | IDE | JSON config | | [JetBrains](/clients/jetbrains) | IDE | UI or JSON config | | [Zed](/clients/zed) | IDE | JSON config | | [Opencode](/clients/opencode) | CLI | JSON config | | [Gemini CLI](/clients/gemini-cli) | CLI | JSON config | | [ChatGPT](/clients/chatgpt) | Web/Desktop | App connector | ## Other Clients For any MCP client not listed above, use the **streamable HTTP** transport with this URL: ``` https://mcp.vue-mcp.org/mcp ``` No authentication headers are needed. Consult your client's MCP documentation for configuration details. ## Self-Hosting If you prefer to run your own instance, see the [Self-Hosting guide](/guide/self-hosting). Self-hosted servers use **stdio** transport for local connections. --- --- url: /frameworks/nuxt.md --- # Nuxt 4.80 / 5 composite score · 100% API recall · 49 questions evaluated Vue Docs MCP provides deep access to the official [Nuxt documentation](https://nuxt.com), covering the full-stack framework's composables (useFetch, useAsyncData, useHead), components (NuxtLink, NuxtPage, NuxtLayout), configuration, directory structure, modules, and migration guides. ## Activation Nuxt is not enabled by default. Call `set_framework_preferences` to activate it: ``` set_framework_preferences(nuxt=true) ``` ## Tools ### `nuxt_docs_search` Semantic search over Nuxt documentation. Uses a 6-step pipeline: embed query, hybrid search (dense + BM25), resolve HyPE hits, expand cross-references, rerank, and reconstruct into readable markdown. | Parameter | Type | Default | Description | |---|---|---|---| | `query` | `string` | | Developer question or topic (max 2000 chars) | | `scope` | `string` | `"all"` | Documentation section to search within | | `max_results` | `integer` | `3` | Number of sections to return (1-20) | **Scope values:** `all`, `getting-started`, `directory-structure`, `guide`, `api`, `bridge`, `migration` ### `nuxt_api_lookup` Fast exact-match API reference lookup with fuzzy fallback. Returns type signatures, descriptions, and usage examples directly from the documentation. | Parameter | Type | Default | Description | |---|---|---|---| | `name` | `string` | | API name to look up (e.g. `useFetch`, `NuxtLink`, `definePageMeta`) | ### `nuxt_get_related` Find related APIs, concepts, and documentation pages for a given API or topic. | Parameter | Type | Default | Description | |---|---|---|---| | `name` | `string` | | API name or concept to explore | ## Resources | URI | Description | |---|---| | `nuxt://topics` | Full table of contents | | `nuxt://topics/{section}` | TOC for a specific section (e.g. `nuxt://topics/api`) | | `nuxt://pages/{path}` | Raw markdown of any doc page (e.g. `nuxt://pages/api/composables/use-fetch`) | | `nuxt://api/index` | Complete API entity index grouped by type | | `nuxt://api/entities/{name}` | Details for a specific API (e.g. `nuxt://api/entities/useFetch`) | | `nuxt://scopes` | All valid search scope values | ## Prompts | Prompt | Parameters | Description | |---|---|---| | `debug_nuxt_issue` | `symptom`, `code_snippet` (optional) | Systematic debugging workflow: identifies the concept, searches docs, looks up APIs, and provides a fix | | `compare_nuxt_apis` | `items` (comma-separated) | Side-by-side comparison of APIs or patterns (e.g. `useFetch, useAsyncData` or `useState, useCookie`) | | `migrate_nuxt_pattern` | `from_pattern`, `to_pattern` | Migration guide between patterns (e.g. Nuxt 2 to Nuxt 3) | ## Benchmarks vs Context7 Evaluated on 49 Nuxt questions scored by an LLM judge (Gemini, temperature 0) across 5 dimensions on a 1-5 scale. ::: info Methodology Each question has a ground-truth answer with expected API names and documentation paths. Both providers receive the same question and return documentation context. The judge scores the retrieved context on relevance, completeness, correctness, API coverage, and conciseness. See the `eval/` directory in the repository for the full evaluation framework. ::: ### Overall Scores | Metric | Vue Docs MCP | Context7 | |---|---|---| | Relevance | 4.96 | **4.98** | | Completeness | **4.82** | 4.61 | | Correctness | **4.90** | 4.84 | | API Coverage | **4.37** | 3.94 | | Conciseness | **4.94** | 4.76 | | **Composite** | **4.80** | **4.62** | ### Retrieval and Cost | Metric | Vue Docs MCP | Context7 | |---|---|---| | API Recall | **100%** | 89.8% | | Avg Response Tokens | 3,689 | 924 | | Avg Latency | **1.10s** | 1.64s | | Cost per Query (user-facing) | **Free** | $0.002 | ### Notes on Fairness * Context7 is a general-purpose service covering 9000+ libraries. Vue Docs MCP is purpose-built for the Vue ecosystem. * The evaluation framework is open source in the `eval/` directory. Run `make eval-compare` to reproduce. --- --- url: /clients/opencode.md --- # Opencode Connect Vue Docs MCP to [Opencode](https://opencode.ai/). ## Setup Add to your Opencode configuration file. See the [Opencode MCP docs](https://opencode.ai/docs/mcp-servers) for more info. ```json { "mcp": { "vue-docs": { "type": "remote", "url": "https://mcp.vue-mcp.org/mcp", "enabled": true } } } ``` ## Verify After saving, the Vue Docs tools should appear in the available tools list. ## Usage Ask about Vue: * "How does computed caching work?" * "Show me the `defineProps` API" * "Compare `watch` vs `watchEffect`" ## Self-Hosted Server For a [self-hosted instance](/guide/self-hosting): ```json { "mcp": { "vue-docs": { "type": "local", "command": ["uv", "run", "--directory", "/path/to/vue-mcp", "vue-docs-server"], "enabled": true } } } ``` --- --- url: /frameworks/pinia.md --- # Pinia 4.81 / 5 composite score · 100% API recall · 49 questions evaluated Vue Docs MCP provides deep access to the official [Pinia documentation](https://pinia.vuejs.org), covering the state management library's store definition (defineStore), state, getters, actions, plugins, Options API helpers, SSR, testing, and migration guides. ## Activation Pinia is not enabled by default. Call `set_framework_preferences` to activate it: ``` set_framework_preferences(pinia=true) ``` ## Tools ### `pinia_docs_search` Semantic search over Pinia documentation. Uses a 6-step pipeline: embed query, hybrid search (dense + BM25), resolve HyPE hits, expand cross-references, rerank, and reconstruct into readable markdown. | Parameter | Type | Default | Description | |---|---|---|---| | `query` | `string` | | Developer question or topic (max 2000 chars) | | `scope` | `string` | `"all"` | Documentation section to search within | | `max_results` | `integer` | `3` | Number of sections to return (1-20) | **Scope values:** `all`, `core-concepts`, `cookbook`, `ssr` ### `pinia_api_lookup` Fast exact-match API reference lookup with fuzzy fallback. Returns type signatures, descriptions, and usage examples directly from the documentation. | Parameter | Type | Default | Description | |---|---|---|---| | `name` | `string` | | API name to look up (e.g. `defineStore`, `storeToRefs`, `$patch`) | ### `pinia_get_related` Find related APIs, concepts, and documentation pages for a given API or topic. | Parameter | Type | Default | Description | |---|---|---|---| | `name` | `string` | | API name or concept to explore | ## Resources | URI | Description | |---|---| | `pinia://topics` | Full table of contents | | `pinia://topics/{section}` | TOC for a specific section (e.g. `pinia://topics/core-concepts`) | | `pinia://pages/{path}` | Raw markdown of any doc page (e.g. `pinia://pages/core-concepts/state`) | | `pinia://api/index` | Complete API entity index grouped by type | | `pinia://api/entities/{name}` | Details for a specific API (e.g. `pinia://api/entities/defineStore`) | | `pinia://scopes` | All valid search scope values | ## Prompts | Prompt | Parameters | Description | |---|---|---| | `debug_pinia_issue` | `symptom`, `code_snippet` (optional) | Systematic debugging workflow: identifies the concept, searches docs, looks up APIs, and provides a fix | | `compare_pinia_apis` | `items` (comma-separated) | Side-by-side comparison of APIs or patterns (e.g. `mapState, mapWritableState` or `$patch, $reset`) | | `migrate_pinia_pattern` | `from_pattern`, `to_pattern` | Migration guide between patterns (e.g. Vuex to Pinia) | ## Benchmarks vs Context7 Evaluated on 49 Pinia questions scored by an LLM judge (Gemini, temperature 0) across 5 dimensions on a 1-5 scale. ::: info Methodology Each question has a ground-truth answer with expected API names and documentation paths. Both providers receive the same question and return documentation context. The judge scores the retrieved context on relevance, completeness, correctness, API coverage, and conciseness. See the `eval/` directory in the repository for the full evaluation framework. ::: ### Overall Scores | Metric | Vue Docs MCP | Context7 | |---|---|---| | Relevance | **4.92** | 4.90 | | Completeness | **4.86** | 4.65 | | Correctness | **4.86** | 4.82 | | API Coverage | **4.43** | 4.20 | | Conciseness | **4.98** | 4.82 | | **Composite** | **4.81** | **4.68** | ### Retrieval and Cost | Metric | Vue Docs MCP | Context7 | |---|---|---| | API Recall | **100%** | 93.9% | | Avg Response Tokens | 4,361 | 972 | | Avg Latency | **0.94s** | 1.74s | | Cost per Query (user-facing) | **Free** | $0.002 | ### Notes on Fairness * Context7 is a general-purpose service covering 9000+ libraries. Vue Docs MCP is purpose-built for the Vue ecosystem. * The evaluation framework is open source in the `eval/` directory. Run `make eval-compare` to reproduce. --- --- url: /frameworks/pinia-colada.md --- # Pinia Colada 4.83 / 5 composite score · 93.9% API recall · 49 questions evaluated Vue Docs MCP provides deep access to the official [Pinia Colada documentation](https://pinia-colada.esm.dev), covering the smart data-fetching layer for Vue: queries, mutations, infinite queries, the query/mutation cache, the `defineQuery` factory pattern, the official plugin set, and migration paths from TanStack Query (Vue Query). ::: tip Pairs with Pinia Pinia Colada is built on Pinia and shares its devtools and reactivity. Activate both frameworks together for the best experience: `set_framework_preferences(pinia=true, pinia_colada=true)`. ::: ## Activation Pinia Colada is not enabled by default. Call `set_framework_preferences` to activate it: ``` set_framework_preferences(pinia_colada=true) ``` ## Tools ### `pinia_colada_docs_search` Semantic search over Pinia Colada documentation. Uses the standard 6-step retrieval pipeline: embed query, hybrid search (dense + BM25), resolve HyPE hits, expand cross-references, rerank, and reconstruct into readable markdown. | Parameter | Type | Default | Description | |---|---|---|---| | `query` | `string` | | Developer question or topic (max 2000 chars) | | `scope` | `string` | `"all"` | Documentation section to search within | | `max_results` | `integer` | `3` | Number of sections to return (1-20) | **Scope values:** `all`, `guide`, `advanced`, `cookbook`, `plugins` ### `pinia_colada_api_lookup` Fast exact-match API reference lookup with fuzzy fallback. Returns type signatures, descriptions, and usage examples directly from the documentation. | Parameter | Type | Default | Description | |---|---|---|---| | `api_name` | `string` | | API name to look up (e.g. `useQuery`, `defineQuery`, `useQueryCache`, `PiniaColadaRetry`) | ### `pinia_colada_get_related` Find related APIs, concepts, and documentation pages for a given API or topic. | Parameter | Type | Default | Description | |---|---|---|---| | `topic` | `string` | | API name or concept to explore | ## Resources | URI | Description | |---|---| | `pinia-colada://topics` | Full table of contents | | `pinia-colada://topics/{section}` | TOC for a specific section (e.g. `pinia-colada://topics/guide`) | | `pinia-colada://pages/{path}` | Raw markdown of any doc page (e.g. `pinia-colada://pages/guide/queries`) | | `pinia-colada://api/index` | Complete API entity index grouped by type | | `pinia-colada://api/entities/{name}` | Details for a specific API (e.g. `pinia-colada://api/entities/useQuery`) | | `pinia-colada://scopes` | All valid search scope values | ## Prompts | Prompt | Parameters | Description | |---|---|---| | `debug_pinia_colada_issue` | `symptom`, `code_snippet` (optional) | Systematic debugging workflow: identifies the concept, searches docs, looks up APIs, and provides a fix | | `compare_pinia_colada_apis` | `items` (comma-separated) | Side-by-side comparison of APIs or patterns (e.g. `useQuery, defineQuery`) | | `migrate_pinia_colada_pattern` | `from_pattern`, `to_pattern` | Migration guide between patterns (e.g. TanStack Query to Pinia Colada) | ## Coverage | Area | What's indexed | |---|---| | Query composables | `useQuery`, `useQueryState`, `useInfiniteQuery`, `useQueryCache` | | Mutation composables | `useMutation`, `useMutationCache` | | Definition helpers | `defineQuery`, `defineQueryOptions`, `defineMutation`, `defineMutationOptions`, `defineInfiniteQueryOptions` | | Cache & SSR | `hydrateQueryCache`, `serializeQueryCache`, `setInfiniteQueryData`, `toCacheKey`, `EntryKey` | | Plugin system | `PiniaColadaPlugin`, `PiniaColadaPluginContext`, plugin authoring API | | Official plugins | Retry, Auto-refetch, Delay, Cache Persister, Query Hooks, TanStack Compat | | Type extension | `TypesConfig`, `QueryMeta`, `MutationMeta`, tagged keys (`EntryKeyTagged`) | | Concepts | Query keys, query invalidation, optimistic updates, error handling, cancelling queries, paginated queries, placeholder data, SSR, testing, prefetching | | Migration | TanStack Query / Vue Query migration with codemods + compat plugin | | Nuxt | `@pinia/colada-nuxt` module setup | ## Benchmarks vs Context7 Evaluated on 49 Pinia Colada questions scored by an LLM judge (Gemini, temperature 0) across 5 dimensions on a 1-5 scale. ::: info Methodology Each question has a ground-truth answer with expected API names and documentation paths. Both providers receive the same question and return documentation context. The judge scores the retrieved context on relevance, completeness, correctness, API coverage, and conciseness. See the `eval/` directory in the repository for the full evaluation framework. ::: ### Overall Scores | Metric | Vue Docs MCP | Context7 | |---|---|---| | Relevance | 4.82 | **4.88** | | Completeness | **4.80** | 4.73 | | Correctness | 4.80 | **4.82** | | API Coverage | 4.78 | 4.78 | | Conciseness | **4.96** | 4.88 | | **Composite** | **4.83** | 4.82 | ### Retrieval and Cost | Metric | Vue Docs MCP | Context7 | |---|---|---| | Path Recall | **98.0%** | 91.8% | | API Recall | **93.9%** | 92.9% | | Avg Response Tokens | 3,849 | **980** | | Avg Latency | **1.64s** | 1.73s | | P95 Latency | 6.88s | **2.15s** | | Cost per Query (user-facing) | **Free** | $0.002 | ### Notes on Fairness * Context7 is a general-purpose service covering 9000+ libraries. Vue Docs MCP is purpose-built for the Vue ecosystem. * The evaluation framework is open source in the `eval/` directory. Run `make eval-compare` to reproduce. --- --- url: /reference/prompts.md --- # Prompts Prompts are guided workflows that structure how your AI assistant approaches common tasks. Each enabled framework registers its own prompts. ::: info Prompt support varies by MCP client. Claude Desktop and Claude Code support prompts natively. Other clients may expose them differently or not at all. ::: ## Per-Framework Prompts Every framework registers three prompts: | Prompt Pattern | Purpose | |---|---| | `debug_{framework}_issue` | Systematic debugging workflow for framework-specific issues | | `compare_{framework}_apis` | Side-by-side comparison of APIs or patterns | | `migrate_{framework}_pattern` | Step-by-step migration guide between patterns | See the framework pages for concrete prompt names, parameters, and examples: * [Vue.js prompts](/frameworks/vue#prompts) * [Vue Router prompts](/frameworks/vue-router#prompts) ## How Prompts Work ### Debug Workflow Given a symptom and optional code snippet, the assistant will: 1. Identify the concept involved 2. Search the documentation with `{framework}_docs_search` 3. Look up specific APIs using `{framework}_api_lookup` 4. Explore related patterns with `{framework}_get_related` 5. Explain the root cause with documentation references 6. Provide a fix and prevention tip ### Compare Workflow Given a comma-separated list of APIs or patterns, the assistant produces a structured comparison covering purpose, reactivity behavior, performance, decision criteria, code examples, and common mistakes. ### Migrate Workflow Given a source and target pattern, the assistant produces a migration guide with: why migrate, concept mapping table, step-by-step before/after code examples, and common gotchas. --- --- url: /reference/resources.md --- # Resources Resources let your AI assistant browse documentation structure directly, without performing a search. They provide raw access to the table of contents, individual pages, and the API index. ::: tip Resources are read-only and always return the latest indexed version of the documentation. ::: ## Per-Framework Resources Each enabled framework registers resources using the `{framework}://` URI scheme. | URI Pattern | Description | |---|---| | `{framework}://topics` | Full table of contents | | `{framework}://topics/{section}` | TOC for a specific section | | `{framework}://pages/{path}` | Raw markdown of any documentation page | | `{framework}://api/index` | Complete API entity index grouped by type | | `{framework}://api/entities/{name}` | Details for a specific API entity | | `{framework}://scopes` | Valid search scope values for `{framework}_docs_search` | Paths use `/` as separator and do not include the `.md` extension. Every indexed page and API entity is enumerated as a concrete resource, so your AI assistant can discover and browse them directly. See the framework pages for concrete URIs and examples: * [Vue.js resources](/frameworks/vue#resources) * [Vue Router resources](/frameworks/vue-router#resources) ## Ecosystem Resources These resources are always available regardless of which frameworks are enabled. | URI | Description | |---|---| | `ecosystem://preferences` | Current framework activation settings and available tools | | `ecosystem://sources` | All supported frameworks with their documentation URLs and status | --- --- url: /guide/self-hosting.md --- # Self-Hosting You can run your own instance of the Vue Docs MCP server. This gives you full control and works offline (after initial setup). ## Prerequisites * **Python 3.13+** * **[uv](https://docs.astral.sh/uv/)** (Python package manager) * **API keys** for: * [Jina AI](https://jina.ai/) (embeddings and reranking) * [Google Gemini](https://ai.google.dev/) (contextual enrichment and summarization during ingestion) * [Qdrant](https://qdrant.tech/) (vector database, cloud or self-hosted) ## Quick Start ### 1. Clone and install ```bash git clone https://github.com/joelbarmettlerUZH/vue-mcp.git cd vue-mcp make bootstrap # Clones Vue docs + installs dependencies ``` ### 2. Configure API keys ```bash cp .env.example .env ``` Edit `.env` with your API keys: ```ini JINA_API_KEY=your-jina-api-key GEMINI_API_KEY=your-gemini-api-key QDRANT_URL=http://localhost:6333 DATABASE_URL=postgresql+psycopg://vue_mcp:vue_mcp@localhost:5432/vue_mcp ``` ### 3. Run the ingestion pipeline Parse the Vue documentation, generate embeddings, and index into Qdrant: ```bash make ingest # Incremental (skips unchanged files) make ingest-full # Full re-index from scratch ``` ::: info The first ingestion run will take a while as it embeds all documentation. Subsequent runs are incremental and much faster. ::: ### 4. Start the server ```bash make serve ``` ### 5. Connect your client For local use with stdio transport: ```json { "mcpServers": { "vue-docs": { "command": "uv", "args": ["run", "--directory", "/path/to/vue-mcp", "vue-docs-server"] } } } ``` See [MCP Clients](/clients/) for all client configurations. ## Docker Compose (Production) For production deployments, use the Docker Compose stack: ### Architecture ``` Internet -> Traefik (:80/:443, TLS) -> MCP Server (:8000) |-- PostgreSQL |-- Qdrant '-- Ingestion (self-scheduling) ``` ### Services | Service | Purpose | |---|---| | **mcp-server** | FastMCP server (streamable HTTP) | | **ingestion** | Self-scheduling pipeline (runs every 24h) | | **postgres** | Shared data layer | | **qdrant** | Vector database | | **traefik** | Reverse proxy with TLS and rate limiting | ### Running ```bash # Configure environment cp .env.production.example .env.production # Edit .env.production with your API keys and domain # Build and start make docker-build make docker-up ``` ### Environment Variables For production, set these additional variables: ```ini # Server transport SERVER_TRANSPORT=streamable-http SERVER_HOST=0.0.0.0 SERVER_PORT=8000 # PostgreSQL (required for production) DATABASE_URL=postgresql+psycopg://vue_mcp:vue_mcp@postgres:5432/vue_mcp # TLS (Traefik) TLS_CERTRESOLVER=letsencrypt ACME_EMAIL=your-email@example.com DOMAIN=your-domain.com ``` ### Hot Reload When using PostgreSQL, the server automatically reloads data every 60 seconds. When ingestion writes new data, the server picks it up with zero downtime. ### Backup & Restore ```bash scripts/backup.sh [backup_dir] # pg_dump + Qdrant snapshot scripts/restore.sh [snapshot] # Restore from backup ``` Backups are rotated on a 7-day schedule. ## Configuration Reference | Variable | Default | Description | |---|---|---| | `JINA_API_KEY` | *required* | Jina AI API key | | `GEMINI_API_KEY` | *required* | Google Gemini API key | | `DATABASE_URL` | *required* | PostgreSQL connection string | | `QDRANT_URL` | `http://localhost:6333` | Qdrant server URL | | `DATA_PATH` | `./data` | Working directory for cloned docs | | `SERVER_TRANSPORT` | `stdio` | `stdio` or `streamable-http` | | `SERVER_HOST` | `0.0.0.0` | Server bind address | | `SERVER_PORT` | `8000` | Server port | | `MASK_ERROR_DETAILS` | `false` | Hide error traces in responses | --- --- url: /frameworks/shadcn-vue.md --- # shadcn-vue 4.30 / 5 composite score · 84.0% API recall · 50 questions evaluated Vue Docs MCP provides deep access to the official [shadcn-vue documentation](https://www.shadcn-vue.com), covering the copy-paste component library built on `reka-ui` primitives: 64 documented components, the `npx shadcn-vue@latest add` CLI, `components.json` configuration, theming via Tailwind CSS variables, framework-specific installation guides (Vite, Nuxt, Astro, Laravel), form-library integration recipes (vee-validate, TanStack Form), and the custom-registry workflow. ## Activation shadcn-vue is not enabled by default. Call `set_framework_preferences` to activate it: ``` set_framework_preferences(shadcn_vue=true) ``` ## Tools ### `shadcn_vue_docs_search` Semantic search over shadcn-vue documentation. Uses the standard 6-step retrieval pipeline: embed query, hybrid search (dense + BM25), resolve HyPE hits, expand cross-references, rerank, and reconstruct into readable markdown. | Parameter | Type | Default | Description | |---|---|---|---| | `query` | `string` | | Developer question or topic (max 2000 chars) | | `scope` | `string` | `"all"` | Documentation section to search within | | `max_results` | `integer` | `3` | Number of sections to return (1-20) | **Scope values:** `all`, `components`, `installation`, `forms`, `dark-mode`, `registry` ### `shadcn_vue_api_lookup` Fast exact-match API reference lookup with fuzzy fallback. Returns type signatures, descriptions, and usage examples directly from the documentation. Component names work in both kebab-case (`alert-dialog`) and PascalCase (`AlertDialog`). | Parameter | Type | Default | Description | |---|---|---|---| | `api_name` | `string` | | Component name to look up (e.g. `Button`, `data-table`, `Sidebar`) | ### `shadcn_vue_get_related` Find related APIs, concepts, and documentation pages for a given API or topic. | Parameter | Type | Default | Description | |---|---|---|---| | `topic` | `string` | | Component or concept to explore | ## Resources | URI | Description | |---|---| | `shadcn-vue://topics` | Full table of contents | | `shadcn-vue://topics/{section}` | TOC for a specific section (e.g. `shadcn-vue://topics/components`) | | `shadcn-vue://pages/{path}` | Raw markdown of any doc page (e.g. `shadcn-vue://pages/components/button`) | | `shadcn-vue://api/index` | Complete component index | | `shadcn-vue://api/entities/{name}` | Details for a specific component (e.g. `shadcn-vue://api/entities/Button`) | | `shadcn-vue://scopes` | All valid search scope values | ## Prompts | Prompt | Parameters | Description | |---|---|---| | `debug_shadcn_vue_issue` | `symptom`, `code_snippet` (optional) | Systematic debugging workflow | | `compare_shadcn_vue_apis` | `items` (comma-separated) | Side-by-side comparison (e.g. `Dialog, Sheet, Drawer`) | | `migrate_shadcn_vue_pattern` | `from_pattern`, `to_pattern` | Migration guide between patterns | ## Coverage | Area | What's indexed | |---|---| | Components | All 64 official components: Button, Dialog, DataTable, Sidebar, Combobox, Calendar, Sonner, Stepper, Chart, Resizable, ... | | CLI | `npx shadcn-vue@latest init / add / diff / remove` plus the JavaScript API | | Configuration | `components.json` schema (`tailwind`, `aliases`, `iconLibrary`, `framework`) | | Theming | Tailwind v4 CSS variables, OKLCH palette, dark-mode integration | | Framework setup | Vite, Nuxt, Astro, Laravel installation guides | | Forms | vee-validate and TanStack Form integration with `
`, ``, ``, `` | | Dark mode | `useColorMode` patterns per framework | | Registry | Custom registry schema, hosting, and consumption flow | | Migration | v3 → v4 (Tailwind v4 + theme cleanup) | ## Benchmarks vs Context7 Evaluated on 50 shadcn-vue questions scored by an LLM judge (Gemini, temperature 0) across 5 dimensions on a 1-5 scale. ::: info Methodology Each question has a ground-truth answer with expected API names and documentation paths. Both providers receive the same question and return documentation context. The judge scores the retrieved context on relevance, completeness, correctness, API coverage, and conciseness. See the `eval/` directory in the repository for the full evaluation framework. ::: ### Overall Scores | Metric | Vue Docs MCP | Context7 | |---|---|---| | Relevance | 4.30 | **4.96** | | Completeness | 4.12 | **4.82** | | Correctness | 4.14 | **4.88** | | API Coverage | 4.06 | **4.76** | | Conciseness | 4.86 | **4.92** | | **Composite** | 4.30 | **4.87** | ### Retrieval and Cost | Metric | Vue Docs MCP | Context7 | |---|---|---| | Path Recall | 82.0% | **98.0%** | | API Recall | 84.0% | **93.0%** | | Avg Response Tokens | 4,407 | **1,005** | | Avg Latency | **0.78s** | 1.62s | | P95 Latency | **1.03s** | 1.95s | | Cost per Query (user-facing) | **Free** | $0.002 | ### Notes on Fairness * Context7 is a general-purpose service covering 9000+ libraries. Vue Docs MCP is purpose-built for the Vue ecosystem. * shadcn-vue's docs are intentionally thin on prose — each component page is mostly an install snippet plus a code example, since the project's philosophy is that you copy-paste source you can read directly. This caps the absolute composite score for both providers; the relative numbers are the meaningful comparison. * The evaluation framework is open source in the `eval/` directory. Run `make eval-compare` to reproduce. --- --- url: /frameworks.md --- # Supported Frameworks Vue Docs MCP provides deep, structured access to the Vue ecosystem documentation. Each framework gets its own set of tools, resources, and prompts, purpose-built for that library's API surface. ## Available | Framework | Docs | Questions Evaluated | Composite Score | |---|---|---|---| | [Vue.js](./vue) | [vuejs.org](https://vuejs.org) | 173 | **4.82 / 5** | | [Vue Router](./vue-router) | [router.vuejs.org](https://router.vuejs.org) | 49 | **4.78 / 5** | | [VueUse](./vueuse) | [vueuse.org](https://vueuse.org) | 50 | **4.89 / 5** | | [Vite](./vite) | [vite.dev](https://vite.dev) | 49 | **4.95 / 5** | | [Vitest](./vitest) | [vitest.dev](https://vitest.dev) | 50 | **4.77 / 5** | | [Nuxt](./nuxt) | [nuxt.com](https://nuxt.com) | 49 | **4.80 / 5** | | [Pinia](./pinia) | [pinia.vuejs.org](https://pinia.vuejs.org) | 49 | **4.81 / 5** | | [Vue DevTools](./vue-devtools) | [devtools.vuejs.org](https://devtools.vuejs.org) | 50 | **4.37 / 5** | | [VitePress](./vitepress) | [vitepress.dev](https://vitepress.dev) | 45 | **4.58 / 5** | | [Pinia Colada](./pinia-colada) | [pinia-colada.esm.dev](https://pinia-colada.esm.dev) | 49 | **4.83 / 5** | | [VeeValidate](./vee-validate) | [vee-validate.logaretm.com](https://vee-validate.logaretm.com/v4) | 54 | **4.21 / 5** | | [FormKit](./formkit) | [formkit.com](https://formkit.com) | 55 | **4.59 / 5** | | [shadcn-vue](./shadcn-vue) | [shadcn-vue.com](https://www.shadcn-vue.com) | 50 | **4.30 / 5** | | [Vue Flow](./vue-flow) | [vueflow.dev](https://vueflow.dev) | 50 | **4.82 / 5** | ## What Each Framework Provides When a framework is enabled, your AI assistant gains: * **3 tools** for searching, looking up APIs, and discovering related concepts * **5+ resources** for browsing the table of contents, reading pages, and exploring the API index * **3 prompts** for guided debugging, API comparison, and migration workflows When two or more frameworks are active, a cross-framework `ecosystem_search` tool becomes available. ## Activating Frameworks Only **Vue.js** is enabled by default. Call `set_framework_preferences` to activate additional frameworks for the current session: ``` set_framework_preferences(vue=true, vue_router=true, vueuse=true, vite=true, vitest=true, nuxt=true, pinia=true, vitepress=true, pinia_colada=true, vee_validate=true, formkit=true, shadcn_vue=true, vue_flow=true) ``` ### Parameters | Parameter | Type | Default | Description | |---|---|---|---| | `vue` | `boolean` | `true` | Enable Vue.js core documentation | | `vue_router` | `boolean` | `false` | Enable Vue Router documentation | | `vueuse` | `boolean` | `false` | Enable VueUse documentation | | `vite` | `boolean` | `false` | Enable Vite documentation | | `vitest` | `boolean` | `false` | Enable Vitest documentation | | `nuxt` | `boolean` | `false` | Enable Nuxt documentation | | `pinia` | `boolean` | `false` | Enable Pinia documentation | | `vue_devtools` | `boolean` | `false` | Enable Vue DevTools documentation | | `vitepress` | `boolean` | `false` | Enable VitePress documentation | | `pinia_colada` | `boolean` | `false` | Enable Pinia Colada documentation | | `vee_validate` | `boolean` | `false` | Enable VeeValidate documentation | | `formkit` | `boolean` | `false` | Enable FormKit documentation | | `shadcn_vue` | `boolean` | `false` | Enable shadcn-vue documentation | | `vue_flow` | `boolean` | `false` | Enable Vue Flow documentation | After calling this, your AI assistant will have access to tools, resources, and prompts for all enabled frameworks. When more than one framework is active, an `ecosystem_search` tool becomes available that searches across all frameworks simultaneously. Read `ecosystem://preferences` to check which frameworks are currently active. Read `ecosystem://sources` to see all supported frameworks and their status. ## Roadmap | Framework | Status | |---|---| | [Vue.js](https://vuejs.org) | :white\_check\_mark: Available | | [Vue Router](https://router.vuejs.org) | :white\_check\_mark: Available | | [VueUse](https://vueuse.org) | :white\_check\_mark: Available | | [Vite](https://vite.dev) | :white\_check\_mark: Available | | [Vitest](https://vitest.dev) | :white\_check\_mark: Available | | [Nuxt](https://nuxt.com) | :white\_check\_mark: Available | | [Pinia](https://pinia.vuejs.org) | :white\_check\_mark: Available | | [Vue DevTools](https://devtools.vuejs.org) | :white\_check\_mark: Available | | [VitePress](https://vitepress.dev) | :white\_check\_mark: Available | | [Pinia Colada](https://pinia-colada.esm.dev) | :white\_check\_mark: Available | | [VeeValidate](https://vee-validate.logaretm.com/v4/) | :white\_check\_mark: Available | | [FormKit](https://formkit.com) | :white\_check\_mark: Available | | [shadcn-vue](https://www.shadcn-vue.com) | :white\_check\_mark: Available | | [Vue Flow](https://vueflow.dev) | :white\_check\_mark: Available | | [Nuxt UI](https://ui.nuxt.com) | :calendar: Planned | | [TanStack Query](https://tanstack.com/query/latest/docs/framework/vue/overview) | :calendar: Planned | | [PrimeVue](https://primevue.org) | :calendar: Planned | | [Vuetify](https://vuetifyjs.com) | :calendar: Planned | | [Quasar](https://quasar.dev) | :calendar: Planned | | [Radix Vue](https://www.radix-vue.com) | :calendar: Planned | Want to see a framework added or reprioritized? [Open an issue](https://github.com/joelbarmettlerUZH/vue-mcp/issues) on GitHub. --- --- url: /reference/tools.md --- # Tools Vue Docs MCP exposes tools for each enabled framework. Each framework page documents its specific tools, parameters, and scope values in detail. ## Per-Framework Tools Every framework registers three tools: | Tool Pattern | Purpose | |---|---| | `{framework}_docs_search` | Semantic search over the framework's documentation | | `{framework}_api_lookup` | Instant API reference lookup with fuzzy fallback | | `{framework}_get_related` | Discover related APIs, concepts, and documentation pages | See the framework pages for concrete tool names, parameters, and examples: * [Vue.js tools](/frameworks/vue#tools) * [Vue Router tools](/frameworks/vue-router#tools) ## How Search Works Each `{framework}_docs_search` call runs a 6-step pipeline: 1. **Embed & detect entities.** Query is embedded via Jina, BM25 sparse vector generated locally, API names detected deterministically. 2. **Hybrid search.** Dense + BM25 search in Qdrant, retrieving up to 50 candidates. 3. **Resolve HyPE hits.** Synthetic question chunks mapped back to parent content. 4. **Cross-reference expansion.** Related documentation sections pulled in from metadata links. 5. **Reranking.** Jina reranker reorders candidates for precision. 6. **Reconstruction.** Results reassembled in documentation reading order. No LLM is used at query time. Only embedding and reranking API calls are made. ## Cross-Framework Search When two or more frameworks are enabled, an `ecosystem_search` tool becomes available that searches across all active frameworks simultaneously. | Parameter | Type | Default | Description | |---|---|---|---| | `query` | `string` | | Developer question or topic (max 2000 chars) | | `scope` | `string` | `"all"` | Documentation section to search | | `max_results` | `integer` | `5` | Number of sections to return (1-20) | Results are tagged by source framework and ordered by relevance. Enable frameworks via [`set_framework_preferences`](/frameworks/#activating-frameworks). --- --- url: /frameworks/vee-validate.md --- # VeeValidate 4.21 / 5 composite score · 98.1% API recall · 54 questions evaluated Vue Docs MCP provides deep access to the official [VeeValidate documentation](https://vee-validate.logaretm.com/v4), covering Vue's leading form-validation library: the components API (``, ``, ``, ``), the composition API (`useForm`, `useField`, `useFieldArray`, plus 20+ granular helpers), schema integrations (yup, zod, valibot, joi), the `defineRule` / `configure` global helpers, the i18n package, the Nuxt module, and migration paths from v3. ## Activation VeeValidate is not enabled by default. Call `set_framework_preferences` to activate it: ``` set_framework_preferences(vee_validate=true) ``` ## Tools ### `vee_validate_docs_search` Semantic search over VeeValidate documentation. Uses the standard 6-step retrieval pipeline: embed query, hybrid search (dense + BM25), resolve HyPE hits, expand cross-references, rerank, and reconstruct into readable markdown. | Parameter | Type | Default | Description | |---|---|---|---| | `query` | `string` | | Developer question or topic (max 2000 chars) | | `scope` | `string` | `"all"` | Documentation section to search within | | `max_results` | `integer` | `3` | Number of sections to return (1-20) | **Scope values:** `all`, `guide`, `api`, `tutorials`, `examples`, `integrations` ### `vee_validate_api_lookup` Fast exact-match API reference lookup with fuzzy fallback. Returns type signatures, descriptions, and usage examples directly from the documentation. | Parameter | Type | Default | Description | |---|---|---|---| | `api_name` | `string` | | API name to look up (e.g. `useField`, `useForm`, `Form`, `defineRule`, `useResetForm`) | ### `vee_validate_get_related` Find related APIs, concepts, and documentation pages for a given API or topic. | Parameter | Type | Default | Description | |---|---|---|---| | `topic` | `string` | | API name or concept to explore | ## Resources | URI | Description | |---|---| | `vee-validate://topics` | Full table of contents | | `vee-validate://topics/{section}` | TOC for a specific section (e.g. `vee-validate://topics/api`) | | `vee-validate://pages/{path}` | Raw markdown of any doc page (e.g. `vee-validate://pages/api/use-field`) | | `vee-validate://api/index` | Complete API entity index grouped by type | | `vee-validate://api/entities/{name}` | Details for a specific API (e.g. `vee-validate://api/entities/useField`) | | `vee-validate://scopes` | All valid search scope values | ## Prompts | Prompt | Parameters | Description | |---|---|---| | `debug_vee_validate_issue` | `symptom`, `code_snippet` (optional) | Systematic debugging workflow: identifies the concept, searches docs, looks up APIs, and provides a fix | | `compare_vee_validate_apis` | `items` (comma-separated) | Side-by-side comparison of APIs or patterns (e.g. `useField, Field`) | | `migrate_vee_validate_pattern` | `from_pattern`, `to_pattern` | Migration guide between patterns (e.g. v3 directives to v4 components) | ## Coverage | Area | What's indexed | |---|---| | Components API | ``, ``, ``, `` with full slot-scope reference | | Composition API | `useForm`, `useField`, `useFieldArray`, `useFormContext` | | Field selectors | `useFieldValue`, `useFieldError`, `useIsFieldDirty`, `useIsFieldTouched`, `useIsFieldValid`, `useValidateField` | | Form selectors | `useFormValues`, `useFormErrors`, `useIsFormDirty`, `useIsFormTouched`, `useIsFormValid`, `useIsSubmitting`, `useIsValidating`, `useValidateForm`, `useSubmitCount` | | Programmatic setters | `useSetFieldError`, `useSetFieldTouched`, `useSetFieldValue`, `useSetFormErrors`, `useSetFormTouched`, `useSetFormValues`, `useResetForm`, `useSubmitForm` | | Global helpers | `defineRule`, `configure`, `getConfig`, `validate`, `validateObject`, `normalizeRules`, `toTypedSchema` | | Schema integrations | `@vee-validate/yup`, `@vee-validate/zod`, `@vee-validate/valibot`, `@vee-validate/joi` | | Built-in rules | `@vee-validate/rules` (the full `all` rules registry) | | i18n | `@vee-validate/i18n` with locale registration and `setLocale` | | Nuxt | `@vee-validate/nuxt` module setup | | Concepts | Cross-field validation, async validation, nested objects/arrays, custom inputs, UI library integration, multistep forms, value formatting, checkboxes/radios, dynamic forms | | Migration | v3 directives + ValidationProvider/Observer to v4 components and composition API | ## Benchmarks vs Context7 Evaluated on 49 VeeValidate questions scored by an LLM judge (Gemini, temperature 0) across 5 dimensions on a 1-5 scale. ::: info Methodology Each question has a ground-truth answer with expected API names and documentation paths. Both providers receive the same question and return documentation context. The judge scores the retrieved context on relevance, completeness, correctness, API coverage, and conciseness. See the `eval/` directory in the repository for the full evaluation framework. ::: ### Overall Scores | Metric | Vue Docs MCP | Context7 | |---|---|---| | Relevance | **4.30** | 4.00 | | Completeness | **3.78** | 3.41 | | Correctness | **4.02** | 3.80 | | API Coverage | **4.15** | 3.57 | | Conciseness | **4.80** | 4.48 | | **Composite** | **4.21** | 3.85 | ### Retrieval and Cost | Metric | Vue Docs MCP | Context7 | |---|---|---| | Path Recall | **42.6%** | 39.8% | | API Recall | **98.1%** | 82.3% | | Avg Response Tokens | 7,269 | **1,086** | | Avg Latency | **1.08s** | 1.66s | | P95 Latency | **1.75s** | 2.05s | | Cost per Query (user-facing) | **Free** | $0.002 | ### Notes on Fairness * Context7 is a general-purpose service covering 9000+ libraries. Vue Docs MCP is purpose-built for the Vue ecosystem. * VeeValidate's docs cover advanced topics like multistep wizards and value formatting through example pages with live demos. Both providers can only index the prose; live demos are dropped during cleaning. * The evaluation framework is open source in the `eval/` directory. Run `make eval-compare` to reproduce. --- --- url: /frameworks/vite.md --- # Vite 4.95 / 5 composite score · 87.8% API recall · 49 questions evaluated Vue Docs MCP provides deep access to the official [Vite documentation](https://vite.dev), covering the build tool's configuration reference, plugin API, HMR API, JavaScript API, Environment API, and migration guides. ## Activation Vite is not enabled by default. Call `set_framework_preferences` to activate it: ``` set_framework_preferences(vite=true) ``` ## Tools ### `vite_docs_search` Semantic search over Vite documentation. Uses a 6-step pipeline: embed query, hybrid search (dense + BM25), resolve HyPE hits, expand cross-references, rerank, and reconstruct into readable markdown. | Parameter | Type | Default | Description | |---|---|---|---| | `query` | `string` | | Developer question or topic (max 2000 chars) | | `scope` | `string` | `"all"` | Documentation section to search within | | `max_results` | `integer` | `3` | Number of sections to return (1-20) | **Scope values:** `all`, `guide`, `config`, `changes`, `plugins` ### `vite_api_lookup` Fast exact-match API reference lookup with fuzzy fallback. Returns type signatures, descriptions, and usage examples directly from the documentation. | Parameter | Type | Default | Description | |---|---|---|---| | `name` | `string` | | API name to look up (e.g. `defineConfig`, `createServer`, `server.proxy`) | ### `vite_get_related` Find related APIs, concepts, and documentation pages for a given API or topic. | Parameter | Type | Default | Description | |---|---|---|---| | `name` | `string` | | API name or concept to explore | ## Resources | URI | Description | |---|---| | `vite://topics` | Full table of contents | | `vite://topics/{section}` | TOC for a specific section (e.g. `vite://topics/guide`) | | `vite://pages/{path}` | Raw markdown of any doc page (e.g. `vite://pages/config/shared-options`) | | `vite://api/index` | Complete API entity index grouped by type | | `vite://api/entities/{name}` | Details for a specific API (e.g. `vite://api/entities/defineConfig`) | | `vite://scopes` | All valid search scope values | ## Prompts | Prompt | Parameters | Description | |---|---|---| | `debug_vite_issue` | `symptom`, `code_snippet` (optional) | Systematic debugging workflow: identifies the concept, searches docs, looks up APIs, and provides a fix | | `compare_vite_apis` | `items` (comma-separated) | Side-by-side comparison of APIs or patterns (e.g. `server.proxy, server.middlewareMode`) | | `migrate_vite_pattern` | `from_pattern`, `to_pattern` | Migration guide between patterns (e.g. Vite 5 to Vite 6) | ## Benchmarks vs Context7 Evaluated on 49 Vite questions scored by an LLM judge (Gemini, temperature 0) across 5 dimensions on a 1-5 scale. ::: info Methodology Each question has a ground-truth answer with expected API names and documentation paths. Both providers receive the same question and return documentation context. The judge scores the retrieved context on relevance, completeness, correctness, API coverage, and conciseness. See the `eval/` directory in the repository for the full evaluation framework. ::: ### Overall Scores | Metric | Vue Docs MCP | Context7 | |---|---|---| | Relevance | **5.00** | 4.94 | | Completeness | **4.92** | 4.53 | | Correctness | **4.96** | 4.80 | | API Coverage | **4.86** | 4.31 | | Conciseness | **5.00** | 4.78 | | **Composite** | **4.95** | **4.67** | ### Retrieval and Cost | Metric | Vue Docs MCP | Context7 | |---|---|---| | API Recall | **87.8%** | 84.7% | | Avg Response Tokens | 4,103 | 943 | | Avg Latency | **0.91s** | 1.84s | | Cost per Query (user-facing) | **Free** | $0.002 | ### Notes on Fairness * Context7 is a general-purpose service covering 9000+ libraries. Vue Docs MCP is purpose-built for the Vue ecosystem. * The evaluation framework is open source in the `eval/` directory. Run `make eval-compare` to reproduce. --- --- url: /frameworks/vitepress.md --- # VitePress 4.58 / 5 composite score · 100.0% API recall · 45 questions evaluated Vue Docs MCP provides deep access to the official [VitePress documentation](https://vitepress.dev), covering the static site generator's runtime API (composables, helpers, components), default theme config, build hooks, data loaders, deploy guides, and migration paths from VuePress. ::: tip Dogfood This very documentation site is built with VitePress, so the MCP can answer questions about the tool you're reading right now. ::: ## Activation VitePress is not enabled by default. Call `set_framework_preferences` to activate it: ``` set_framework_preferences(vitepress=true) ``` ## Tools ### `vitepress_docs_search` Semantic search over VitePress documentation. Uses the standard 6-step retrieval pipeline: embed query, hybrid search (dense + BM25), resolve HyPE hits, expand cross-references, rerank, and reconstruct into readable markdown. | Parameter | Type | Default | Description | |---|---|---|---| | `query` | `string` | | Developer question or topic (max 2000 chars) | | `scope` | `string` | `"all"` | Documentation section to search within | | `max_results` | `integer` | `3` | Number of sections to return (1-20) | **Scope values:** `all`, `guide`, `reference` ### `vitepress_api_lookup` Fast exact-match API reference lookup with fuzzy fallback. Returns type signatures, descriptions, and usage examples directly from the documentation. | Parameter | Type | Default | Description | |---|---|---|---| | `api_name` | `string` | | API name to look up (e.g. `useData`, `defineConfig`, `createContentLoader`, `withBase`) | ### `vitepress_get_related` Find related APIs, concepts, and documentation pages for a given API or topic. | Parameter | Type | Default | Description | |---|---|---|---| | `topic` | `string` | | API name or concept to explore | ## Resources | URI | Description | |---|---| | `vitepress://topics` | Full table of contents | | `vitepress://topics/{section}` | TOC for a specific section (e.g. `vitepress://topics/reference`) | | `vitepress://pages/{path}` | Raw markdown of any doc page (e.g. `vitepress://pages/reference/site-config`) | | `vitepress://api/index` | Complete API entity index grouped by type | | `vitepress://api/entities/{name}` | Details for a specific API (e.g. `vitepress://api/entities/useData`) | | `vitepress://scopes` | All valid search scope values | ## Prompts | Prompt | Parameters | Description | |---|---|---| | `debug_vitepress_issue` | `symptom`, `code_snippet` (optional) | Systematic debugging workflow: identifies the concept, searches docs, looks up APIs, and provides a fix | | `compare_vitepress_apis` | `items` (comma-separated) | Side-by-side comparison of APIs or patterns (e.g. `createContentLoader, defineLoader`) | | `migrate_vitepress_pattern` | `from_pattern`, `to_pattern` | Migration guide between patterns (e.g. VuePress to VitePress) | ## Coverage | Area | What's indexed | |---|---| | Runtime API | `useData`, `useRoute`, `useRouter`, `withBase`, ``, ``, template globals | | Site config | All top-level keys: `title`, `head`, `cleanUrls`, `rewrites`, `srcDir`, `outDir`, `markdown`, build hooks | | Default theme | Sidebar, nav, search, social links, footer, edit link, last updated, outline, aside, dark mode | | Theme components | `VPTeamMembers`, `VPTeamPage`, hero/features layouts | | Data loaders | `createContentLoader`, `defineLoader`, dynamic routes | | Guides | Getting started, deploy, i18n, SSR compatibility, asset handling, custom themes | | CLI | `vitepress dev`, `vitepress build`, `vitepress preview`, `vitepress init` | | Migration | From VuePress, from VitePress 0.x | ## Benchmarks vs Context7 Evaluated on 50 VitePress questions scored by an LLM judge (Gemini, temperature 0) across 5 dimensions on a 1-5 scale. ::: info Methodology Each question has a ground-truth answer with expected API names and documentation paths. Both providers receive the same question and return documentation context. The judge scores the retrieved context on relevance, completeness, correctness, API coverage, and conciseness. See the `eval/` directory in the repository for the full evaluation framework. ::: ### Overall Scores | Metric | Vue Docs MCP | Context7 | |---|---|---| | Relevance | **4.80** | 4.76 | | Completeness | **4.71** | 4.69 | | Correctness | **4.76** | 4.71 | | API Coverage | 3.67 | **4.20** | | Conciseness | **4.96** | 4.73 | | **Composite** | 4.58 | **4.62** | ### Retrieval and Cost | Metric | Vue Docs MCP | Context7 | |---|---|---| | Path Recall | 95.6% | 95.6% | | API Recall | 100.0% | 100.0% | | Avg Response Tokens | 3,056 | **779** | | Avg Latency | **0.83s** | 1.78s | | P95 Latency | **1.03s** | 2.15s | | Cost per Query (user-facing) | **Free** | $0.002 | ### Notes on Fairness * Context7 is a general-purpose service covering 9000+ libraries. Vue Docs MCP is purpose-built for the Vue ecosystem. * The evaluation framework is open source in the `eval/` directory. Run `make eval-compare` to reproduce. --- --- url: /frameworks/vitest.md --- # Vitest 4.77 / 5 composite score · 98.0% API recall · 50 questions evaluated Vue Docs MCP provides deep access to the official [Vitest documentation](https://vitest.dev), covering the test framework's API reference (test, describe, expect, vi), configuration options, mocking guides, browser testing, coverage, and migration guides. ## Activation Vitest is not enabled by default. Call `set_framework_preferences` to activate it: ``` set_framework_preferences(vitest=true) ``` ## Tools ### `vitest_docs_search` Semantic search over Vitest documentation. Uses a 6-step pipeline: embed query, hybrid search (dense + BM25), resolve HyPE hits, expand cross-references, rerank, and reconstruct into readable markdown. | Parameter | Type | Default | Description | |---|---|---|---| | `query` | `string` | | Developer question or topic (max 2000 chars) | | `scope` | `string` | `"all"` | Documentation section to search within | | `max_results` | `integer` | `3` | Number of sections to return (1-20) | **Scope values:** `all`, `guide`, `api`, `config` ### `vitest_api_lookup` Fast exact-match API reference lookup with fuzzy fallback. Returns type signatures, descriptions, and usage examples directly from the documentation. | Parameter | Type | Default | Description | |---|---|---|---| | `name` | `string` | | API name to look up (e.g. `vi.mock`, `test.each`, `expect`, `coverage`) | ### `vitest_get_related` Find related APIs, concepts, and documentation pages for a given API or topic. | Parameter | Type | Default | Description | |---|---|---|---| | `name` | `string` | | API name or concept to explore | ## Resources | URI | Description | |---|---| | `vitest://topics` | Full table of contents | | `vitest://topics/{section}` | TOC for a specific section (e.g. `vitest://topics/guide`) | | `vitest://pages/{path}` | Raw markdown of any doc page (e.g. `vitest://pages/api/vi`) | | `vitest://api/index` | Complete API entity index grouped by type | | `vitest://api/entities/{name}` | Details for a specific API (e.g. `vitest://api/entities/vi.mock`) | | `vitest://scopes` | All valid search scope values | ## Prompts | Prompt | Parameters | Description | |---|---|---| | `debug_vitest_issue` | `symptom`, `code_snippet` (optional) | Systematic debugging workflow: identifies the concept, searches docs, looks up APIs, and provides a fix | | `compare_vitest_apis` | `items` (comma-separated) | Side-by-side comparison of APIs or patterns (e.g. `vi.mock, vi.doMock` or `test.each, test.for`) | | `migrate_vitest_pattern` | `from_pattern`, `to_pattern` | Migration guide between patterns (e.g. Jest to Vitest) | ## Benchmarks vs Context7 Evaluated on 50 Vitest questions scored by an LLM judge (Gemini, temperature 0) across 5 dimensions on a 1-5 scale. ::: info Methodology Each question has a ground-truth answer with expected API names and documentation paths. Both providers receive the same question and return documentation context. The judge scores the retrieved context on relevance, completeness, correctness, API coverage, and conciseness. See the `eval/` directory in the repository for the full evaluation framework. ::: ### Overall Scores | Metric | Vue Docs MCP | Context7 | |---|---|---| | Relevance | 4.82 | **4.92** | | Completeness | 4.66 | **4.80** | | Correctness | 4.72 | **4.86** | | API Coverage | **4.70** | 4.56 | | Conciseness | **4.96** | 4.86 | | **Composite** | **4.77** | **4.80** | ### Retrieval and Cost | Metric | Vue Docs MCP | Context7 | |---|---|---| | API Recall | **98.0%** | 89.0% | | Avg Response Tokens | 3,361 | 797 | | Avg Latency | **1.44s** | 1.57s | | Cost per Query (user-facing) | **Free** | $0.002 | ### Notes on Fairness * Context7 is a general-purpose service covering 9000+ libraries. Vue Docs MCP is purpose-built for the Vue ecosystem. * Context7 scores slightly higher on composite for Vitest (4.80 vs 4.77), while Vue Docs MCP leads on API recall (98% vs 89%) and is free to use. * The evaluation framework is open source in the `eval/` directory. Run `make eval-compare` to reproduce. --- --- url: /clients/vscode.md --- # VS Code (Copilot) Connect Vue Docs MCP to [VS Code](https://code.visualstudio.com/) with GitHub Copilot. ## Setup Add to your VS Code MCP config file (`.vscode/mcp.json`). See [VS Code MCP docs](https://code.visualstudio.com/docs/copilot/chat/mcp-servers) for more info. ```json { "servers": { "vue-docs": { "type": "http", "url": "https://mcp.vue-mcp.org/mcp" } } } ``` ::: tip VS Code uses `servers` (not `mcpServers`) and requires a `type` field. ::: ## Verify After saving, open the Copilot Chat panel. The Vue Docs tools should appear in the available tools list. ## Usage Ask Copilot about Vue in the chat panel: * "How does computed caching work in Vue 3?" * "Show me the `defineEmits` API" * "Help me set up `provide`/`inject`" ## Copilot Coding Agent For the [Copilot Coding Agent](https://docs.github.com/en/copilot/how-tos/agents/copilot-coding-agent/extending-copilot-coding-agent-with-mcp), add to your repository settings under **Settings > Copilot > Coding agent > MCP configuration**: ```json { "mcpServers": { "vue-docs": { "type": "http", "url": "https://mcp.vue-mcp.org/mcp" } } } ``` ## Visual Studio 2022 For [Visual Studio 2022](https://learn.microsoft.com/visualstudio/ide/mcp-servers): ```json { "servers": { "vue-docs": { "type": "http", "url": "https://mcp.vue-mcp.org/mcp" } } } ``` ## Self-Hosted Server For a [self-hosted instance](/guide/self-hosting): ```json { "servers": { "vue-docs": { "type": "stdio", "command": "uv", "args": ["run", "--directory", "/path/to/vue-mcp", "vue-docs-server"] } } } ``` --- --- url: /frameworks/vue-devtools.md --- # Vue DevTools 4.37 / 5 composite score · 100% API recall · 50 questions evaluated Vue Docs MCP provides deep access to the official [Vue DevTools documentation](https://devtools.vuejs.org), covering installation (Vite plugin, browser extension, standalone), features, plugin API (addCustomTab, addCustomCommand), and migration guides. ## Activation Vue DevTools is not enabled by default. Call `set_framework_preferences` to activate it: ``` set_framework_preferences(vue_devtools=true) ``` ## Tools ### `vue_devtools_docs_search` Semantic search over Vue DevTools documentation. | Parameter | Type | Default | Description | |---|---|---|---| | `query` | `string` | | Developer question or topic (max 2000 chars) | | `scope` | `string` | `"all"` | Documentation section to search within | | `max_results` | `integer` | `3` | Number of sections to return (1-20) | **Scope values:** `all`, `getting-started`, `guide`, `plugins`, `help` ### `vue_devtools_api_lookup` Fast exact-match API reference lookup with fuzzy fallback. | Parameter | Type | Default | Description | |---|---|---|---| | `name` | `string` | | API name to look up (e.g. `addCustomTab`, `onDevToolsClientConnected`) | ### `vue_devtools_get_related` Find related APIs, concepts, and documentation pages for a given API or topic. | Parameter | Type | Default | Description | |---|---|---|---| | `name` | `string` | | API name or concept to explore | ## Resources | URI | Description | |---|---| | `vue-devtools://topics` | Full table of contents | | `vue-devtools://pages/{path}` | Raw markdown of any doc page | | `vue-devtools://api/index` | Complete API entity index | | `vue-devtools://scopes` | All valid search scope values | ## Prompts | Prompt | Parameters | Description | |---|---|---| | `debug_vue_devtools_issue` | `symptom`, `code_snippet` (optional) | Systematic debugging workflow | | `compare_vue_devtools_apis` | `items` (comma-separated) | Side-by-side comparison | | `migrate_vue_devtools_pattern` | `from_pattern`, `to_pattern` | Migration guide (e.g. v6 to v7) | ## Benchmarks vs Context7 Evaluated on 50 Vue DevTools questions scored by an LLM judge (Gemini, temperature 0) across 5 dimensions on a 1-5 scale. ::: info Methodology Each question has a ground-truth answer with expected API names and documentation paths. Both providers receive the same question and return documentation context. The judge scores the retrieved context on relevance, completeness, correctness, API coverage, and conciseness. See the `eval/` directory in the repository for the full evaluation framework. ::: ### Overall Scores | Metric | Vue Docs MCP | Context7 | |---|---|---| | Relevance | **4.82** | 3.18 | | Completeness | **4.66** | 2.98 | | Correctness | **4.70** | 3.10 | | API Coverage | **3.16** | 2.68 | | Conciseness | 4.50 | **4.68** | | **Composite** | **4.37** | **3.32** | ### Retrieval and Cost | Metric | Vue Docs MCP | Context7 | |---|---|---| | Path Recall | **99.0%** | 62.0% | | API Recall | **100%** | 100% | | Avg Response Tokens | 2,018 | 840 | | Avg Latency | **0.70s** | 1.53s | | Cost per Query (user-facing) | **Free** | $0.002 | ### Notes on Fairness * Context7 is a general-purpose service covering 9000+ libraries. Vue Docs MCP is purpose-built for the Vue ecosystem. * Context7 has limited coverage for Vue DevTools (37 code snippets), which significantly affects its scores. * The evaluation framework is open source in the `eval/` directory. Run `make eval-compare` to reproduce. --- --- url: /frameworks/vue-flow.md --- # Vue Flow 4.82 / 5 composite score · 95.0% API recall · 50 questions evaluated Vue Docs MCP provides deep access to the official [Vue Flow documentation](https://vueflow.dev), covering the node-based diagram library: the `` container, the `` connection point, the addon packages (`Background`, `Controls`, `MiniMap`, `NodeToolbar`, `NodeResizer`), the composables (`useVueFlow`, `useNode`, `useEdge`, `useHandle`, `useNodesData`, `useNodesInitialized`, `useKeyPress`, ...), the edge primitives + path helpers (`BaseEdge`, `BezierEdge`, `getBezierPath`, `getSmoothStepPath`), controlled-flow patterns, custom node/edge authoring, theming, and the worked examples (drag-and-drop, dagre/elk auto-layout, validation, helper lines, multi-step wizards). ## Activation Vue Flow is not enabled by default. Call `set_framework_preferences` to activate it: ``` set_framework_preferences(vue_flow=true) ``` ## Tools ### `vue_flow_docs_search` Semantic search over Vue Flow documentation. Uses the standard 6-step retrieval pipeline: embed query, hybrid search (dense + BM25), resolve HyPE hits, expand cross-references, rerank, and reconstruct into readable markdown. | Parameter | Type | Default | Description | |---|---|---|---| | `query` | `string` | | Developer question or topic (max 2000 chars) | | `scope` | `string` | `"all"` | Documentation section to search within | | `max_results` | `integer` | `3` | Number of sections to return (1-20) | **Scope values:** `all`, `guide`, `examples` ### `vue_flow_api_lookup` Fast exact-match API reference lookup with fuzzy fallback. Returns type signatures, descriptions, and usage examples directly from the documentation. | Parameter | Type | Default | Description | |---|---|---|---| | `api_name` | `string` | | API name to look up (e.g. `VueFlow`, `useVueFlow`, `Handle`, `BaseEdge`) | ### `vue_flow_get_related` Find related APIs, concepts, and documentation pages for a given API or topic. | Parameter | Type | Default | Description | |---|---|---|---| | `topic` | `string` | | API name or concept to explore | ## Resources | URI | Description | |---|---| | `vue-flow://topics` | Full table of contents | | `vue-flow://topics/{section}` | TOC for a specific section (e.g. `vue-flow://topics/guide`) | | `vue-flow://pages/{path}` | Raw markdown of any doc page (e.g. `vue-flow://pages/guide/node`) | | `vue-flow://api/index` | Complete API entity index | | `vue-flow://api/entities/{name}` | Details for a specific API (e.g. `vue-flow://api/entities/useVueFlow`) | | `vue-flow://scopes` | All valid search scope values | ## Prompts | Prompt | Parameters | Description | |---|---|---| | `debug_vue_flow_issue` | `symptom`, `code_snippet` (optional) | Systematic debugging workflow | | `compare_vue_flow_apis` | `items` (comma-separated) | Side-by-side comparison (e.g. `BezierEdge, SmoothStepEdge, StraightEdge`) | | `migrate_vue_flow_pattern` | `from_pattern`, `to_pattern` | Migration guide between patterns | ## Coverage | Area | What's indexed | |---|---| | Core | `` container, `` connection point, `` overlay | | Addon components | ``, ``, ``, ``, ``, ``, ``, `` | | Edges | ``, ``, ``, ``, ``, `` and the path helpers `getBezierPath`, `getSimpleBezierPath`, `getSmoothStepPath`, `getStraightPath`, `getEdgeCenter`, `getMarkerEnd` | | Composables | `useVueFlow`, `useNode`, `useEdge`, `useHandle`, `useNodeId`, `useConnection`, `useHandleConnections`, `useNodeConnections`, `useNodesData`, `useEdgesData`, `useNodesInitialized`, `useKeyPress`, `useZoomPanHelper`, `useGetPointerPosition` | | Controlled flow | `useNodesState`, `useEdgesState`, `applyNodeChanges`, `applyEdgeChanges` | | Errors / enums | `VueFlowError`, `ErrorCode`, `isErrorOfType`, `ConnectionMode`, `ConnectionLineType`, `Position`, `MarkerType`, `PanelPosition`, `BackgroundVariant` | | Examples | drag-and-drop, dagre/ELK auto-layout (simple + animated), connection validation, connection radius, custom connection line, edge markers, loopback, updatable edges, helper lines, multi-step interaction, hidden nodes, confirm-on-delete | | Concepts | Theming via CSS custom properties, save/restore via `FlowExportObject`, multi-instance via `id` scoping, viewport configuration, troubleshooting | ## Benchmarks vs Context7 Evaluated on 49 Vue Flow questions scored by an LLM judge (Gemini, temperature 0) across 5 dimensions on a 1-5 scale. ::: info Methodology Each question has a ground-truth answer with expected API names and documentation paths. Both providers receive the same question and return documentation context. The judge scores the retrieved context on relevance, completeness, correctness, API coverage, and conciseness. See the `eval/` directory in the repository for the full evaluation framework. ::: ### Overall Scores | Metric | Vue Docs MCP | Context7 | |---|---|---| | Relevance | 4.92 | 4.92 | | Completeness | **4.66** | 4.62 | | Correctness | **4.82** | 4.76 | | API Coverage | **4.74** | 4.62 | | Conciseness | **4.96** | 4.76 | | **Composite** | **4.82** | 4.74 | ### Retrieval and Cost | Metric | Vue Docs MCP | Context7 | |---|---|---| | Path Recall | **98.0%** | 94.0% | | API Recall | **95.0%** | 92.0% | | Avg Response Tokens | 3,752 | **1,112** | | Avg Latency | **0.83s** | 1.73s | | P95 Latency | **1.29s** | 2.15s | | Cost per Query (user-facing) | **Free** | $0.002 | ### Notes on Fairness * Context7 is a general-purpose service covering 9000+ libraries. Vue Docs MCP is purpose-built for the Vue ecosystem. * Vue Flow's API reference is generated by TypeDoc into `docs/src/typedocs/` at build time; we skip running TypeDoc during ingestion (it requires the full pnpm install of the docs workspace plus the typedoc-plugin-markdown chain). The seed entity dictionary covers the public surface from each `@vue-flow/*` package's `index.ts`. Both providers face the same prose-only source for the conceptual guide pages. * The evaluation framework is open source in the `eval/` directory. Run `make eval-compare` to reproduce. --- --- url: /frameworks/vue-router.md --- # Vue Router 4.78 / 5 composite score · 88.8% API recall · 49 questions evaluated Vue Docs MCP provides deep access to the official [Vue Router documentation](https://router.vuejs.org), covering route configuration, navigation guards, dynamic routing, lazy loading, data loaders, file-based routing, and the full API reference. ## Activation Vue Router is not enabled by default. Activate it with: ``` set_framework_preferences(vue_router=true) ``` ## Tools ### `vue_router_docs_search` Semantic search over Vue Router documentation. Covers guide pages, data loaders, file-based routing, migration guides, and API reference. | Parameter | Type | Default | Description | |---|---|---|---| | `query` | `string` | | Developer question or topic (max 2000 chars) | | `scope` | `string` | `"all"` | Documentation section to search within | | `max_results` | `integer` | `3` | Number of sections to return (1-20) | **Scope values:** `all`, `guide`, `guide/essentials`, `guide/advanced`, `guide/migration`, `data-loaders`, `file-based-routing` ### `vue_router_api_lookup` Fast exact-match API reference lookup for Vue Router APIs. | Parameter | Type | Default | Description | |---|---|---|---| | `name` | `string` | | API name to look up (e.g. `useRouter`, `createRouter`, `beforeEach`) | **Example API names:** `useRouter`, `useRoute`, `useLink`, `createRouter`, `createWebHistory`, `createWebHashHistory`, `createMemoryHistory`, `RouterLink`, `RouterView`, `beforeEach`, `beforeResolve`, `afterEach`, `onBeforeRouteLeave`, `onBeforeRouteUpdate`, `scrollBehavior` ### `vue_router_get_related` Find related APIs, concepts, and documentation pages for a given Vue Router API or topic. | Parameter | Type | Default | Description | |---|---|---|---| | `name` | `string` | | API name or concept to explore | ## Resources | URI | Description | |---|---| | `vue-router://topics` | Full table of contents | | `vue-router://topics/{section}` | TOC for a specific section (e.g. `vue-router://topics/guide/advanced`) | | `vue-router://pages/{path}` | Raw markdown of any doc page (e.g. `vue-router://pages/guide/essentials/navigation`) | | `vue-router://api/index` | Complete API entity index grouped by type | | `vue-router://api/entities/{name}` | Details for a specific API (e.g. `vue-router://api/entities/useRouter`) | | `vue-router://scopes` | All valid search scope values | ## Prompts | Prompt | Parameters | Description | |---|---|---| | `debug_vue_router_issue` | `symptom`, `code_snippet` (optional) | Systematic debugging for routing issues: navigation failures, guard problems, params not updating | | `compare_vue_router_apis` | `items` (comma-separated) | Side-by-side comparison (e.g. `router.push, router.replace` or `beforeEach, beforeEnter`) | | `migrate_vue_router_pattern` | `from_pattern`, `to_pattern` | Migration guide (e.g. Vue Router 3 to 4, Options API guards to Composition API) | ## Benchmarks vs Context7 Evaluated on 49 Vue Router questions scored by an LLM judge (Gemini, temperature 0) across 5 dimensions on a 1-5 scale. ### Overall Scores | Metric | Vue Docs MCP | Context7 | |---|---|---| | Relevance | **4.94** | 3.53 | | Completeness | **4.78** | 3.04 | | Correctness | **4.86** | 3.18 | | API Coverage | **4.43** | 2.33 | | Conciseness | 4.92 | 4.59 | | **Composite** | **4.78** | **3.33** | ### Retrieval and Cost | Metric | Vue Docs MCP | Context7 | |---|---|---| | Path Recall | **95.9%** | 42.9% | | API Recall | **88.8%** | 34.4% | | Avg Latency | 2.76s | **1.83s** | | Cost per Query (user-facing) | **Free** | $0.002 | ### Notes * Context7 performs notably better on Vue Router (3.33 composite) than on Vue.js core (2.41), suggesting their Vue Router documentation coverage is stronger. * Our API recall (88.8%) is slightly lower than Vue.js (98.7%) because Vue Router's TypeDoc-generated API docs are not yet included in ingestion (they require a build step). This will improve once TypeDoc generation is integrated. * The evaluation framework is open source in the `eval/` directory. --- --- url: /frameworks/vue.md --- # Vue.js 4.82 / 5 composite score · 98.7% API recall · 173 questions evaluated Vue Docs MCP provides deep access to the official [Vue.js documentation](https://vuejs.org), covering the core framework, Composition API, Options API, built-in components, directives, and the full API reference. ## Activation Vue.js is enabled by default. No action needed. ## Tools ### `vue_docs_search` Semantic search over Vue.js documentation. Uses a 6-step pipeline: embed query, hybrid search (dense + BM25), resolve HyPE hits, expand cross-references, rerank, and reconstruct into readable markdown. | Parameter | Type | Default | Description | |---|---|---|---| | `query` | `string` | | Developer question or topic (max 2000 chars) | | `scope` | `string` | `"all"` | Documentation section to search within | | `max_results` | `integer` | `3` | Number of sections to return (1-20) | **Scope values:** `all`, `guide`, `guide/essentials`, `guide/components`, `guide/reusability`, `guide/built-ins`, `guide/scaling-up`, `guide/best-practices`, `guide/typescript`, `guide/extras`, `api`, `tutorial`, `examples`, `glossary`, `style-guide` ### `vue_api_lookup` Fast exact-match API reference lookup with fuzzy fallback. Returns type signatures, descriptions, and usage examples directly from the API reference. | Parameter | Type | Default | Description | |---|---|---|---| | `name` | `string` | | API name to look up (e.g. `ref`, `onMounted`, `v-model`) | ### `vue_get_related` Find related APIs, concepts, and documentation pages for a given API or topic. | Parameter | Type | Default | Description | |---|---|---|---| | `name` | `string` | | API name or concept to explore | ## Resources | URI | Description | |---|---| | `vue://topics` | Full table of contents | | `vue://topics/{section}` | TOC for a specific section (e.g. `vue://topics/guide/essentials`) | | `vue://pages/{path}` | Raw markdown of any doc page (e.g. `vue://pages/guide/essentials/reactivity-fundamentals`) | | `vue://api/index` | Complete API entity index grouped by type | | `vue://api/entities/{name}` | Details for a specific API (e.g. `vue://api/entities/ref`) | | `vue://scopes` | All valid search scope values | ## Prompts | Prompt | Parameters | Description | |---|---|---| | `debug_vue_issue` | `symptom`, `code_snippet` (optional) | Systematic debugging workflow: identifies the concept, searches docs, looks up APIs, and provides a fix | | `compare_vue_apis` | `items` (comma-separated) | Side-by-side comparison of APIs or patterns (e.g. `ref, reactive` or `v-if, v-show`) | | `migrate_vue_pattern` | `from_pattern`, `to_pattern` | Migration guide between patterns (e.g. Options API to Composition API) | ## Benchmarks vs Context7 Evaluated on 173 Vue.js questions scored by an LLM judge (Gemini, temperature 0) across 5 dimensions on a 1-5 scale. ::: info Methodology Each question has a ground-truth answer with expected API names and documentation paths. Both providers receive the same question and return documentation context. The judge scores the retrieved context on relevance, completeness, correctness, API coverage, and conciseness. See the `eval/` directory in the repository for the full evaluation framework. ::: ### Overall Scores | Metric | Vue Docs MCP | Context7 | |---|---|---| | Relevance | **4.93** | 2.09 | | Completeness | **4.83** | 1.67 | | Correctness | **4.87** | 1.86 | | API Coverage | **4.53** | 1.90 | | Conciseness | 4.95 | 4.55 | | **Composite** | **4.82** | **2.41** | ### Retrieval and Cost | Metric | Vue Docs MCP | Context7 | |---|---|---| | API Recall | **98.7%** | 53.1% | | Avg Response Tokens | 4,213 | 1,739 | | Avg Latency | **1.44s** | 1.72s | | Cost per Query (user-facing) | **Free** | $0.002 | ### Pass Rates Percentage of questions where **all** judge dimensions scored at or above the threshold: | Threshold | Vue Docs MCP | Context7 | |---|---|---| | All dimensions >= 5 | **83.8%** | 6.4% | | All dimensions >= 4 | **86.7%** | 9.2% | | All dimensions >= 3 | **88.4%** | 13.3% | | All dimensions >= 2 | **90.8%** | 23.7% | ### Notes on Fairness * Context7 is a general-purpose service covering 9000+ libraries. Vue Docs MCP is purpose-built for the Vue ecosystem. * Context7 sometimes returns Vue 2 content for Vue 3 questions, which affects its scores. * The evaluation framework is open source in the `eval/` directory. Run `make eval-compare` to reproduce. --- --- url: /frameworks/vueuse.md --- # VueUse 4.89 / 5 composite score · 100% API recall · 50 questions evaluated Vue Docs MCP provides deep access to the official [VueUse documentation](https://vueuse.org), covering 200+ composable utility functions for the Vue Composition API, including state management, browser APIs, sensors, network, animation, and more. ## Activation VueUse is not enabled by default. Activate it with: ``` set_framework_preferences(vueuse=true) ``` ## Tools ### `vueuse_docs_search` Semantic search over VueUse documentation. Covers guide pages and all composable function docs across `@vueuse/core`, `@vueuse/shared`, `@vueuse/integrations`, `@vueuse/math`, and more. | Parameter | Type | Default | Description | |---|---|---|---| | `query` | `string` | | Developer question or topic (max 2000 chars) | | `scope` | `string` | `"all"` | Documentation section to search within | | `max_results` | `integer` | `3` | Number of sections to return (1-20) | **Scope values:** `all`, `guide`, `core`, `shared`, `integrations`, `math`, `router` ### `vueuse_api_lookup` Fast exact-match API reference lookup for VueUse composables. | Parameter | Type | Default | Description | |---|---|---|---| | `name` | `string` | | API name to look up (e.g. `useMouse`, `useStorage`, `useFetch`) | **Example API names:** `useMouse`, `useStorage`, `useLocalStorage`, `useFetch`, `useDark`, `useColorMode`, `useBreakpoints`, `useClipboard`, `useDebounceFn`, `useThrottleFn`, `useIntersectionObserver`, `useEventListener`, `useMagicKeys`, `useVModel`, `useWindowSize`, `useFullscreen`, `useWebSocket`, `useAsyncState`, `useRefHistory` ### `vueuse_get_related` Find related APIs, concepts, and documentation pages for a given VueUse composable or topic. | Parameter | Type | Default | Description | |---|---|---|---| | `name` | `string` | | API name or concept to explore | ## Resources | URI | Description | |---|---| | `vueuse://topics` | Full table of contents | | `vueuse://topics/{section}` | TOC for a specific section (e.g. `vueuse://topics/core`) | | `vueuse://pages/{path}` | Raw markdown of any doc page (e.g. `vueuse://pages/core/useMouse/index`) | | `vueuse://api/index` | Complete API entity index grouped by type | | `vueuse://api/entities/{name}` | Details for a specific API (e.g. `vueuse://api/entities/useMouse`) | | `vueuse://scopes` | All valid search scope values | ## Prompts | Prompt | Parameters | Description | |---|---|---| | `debug_vueuse_issue` | `symptom`, `code_snippet` (optional) | Systematic debugging for composable issues: reactivity problems, SSR compatibility, lifecycle timing | | `compare_vueuse_apis` | `items` (comma-separated) | Side-by-side comparison (e.g. `useStorage, useLocalStorage` or `useDebounceFn, useThrottleFn`) | | `migrate_vueuse_pattern` | `from_pattern`, `to_pattern` | Migration guide between patterns or VueUse versions | ## Benchmarks Evaluated on 50 VueUse questions scored by an LLM judge (Gemini, temperature 0) across 5 dimensions on a 1-5 scale. ### Overall Scores | Metric | Vue Docs MCP | Context7 | |---|---|---| | Relevance | **5.00** | 4.04 | | Completeness | **4.88** | 3.54 | | Correctness | **4.94** | 3.68 | | API Coverage | **4.86** | 4.10 | | Conciseness | 4.78 | 4.82 | | **Composite** | **4.89** | **4.04** | ### Retrieval and Cost | Metric | Vue Docs MCP | Context7 | |---|---|---| | Path Recall | **97.0%** | 85.0% | | API Recall | **100.0%** | 92.0% | | Avg Latency | **0.78s** | 1.84s | | Cost per Query (user-facing) | **Free** | $0.002 | ### Notes * VueUse achieves the highest composite score (4.89) across all three supported frameworks, with perfect 100% API recall. * Context7 performs notably better on VueUse (4.04 composite) than on Vue.js (2.41) or Vue Router (3.33), likely because VueUse's per-function documentation structure is clean and self-contained. * The evaluation framework is open source in the `eval/` directory. --- --- url: /guide/what-is-vue-mcp.md --- # What is Vue Docs MCP? Vue Docs MCP is an [MCP server](https://modelcontextprotocol.io/) that gives AI assistants deep, structured access to the [Vue ecosystem documentation](https://vuejs.org/), including Vue.js, Vue Router, and more frameworks as they are added. Instead of pasting docs into prompts or hoping the LLM's training data is current, you connect this server and let your AI assistant search, browse, and retrieve documentation on demand. ## The Problem LLMs have a knowledge cutoff. The Vue ecosystem evolves. When you ask your AI assistant about Vue: * It might reference outdated APIs or patterns * It can't see recent additions or changes to the docs * It hallucinates plausible-sounding but incorrect details * It has no way to cite or verify its answers ## The Solution Vue Docs MCP indexes the full documentation for each supported framework and exposes it through the Model Context Protocol. Your AI assistant can: * **Search** for any topic with semantic understanding * **Look up** specific APIs instantly (`ref`, `computed`, `useRouter`, etc.) * **Browse** the documentation structure and read raw pages * **Discover** related APIs, concepts, and patterns * **Follow** guided workflows for debugging, comparison, and migration All results include source references so you can verify them. ## Supported Frameworks | Framework | Status | Description | |---|---|---| | [Vue.js](https://vuejs.org) | :white\_check\_mark: Available | Core framework: reactivity, components, Composition API | | [Vue Router](https://router.vuejs.org) | :white\_check\_mark: Available | Official router: navigation guards, dynamic routes | | [VueUse](https://vueuse.org) | :white\_check\_mark: Available | 200+ composable utility functions | | [Vite](https://vite.dev) | :white\_check\_mark: Available | Next-generation frontend build tool | | [Vitest](https://vitest.dev) | :white\_check\_mark: Available | Vite-native testing framework | | [Nuxt](https://nuxt.com) | :white\_check\_mark: Available | Full-stack Vue framework | | [Pinia](https://pinia.vuejs.org) | :white\_check\_mark: Available | Official state management | | [Vue DevTools](https://devtools.vuejs.org) | :white\_check\_mark: Available | Debugging and inspection tools | | [VitePress](https://vitepress.dev) | :white\_check\_mark: Available | Vite-powered static site generator | | [Pinia Colada](https://pinia-colada.esm.dev) | :white\_check\_mark: Available | Smart data-fetching layer for Pinia | | [VeeValidate](https://vee-validate.logaretm.com/v4/) | :white\_check\_mark: Available | Form validation library | | [FormKit](https://formkit.com) | :white\_check\_mark: Available | Form framework with schema-driven inputs | | [shadcn-vue](https://www.shadcn-vue.com) | :white\_check\_mark: Available | Copy-paste components on reka-ui primitives | | [Vue Flow](https://vueflow.dev) | :white\_check\_mark: Available | Node-based interactive diagrams and graphs | | 6 more frameworks | :calendar: Planned | | See the full list on the [Supported Frameworks](/frameworks/) page. Each framework gets its own tools, resources, prompts, and benchmarks. ## How It Works The server combines multiple retrieval strategies for high-quality results: 1. **Structure-aware chunking.** Docs are parsed respecting their heading hierarchy. Code examples stay paired with their explanations. 2. **Hybrid search.** Every query runs dense semantic search (Jina embeddings) and BM25 keyword search simultaneously. 3. **Smart entity detection.** API names are detected deterministically with typo tolerance, synonym lookup, and bigram matching. 4. **Reranking.** Candidates are reranked by Jina for precision. 5. **Readable reconstruction.** Results are reassembled in documentation reading order, preserving the natural flow of the docs. ## Using the Hosted Server The easiest way to use Vue Docs MCP is through the free hosted server: **`mcp.vue-mcp.org`** No API keys, no setup, no infrastructure. See [Getting Started](/guide/getting-started) to connect it to your AI client. ## Self-Hosting If you prefer to run your own instance, see the [Self-Hosting guide](/guide/self-hosting). You'll need API keys for Jina AI, Google Gemini, and a Qdrant instance. --- --- url: /clients/windsurf.md --- # Windsurf Connect Vue Docs MCP to [Windsurf](https://windsurf.com/). ## Setup Add to your Windsurf MCP configuration file. See [Windsurf MCP docs](https://docs.windsurf.com/windsurf/cascade/mcp) for more info. ```json { "mcpServers": { "vue-docs": { "serverUrl": "https://mcp.vue-mcp.org/mcp" } } } ``` ::: warning Note Windsurf uses `serverUrl` instead of `url`. This differs from most other clients. ::: ## Verify After saving the config, check that the Vue Docs tools appear in the Cascade tools list. ## Usage Ask Windsurf about Vue in Cascade: * "How does `v-model` work on custom components?" * "What's the difference between `ref` and `reactive`?" * "Show me Vue transition animations" ## Self-Hosted Server For a [self-hosted instance](/guide/self-hosting): ```json { "mcpServers": { "vue-docs": { "command": "uv", "args": ["run", "--directory", "/path/to/vue-mcp", "vue-docs-server"] } } } ``` --- --- url: /clients/zed.md --- # Zed Connect Vue Docs MCP to [Zed](https://zed.dev/). ## Setup Add to your Zed `settings.json`. See the [Zed Context Server docs](https://zed.dev/docs/assistant/context-servers) for more info. ```json { "context_servers": { "vue-docs": { "source": "custom", "settings": { "url": "https://mcp.vue-mcp.org/mcp" } } } } ``` ::: tip Zed uses `context_servers` instead of `mcpServers`. ::: ## Verify After saving, the Vue Docs tools should be available in Zed's assistant panel. ## Usage Ask the assistant about Vue: * "How does reactivity work in Vue 3?" * "Show me the `Teleport` component API" * "Help me with component `props` validation"