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
基本情報
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 の設定
以下の設定を使って、このサーバーを MCP 対応クライアントに追加してください。
{
"mcpServers": {
"metricui": {
"command": "npx",
"args": [
"-y",
"@metricui/mcp-server"
]
}
}
}MetricUI MCP Server のツール
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?'
概要
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.
よくある質問
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.
「開発者ツール」の他のコンテンツ
Capgo MCP
Cap-goConsole, Backend and CLI to manage Capgo Instant update and Native build for Capacitor apps Build and upload to app store your mobile app
GripForge
gripforgeaiThe tools your AI needs to make your games. Turn prompts into production-ready game assets — animated characters with their weapons attached, seamless textures, terrain, VFX, HUDs — and playable game kits Unity, Godot, U
1
Routebase
RoutebaseRoutebase keeps your API's design, docs, contract tests, mocks and monitoring in one living OpenAPI spec so they can't drift apart. Agents work on that same source of truth, under your team's permissions.
Official Porkbun MCP Server
Porkbun LLCOfficial Porkbun MCP server, maintained by Porkbun. Check domain availability and pricing, register, renew and transfer domains, and manage DNS records, nameservers, URL forwarding, glue records, DNSSEC and domain contac
32
LastPing
LastPingKnow when your AI agents, cron jobs and CI pipelines fail, stall or go quiet. Your agent sets up monitors from a plain description, tells you what is broken and why, reads run history and traces, and writes notes on inci
コメント