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.
M
MetricUI MCP Server
@mpmcgowen
Basic information
About MetricUI MCP Server
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.
MetricUI MCP Server config
Add this server to your MCP-compatible client using the configuration below.
{
"mcpServers": {
"metricui": {
"command": "npx",
"args": [
"-y",
"@metricui/mcp-server"
]
}
}
}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.
Frequently asked questions
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.
More Developer Tools MCP servers
Modelglass
ModelglassModelglass turns "which model should I use?" into a lookup instead of a guess. Seven tools give your agent live pricing across image, language, video, and audio models. Sourced and versioned, not scraped once and forgott
1
Layro
UvxxshLayro connects your AI coding tool (Cursor, Claude Code, VS Code, Windsurf, Codex, Gemini CLI) to 112 production React, TypeScript and Tailwind CSS components. Your agent can search the library, read each component's pro
Nizh
NizhCompliance frameworks delivered to AI agents. Nizh gives your agent read access to your organization's compliance program — SOC 2, ISO 27001, CMMC 2.0, NIST, and more — as MCP tools, so it can check posture, read a contr
Vibgrate MCP
VibgrateQuery your team's drift, vulnerability, and migration data from any AI assistant. Vibgrate MCP connects Cursor, Claude, ChatGPT, Windsurf, or VS Code to Vibgrate Cloud: 51 tools for DriftScores, CVEs and EOL runtimes, up
3
Comments