@primevue/mcp 0.0.1-alpha.7 → 0.0.1-alpha.8

package/README.md

@@ -92,6 +92,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 +306,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}

@@ -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: "quickstart",
+          label: "Quick Start",
+          description: "The easiest way to use this MCP server is with npx - no installation required:",
+          examples: {
+            basic: "npx @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: "quickstart",
+          label: "Quick Start",
+          description: "The easiest way to use this MCP server is with npx - no installation required:",
+          examples: {
+            basic: "npx @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: "0.0.1-alpha.8",
   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": "0.0.1-alpha.8",
   "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": "^0.0.1-alpha.3"
   },
   "devDependencies": {
     "tsup": "^8.1.0"