Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 32 additions & 13 deletions docs/content/docs/1.getting-started/7.ai/1.mcp.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,33 +28,47 @@ The Nuxt UI MCP server provides the following tools organized by category:

### Search Tools

- **`search_components`**: Search components by name, description, or category. With no params, lists all components
- **`search_composables`**: Search composables by name or description. With no params, lists all composables
- **`search_icons`**: Search for icons across Iconify collections (defaults to `lucide`). Returns icon names in the `i-{prefix}-{name}` format used by Nuxt UI
- **`search-components`**: Search components by name, description, or category. With no params, lists all components
- **`search-composables`**: Search composables by name or description. With no params, lists all composables
- **`search-icons`**: Search for icons across Iconify collections (defaults to `lucide`). Returns icon names in the `i-{prefix}-{name}` format used by Nuxt UI

### Component Tools

- **`get_component`**: Retrieves component documentation and details. Supports a `sections` parameter (`usage`, `examples`, `api`, `theme`, `changelog`) to fetch only specific parts and reduce response size
- **`get_component_metadata`**: Retrieves detailed metadata for a component including props, slots, and events (lightweight, no documentation content)
- **`get-component`**: Retrieves component documentation and details. Supports a `sections` parameter (`usage`, `examples`, `api`, `theme`, `changelog`) to fetch only specific parts and reduce response size
- **`get-component-metadata`**: Retrieves detailed metadata for a component including props, slots, and events (lightweight, no documentation content)

### Documentation Tools

- **`search_documentation`**: Search documentation pages by title, description, or section. With no params, lists all pages. Use `section` to filter (e.g., `"getting-started"`, `"components"`)
- **`get_documentation_page`**: Retrieves documentation page content by URL path. Supports a `headings` parameter to fetch only specific h2 sections (e.g., `["Usage", "API"]`) and reduce response size
- **`search-documentation`**: Search documentation pages by title, description, or section. With no params, lists all pages. Use `section` to filter (e.g., `"getting-started"`, `"components"`)
- **`get-documentation-page`**: Retrieves documentation page content by URL path. Supports a `headings` parameter to fetch only specific h2 sections (e.g., `["Usage", "API"]`) and reduce response size

### Template Tools

- **`list_templates`**: Lists all available Nuxt UI templates with optional framework filtering
- **`get_template`**: Retrieves template details and setup instructions
- **`list-templates`**: Lists all available Nuxt UI templates with optional framework filtering
- **`get-template`**: Retrieves template details and setup instructions

### Example Tools

- **`list_examples`**: Lists all available UI examples and code demonstrations
- **`get_example`**: Retrieves specific UI example implementation code and details
- **`list-examples`**: Lists all available UI examples and code demonstrations
- **`get-example`**: Retrieves specific UI example implementation code and details

### Migration Tools

- **`get_migration_guide`**: Retrieves version-specific migration guides and upgrade instructions
- **`get-migration-guide`**: Retrieves version-specific migration guides and upgrade instructions

## Limit available tools

Set the optional `X-MCP-Tools` HTTP header to a comma-separated list of tool names to expose only the tools your assistant needs. This helps to reduce the context defined in your assistant.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

๐Ÿ“ Maintainability & Code Quality | ๐ŸŸก Minor | โšก Quick win

Clarify the context reduction.

context defined in your assistant does not describe the behavior. The handler reduces the tool context sent to the assistant.

Proposed wording
-This helps to reduce the context defined in your assistant.
+This helps to reduce the tool context sent to your assistant.
๐Ÿ“ Committable suggestion

โ€ผ๏ธ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
Set the optional `X-MCP-Tools` HTTP header to a comma-separated list of tool names to expose only the tools your assistant needs. This helps to reduce the context defined in your assistant.
Set the optional `X-MCP-Tools` HTTP header to a comma-separated list of tool names to expose only the tools your assistant needs. This helps to reduce the tool context sent to your assistant.
๐Ÿค– Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@docs/content/docs/1.getting-started/7.ai/1.mcp.md` at line 61, Update the
X-MCP-Tools documentation sentence to state that selecting specific tool names
reduces the tool context sent to the assistant, replacing the inaccurate
reference to context defined in the assistant.


Use the exact kebab-case MCP tool names, for example:

```

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

๐Ÿ“ Maintainability & Code Quality | ๐ŸŸก Minor | โšก Quick win

Add a language tag to the code fence.

Use json on the opening fence. This fixes the MD040 warning and enables syntax highlighting.

Proposed fix
-```
+```json
๐Ÿ“ Committable suggestion

โ€ผ๏ธ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
```
๐Ÿงฐ Tools
๐Ÿช› markdownlint-cli2 (0.23.1)

[warning] 65-65: Fenced code blocks should have a language specified

(MD040, fenced-code-language)

๐Ÿค– Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@docs/content/docs/1.getting-started/7.ai/1.mcp.md` at line 65, Update the
code fence in the MCP documentation section to use the json language tag on its
opening fence, preserving the existing fenced content.

