|
| 1 | +--- |
| 2 | +title: MCP Server |
| 3 | +description: Connect your documentation to AI tools with a native MCP server. |
| 4 | +navigation: |
| 5 | + icon: i-lucide-cpu |
| 6 | +--- |
| 7 | + |
| 8 | +## About MCP Servers |
| 9 | + |
| 10 | +The [Model Context Protocol (MCP)](https://modelcontextprotocol.io/) is an open protocol that creates standardized connections between AI applications and external services, like documentation. |
| 11 | + |
| 12 | +This documentation template includes a built-in MCP server, preparing your content for the broader AI ecosystem where any MCP client (like Claude, Cursor, VS Code, and others) can connect to your documentation. |
| 13 | + |
| 14 | +### How MCP Servers Work |
| 15 | + |
| 16 | +When an MCP server is connected to an AI tool, the LLM can decide to use your documentation tools during response generation: |
| 17 | + |
| 18 | +- The LLM can **proactively search your documentation** while generating a response, not just when explicitly asked. |
| 19 | +- The LLM determines **when to use tools** based on the context of the conversation and the relevance of your documentation. |
| 20 | +- Each tool call happens **during the generation process**, allowing the LLM to incorporate real-time information from your documentation into its response. |
| 21 | + |
| 22 | +For example, if a user asks a coding question and the LLM determines that your documentation is relevant, it can search your docs and include that information in the response without the user explicitly asking about your documentation. |
| 23 | + |
| 24 | +## Accessing Your MCP Server |
| 25 | + |
| 26 | +Your MCP server is automatically available at the `/mcp` path of your documentation URL. |
| 27 | + |
| 28 | +::prose-note |
| 29 | +For example, if your documentation is hosted at `https://docs.example.com`, your MCP server URL is `https://docs.example.com/mcp`. |
| 30 | +:: |
| 31 | + |
| 32 | +## Disable the MCP Server |
| 33 | + |
| 34 | +If you want to disable the MCP server, you can do so in your `nuxt.config.ts`: |
| 35 | + |
| 36 | +```ts [nuxt.config.ts] |
| 37 | +export default defineNuxtConfig({ |
| 38 | + mcp: { |
| 39 | + enabled: false, |
| 40 | + }, |
| 41 | +}) |
| 42 | +``` |
| 43 | + |
| 44 | +## Built-in Tools |
| 45 | + |
| 46 | +This template provides two tools out of the box that allow any LLM to discover and read your documentation: |
| 47 | + |
| 48 | +### `list-pages` |
| 49 | + |
| 50 | +Lists all documentation pages with their titles, paths, and descriptions. AI assistants should call this first to discover available content. |
| 51 | + |
| 52 | +| Parameter | Type | Description | |
| 53 | +|-----------|------|-------------| |
| 54 | +| `locale` | string (optional) | Filter pages by locale | |
| 55 | + |
| 56 | +### `get-page` |
| 57 | + |
| 58 | +Retrieves the full markdown content of a specific documentation page. |
| 59 | + |
| 60 | +| Parameter | Type | Description | |
| 61 | +|-----------|------|-------------| |
| 62 | +| `path` | string (required) | The page path (e.g., `/en/getting-started/installation`) | |
| 63 | + |
| 64 | +## Setup |
| 65 | + |
| 66 | +The MCP server uses HTTP transport and can be installed in different AI assistants. |
| 67 | + |
| 68 | +### Claude Code |
| 69 | + |
| 70 | +Add the server using the CLI command: |
| 71 | + |
| 72 | +```bash |
| 73 | +claude mcp add --transport http my-docs https://docs.example.com/mcp |
| 74 | +``` |
| 75 | + |
| 76 | +### Cursor |
| 77 | + |
| 78 | +::install-button |
| 79 | +--- |
| 80 | +url: "https://docs.example.com/mcp" |
| 81 | +ide: "cursor" |
| 82 | +label: "Install in Cursor" |
| 83 | +--- |
| 84 | +:: |
| 85 | + |
| 86 | +Or manually create/update `.cursor/mcp.json` in your project root: |
| 87 | + |
| 88 | +```json [.cursor/mcp.json] |
| 89 | +{ |
| 90 | + "mcpServers": { |
| 91 | + "my-docs": { |
| 92 | + "type": "http", |
| 93 | + "url": "https://docs.example.com/mcp" |
| 94 | + } |
| 95 | + } |
| 96 | +} |
| 97 | +``` |
| 98 | + |
| 99 | +### Visual Studio Code |
| 100 | + |
| 101 | +Ensure you have GitHub Copilot and GitHub Copilot Chat extensions installed. |
| 102 | + |
| 103 | +::install-button |
| 104 | +--- |
| 105 | +url: "https://docs.example.com/mcp" |
| 106 | +ide: "vscode" |
| 107 | +label: "Install in VS Code" |
| 108 | +--- |
| 109 | +:: |
| 110 | + |
| 111 | +Or manually create/update the `.vscode/mcp.json` file: |
| 112 | + |
| 113 | +```json [.vscode/mcp.json] |
| 114 | +{ |
| 115 | + "servers": { |
| 116 | + "my-docs": { |
| 117 | + "type": "http", |
| 118 | + "url": "https://docs.example.com/mcp" |
| 119 | + } |
| 120 | + } |
| 121 | +} |
| 122 | +``` |
| 123 | + |
| 124 | +### Windsurf |
| 125 | + |
| 126 | +1. Open Windsurf and navigate to **Settings** > **Windsurf Settings** > **Cascade** |
| 127 | +2. Click the **Manage MCPs** button, then select the **View raw config** option |
| 128 | +3. Add the following configuration: |
| 129 | + |
| 130 | +```json [.codeium/windsurf/mcp_config.json] |
| 131 | +{ |
| 132 | + "mcpServers": { |
| 133 | + "my-docs": { |
| 134 | + "type": "http", |
| 135 | + "url": "https://docs.example.com/mcp" |
| 136 | + } |
| 137 | + } |
| 138 | +} |
| 139 | +``` |
| 140 | + |
| 141 | +### Zed |
| 142 | + |
| 143 | +1. Open Zed and go to **Settings** > **Open Settings** |
| 144 | +2. Navigate to the JSON settings file |
| 145 | +3. Add the following context server configuration: |
| 146 | + |
| 147 | +```json [.config/zed/settings.json] |
| 148 | +{ |
| 149 | + "context_servers": { |
| 150 | + "my-docs": { |
| 151 | + "source": "custom", |
| 152 | + "command": "npx", |
| 153 | + "args": ["mcp-remote", "https://docs.example.com/mcp"], |
| 154 | + "env": {} |
| 155 | + } |
| 156 | + } |
| 157 | +} |
| 158 | +``` |
| 159 | + |
| 160 | +## Customization |
| 161 | + |
| 162 | +Since this template uses the [`@nuxtjs/mcp-toolkit`](https://mcp-toolkit.nuxt.dev/) module, you can extend the MCP server with custom tools, resources, prompts, and handlers. |
| 163 | + |
| 164 | +### Adding Custom Tools |
| 165 | + |
| 166 | +Create new tools in the `server/mcp/tools/` directory: |
| 167 | + |
| 168 | +```ts [server/mcp/tools/search.ts] |
| 169 | +import { z } from 'zod' |
| 170 | + |
| 171 | +export default defineMcpTool({ |
| 172 | + description: 'Search documentation by keyword', |
| 173 | + inputSchema: { |
| 174 | + query: z.string().describe('The search query'), |
| 175 | + }, |
| 176 | + handler: async ({ query }) => { |
| 177 | + const results = await searchDocs(query) |
| 178 | + return { |
| 179 | + content: [{ type: 'text', text: JSON.stringify(results) }], |
| 180 | + } |
| 181 | + }, |
| 182 | +}) |
| 183 | +``` |
| 184 | + |
| 185 | +### Adding Resources |
| 186 | + |
| 187 | +Expose files or data sources as MCP resources in the `server/mcp/resources/` directory. The simplest way is using the `file` property: |
| 188 | + |
| 189 | +```ts [server/mcp/resources/changelog.ts] |
| 190 | +export default defineMcpResource({ |
| 191 | + file: 'CHANGELOG.md', |
| 192 | + metadata: { |
| 193 | + description: 'Project changelog', |
| 194 | + }, |
| 195 | +}) |
| 196 | +``` |
| 197 | + |
| 198 | +This automatically handles URI generation, MIME type detection, and file reading. |
| 199 | + |
| 200 | +### Adding Prompts |
| 201 | + |
| 202 | +Create reusable prompts for AI assistants in the `server/mcp/prompts/` directory: |
| 203 | + |
| 204 | +```ts [server/mcp/prompts/migration-help.ts] |
| 205 | +import { z } from 'zod' |
| 206 | + |
| 207 | +export default defineMcpPrompt({ |
| 208 | + description: 'Get help with migrating between versions', |
| 209 | + inputSchema: { |
| 210 | + fromVersion: z.string().describe('Current version'), |
| 211 | + toVersion: z.string().describe('Target version'), |
| 212 | + }, |
| 213 | + handler: async ({ fromVersion, toVersion }) => { |
| 214 | + return { |
| 215 | + messages: [{ |
| 216 | + role: 'user', |
| 217 | + content: { |
| 218 | + type: 'text', |
| 219 | + text: `Help me migrate from version ${fromVersion} to ${toVersion}. What are the breaking changes and steps I need to follow?`, |
| 220 | + }, |
| 221 | + }], |
| 222 | + } |
| 223 | + }, |
| 224 | +}) |
| 225 | +``` |
| 226 | + |
| 227 | +### Adding Custom Handlers |
| 228 | + |
| 229 | +Handlers allow you to create separate MCP endpoints with their own tools, resources, and prompts. This is useful for exposing different capabilities at different routes. |
| 230 | + |
| 231 | +For example, you could have: |
| 232 | +- `/mcp` - Main documentation MCP server |
| 233 | +- `/mcp/migration` - Dedicated MCP server for migration assistance |
| 234 | + |
| 235 | +```ts [server/mcp/migration.ts] |
| 236 | +import { z } from 'zod' |
| 237 | + |
| 238 | +const migrationTool = defineMcpTool({ |
| 239 | + name: 'migrate-v3-to-v4', |
| 240 | + description: 'Migrate code from version 3 to version 4', |
| 241 | + inputSchema: { |
| 242 | + code: z.string().describe('The code to migrate'), |
| 243 | + }, |
| 244 | + handler: async ({ code }) => { |
| 245 | + // Migration logic |
| 246 | + return { |
| 247 | + content: [{ type: 'text', text: migratedCode }], |
| 248 | + } |
| 249 | + }, |
| 250 | +}) |
| 251 | + |
| 252 | +export default defineMcpHandler({ |
| 253 | + route: '/mcp/migration', |
| 254 | + name: 'Migration Assistant', |
| 255 | + version: '1.0.0', |
| 256 | + tools: [migrationTool], |
| 257 | +}) |
| 258 | +``` |
| 259 | + |
| 260 | +### Overwriting Built-in Tools |
| 261 | + |
| 262 | +You can override the default `list-pages` or `get-page` tools by creating a tool with the same name in your project: |
| 263 | + |
| 264 | +```ts [server/mcp/tools/list-pages.ts] |
| 265 | +import { z } from 'zod' |
| 266 | + |
| 267 | +export default defineMcpTool({ |
| 268 | + description: 'Custom list pages implementation', |
| 269 | + inputSchema: { |
| 270 | + locale: z.string().optional(), |
| 271 | + category: z.string().optional(), |
| 272 | + }, |
| 273 | + handler: async ({ locale, category }) => { |
| 274 | + const pages = await getCustomPageList(locale, category) |
| 275 | + return { |
| 276 | + content: [{ type: 'text', text: JSON.stringify(pages) }], |
| 277 | + } |
| 278 | + }, |
| 279 | +}) |
| 280 | +``` |
| 281 | + |
| 282 | +::tip{to="https://mcp-toolkit.nuxt.dev/"} |
| 283 | +Check the MCP Toolkit documentation for more information about tools, resources, prompts, handlers and advanced configuration. |
| 284 | +:: |
0 commit comments