# metricui

metricui gives AI coding tools API lookup, React dashboard code generation, and prop checks for MetricUI components.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 5
- Author: mpmcgowen
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/mpmcgowen/metricui/tree/HEAD/mcp-server
- Updated: 2026-03-30
- HTML: https://affpapa.org/en/nevibecode/mcp/metricui

## What it does

metricui connects an MCP server to AI coding tools that work with MetricUI, a React dashboard component library. It helps an agent find the right API, draft component code, and inspect props for KPI cards, charts, tables, and layout elements.

The server runs from `@metricui/mcp-server` through `npx`. Setup entries are available for Claude Code, Codex, Cursor, GitHub Copilot, and Gemini CLI, while the server is listed for use with Cline, Zed, and Windsurf (Devin Desktop) as well. If the environment cannot run `npx`, this connection method will not start the server.

## Requirements
- Needs: Node.js (commands run via npx)

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add metricui -- npx -y @metricui/mcp-server
```

### Codex

**Platform CLI**
```bash
codex mcp add mcp-server -- npx -y @metricui/mcp-server
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "mcp-server": {
            "command": "npx",
            "args": [
                "-y",
                "@metricui/mcp-server"
            ]
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "mcp-server": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "@metricui/mcp-server"
            ]
        }
    }
}
```

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add mcp-server npx -y @metricui/mcp-server
```

## When to use it
- look up the right MetricUI component API
- generate React code for a dashboard
- check MetricUI component props
- assemble KPI cards, charts, and tables

## Example prompts
- Find the MetricUI API for a KPI card with period comparison and show a React example.
- Generate a MetricUI React dashboard with KPI cards, a chart, and a data table.
- Review these MetricUI props and fix the component configuration.

## Similar
- [Front-End Checklist](https://affpapa.org/en/nevibecode/mcp/front-end-checklist.md) — MCP server · ★ 74569
- [tldraw](https://affpapa.org/en/nevibecode/mcp/tldraw.md) — MCP server · ★ 51104
- [Figma-Context-MCP](https://affpapa.org/en/nevibecode/mcp/figma-context-mcp.md) — MCP server · ★ 16073
- [mcp-server-chart](https://affpapa.org/en/nevibecode/mcp/mcp-server-chart.md) — MCP server · ★ 4406
- [Dembrandt](https://affpapa.org/en/nevibecode/mcp/dembrandt.md) — MCP server · ★ 3851
- [RevoGrid DataGrid MCP Pro](https://affpapa.org/en/nevibecode/mcp/revogrid-datagrid-mcp-pro.md) — MCP server · ★ 3451

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md