MCP Server

View source

Every Movk Nuxt Docs instance includes a built-in Model Context Protocol server, exposed at the /mcp path. It supports mainstream AI tools such as Claude, Cursor, and VS Code, with built-in tools for documentation search and page retrieval, and can be extended with custom tools, resources, and prompts.

About the MCP Server

Every Movk Nuxt Docs instance includes a built-in Model Context Protocol (MCP) server that any MCP client (Claude, Cursor, VS Code, and others) can connect to.

What is MCP?The Model Context Protocol is an open protocol that enables standardized connections between AI applications and external services. Through MCP, AI assistants can proactively search documentation based on context.

When connected to an AI tool, the LLM can intelligently decide when it needs to access documentation tools based on the conversation context, giving you more accurate documentation references and technical support during development.

Accessing your MCP server

Your MCP server is automatically available at the /mcp path of your documentation URL.

For example, if your documentation is hosted at https://docs.example.com, your MCP server URL is https://docs.example.com/mcp.

Configuration options

Disabling the MCP server

Disable the MCP server in nuxt.config.ts:

nuxt.config.ts

export default defineNuxtConfig({
  mcp: {
    enabled: false
  }
})

Customizing the server name

nuxt.config.ts

export default defineNuxtConfig({
  mcp: {
    name: 'My Docs'
  }
})

Available resources

The Movk Nuxt Docs MCP server provides the following resources for discovery:

resource://docs/components: browse all available components and their categories
resource://docs/composables: browse all available composables and their categories
resource://docs/examples: browse all available code examples
resource://docs/documentation-pages: browse all available documentation pages

Available tools

The Movk Nuxt Docs MCP server provides the following tools, organized by category:

Search tools

search-composables: search composables by name or description. Lists all composables when no parameters are provided
search-icons: search for icons in Iconify collections (defaults to lucide). Returns icon names in the i-{prefix}-{name} format

Component tools

get_component: get component documentation and details. Supports a sections parameter (usage, examples, api, theme, changelog) to fetch only specific sections and reduce the response size
get_component_metadata: get a component's detailed metadata, including props, slots, and events (lightweight, without documentation content)

Documentation tools

search_documentation: search documentation pages by title, description, or section. Lists all pages when no parameters are provided. Use section to filter (e.g. "getting-started", "components")
get_documentation_page: get the content of a documentation page by its URL path. Supports a headings parameter to fetch only specific h2 sections (e.g. ["Usage", "API"]) and reduce the response size

Example tools

list_examples: list all available examples and code demos
get_example: get the implementation code and details of a specific example

Available prompts

The Movk Nuxt Docs MCP server provides the following guided prompts for common workflows:

find_component_for_usecase: recommend a suitable component for a specific use case
implement_component_with_props: generate a complete implementation example based on a component's documentation and metadata

In MCP clients that support prompts, you can invoke these prompts directly via / or similar.

Setup guides

The MCP server uses the HTTP transport protocol and can be installed in different AI assistants.

Claude Code

Make sure Claude Code is installed - visit the Anthropic documentation for installation instructions.

Add the server using the CLI command:

claude mcp add --transport http my-docs https://docs.example.com/mcp

Claude Desktop

Open Claude Desktop and go to "Settings" > "Developer"
Click "Edit Config", which opens your local Claude directory
Modify the claude_desktop_config.json file with your custom MCP server configuration:

claude_desktop_config.json

{
  "mcpServers": {
    "my-docs": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://docs.example.com/mcp"
      ]
    }
  }
}

Restart the Claude Desktop app

Cursor

Install MCP in Cursor

Alternatively, create or update .cursor/mcp.json in your project root:

.cursor/mcp.json

{
  "mcpServers": {
    "my-docs": {
      "type": "http",
      "url": "https://docs.example.com/mcp"
    }
  }
}

Visual Studio Code

Install the required extensions - make sure the GitHub Copilot and GitHub Copilot Chat extensions are installed.

Install MCP in VS Code

Alternatively, create or edit the mcp.json file in your project's .vscode folder:

.vscode/mcp.json

{
  "servers": {
    "my-docs": {
      "type": "http",
      "url": "https://docs.example.com/mcp"
    }
  }
}

ChatGPT

Custom connectors using MCP are available on ChatGPT Pro and Plus accounts on the web.

Enable developer mode: go to Settings → Connectors → Advanced settings → Developer mode
Open ChatGPT settings
In the Connectors tab, create a new connector:
- Name: My Docs
- MCP server URL: https://docs.example.com/mcp
- Authentication: None
Click Create

The My Docs connector will appear in the composer's "Developer mode" tools during a conversation.

Opencode

Create opencode.json in your project root:

opencode.json

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "my-docs": {
      "type": "remote",
      "url": "https://docs.example.com/mcp",
      "enabled": true
    }
  }
}

Usage examples

Once configured, you can ask your AI assistant questions like the following, and it will automatically use the MCP server to query the documentation:

"List all available components"
"Get the documentation for the Button component"
"Show only the usage examples for Button"
"What props does the Input component accept?"
"Find components related to forms"
"Search for arrow icons in the lucide icon set"
"Show the installation guide"
"List all examples"
"Get the SearchForm example code"

The AI assistant proactively searches the documentation while generating its responses, intelligently deciding when it needs to query tools based on the conversation context to provide accurate documentation references and technical support.

For component documentation, the AI can use the sections parameter (usage, examples, api, theme, changelog) to fetch only the relevant sections. For other pages, use the headings parameter to specify h2 headings (e.g. ["Usage", "API"]).

Custom extensions

