# Dashcraft > Headless React dashboard engine — drag-and-drop, resizable widgets, charts, and an MCP tool that turns a screenshot into shippable code. dashcraft-core on npm. MIT. - **Type:** MCP server - **Install:** `agentstack add mcp-nishant-chaudhary5338-dashcraft` - **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior - **Seller:** [Nishant-Chaudhary5338](https://agentstack.voostack.com/s/nishant-chaudhary5338) - **Installs:** 0 - **Category:** [Developer Tools](https://agentstack.voostack.com/c/developer-tools) - **Latest version:** 0.1.0 - **License:** MIT - **Upstream author:** [Nishant-Chaudhary5338](https://github.com/Nishant-Chaudhary5338) - **Source:** https://github.com/Nishant-Chaudhary5338/dashcraft - **Website:** https://dashcraft.digitribe.world ## Install ```sh agentstack add mcp-nishant-chaudhary5338-dashcraft ``` Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent. ## About # dashcraft [](https://github.com/Nishant-Chaudhary5338/dashcraft/actions/workflows/ci.yml) [](https://www.npmjs.com/package/dashcraft-core) [](LICENSE) [](CONTRIBUTING.md) **Headless React dashboard library. Four boolean props. Your styles.** dashcraft gives you drag-and-drop grids, resizable widgets, KPI cards, recharts charts (bar, line, area, pie, scatter, radar) + hierarchy charts (heatmap, treemap, sunburst), persistent layouts, and an MCP codegen server — without touching your design system. → **[Live site & playground](https://dashcraft.digitribe.world)** · [Docs](https://dashcraft.digitribe.world/docs) · [npm](https://www.npmjs.com/package/dashcraft-core) --- ## Why dashcraft? | Pain | dashcraft | | ------------------------------------------------ | -------------------------------------------------------- | | Every dashboard library forces its design system | Fully headless — bring Tailwind, CSS Modules, or nothing | | Wiring recharts to drag-drop takes days | `drag resize settings delete` — four props, done | | AI tools don't know your component API | `llms.txt` + MCP codegen server built in | | Saving layouts is a custom build every time | `persistenceKey="key"` — one prop, localStorage automatic | --- ## Install ```sh npm install dashcraft-core # Chart peer dependency (bar, line, area, pie, scatter, radar + hierarchy charts) npm install recharts ``` --- ## Quick start Widgets render their own card, so drop them straight into `` and position them with `defaultPosition` / `defaultSize`: ```tsx import { Dashboard } from "dashcraft-core"; import { KPIWidget } from "dashcraft-core/widgets/kpi"; import { RechartsWidget } from "dashcraft-core/widgets/recharts"; import "dashcraft-core/styles.css"; const data = [ { month: "Jan", revenue: 12400 }, { month: "Feb", revenue: 15600 }, { month: "Mar", revenue: 18200 }, ]; export function SalesDashboard() { return ( ); } ``` --- ## The boolean API Every interactive behaviour is a single boolean prop on `DashboardCard`: | Prop | What it does | | ------------ | ---------------------------------- | | `drag` | Enables drag-and-drop via @dnd-kit | | `resize` | Shows resize handles | | `settings` | Shows settings gear icon | | `delete` | Shows delete button | | `viewSizes` | Cycles preset sizes on double-click | No config objects. No verbose prop names. Just booleans. --- ## Components | Component | Purpose | | ------------------- | ------------------------------------------------ | | `` | Root grid container, manages state + persistence | | `` | Widget wrapper with all behaviour props | | `` | Metric card with trend indicators | | `` | recharts (bar, line, area, pie, scatter, radar) | | `` | heatmap, treemap, sunburst (built-in) | --- ## Hooks | Hook | Purpose | | --------------------- | ----------------------------------------------- | | `useDashboard(id)` | Access state, toggle edit mode | | `usePersistedState(k)` | Local state auto-persisted to storage | | `useWidgetEvents(id)` | Subscribe to settings/delete/resize/drag events | | `usePersistence(key)` | Manual save/restore with custom storage | | `useDraggable(id)` | Raw @dnd-kit drag state | | `useResize(id)` | Raw resize state | --- ## AI-native dashcraft is built to work with AI tools out of the box: - **`llms.txt`** at [`/llms.txt`](https://dashcraft.digitribe.world/llms.txt) — machine-readable API reference any LLM can fetch - **`AGENTS.md`** at [`/AGENTS.md`](https://dashcraft.digitribe.world/AGENTS.md) — full agent guide for code generation - **MCP server** — `dashcraft-mcp-codegen` for Claude Desktop, Cursor, and any MCP client ### MCP setup ```sh npm install -g dashcraft-mcp-codegen ``` Add to `claude_desktop_config.json`: ```json { "mcpServers": { "dashcraft": { "command": "dashcraft-codegen" } } } ``` Tools: `analyze_dashboard` · `generate_code` · `generate_project` --- ## Monorepo structure ``` packages/ core/ dashcraft-core — the React library apps/ site/ Product site (Next.js 15) tools/ codegen/ dashcraft-mcp-codegen — MCP server ``` --- ## Development ```sh # Install dependencies pnpm install # Start all apps pnpm dev # Start just the site pnpm --filter site dev # Build the library pnpm --filter dashcraft-core build # Run library tests pnpm --filter dashcraft-core test ``` Requires Node.js 20+, pnpm 9+. --- ## Contributing Contributions are very welcome. See [CONTRIBUTING.md](CONTRIBUTING.md) for the full guide. Short version: 1. Fork → branch → code 2. `pnpm --filter dashcraft-core build` must pass 3. `pnpm --filter dashcraft-core test` must pass 4. Open a PR with the checklist filled out --- ## License MIT © [Nishant Chaudhary](https://github.com/Nishant-Chaudhary5338) ## Source & license This open-source MCP server is cataloged on AgentStack and links to its original source — we do not rehost the code. - **Author:** [Nishant-Chaudhary5338](https://github.com/Nishant-Chaudhary5338) - **Source:** [Nishant-Chaudhary5338/dashcraft](https://github.com/Nishant-Chaudhary5338/dashcraft) - **License:** MIT - **Homepage:** https://dashcraft.digitribe.world Install and usage instructions live in the source repository linked above. ## Pricing - **Free** — Free ## Security capabilities Automated source analysis of v0.1.0 — what this tool can access: - **Network access:** no - **Filesystem access:** no - **Shell / process execution:** no - **Environment & secrets:** no - **Dynamic code execution:** no *"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.* ## Versions - **0.1.0** — security scan: passed — Imported from the upstream source. ## Links - Listing page: https://agentstack.voostack.com/l/mcp-nishant-chaudhary5338-dashcraft - Seller: https://agentstack.voostack.com/s/nishant-chaudhary5338 - Browse the marketplace: https://agentstack.voostack.com/browse --- Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.