home / mcp / grafana ui mcp server

Grafana UI MCP Server

Provides access to Grafana UI components, docs, stories, and design tokens through a single MCP interface.

Installation

Add the following to your MCP client configuration file.

Configuration

{
  "mcpServers": {
    "grafana-grafana-ui-mcp-server": {
      "command": "npx",
      "args": [
        "@shelldandy/grafana-ui-mcp-server"
      ],
      "env": {
        "GITHUB_TOKEN": "ghp_your_token_here",
        "GRAFANA_REPO_PATH": "/path/to/grafana",
        "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_your_token_here"
      }
    }
  }
}

You have access to Grafana UI components, documentation, stories, and design tokens through a single MCP interface. This MCP server lets AI tools and agents retrieve Grafana UI source, docs, tests, and design system data on demand, simplifying integration and speeding up development and exploration tasks.

How to use

You interact with the server through a single unified tool named grafana_ui. Use actions to request specific data such as component source, documentation, stories, tests, and design tokens. You can search by component name or by documentation content, inspect dependencies, and browse the Grafana UI repository structure. All responses indicate the data source (local or GitHub) to help you understand where the information came from.

How to install

Prerequisites you need are Node.js (18+) and an environment capable of running npm or npx. You will run the MCP server using a single command from your terminal.

# Quick start: run the MCP server with no extra configuration
npx @shelldandy/grafana-ui-mcp-server

# Run with a GitHub token to improve rate limits
npx @shelldandy/grafana-ui-mcp-server --github-api-key ghp_your_token_here

# Use a local Grafana repository for faster access (optional)
npx @shelldandy/grafana-ui-mcp-server --grafana-repo-path /path/to/grafana
```} ]},{

Environment variables you can provide to improve reliability and control behavior include GITHUB_PERSONAL_ACCESS_TOKEN and GITHUB_TOKEN. You can also point the server to a local Grafana repository with GRAFANA_REPO_PATH. These variables can be supplied directly in your shell or configured in your Claude Cursor setup.

Additional information

The server supports both local repository access and remote access via GitHub API. The local repository path takes precedence if provided. If the local path is invalid or missing, the server gracefully falls back to GitHub access. All outcomes clearly indicate their source as either local or github.

For development workflows, you can enable verbose debugging to diagnose issues and confirm token usage or path resolution.

Tools & usage concepts

The MCP client talks to grafana_ui with a single action parameter. Available actions include getting component source, demos, metadata, documentation, stories, tests, dependency trees, and design tokens. You can search components by name or by content and inspect token categories or nested dependencies.

Troubleshooting

Rate limit issues are resolved by providing a GitHub token. If a component cannot be found, first list available components to verify names and capitalization. Ensure Node.js is installed and up to date. If network or proxy issues occur, set HTTP/HTTPS proxy environment variables before starting the server.

Available tools

get_component

Return the TypeScript source for a Grafana UI component by name.

get_demo

Fetch Storybook demo files showing component usage.

list_components

List all available Grafana UI components.

get_metadata

Retrieve component props, exports, and metadata.

get_directory

Browse the Grafana UI repository structure.

get_documentation

Retrieve rich MDX documentation with sections and examples.

get_stories

Get parsed Storybook stories with interactive controls.

get_tests

Obtain test files illustrating usage and edge cases.

search

Search components by name and optionally by documentation content.

get_theme_tokens

Fetch Grafana design system tokens such as colors and typography.

get_dependencies

Obtain component dependency trees, shallow or deep.