MCP Server

Connect your AI tools to EletroDS documentation with a native MCP server. When a component is not found in EletroDS, the server automatically falls back to the Nuxt UI documentation via their MCP server.

About MCP Servers

The Model Context Protocol (MCP) is an open protocol that creates standardized connections between AI applications and external services, like documentation.

EletroDS 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 our documentation.

How MCP Servers Work

When an MCP server is connected to an AI tool, the LLM can decide to use your documentation tools during response generation:

• The LLM can proactively search your documentation while generating a response, not just when explicitly asked.
• The LLM determines when to use tools based on the context of the conversation and the relevance of your documentation.
• Each tool call happens during the generation process, allowing the LLM to incorporate real-time information from your documentation into its response.

For example, if a user asks about how to use the MeTooltip component and the LLM determines that EletroDS documentation is relevant, it can search our docs and include accurate usage examples in the response without the user explicitly asking about our documentation.

Accessing Your MCP Server

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

https://eletro.design/mcp

http://localhost:3000/mcp

Built-in Tools

EletroDS provides tools out of the box that allow any LLM to discover and read our documentation. When a component is not found locally, the server automatically falls back to the Nuxt UI MCP to retrieve the documentation from the base library.

list-pages

Lists all documentation pages with their titles, paths, and descriptions. AI assistants should call this first to discover available content.

get-page

Retrieves the full markdown content of a specific documentation page.

get-component

Retrieves EletroDS component documentation and details. If the component is not found locally, falls back to the Nuxt UI MCP server to search in the base library documentation.

get-component-metadata

Retrieves detailed metadata for a component including props, slots, and events. Falls back to the Nuxt UI MCP server when the component is not found locally.

search-components-by-category

Searches EletroDS components and blocks by text filter. When no local results are found, automatically includes results from the Nuxt UI MCP server.

Setup

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

Cursor

Or manually create/update the .cursor/mcp.json file in your project root:

{
  "mcpServers": {
    "eletrods": {
      "type": "http",
      "url": "https://eletro.design/mcp"
    }
  }
}

Claude Code

Add the server using the CLI command:

claude mcp add --transport http eletrods https://eletro.design/mcp

Visual Studio Code

Ensure you have GitHub Copilot and GitHub Copilot Chat extensions installed.

Or manually create/update the .vscode/mcp.json file:

{
  "servers": {
    "eletrods": {
      "type": "http",
      "url": "https://eletro.design/mcp"
    }
  }
}

Windsurf

1. Open Windsurf and navigate to Settings > Windsurf Settings > Cascade
2. Click the Manage MCPs button, then select the View raw config option
3. Add the following configuration:

{
  "mcpServers": {
    "eletrods": {
      "type": "http",
      "url": "https://eletro.design/mcp"
    }
  }
}

Zed

1. Open Zed and go to Settings > Open Settings
2. Navigate to the JSON settings file
3. Add the following context server configuration:

{
  "context_servers": {
    "eletrods": {
      "source": "custom",
      "command": "npx",
      "args": ["mcp-remote", "https://eletro.design/mcp"],
      "env": {}
    }
  }
}

Usage Example

Once connected, you can ask your AI assistant questions about EletroDS and it will automatically search our documentation:

Troubleshooting

Connection Issues

If you're having trouble connecting to the MCP server:

1. Verify the URL - Make sure you're using the correct URL (https://eletro.design/mcp for production)
2. Check your network - Ensure you have internet access and can reach the documentation site
3. Restart your IDE - Some IDE's require a restart after adding MCP server configurations

Local Development

For local development, make sure the documentation server is running:

cd docs
pnpm dev

Then update your MCP configuration to use the local URL:

{
  "mcpServers": {
    "eletrods-local": {
      "type": "http",
      "url": "http://localhost:3000/mcp"
    }
  }
}

Next Steps