myoperator-mcp 0.0.1 → 0.0.3

package/README.md

@@ -1,104 +1,255 @@
 # myOperator MCP Server
 
-Model Context Protocol (MCP) server for the myOperator UI component library. Enables AI assistants like Claude, Cursor, and VSCode Copilot to access component metadata, examples, and design tokens.
+Model Context Protocol (MCP) server for the myOperator UI component library. Enables AI assistants like Claude, Cursor, and VSCode Copilot to access component metadata, code examples, and design tokens.
 
-## Available Tools
+[![npm version](https://badge.fury.io/js/myoperator-mcp.svg)](https://www.npmjs.com/package/myoperator-mcp)
 
-| Tool | Description |
-|------|-------------|
-| `list-components` | List all available components with descriptions |
-| `get-component-metadata` | Get props, variants, dependencies for a component |
-| `get-component-examples` | Get React code examples |
-| `list-design-tokens` | List design tokens (colors, spacing, radius) |
-| `get-component-accessibility` | Get accessibility guidelines |
+## Quick Start
+
+```bash
+npx myoperator-mcp
+```
+
+## Installation & Setup
+
+### Cursor (One-Click Install)
+
+[**Install in Cursor**](cursor://anysphere.cursor-deeplink/mcp/install?name=myoperator&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsIm15b3BlcmF0b3ItbWNwIl19)
+
+Or manually edit `~/.cursor/mcp.json`:
+
+```json
+{
+  "mcpServers": {
+    "myoperator": {
+      "command": "npx",
+      "args": ["-y", "myoperator-mcp"]
+    }
+  }
+}
+```
+
+3. Restart Cursor
 
-## Installation
+### Claude Code
 
-### For Cursor
+Run this command in your terminal:
 
-Add to `~/.cursor/mcp.json`:
+```bash
+claude mcp add myoperator -- npx -y myoperator-mcp
+```
+
+Or manually add to `~/.claude.json`:
 
 ```json
 {
   "mcpServers": {
     "myoperator": {
       "command": "npx",
-      "args": ["myoperator-mcp"]
+      "args": ["-y", "myoperator-mcp"]
     }
   }
 }
 ```
 
-### For Claude Code / Claude Desktop
+### Claude Desktop
 
-Add to your Claude config:
+Add to your Claude Desktop config file:
+
+**macOS:** `~/Library/Application Support/Claude/claude_desktop_config.json`
+**Windows:** `%APPDATA%\Claude\claude_desktop_config.json`
 
 ```json
 {
   "mcpServers": {
     "myoperator": {
       "command": "npx",
-      "args": ["myoperator-mcp"]
+      "args": ["-y", "myoperator-mcp"]
     }
   }
 }
 ```
 
-### For VSCode
+### VSCode (with GitHub Copilot)
 
-Add to `.vscode/mcp.json`:
+Add to `.vscode/mcp.json` in your project:
 
 ```json
 {
   "servers": {
     "myoperator": {
       "command": "npx",
-      "args": ["myoperator-mcp"]
+      "args": ["-y", "myoperator-mcp"]
     }
   }
 }
 ```
 
+Or use Command Palette → "MCP: Add Server"
+
+---
+
+## Available Tools
+
+| Tool | Description |
+|------|-------------|
+| `list-components` | List all available components with descriptions |
+| `get-component-metadata` | Get props, variants, dependencies for a component |
+| `get-component-examples` | Get React code examples |
+| `list-design-tokens` | List design tokens (colors, spacing, radius, typography) |
+| `get-component-accessibility` | Get accessibility guidelines and ARIA attributes |
+
+---
+
 ## Usage Examples
 
-### Ask your AI assistant:
+Once installed, ask your AI assistant:
+
+### Component Discovery
+
+> "What components are available in myOperator UI?"
+
+> "List all the UI components I can use"
+
+### Component Details
+
+> "Show me the Button component props and variants"
+
+> "What are the size options for the Badge component?"
+
+> "How do I use the Table component with loading state?"
+
+### Code Examples
+
+> "Give me a code example for a Button with an icon"
 
-- "What components are available in myOperator UI?"
-- "Show me how to use the Button component with loading state"
-- "What props does the Table component accept?"
-- "What are the accessibility requirements for the DropdownMenu?"
-- "List all the color tokens in the design system"
+> "Show me how to create a dropdown menu"
+
+> "How do I make an interactive Tag component?"
+
+### Design Tokens
+
+> "What color tokens are available?"
+
+> "List all spacing values in the design system"
+
+> "What's the primary brand color?"
+
+### Accessibility
+
+> "What accessibility features does the DropdownMenu have?"
+
+> "How do I make the Button accessible for screen readers?"
+
+> "What keyboard shortcuts does the Table support?"
+
+---
 
 ## Components
 
-The MCP server provides information for:
+The MCP server provides information for these components:
+
+| Component | Description |
+|-----------|-------------|
+| **Button** | Customizable button with 6 variants, 4 sizes, loading states, and icon support |
+| **Badge** | Status badges for active, failed, disabled states |
+| **Tag** | Event labels with optional bold prefix, interactive and selectable |
+| **Table** | Composable table with size variants, loading skeleton, empty state, sticky columns |
+| **DropdownMenu** | Radix-based dropdown with full keyboard navigation |
+
+---
+
+## Tool Reference
+
+### `list-components`
+
+Lists all available components.
+
+```
+Input: (none)
+Output: Array of components with name, id, description, dependencyCount
+```
+
+### `get-component-metadata`
+
+Get detailed metadata for a specific component.
+
+```
+Input: { componentName: "button" }
+Output: {
+  name, description, dependencies,
+  props (with types, defaults, descriptions),
+  variants (with options),
+  import statement
+}
+```
 
-- **Button** - Customizable button with variants, sizes, and icons
-- **Badge** - Status badges (active, failed, disabled)
-- **Tag** - Event labels with optional bold prefix
-- **Table** - Composable table with loading/empty states
-- **DropdownMenu** - Radix-based dropdown with keyboard navigation
+### `get-component-examples`
+
+Get code examples for a component.
+
+```
+Input: { componentName: "button", exampleType?: "loading" }
+Output: {
+  component, import statement,
+  examples (with title, description, code)
+}
+```
+
+### `list-design-tokens`
+
+List design tokens from the design system.
+
+```
+Input: { category?: "colors" | "spacing" | "radius" | "typography" }
+Output: {
+  tokens (with name, value, cssVariable, description),
+  usage instructions
+}
+```
+
+### `get-component-accessibility`
+
+Get accessibility guidelines for a component.
+
+```
+Input: { componentName: "dropdown-menu" }
+Output: {
+  guidelines (semantic, visual, best practices),
+  ariaAttributes (with usage),
+  keyboardSupport (key → action mapping)
+}
+```
+
+---
 
 ## Development
 
 ```bash
+# Clone the repository
+git clone https://github.com/Ankish8/storybook-npm.git
+cd storybook-npm/packages/mcp
+
 # Install dependencies
 npm install
 
 # Build
 npm run build
 
-# Watch mode
+# Watch mode for development
 npm run dev
 
 # Test locally
 echo '{"jsonrpc":"2.0","method":"tools/list","id":1}' | node dist/index.js
 ```
 
-## Publishing
+---
 
-```bash
-npm publish
-```
+## Related
+
+- [myoperator-ui](https://www.npmjs.com/package/myoperator-ui) - CLI for adding myOperator UI components to your project
+- [Model Context Protocol](https://modelcontextprotocol.io/) - Open standard for AI-tool integration
+
+## License
 
-Then users can run via `npx myoperator-mcp`.
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myoperator-mcp",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "MCP server for myOperator UI components - enables AI assistants to access component metadata, examples, and design tokens",
   "type": "module",
   "bin": "./dist/index.js",