install_component
Generate installation commands for Starwind UI components using npm, yarn, or pnpm package managers to add UI elements to your project.
Instructions
Generates installation commands for Starwind UI components
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| packageManager | No | Package manager to use (npm, yarn, pnpm) | |
| component | Yes | Component name to install | |
| additionalComponents | No | Additional components to install | |
| options | No | Additional options for installation (e.g., '--all' to install all components) |
Implementation Reference
- The main handler function for the 'install_component' tool. It generates installation commands for Starwind UI components based on the provided arguments, supporting different package managers and returning structured command recommendations.handler: async (args: InstallComponentArgs) => { const packageManager = args.packageManager || "npx"; const component = args.component; const additionalComponents = args.additionalComponents || []; // Combine all components const components = [component, ...additionalComponents]; // Build the installation command based on the package manager let baseCommand: string; switch (packageManager) { case "npm": baseCommand = "npx starwind@latest add"; break; case "yarn": baseCommand = "yarn dlx starwind@latest add"; break; case "pnpm": baseCommand = "pnpm dlx starwind@latest add"; break; default: baseCommand = "npx starwind@latest add"; } // Common component options const commonOptions = [ "--all", // Install all components ]; // Example components const popularComponents = [ "accordion", "button", "card", "breadcrumb", "dropdown", "select", "tabs", ]; // Filtered list of requested components that are included in the popular list const requestedPopularComponents = components.filter((c) => popularComponents.includes(c)); return { packageManager, baseCommand, components, // Example with requested component(s) example: `${baseCommand} ${components.join(" ")}`, availableOptions: commonOptions, popularComponents, recommendations: { single: `${baseCommand} ${component}`, multiple: components.length > 1 ? `${baseCommand} ${components.join(" ")}` : null, all: `${baseCommand} --all`, }, instructions: "Run one of these commands in your project directory to install Starwind UI components. You can combine multiple components in a single command.", note: "Make sure you have initialized Starwind UI first with the init command.", }; },
- The input schema for the 'install_component' tool, defining the expected arguments including packageManager, component (required), additionalComponents, and options.inputSchema: { type: "object", properties: { packageManager: { type: "string", description: "Package manager to use (npm, yarn, pnpm)", enum: ["npm", "yarn", "pnpm"], }, component: { type: "string", description: "Component name to install", }, additionalComponents: { type: "array", description: "Additional components to install", items: { type: "string", }, }, options: { type: "array", description: "Additional options for installation (e.g., '--all' to install all components)", items: { type: "string", }, }, }, required: ["component"], },
- src/tools/index.ts:40-41 (registration)Registration of the installComponentTool into the central tools Map, making it available for the MCP server.// Register install component tool tools.set(installComponentTool.name, installComponentTool);
- TypeScript interface defining the arguments for the install_component handler, matching the input schema.export interface InstallComponentArgs { /** Package manager to use (npm, yarn, pnpm) */ packageManager?: "npm" | "yarn" | "pnpm"; /** Component name to install */ component: string; /** Additional components to install */ additionalComponents?: string[]; /** Additional options for installation */ options?: string[]; }
- src/tools/index.ts:11-11 (registration)Import of the installComponentTool from its definition file.import { installComponentTool } from "./install_component_tool.js";