Shadcn UI MCP Server

Implementation Reference

• src/handlers.ts:47-75 (handler)

  Main handler function for the 'install-component' tool. Validates component and runtime parameters, fetches component data using cached fetch, determines the installation command based on runtime (defaults to npm), and returns it.

  export const installComponent = async ({component, runtime}: {component: string, runtime?: string}) => {
      try {
          if (!component) {
              return createResponse("Component name is required", true);
          }
          
          if (runtime && !validateRuntime(runtime)) {
              return createResponse(`Invalid runtime: ${runtime}. Must be one of: npm, pnpm, yarn, bun`, true);
          }
          
          const componentData = await fetchAndCacheComponentData(component);
          
          if (!componentData.commands?.[0]) {
              return createResponse(`No installation command found for component '${component}'`, true);
          }
  
          const commands = componentData.commands[0];
          const selectedRuntime = runtime as PackageManager | undefined;
          const command = selectedRuntime ? commands[selectedRuntime] : commands.npm;
  
          if (!command) {
              return createResponse(`No installation command found for runtime '${runtime}'`, true);
          }
  
          return createResponse(command);
      } catch (error) {
          return handleError(error, "Error generating installation command");
      }
  }

• src/index.ts:32-35 (schema)

  Zod input schema for the 'install-component' tool defining component (required string) and runtime (optional string).

  toolSchema: {
      component: z.string().describe("Name of the component to install"),
      runtime: z.string().describe("User runtime (npm, pnpm, yarn, bun)").optional()
  },

• src/index.ts:26-36 (registration)

  Tool definition object in toolDefinitions for 'install-component', including description, JSON Schema parameters, Zod toolSchema, and handler reference.

  "install-component": {
      description: "Install a shadcn/ui component",
      parameters: {
          component: { type: "string", description: "Name of the component to install" },
          runtime: { type: "string", description: "User runtime (npm, pnpm, yarn, bun)", optional: true }
      },
      toolSchema: {
          component: z.string().describe("Name of the component to install"),
          runtime: z.string().describe("User runtime (npm, pnpm, yarn, bun)").optional()
      },
      handler: installComponent   

• src/index.ts:76-82 (registration)

  Registration loop that calls server.tool() for all tools defined in toolDefinitions, including 'install-component', passing name, schema, and handler.

  for (const [name, definition] of Object.entries(toolDefinitions)) {
      server.tool(
          name,
          definition.toolSchema,
          definition.handler
      );
  }