Source: Linters/SAST tools

{
"X-MCP-Tools": "search-components,get-component"
}
```

No header exposes all tools, an empty header exposes no tools, and an unknown tool name returns a configuration error.

## Available Prompts

Expand Down Expand Up @@ -319,12 +333,17 @@ For more details, see [Adding MCP servers for GitHub Copilot CLI](https://docs.g
"servers": {
"nuxt-ui": {
"type": "http",
"url": "https://ui.nuxt.com/mcp"
"url": "https://ui.nuxt.com/mcp",
"headers": {
"X-MCP-Tools": "search-components,get-component" // Optional: Limit available tools to reduce context
}
}
}
}
```

Remove the `headers` entry to make all Nuxt UI MCP tools available.

### Windsurf

#### Setup Instructions:
Expand Down
58 changes: 58 additions & 0 deletions docs/server/mcp/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import { defineMcpHandler, getMcpTools } from '@nuxtjs/mcp-toolkit/server'

export default defineMcpHandler({
async tools(event) {
const tools = await getMcpTools({ event })
const requestedTools = getHeader(event, 'x-mcp-tools')

if (requestedTools === undefined) {
return tools
}

const requestedToolNames = getRequestedToolNames(requestedTools)
const availableToolNames = getAvailableToolNames(tools)

const unknownNames = requestedToolNames.filter(requestedToolName => !availableToolNames.has(requestedToolName))
if (unknownNames.length) {
throw createError({
statusCode: 400,
statusMessage: `Unknown MCP tool${unknownNames.length > 1 ? 's' : ''}: ${unknownNames.join(', ')}`
})
}

return tools.filter(tool => requestedToolNames.includes(getToolName(tool) || ''))
}
})

function getAvailableToolNames(tools: Awaited<ReturnType<typeof getMcpTools>>) {
const names = new Set<string>()

for (const tool of tools) {
const name = getToolName(tool)
if (name) {
names.add(name)
}
}

return names
}
Comment on lines +27 to +38

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

๐Ÿ—„๏ธ Data Integrity & Integration | ๐ŸŸก Minor | โšก Quick win

๐Ÿงฉ Analysis chain

๐Ÿ Script executed:

#!/usr/bin/env bash
set -euo pipefail

rg -n -C 8 'defineMcpTool|name\s*:' --glob '*.ts' --glob '*.vue' .
rg -n -C 3 'search-components|search-composables|search-icons|get-component|get-component-metadata|search-documentation|get-documentation-page|list-templates|get-template|list-examples|get-example|get-migration-guide|getToolName|_meta.*filename' .

Repository: nuxt/ui

Length of output: 50364


๐Ÿ Script executed:

#!/bin/bash
set -euo pipefail

# Focus only on the MCP docs file and the surrounding implementation.
printf '--- docs/server/mcp/index.ts ---\n'
wc -l docs/server/mcp/index.ts
cat -n docs/server/mcp/index.ts

printf '\n--- exact getToolName definitions/usages ---\n'
rg -n -C 4 'function getToolName|const getToolName|getToolName|defineMcpTool|_meta.*filename|filename' docs/server/mcp src docs --glob '!**/node_modules/**' --glob '!**/.nuxt/**' | m

printf '\n--- target tool names ---\n'
rg -n -C 3 'search-icons|search-components|search-composables|get-component|get-component-metadata|search-documentation|get-documentation-page|list-templates|get-template|list-examples|get-example|get-migration-guide' docs/src src docs --glob '!**/node_modules/**' --glob '!**/.nuxt/**' | head -n 300

printf '\n--- package/toolkit references ---\n'
rg -n -C 3 '`@nuxt`[\S]*mcp|mcp-tool|defineMcpTool|mcp' package.json pnpm-lock.yaml yarn.lock package-lock.json --glob '!**/node_modules/**' | head -n 200

Repository: nuxt/ui

Length of output: 236


๐Ÿ Script executed:

#!/bin/bash
set -euo pipefail

printf '%s\n' '--- docs/server/mcp/index.ts ---'
wc -l docs/server/mcp/index.ts
cat -n docs/server/mcp/index.ts

printf '%s\n' ''
printf '%s\n' '--- exact getToolName definitions/usages ---'
rg -n -C 4 'function getToolName|const getToolName|getToolName|defineMcpTool|_meta.*filename|filename' docs/server/mcp src docs --glob '!**/node_modules/**' --glob '!**/.nuxt/**' | m || true

