广告合作
MCP.so
登录
M

MetricUI MCP Server

@mpmcgowen

代码仓库

基本信息

分类

开发工具

传输方式

stdio

作者

mpmcgowen

提交者

Matt McGowen

关于 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.

#react#dashboard#charts#analytics#data-visualization#components#ui

MetricUI MCP Server 配置

使用下面的配置,将此服务器添加到你的 MCP 客户端。

{
  "mcpServers": {
    "metricui": {
      "command": "npx",
      "args": [
        "-y",
        "@metricui/mcp-server"
      ]
    }
  }
}

MetricUI MCP Server 工具

13

List 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.

常见问题

1

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.

2

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.

3

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.

4

Is MetricUI accessible?

Yes. It honors `prefers-reduced-motion`, applies focus‑visible rings, includes ARIA attributes on charts, and supports keyboard‑accessible drill‑downs.

5

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.

评论

开发工具 分类下的更多 MCP 服务器

CircleCI MCP Server

CircleCI

Manage CI/CD pipelines, debug failed builds, and optimize test suites directly from your AI agents - no terminal required. The CircleCI MCP Server is a remote server hosted by CircleCI that connects AI tools and agents

Agent Trust (mnki-mcp)

MNKIAgentOS

Agent Trust — open profile + reference implementation for proving what an autonomous AI agent is authorized to do: identity, delegation with attenuation, proof-of-possession, attestations, tamper-evident provenance. Buil

Casefile

azimov777

One case file per task — shared by every session, agent and person that touches it. Self-hosted MCP server and live board. MIT.

3

9apes

9apes

The 9apes MCP server lets an AI assistant read the GitHub Actions data 9apes already collects for your organization: runs, jobs, steps, and their durations. Ask it why a build got slower, which jobs take the longest, or

Termany

thinkany-ai

Agent-Native Terminal

174
广告合作