MCP Server

Kongponents provides a local Model Context Protocol server for accessing documentation, component source code, and source styles.

The server uses the documentation bundled with the installed @kong/kongponents version. It does not require an API key, a remote service, or network access after installation.

REQUIREMENT

The MCP server requires Node.js 20 or newer. This requirement applies only to the MCP executable; the Kongponents Vue library keeps its existing Node.js support policy.

Use the installed Kongponents version

In an application that already depends on @kong/kongponents, configure your agent to run:

pnpm exec kongponents-mcp

This is the recommended setup because the MCP documentation always matches the exact Kongponents version installed in the application.

Codex

Add a project-scoped .codex/config.toml to the consuming repository, as described in the official Codex MCP documentation:

[mcp_servers.kongponents]
command = "pnpm"
args = ["exec", "kongponents-mcp"]

Codex starts and stops the local stdio process automatically. Restart Codex after adding the configuration, then use /mcp to verify that kongponents is connected.

You can create the same user-level configuration from Codex CLI:

codex mcp add kongponents -- pnpm exec kongponents-mcp

For a pnpm workspace where Kongponents is installed in a specific package, set its directory explicitly:

[mcp_servers.kongponents]
command = "pnpm"
args = ["exec", "kongponents-mcp"]
cwd = "/absolute/path/to/the/workspace/package"

Claude Code

Add a project-scoped .mcp.json to the consuming repository:

{
  "mcpServers": {
    "kongponents": {
      "type": "stdio",
      "command": "pnpm",
      "args": ["exec", "kongponents-mcp"]
    }
  }
}

Claude Code asks you to approve project-scoped servers before using them. Start an interactive session, approve kongponents, and run /mcp to verify the connection. See the official Claude Code MCP documentation for configuration scopes and server management.

Alternatively, let Claude Code create the project configuration:

claude mcp add --transport stdio --scope project kongponents -- pnpm exec kongponents-mcp

GitHub Copilot

Visual Studio Code

Add .vscode/mcp.json to the consuming repository:

{
  "servers": {
    "kongponents": {
      "type": "stdio",
      "command": "pnpm",
      "args": ["exec", "kongponents-mcp"]
    }
  }
}

Open the file in Visual Studio Code and select Start, then open Copilot Chat in Agent mode and confirm that the Kongponents tools appear in the tool picker. See the official GitHub Copilot MCP documentation.

Copilot CLI

Copilot CLI can use the same project-level .mcp.json shown in the Claude Code section. You can also add the server to your user configuration directly:

copilot mcp add kongponents -- pnpm exec kongponents-mcp

Run copilot mcp list to verify the connection. See the official Copilot CLI MCP documentation.

For a monorepo where Kongponents is installed only in a nested workspace package, use that package as the command directory. When the client has no cwd option, use these arguments instead:

"args": ["--dir", "path/to/package", "exec", "kongponents-mcp"]

Cursor

Add a project-scoped .cursor/mcp.json to the consuming repository:

{
  "mcpServers": {
    "kongponents": {
      "command": "pnpm",
      "args": ["exec", "kongponents-mcp"]
    }
  }
}

Cursor shares this configuration between the editor and Cursor CLI. Open Cursor's MCP settings to enable the server and inspect its tools, or verify it from the CLI:

agent mcp list
agent mcp list-tools kongponents

The agent automatically discovers the available tools and can call them when relevant. See the official Cursor MCP documentation for global configuration and server-management options.

Zed

Add the server to the context_servers object in the consuming repository's .zed/settings.json:

{
  "context_servers": {
    "kongponents": {
      "command": "pnpm",
      "args": ["exec", "kongponents-mcp"],
      "env": {}
    }
  }
}

Trust the worktree when Zed asks for confirmation. Then open Settings → AI → MCP Servers and confirm that kongponents has a green Server is active indicator. The tools are available to the Zed Agent from its Agent Panel.

If Zed cannot resolve the package from a monorepo root, point pnpm at the workspace package explicitly:

"args": ["--dir", "/absolute/path/to/the/workspace/package", "exec", "kongponents-mcp"]

See the official Zed MCP documentation for custom-server configuration and troubleshooting.

WebStorm

