Grafana UI MCP Server

A Model Context Protocol (MCP) server that provides AI assistants with comprehensive access to Grafana UI components, documentation, stories, and design system tokens. This server enables AI tools like Claude Desktop, Continue.dev, and other MCP-compatible clients to retrieve and work with Grafana's React component library seamlessly.

🚀 Key Features

• Complete Component Access: Get the latest Grafana UI component TypeScript source code
• Rich Documentation: Access comprehensive MDX documentation with usage guidelines
• Interactive Stories: Retrieve Storybook stories with interactive examples and controls
• Test Files: Access test files showing real usage patterns and edge cases
• Design System Integration: Get Grafana's design tokens (colors, typography, spacing, shadows)
• Dependency Analysis: Understand component relationships and dependency trees
• Advanced Search: Search components by name and documentation content
• GitHub API Integration: Efficient caching and intelligent rate limit handling

🛠️ Unified Tool Interface

This MCP server provides a single unified tool called grafana_ui that consolidates all functionality through action-based routing. This reduces complexity and makes it easier for AI agents to understand and use.

🎯 The grafana_ui Tool

All operations are performed through one tool with an action parameter:

{
  "tool": "grafana_ui",
  "arguments": {
    "action": "get_component",
    "componentName": "Button"
  }
}

📋 Available Actions (11 Total)

Core Component Actions:

• get_component - Get TypeScript source code for any Grafana UI component
• get_demo - Get Storybook demo files showing component usage
• list_components - List all available Grafana UI components
• get_metadata - Get component props, exports, and metadata
• get_directory - Browse the Grafana UI repository structure

Advanced Grafana Actions:

• get_documentation - Get rich MDX documentation with sections and examples
• get_stories - Get parsed Storybook stories with interactive controls
• get_tests - Get test files showing usage patterns and edge cases
• search - Search components by name and optionally by documentation content
• get_theme_tokens - Get Grafana design system tokens (colors, typography, spacing, etc.)
• get_dependencies - Get component dependency tree analysis (shallow or deep)

✨ Benefits of the Unified Tool

• Simplified Integration: Only one tool to configure in MCP clients
• Easier for AI Agents: Reduced cognitive load with single entry point
• Better Context Management: All functionality accessible through one interface
• Parameter Validation: Comprehensive validation based on action type
• Future-Proof: Easy to add new actions without breaking changes

🔄 Migration from Previous Versions

Breaking Change: Version 2.0+ uses a unified tool interface. If you were using individual tools like get_component, list_components, etc., you now need to use the grafana_ui tool with an action parameter.

Before (v1.x):

{ "tool": "get_component", "arguments": { "componentName": "Button" } }

After (v2.0+):

{ "tool": "grafana_ui", "arguments": { "action": "get_component", "componentName": "Button" } }

All functionality remains the same - only the interface has changed.

📦 Quick Start

⚡ Using npx (Recommended)

The fastest way to get started - no installation required!

# Basic usage (rate limited to 60 requests/hour)
npx @shelldandy/grafana-ui

... [View full README on GitHub](https://github.com/grafana/grafana-ui-mcp-server#readme)