MetricUI
@mpmcgowen
About MetricUI
MCP server for MetricUI, a React dashboard component library. Gives AI coding tools access to full API references, working code examples, format suggestions, prop validation, and complete dashboard scaffolding for building analytics UIs.
Config
Add this server to your MCP-compatible client using the configuration below.
{
"mcpServers": {
"metricui": {
"command": "npx",
"args": [
"-y",
"@metricui/mcp-server"
]
}
}
}Tools
13List all MetricUI components, optionally filtered by category
Search MetricUI components by use case description. Returns ranked results.
Get the full API reference for a specific MetricUI component — all props, types, defaults, examples
Returns a complete, working code example for a MetricUI component with the requested features enabled. The example uses realistic sample data and has every relevant prop annotated. You adapt the values/labels to your specific use case — the structure and props are correct as-is.
Generate a COMPLETE, production-quality MetricUI dashboard with theme presets, MetricGrid auto-layout, DashboardHeader with live status, FilterProvider + PeriodSelector, advanced KpiCards (conditions, goals, sparkline overlays), charts with reference lines and threshold bands, data-driven Callout alerts, and rich DataTable. Returns a full page.tsx file ready to use.
Generate the TypeScript interface for a component's required data shape
Generate DataTable column definitions from a list of fields
Generate MetricProvider configuration JSX with only the fields you need
Validate a MetricUI component's prop configuration — catches unknown props, type mismatches, deprecated usage, and common mistakes
Suggest the right format configuration for a value type
Get complete setup instructions for MetricUI — install command, provider setup, CSS imports, and framework-specific configuration for Next.js, Vite, or CRA.
Initialize a project for MetricUI — generates CLAUDE.md content with usage instructions so AI tools always use MetricUI components. Run this once per project.
Search all MetricUI documentation — components, props, types, patterns, format examples, and guides. Returns ranked results with snippets. Use this when a user asks conceptual questions like 'how do I set up dark mode?' or 'what format should I use for currency?'
Overview
What is MetricUI?
MetricUI is a React component library that provides the missing UI layer for dashboards — KPI cards, charts, tables, and layout with built-in formatting, theming, data states, and zero configuration. It’s designed for developers building analytics, SaaS, or operational dashboards.
How to use MetricUI?
Install via npm with npm install metricui, then import components such as Dashboard, KpiCard, AreaChart, and DataTable along with the default styles. A CDN version is also available for browser sandboxes or environments without a bundler. No additional chart dependencies are required.
Key features of MetricUI
- AI Insights with bring-your-own LLM and auto-collected data context.
- KPI cards with sparklines, goal progress, and conditional coloring.
- Charts with reference lines, threshold bands, and comparison overlays.
- Smart format engine for currency, percent, duration, and compact notation.
- MetricGrid auto-layout: KPIs row up, charts pair, tables go full width.
- Light/dark mode with CSS variables, no configuration needed.
Use cases of MetricUI
- Building a real-time analytics dashboard with cross-filtering and drill-downs.
- Creating a SaaS metrics overview with period comparisons and goal tracking.
- Embedding data tables with expandable rows and advanced sorting/search.
- Constructing conversion funnels with auto-computed stage-to-stage rates.
- Adding AI-powered exploratory analysis via a floating chat interface.
FAQ from MetricUI
What data sources does MetricUI connect to?
MetricUI is a front-end library only; it does not include data fetching. You pass your own data (static or from any backend) as props to the components.
Does MetricUI require a bundler or build tool?
No. It works with any React setup (Vite, Next.js, etc.) and also provides a browser-friendly CDN import for sandboxes and environments without a bundler.
How do I theme the dashboard?
Set the theme prop on <Dashboard> using one of the built‑in presets (e.g., "emerald", "rose", "amber") or create a custom preset via the ThemePreset type. All components adapt automatically.
Is MetricUI accessible?
Yes. It honors prefers-reduced-motion, applies focus‑visible rings, includes ARIA attributes on charts, and supports keyboard‑accessible drill‑downs.
What happens if a chart crashes?
Error boundaries isolate failures: one broken chart does not affect other components. Dev mode shows the component name with hints; production shows a clean retry UI.
Frequently asked questions
What data sources does MetricUI connect to?
MetricUI is a front-end library only; it does not include data fetching. You pass your own data (static or from any backend) as props to the components.
Does MetricUI require a bundler or build tool?
No. It works with any React setup (Vite, Next.js, etc.) and also provides a browser-friendly CDN import for sandboxes and environments without a bundler.
How do I theme the dashboard?
Set the `theme` prop on `<Dashboard>` using one of the built‑in presets (e.g., `"emerald"`, `"rose"`, `"amber"`) or create a custom preset via the `ThemePreset` type. All components adapt automatically.
Is MetricUI accessible?
Yes. It honors `prefers-reduced-motion`, applies focus‑visible rings, includes ARIA attributes on charts, and supports keyboard‑accessible drill‑downs.
What happens if a chart crashes?
Error boundaries isolate failures: one broken chart does not affect other components. Dev mode shows the component name with hints; production shows a clean retry UI.
Basic information
More Developer Tools MCP servers
SSH MCP Server
hypnosisSSH MCP server for AI agents: remote commands, file transfer, log search and server audits through OpenSSH.
CodeSentinel
icohangar-opsCodebase health as MCP tools: dead code, circular dependencies, coupling, architectural drift.
ship.page
BitgateThrow HTML at an API, get an unguessable URL back. Zero-config remote MCP server — your agent deploys pages, sites and CI reports in one call. Free, no signup needed.
Meticulous
MeticulousMCP server and skills to connect to the Meticulous UI testing platform.
Altronis
sypherinMCP server + CLI for Altronis — Singapore AI consulting. Ask the Lyra consultant, generate a grant-matched AI transformation plan, pull curated SG AI events/news. Read-only, wraps altronis.sg.
Comments