WebStorm can connect to Kongponents through the JetBrains AI Assistant plugin. Open Settings → Tools → AI Assistant → Model Context Protocol (MCP), select Add, choose the STDIO transport, and use this configuration:

{
  "mcpServers": {
    "kongponents": {
      "command": "pnpm",
      "args": ["exec", "kongponents-mcp"]
    }
  }
}

Set Working directory to the consuming repository, choose Current Project as the server level, and click Apply. Once connected, WebStorm displays the server status and the available Kongponents tools in the MCP settings.

For a pnpm monorepo where Kongponents is installed in a nested workspace package, either use that package as the working directory or provide it explicitly:

{
  "mcpServers": {
    "kongponents": {
      "command": "pnpm",
      "args": [
        "--dir",
        "/absolute/path/to/the/workspace/package",
        "exec",
        "kongponents-mcp"
      ]
    }
  }
}

This configures WebStorm as an MCP client for Kongponents. It is separate from WebStorm's built-in MCP server, which exposes IDE tools to external clients. See the official JetBrains AI Assistant MCP documentation for configuration and server-management options.

Run the latest published version

For standalone use, an agent can download and run the latest package through npx:

{
  "mcpServers": {
    "kongponents": {
      "command": "npx",
      "args": ["-y", "@kong/kongponents@latest"]
    }
  }
}

Using latest can expose documentation newer than the version installed in an application. Prefer pnpm exec kongponents-mcp when working in an existing project.

Available tools

Tool	Description
list_components	List documented public components, exports, slugs, and deprecation status.
get_component_docs	Get complete component documentation or only selected sections such as Props, Slots, or Events.
get_component_property	Get focused documentation and examples for one exact component prop.
get_component_source_code	Get Vue and TypeScript production source and public types.
get_component_source_styles	Get component CSS/SCSS blocks and optionally shared styles.
list_docs	List all available documentation pages.
search_docs	Search guides and component documentation.
get_docs	Get the complete Markdown for an exact documentation path.

Example prompts

• "List the Kongponents available for building a form."
• "Show all KButton props and usage examples."
• "Show only the appearance prop for KButton."
• "Compare KTableView and KTableData before changing this table."
• "Get the source and styles for KDropdown."
• "Find the migration guidance for deprecated table APIs."

Local development

Build the server and snapshot from this repository:

pnpm build:mcp

The build stores a compressed snapshot in bin/mcp-data/snapshot.json.gz. For local debugging, run SNAPSHOT_FORMAT=json pnpm build:mcp to generate a readable snapshot.json instead. Rebuild without that setting before packaging.

Open the server with MCP Inspector:

pnpm mcp:inspect

The script starts the server with the repository root as its working directory. In the Inspector, enable the node server, open Tools, and call list_components or get_component_docs.

To test the local build directly from Codex:

[mcp_servers.kongponents-local]
command = "node"
args = ["/absolute/path/to/kongponents/bin/kongponents-mcp.js"]

Codex starts the process automatically; do not run it in a separate terminal. Rebuild and restart the MCP connection after changing the server or snapshot inputs.

Troubleshooting

The command cannot be found

Confirm that the consuming workspace has installed a Kongponents version containing the MCP binary:

pnpm exec kongponents-mcp

If Kongponents belongs to a nested workspace package, configure the MCP client's working directory to that package.

Unsupported Node.js version

Run node --version and upgrade the environment used by the MCP client to Node.js 20 or newer.

The local mcp:inspect development command uses MCP Inspector 2.7.0, which requires Node.js 22.19 or newer. This does not change the Node.js 20 requirement of the published Kongponents MCP server.

pnpm reports ERR_PNPM_TRUST_DOWNGRADE

The official MCP Inspector depends on chokidar@4.0.3, whose npm provenance differs from an earlier release. Repositories using pnpm's trust-policy=no-downgrade therefore block a plain pnpm dlx @modelcontextprotocol/inspector invocation.

Use the repository script instead:

pnpm mcp:inspect

The script pins MCP Inspector 2.7.0 and excludes only the exact chokidar@4.0.3 package from this trust check for that one process. It does not disable the repository-wide trust policy.

Documentation does not match the application

Use the locally installed binary instead of @latest. Reinstall dependencies after changing the Kongponents version.