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
ArtiBot Cloud MCP - Zhijiangyun 智匠云
bofobArtiBot Cloud MCP (Zhijiangyun 智匠云) — cloud MCP server for robot manipulation data & GPU workloads. 15 tools: robot fleet management, data collection & video recording, post-processing pipelines, and benchmark evaluation
1
Sazabi
SazabiGive your coding agent access to production. Search your logs in plain language, look up issues and investigate errors from Claude Code, Cursor, Codex or ChatGPT. Requires a Sazabi account; sign in with OAuth.
Crawl Readiness
GrubbomaticAI SEO tools for MCP clients — audit whether AI crawlers can read a website, validate JSON-LD and robots.txt, and generate llms.txt, AI-crawler-aware robots.txt, and JSON-LD schema without leaving the conversation.
Leadpages MCP
LeadpagesLeadpages MCP is a remote MCP server available at https://mcp.leadpages.com.
Perfex CRM
themesicTurn Perfex CRM into an AI-ready workspace. This MCP server exposes your full REST API to Claude, ChatGPT and any AI agent, so leads, invoices and tasks are one prompt away.
1
Comments