printf '%s\n' ''
printf '%s\n' '--- target tool names ---'
rg -n -C 3 'search-icons|search-components|search-composables|get-component|get-component-metadata|search-documentation|get-documentation-page|list-templates|get-template|list-examples|get-example|get-migration-guide' docs/src src docs --glob '!**/node_modules/**' --glob '!**/.nuxt/**' | head -n 300 || true

printf '%s\n' ''
printf '%s\n' '--- package/toolkit references ---'
rg -n -C 3 '`@nuxt`[\S]*mcp|mcp-tool|defineMcpTool|mcp' package.json pnpm-lock.yaml yarn.lock package-lock.json --glob '!**/node_modules/**' | head -n 200 || true

Repository: nuxt/ui

Length of output: 13606


๐ŸŒ Web query:

@nuxtjs/mcp-toolkit 0.18.0 filename fallback underscore canonical tool name

๐Ÿ’ก Result:

In @nuxtjs/mcp-toolkit, tool names are automatically derived from their filenames [1][2]. Specifically, the filename is converted to a kebab-case name (e.g., list-documentation.ts becomes list-documentation) [1]. While older or alternative naming conventions might use underscores (such as the legacy behavior mentioned in some Nuxt blog content where list-documentation-pages.ts becomes list_documentation_pages) [2], the official, current documentation specifies that the filename automatically becomes the name in kebab-case [1]. There is no "filename fallback" mechanism that defaults to using underscores as a primary canonical tool name; rather, kebab-case is the standard behavior for automatic name generation [1]. Users can always override the auto-generated name by explicitly providing a name property in the defineMcpTool configuration [1]. [1][2]

Citations:


๐ŸŒ Web query:

site:mcp-toolkit.nuxt.dev tools/overview filename kebab-case @nuxtjs/mcpp-toolkit``

๐Ÿ’ก Result:

In the @nuxtjs/mcp-toolkit, filenames in the server/mcp/tools/ directory are automatically used to derive the tool's name and title [1][2]. Specifically, the toolkit applies the following conventions: - The tool name is generated as the kebab-case version of the filename (e.g., a file named list-documentation.ts results in a tool name of 'list-documentation') [1][2]. - The tool title is generated in Title Case based on the filename (e.g., 'List Documentation') [1][2]. While these values are auto-generated by default, you can explicitly define the name or title within the defineMcpTool function to override these automatic values [1][2]. Additionally, if you organize files in subdirectories within server/mcp/tools/, the toolkit will use the directory structure to automatically infer a group for the tools [1][3][4].

Citations:


๐ŸŒ Web query:

@nuxtjs/mcp-toolkit 0.18.0 github _meta filename kebab-case

๐Ÿ’ก Result:

In the @nuxtjs/mcp-toolkit (version 0.18.0), the library automatically generates MCP tool names and titles based on the filename of the tool definition file [1][2]. When you define a tool in a file such as server/mcp/tools/list-documentation.ts, the following rules apply: - The filename is automatically converted to kebab-case to determine the tool name (e.g., list-documentation.ts becomes name: 'list-documentation') [1][2]. - The filename is converted to title case to determine the tool title (e.g., list-documentation.ts becomes title: 'List Documentation') [1][2]. This automatic generation happens by default, but you can override these values by explicitly providing name or title properties within your defineMcpTool definition [1][2]. Additionally, the toolkit uses an internal _meta object to store organizational data such as group and tags [2][3]. While you can manually attach metadata to _meta for specific purposesโ€”such as in MCP Apps [4]โ€”the group and tags properties are automatically inferred from the directory structure or set explicitly on the definition object to support filtering and discovery within the protocol [5][3].

Citations:


Use the MCP toolkitโ€™s filename-to-name conversion in the fallback.

@nuxtjs/mcp-toolkit 0.18.0 derives filenames such as search-icons.ts under docs/server/mcp/tools/ as kebab-case (search-icons) for tool.name. getToolName() should apply the same conversion to _meta.filename instead of only removing .ts and lowercasing, so documented tools remain usable from X-MCP-Tools.

๐Ÿค– Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@docs/server/mcp/index.ts` around lines 27 - 38, Update getToolName() to
convert _meta.filename using the MCP toolkitโ€™s filename-to-name conversion,
preserving kebab-case names such as search-icons instead of only stripping .ts
and lowercasing. Keep the existing tool.name preference and ensure the fallback
matches the toolkitโ€™s generated names for X-MCP-Tools.


function getToolName(tool: Awaited<ReturnType<typeof getMcpTools>>[number]) {
if (tool.name) {
return tool.name
}

const filename = tool._meta?.filename

if (typeof filename !== 'string') {
return
}

return filename.replace('.ts', '').toLowerCase()
}

function getRequestedToolNames(requestedTools: string) {
return Array.from(
new Set<string>(requestedTools.split(',').map((name: string) => name.trim()).filter((name: string) => Boolean(name)))
)
}
Loading