@primevue/mcp 0.0.1-alpha.7 → 4.5.3

package/README.md

@@ -6,14 +6,6 @@ Model Context Protocol (MCP) server for PrimeVue component library. Provides AI
 
 [Model Context Protocol (MCP)](https://modelcontextprotocol.io/) is an open standard that enables AI models to connect with external tools and data sources. By installing this MCP server, your AI assistant gains deep knowledge of PrimeVue components and can provide accurate, up-to-date information while helping you build Vue.js applications.
 
-## Quick Start
-
-The easiest way to use this MCP server is with `npx` - no installation required:
-
-```bash
-npx @primevue/mcp
-```
-
 ## Installation
 
 ### Claude Code
@@ -92,6 +84,57 @@ After adding, go to **Settings > MCP** and click the refresh button. The Compose
 
 ---
 
+### VS Code (GitHub Copilot)
+
+**Option 1: Project Configuration**
+
+Create `.vscode/mcp.json` in your project:
+
+```json
+{
+    "servers": {
+        "primevue": {
+            "command": "npx",
+            "args": ["-y", "@primevue/mcp"]
+        }
+    }
+}
+```
+
+**Option 2: User Configuration (Global)**
+
+Create or edit the MCP configuration file in your VS Code user data directory:
+
+- **macOS**: `~/Library/Application Support/Code/User/mcp.json`
+- **Windows**: `%APPDATA%\Code\User\mcp.json`
+- **Linux**: `~/.config/Code/User/mcp.json`
+
+```json
+{
+    "servers": {
+        "primevue": {
+            "command": "npx",
+            "args": ["-y", "@primevue/mcp"]
+        }
+    }
+}
+```
+
+**Option 3: Via Command Palette**
+
+1. Open Command Palette (`Cmd+Shift+P` / `Ctrl+Shift+P`)
+2. Type "MCP: Add Server"
+3. Select "Command (stdio)"
+4. Enter `primevue` as the server ID
+5. Enter `npx` as the command
+6. Enter `-y,@primevue/mcp` as the arguments
+
+After adding, use Copilot in **Agent mode** to access PrimeVue tools. The MCP server will be available in GitHub Copilot Chat.
+
+> **Reference:** [VS Code MCP Documentation](https://code.visualstudio.com/docs/copilot/chat/mcp-servers)
+
+---
+
 ### OpenAI Codex CLI
 
 **Option 1: Using the CLI**
@@ -255,12 +298,12 @@ After adding, restart Zed. Check the Agent Panel's settings view - a green indic
 
 Once installed, try asking your AI assistant:
 
-- "Show me how to use the DataTable component with sorting and filtering"
-- "What props does the Button component have?"
-- "How do I customize the Dialog component styling with Pass Through?"
-- "Compare the Select and Listbox components"
-- "What's the best component for a date picker?"
-- "Show me examples of the Toast composable"
+- "What are all the props available for the DataTable component?"
+- "Show me how to implement row selection in DataTable"
+- "How do I customize Button styles using Pass Through?"
+- "What design tokens are available for the Card component?"
+- "Find me a component for selecting multiple items from a list"
+- "Compare AutoComplete and Select components"
 
 ## Requirements
 

package/dist/{index.mjs → index.js}

@@ -6,7 +6,7 @@ import { runPrimeMcpServer } from "@primeuix/mcp";
 // data/components.json
 var components_default = {
   version: "1.0.0",
-  generatedAt: "2025-12-12",
+  generatedAt: "2025-12-15",
   components: [
     {
       name: "accordion",
@@ -36601,6 +36601,87 @@ const countries = ref([
         ]
       }
     },
+    {
+      name: "mcp",
+      title: "mcp",
+      description: "",
+      sections: [
+        {
+          id: "claudecode",
+          label: "Claude Code",
+          description: "Add the PrimeVue MCP server using the CLI. After adding, start a new session and use /mcp to verify the connection.",
+          examples: null
+        },
+        {
+          id: "cursor",
+          label: "Cursor",
+          description: "Create .cursor/mcp.json in your project or ~/.cursor/mcp.json for global configuration.",
+          examples: {
+            basic: '{\n    "mcpServers": {\n        "primevue": {\n            "command": "npx",\n            "args": ["-y", "@primevue/mcp"]\n        }\n    }\n}'
+          }
+        },
+        {
+          id: "exampleprompts",
+          label: "ExamplePromptsDoc",
+          description: "Once installed, try asking your AI assistant:",
+          examples: {
+            basic: '"What are all the props available for the DataTable component?"\n"Show me how to implement row selection in DataTable"\n"How do I customize Button styles using Pass Through?"\n"What design tokens are available for the Card component?"\n"Find me a component for selecting multiple items from a list"\n"Compare AutoComplete and Select components"'
+          }
+        },
+        {
+          id: "introduction",
+          label: "Introduction",
+          description: "Model Context Protocol (MCP) is an open standard that enables AI models to connect with external tools and data sources . The PrimeVue MCP server provides AI assistants with comprehensive access to: Component documentation including props , events , slots , and methods Theming and styling with Pass Through and design tokens Code examples and usage patterns Accessibility information Installation and configuration guides",
+          examples: null
+        },
+        {
+          id: "openaicodex",
+          label: "OpenAI Codex",
+          description: "Add the PrimeVue MCP server using the CLI or edit ~/.codex/config.toml directly.",
+          examples: {
+            basic: '# Using the CLI\ncodex mcp add primevue -- npx -y @primevue/mcp\n\n# Or edit ~/.codex/config.toml\n[mcp_servers.primevue]\ncommand = "npx"\nargs = ["-y", "@primevue/mcp"]'
+          }
+        },
+        {
+          id: "tools",
+          label: "ToolsDoc",
+          description: "Component Information Tools for exploring and understanding PrimeVue components. list_components : List all PrimeVue components with categories get_component : Get detailed info about a specific component search_components : Search components by name or description get_component_props : Get all props for a component get_component_events : Get all events for a component get_component_methods : Get all methods for a component get_component_slots : Get all slots for a component compare_components : Compare two components side by side Code Examples Tools for retrieving code samples and generating templates. get_usage_example : Get code examples for a component list_examples : List all available code examples get_example : Get a specific example by component and section generate_component_template : Generate a basic component template Theming & Styling Tools for customizing component appearance and styling. get_component_pt : Get Pass Through options for DOM customization get_component_tokens : Get design tokens (CSS variables) get_component_styles : Get CSS class names get_theming_guide : Get detailed theming guide get_passthrough_guide : Get Pass Through customization guide get_tailwind_guide : Get Tailwind CSS integration guide Documentation & Guides Tools for accessing PrimeVue documentation and guides. list_guides : List all guides and documentation pages get_guide : Get a specific guide by name get_configuration : Get PrimeVue configuration options get_installation : Get installation instructions get_accessibility_guide : Get accessibility guide get_accessibility_info : Get accessibility info for a component Search & Discovery Tools for finding components based on various criteria. search_all : Search across components, guides, and props suggest_component : Suggest components based on use case find_by_prop : Find components with a specific prop find_by_event : Find components that emit a specific event find_components_with_feature : Find components supporting a feature get_related_components : Find related components",
+          examples: null
+        },
+        {
+          id: "vscode",
+          label: "VS Code",
+          description: "Create .vscode/mcp.json in your project or ~/Library/Application Support/Code/User/mcp.json for global configuration.",
+          examples: {
+            basic: '{\n    "servers": {\n        "primevue": {\n            "command": "npx",\n            "args": ["-y", "@primevue/mcp"]\n        }\n    }\n}'
+          }
+        },
+        {
+          id: "windsurf",
+          label: "Windsurf",
+          description: "Edit ~/.codeium/windsurf/mcp_config.json to add the PrimeVue MCP server.",
+          examples: {
+            basic: '{\n    "mcpServers": {\n        "primevue": {\n            "command": "npx",\n            "args": ["-y", "@primevue/mcp"]\n        }\n    }\n}'
+          }
+        },
+        {
+          id: "zed",
+          label: "Zed",
+          description: "Add to your Zed settings at ~/.config/zed/settings.json (Linux) or ~/Library/Application Support/Zed/settings.json (macOS).",
+          examples: {
+            basic: '{\n    "context_servers": {\n        "primevue": {\n            "command": {\n                "path": "npx",\n                "args": ["-y", "@primevue/mcp"]\n            }\n        }\n    }\n}'
+          }
+        }
+      ],
+      api: {
+        props: null,
+        slots: null,
+        emits: null,
+        pt: null,
+        styles: null,
+        tokens: null
+      }
+    },
     {
       name: "megamenu",
       title: "Vue MegaMenu Component",
@@ -73153,6 +73234,80 @@ app.component('Button', Button);`,
         }
       ]
     },
+    {
+      name: "mcp",
+      path: "mcp",
+      title: "MCP Server",
+      description: "Model Context Protocol (MCP) server for PrimeVue component library. Provides AI assistants with comprehensive access to PrimeVue component documentation.",
+      sections: [
+        {
+          id: "claudecode",
+          label: "Claude Code",
+          description: "Add the PrimeVue MCP server using the CLI. After adding, start a new session and use /mcp to verify the connection.",
+          examples: null
+        },
+        {
+          id: "cursor",
+          label: "Cursor",
+          description: "Create .cursor/mcp.json in your project or ~/.cursor/mcp.json for global configuration.",
+          examples: {
+            basic: '{\n    "mcpServers": {\n        "primevue": {\n            "command": "npx",\n            "args": ["-y", "@primevue/mcp"]\n        }\n    }\n}'
+          }
+        },
+        {
+          id: "exampleprompts",
+          label: "Example Prompts",
+          description: "Once installed, try asking your AI assistant:",
+          examples: {
+            basic: '"What are all the props available for the DataTable component?"\n"Show me how to implement row selection in DataTable"\n"How do I customize Button styles using Pass Through?"\n"What design tokens are available for the Card component?"\n"Find me a component for selecting multiple items from a list"\n"Compare AutoComplete and Select components"'
+          }
+        },
+        {
+          id: "introduction",
+          label: "Introduction",
+          description: "Model Context Protocol (MCP) is an open standard that enables AI models to connect with external tools and data sources . The PrimeVue MCP server provides AI assistants with comprehensive access to: Component documentation including props , events , slots , and methods Theming and styling with Pass Through and design tokens Code examples and usage patterns Accessibility information Installation and configuration guides",
+          examples: null
+        },
+        {
+          id: "openaicodex",
+          label: "OpenAI Codex",
+          description: "Add the PrimeVue MCP server using the CLI or edit ~/.codex/config.toml directly.",
+          examples: {
+            basic: '# Using the CLI\ncodex mcp add primevue -- npx -y @primevue/mcp\n\n# Or edit ~/.codex/config.toml\n[mcp_servers.primevue]\ncommand = "npx"\nargs = ["-y", "@primevue/mcp"]'
+          }
+        },
+        {
+          id: "tools",
+          label: "Tools",
+          description: "Component Information Tools for exploring and understanding PrimeVue components. list_components : List all PrimeVue components with categories get_component : Get detailed info about a specific component search_components : Search components by name or description get_component_props : Get all props for a component get_component_events : Get all events for a component get_component_methods : Get all methods for a component get_component_slots : Get all slots for a component compare_components : Compare two components side by side Code Examples Tools for retrieving code samples and generating templates. get_usage_example : Get code examples for a component list_examples : List all available code examples get_example : Get a specific example by component and section generate_component_template : Generate a basic component template Theming & Styling Tools for customizing component appearance and styling. get_component_pt : Get Pass Through options for DOM customization get_component_tokens : Get design tokens (CSS variables) get_component_styles : Get CSS class names get_theming_guide : Get detailed theming guide get_passthrough_guide : Get Pass Through customization guide get_tailwind_guide : Get Tailwind CSS integration guide Documentation & Guides Tools for accessing PrimeVue documentation and guides. list_guides : List all guides and documentation pages get_guide : Get a specific guide by name get_configuration : Get PrimeVue configuration options get_installation : Get installation instructions get_accessibility_guide : Get accessibility guide get_accessibility_info : Get accessibility info for a component Search & Discovery Tools for finding components based on various criteria. search_all : Search across components, guides, and props suggest_component : Suggest components based on use case find_by_prop : Find components with a specific prop find_by_event : Find components that emit a specific event find_components_with_feature : Find components supporting a feature get_related_components : Find related components",
+          examples: null
+        },
+        {
+          id: "vscode",
+          label: "VS Code",
+          description: "Create .vscode/mcp.json in your project or ~/Library/Application Support/Code/User/mcp.json for global configuration.",
+          examples: {
+            basic: '{\n    "servers": {\n        "primevue": {\n            "command": "npx",\n            "args": ["-y", "@primevue/mcp"]\n        }\n    }\n}'
+          }
+        },
+        {
+          id: "windsurf",
+          label: "Windsurf",
+          description: "Edit ~/.codeium/windsurf/mcp_config.json to add the PrimeVue MCP server.",
+          examples: {
+            basic: '{\n    "mcpServers": {\n        "primevue": {\n            "command": "npx",\n            "args": ["-y", "@primevue/mcp"]\n        }\n    }\n}'
+          }
+        },
+        {
+          id: "zed",
+          label: "Zed",
+          description: "Add to your Zed settings at ~/.config/zed/settings.json (Linux) or ~/Library/Application Support/Zed/settings.json (macOS).",
+          examples: {
+            basic: '{\n    "context_servers": {\n        "primevue": {\n            "command": {\n                "path": "npx",\n                "args": ["-y", "@primevue/mcp"]\n            }\n        }\n    }\n}'
+          }
+        }
+      ]
+    },
     {
       name: "accessibility",
       path: "guides/accessibility",
@@ -73339,7 +73494,7 @@ const items = [
 // package.json
 var package_default = {
   name: "@primevue/mcp",
-  version: "0.0.1-alpha.7",
+  version: "4.5.3",
   author: "PrimeTek Informatics",
   description: "Model Context Protocol (MCP) server for PrimeVue component library",
   homepage: "https://primevue.org/",
@@ -73362,16 +73517,17 @@ var package_default = {
     "components"
   ],
   bin: {
-    "primevue-mcp": "./dist/index.mjs"
+    "primevue-mcp": "./dist/index.js"
   },
-  main: "./dist/index.mjs",
-  module: "./dist/index.mjs",
-  types: "./dist/index.d.mts",
+  type: "module",
+  main: "./dist/index.js",
+  module: "./dist/index.js",
+  types: "./dist/index.d.ts",
   exports: {
     ".": {
-      types: "./dist/index.d.mts",
-      import: "./dist/index.mjs",
-      default: "./dist/index.mjs"
+      types: "./dist/index.d.ts",
+      import: "./dist/index.js",
+      default: "./dist/index.js"
     }
   },
   publishConfig: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primevue/mcp",
-  "version": "0.0.1-alpha.7",
+  "version": "4.5.3",
   "author": "PrimeTek Informatics",
   "description": "Model Context Protocol (MCP) server for PrimeVue component library",
   "homepage": "https://primevue.org/",
@@ -23,16 +23,17 @@
     "components"
   ],
   "bin": {
-    "primevue-mcp": "./dist/index.mjs"
+    "primevue-mcp": "./dist/index.js"
   },
-  "main": "./dist/index.mjs",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.mts",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.mts",
-      "import": "./dist/index.mjs",
-      "default": "./dist/index.mjs"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
     }
   },
   "publishConfig": {
@@ -44,7 +45,7 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@primeuix/mcp": "^0.0.1-alpha.2"
+    "@primeuix/mcp": "^1.0.0"
   },
   "devDependencies": {
     "tsup": "^8.1.0"