mcp-pro-ui 1.0.0

package/README.md

@@ -0,0 +1,116 @@
+# mcp-pro-ui
+
+> MCP server for [@dangbt/pro-ui](https://www.npmjs.com/package/@dangbt/pro-ui) — lets AI agents (Claude Code, Cursor, Copilot, Windsurf) browse components, get API references, and scaffold React pages.
+
+## What it does
+
+When you add `mcp-pro-ui` to your AI coding tool, the AI can:
+
+- **Discover** all 40+ components available in `@dangbt/pro-ui`
+- **Get props API** — types, defaults, descriptions for any component
+- **Get code examples** — ready-to-paste TypeScript/React snippets
+- **Search by use case** — "I need a data table with server-side pagination"
+- **Scaffold pages** — generate complete CRUD pages, dashboards, login forms
+
+## Setup
+
+### Claude Code
+
+```bash
+claude mcp add mcp-pro-ui -- npx -y mcp-pro-ui
+```
+
+Or add to `~/.claude/settings.json`:
+
+```json
+{
+  "mcpServers": {
+    "pro-ui": {
+      "command": "npx",
+      "args": ["-y", "mcp-pro-ui"]
+    }
+  }
+}
+```
+
+### Cursor
+
+Add to `.cursor/mcp.json` in your project:
+
+```json
+{
+  "mcpServers": {
+    "pro-ui": {
+      "command": "npx",
+      "args": ["-y", "mcp-pro-ui"]
+    }
+  }
+}
+```
+
+### Windsurf / Cline
+
+Same `npx -y mcp-pro-ui` pattern — refer to your tool's MCP docs.
+
+## Available tools
+
+| Tool | Description |
+|------|-------------|
+| `list_components` | List all components, optionally filtered by category |
+| `get_component_api` | Full props reference for a component |
+| `get_component_example` | Copy-paste code example |
+| `search_components` | Find components by use case description |
+| `scaffold_page` | Generate a complete page (crud-list, crud-form, dashboard, settings, login) |
+
+## Example prompts (after adding MCP)
+
+```
+"Show me all form components in pro-ui"
+"Give me the ProTable API with all props"
+"What component should I use for a confirmation dialog?"
+"Scaffold a Users CRUD list page"
+"Generate a settings page using pro-ui"
+```
+
+## Quick start (manual install)
+
+```bash
+npm install @dangbt/pro-ui
+```
+
+```tsx
+import { ProTable, ProForm, Layout, Button, Modal, Toast } from '@dangbt/pro-ui'
+import { ThemeProvider, ToastProvider } from '@dangbt/pro-ui'
+
+// Wrap your app
+function App() {
+  return (
+    <ThemeProvider defaultTheme="system">
+      <ToastProvider />
+      <YourApp />
+    </ThemeProvider>
+  )
+}
+```
+
+## Components overview
+
+| Category | Components |
+|----------|------------|
+| **Data** | ProTable (server/client-side, filtering, sorting, bulk actions) |
+| **Forms** | ProForm, ProFormInput, ProFormSelect, ProFormDatePicker, ProFormTextarea, ProFormSwitch, ProFormCheckbox, ProFormComboBox, ProFormRadioGroup, ProFormAsyncSelect, ProFormNumberField |
+| **Layout** | Layout (sidebar + header shell) |
+| **Overlays** | Modal, Drawer, Popover, Tooltip, Menu |
+| **Feedback** | Toast, Alert, Spinner, Skeleton, ProgressBar, Meter |
+| **Display** | Statistic, Steps, Empty, Card, Badge, Avatar, Tabs, Breadcrumbs |
+| **Theme** | ThemeProvider, useTheme (light/dark/system) |
+
+## Links
+
+- **npm**: [@dangbt/pro-ui](https://www.npmjs.com/package/@dangbt/pro-ui)
+- **GitHub**: [dangbt/pro-ui](https://github.com/dangbt/pro-ui)
+- **Showcase**: [pro-ui.pages.dev](https://pro-ui.pages.dev)
+
+## License
+
+MIT

package/dist/components-data.d.ts

@@ -0,0 +1,28 @@
+export interface ComponentInfo {
+    name: string;
+    importName: string;
+    category: 'data' | 'form' | 'layout' | 'overlay' | 'feedback' | 'display' | 'theme';
+    description: string;
+    useCases: string[];
+    props: PropInfo[];
+    example: string;
+    notes?: string;
+}
+export interface PropInfo {
+    name: string;
+    type: string;
+    required: boolean;
+    default?: string;
+    description: string;
+}
+export declare const COMPONENTS: ComponentInfo[];
+export declare const CATEGORIES: {
+    readonly data: "Data Display & Tables";
+    readonly form: "Forms & Inputs";
+    readonly layout: "Layout";
+    readonly overlay: "Overlays & Modals";
+    readonly feedback: "Feedback & Status";
+    readonly display: "Display & Typography";
+    readonly theme: "Theming";
+};
+//# sourceMappingURL=components-data.d.ts.map

package/dist/components-data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"components-data.d.ts","sourceRoot":"","sources":["../src/components-data.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAA;IACZ,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,CAAA;IACnF,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,KAAK,EAAE,QAAQ,EAAE,CAAA;IACjB,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,EAAE,MAAM,CAAA;CACpB;AAED,eAAO,MAAM,UAAU,EAAE,aAAa,EAysBrC,CAAA;AAED,eAAO,MAAM,UAAU;;;;;;;;CAQb,CAAA"}