MCP Tailwind Gemini Server

Instructions

Implementation Reference

• src/utils/tool-functions.ts:112-121 (handler)

  The main handler function that implements the logic for the 'get_shadcn_component' tool, returning a formatted response with component details.

  export async function getComponent(args: ShadcnComponentRequest) {
    return {
      content: [
        {
          type: 'text',
          text: `Retrieved ${args.componentName} component\nFramework: ${args.framework || 'react'}\nDemo included: ${args.includeDemo || false}`
        }
      ]
    };
  }

• src/index.ts:99-123 (registration)

  Registers the 'get_shadcn_component' tool in the TOOLS array, including its name, description, and input schema.

  {
    name: 'get_shadcn_component',
    description: 'Get shadcn/ui component source code and usage examples',
    inputSchema: {
      type: 'object',
      properties: {
        componentName: {
          type: 'string',
          description: 'Name of the shadcn/ui component (e.g., "button", "card", "form")'
        },
        includeDemo: {
          type: 'boolean',
          default: true,
          description: 'Include usage examples'
        },
        framework: {
          type: 'string',
          enum: ['react', 'svelte'],
          default: 'react',
          description: 'Framework to get component for'
        }
      },
      required: ['componentName']
    }
  },

• src/index.ts:433-434 (registration)

  In the tool call dispatcher switch statement, maps the tool name to the getComponent handler function.

  case 'get_shadcn_component':
    return await getComponent(args as unknown as ShadcnComponentRequest);

• src/types.ts:103-109 (schema)

  TypeScript interface defining the input parameters for the get_shadcn_component tool.

  export interface ShadcnComponentRequest {
    componentName: string;
    framework?: 'react' | 'svelte';
    variant?: string;
    includeDemo?: boolean;
    customization?: Record<string, any>;
  }