You can extend the MCP server's capabilities by adding custom tools, resources, and prompts.

Custom tools

Create custom tool files in the server/mcp/tools/ directory:

server/mcp/tools/my-tool.ts

import { z } from 'zod'
import { queryCollection } from '@nuxt/content/server'

export default defineMcpTool({
  description: 'Search component documentation by keyword',
  annotations: {
    readOnlyHint: true,
    destructiveHint: false,
    idempotentHint: true,
    openWorldHint: false
  },
  inputSchema: {
    search: z.string().describe('Search keyword')
  },
  inputExamples: [
    { search: 'table' },
    { search: 'theme' }
  ],
  cache: '30m',
  async handler({ search }) {
    const event = useEvent()
    const searchLower = search.toLowerCase()

    const components = await queryCollection(event, 'docs')
      .where('path', 'LIKE', '%/components/%')
      .where('extension', '=', 'md')
      .select('title', 'description', 'path', 'category')
      .all()

    const results = components.filter(component =>
      component.title?.toLowerCase().includes(searchLower)
      || component.description?.toLowerCase().includes(searchLower)
    )

    return {
      components: results,
      total: results.length,
      search
    }
  }
})

Custom resources

Create discoverable resources in the server/mcp/resources/ directory:

server/mcp/resources/navigation.ts

import { queryCollection } from '@nuxt/content/server'

export default defineMcpResource({
  uri: 'resource://docs/navigation',
  description: 'The complete documentation navigation structure',
  cache: '1h',
  async handler(uri: URL) {
    const event = useEvent()

    const pages = await queryCollection(event, 'docs')
      .select('title', 'description', 'path', 'navigation')
      .all()

    const navigation = pages
      .filter(page => page.navigation !== false)
      .map(page => ({
        title: page.title,
        description: page.description,
        path: page.path
      }))

    return {
      contents: [{
        uri: uri.toString(),
        mimeType: 'application/json',
        text: JSON.stringify(navigation, null, 2)
      }]
    }
  }
})

The resource example matches this project's existing implementation: it explicitly declares uri, description, and handler, and the handler returns contents.

Custom prompts

Create reusable prompts in the server/mcp/prompts/ directory:

server/mcp/prompts/greeting.ts

import { z } from 'zod'
import { queryCollection } from '@nuxt/content/server'

export default defineMcpPrompt({
  description: 'Recommend suitable documentation pages based on a use case',
  inputSchema: {
    usecase: z.string().describe('The use case to solve')
  },
  async handler({ usecase }) {
    const event = useEvent()

    const pages = await queryCollection(event, 'docs')
      .select('title', 'description', 'path')
      .all()

    return {
      messages: [{
        role: 'user',
        content: {
          type: 'text',
          text: `Please recommend the most relevant documentation pages for this use case: "${usecase}".\n\nCandidate pages: ${JSON.stringify(pages, null, 2)}`
        }
      }],
    }
  }
})

Adding a custom handler

You can create custom handlers in the server/mcp/ directory:

server/mcp/migration.ts

import { z } from 'zod'

const migrationTool = defineMcpTool({
  description: 'Migrate legacy configuration snippets to the new format',
  annotations: {
    readOnlyHint: true,
    destructiveHint: false,
    idempotentHint: true,
    openWorldHint: false
  },
  inputSchema: {
    code: z.string().describe('The configuration code to migrate')
  },
  async handler({ code }) {
    const migrated = code
      .replace(/oldOption/g, 'newOption')
      .replace(/legacyTheme/g, 'theme')

    return {
      original: code,
      migrated
    }
  }
})

export default defineMcpHandler({
  name: 'migration',
  version: '0.1.0',
  route: '/mcp/migration',
  tools: [migrationTool],
  browserRedirect: '/',
})

Overriding a default tool

To override a built-in tool, simply create a file of the same name in the server/mcp/tools/ directory.

server/mcp/tools/search-documentation.ts

import { z } from 'zod'
import { queryCollection } from '@nuxt/content/server'

export default defineMcpTool({
  description: 'A custom documentation search implementation',
  annotations: {
    readOnlyHint: true,
    destructiveHint: false,
    idempotentHint: true,
    openWorldHint: false
  },
  inputSchema: {
    search: z.string().optional().describe('A search term in the title or description'),
    section: z.string().optional().describe('A documentation section, such as getting-started or components')
  },
  async handler({ search, section }) {
    const event = useEvent()
    let query = queryCollection(event, 'docs')
      .select('title', 'description', 'path')

    if (section) {
      query = query.where('path', 'LIKE', `/docs/${section}/%`)
    }

    const pages = await query.all()
    const searchLower = search?.toLowerCase()

    const results = pages.filter(page =>
      !searchLower
      || page.title?.toLowerCase().includes(searchLower)
      || page.description?.toLowerCase().includes(searchLower)
    )

    return {
      pages: results,
      total: results.length
    }
  }
})

For more information on tools, resources, prompts, handlers, and advanced configuration, see the Nuxt MCP Toolkit documentation.

Built-in AI chat assistant

Movk Nuxt Docs includes a built-in AI Chat module that integrates deeply with your docs through MCP tools, supporting streaming responses, code highlighting, multi-model switching, and a floating input. Learn how to configure models, customize providers, write a system prompt, and use useAIChat to control the chat state.

Agent Skills

Publish Agent Skills from your Movk Nuxt Docs site, following the Cloudflare Agent Skills Discovery RFC and deployed automatically via the /.well-known/skills/ endpoint. Users can install your skills into AI assistants such as Claude Code and Cursor with a single command.