get_component_demo

Instructions

Implementation Reference

• src/tools/components/get-component-demo.ts:4-15 (handler)

  The main handler function for the 'get_component_demo' tool. It uses the framework-specific axios implementation (determined by getAxiosImplementation) to fetch demo code for a given shadcn/ui component name, returning the code as text content.

  export async function handleGetComponentDemo({ componentName }: { componentName: string }) {
    try {
      const axios = await getAxiosImplementation();
      const demoCode = await axios.getComponentDemo(componentName);
      return {
        content: [{ type: "text", text: demoCode }]
      };
    } catch (error) {
      logError(`Failed to get demo for component "${componentName}"`, error);
      throw new Error(`Failed to get demo for component "${componentName}": ${error instanceof Error ? error.message : String(error)}`);
    }
  }

• src/utils/axios-svelte.ts:63-72 (helper)

  Svelte framework implementation: fetches component demo from the registry at REGISTRY_PATH/examples/{componentName}-demo.svelte via GitHub raw API.

  async function getComponentDemo(componentName: string): Promise<string> {
      const demoPath = `${REGISTRY_PATH}/examples/${componentName.toLowerCase()}-demo.svelte`;
  
      try {
          const response = await githubRaw.get(`/${demoPath}`);
          return response.data;
      } catch (error) {
          throw new Error(`Demo for component "${componentName}" not found in v4 registry`);
      }
  }

• src/utils/axios.ts:75-86 (helper)

  Default framework implementation (shadcn/ui): fetches component demo from {basePath}/examples/{componentName}-{suffix}.tsx via GitHub raw API, using getRegistryBasePath() and getDemoSuffix() for framework config.

  async function getComponentDemo(componentName: string): Promise<string> {
      const basePath = getRegistryBasePath();
      const suffix = getDemoSuffix();
      const demoPath = `${basePath}/examples/${componentName.toLowerCase()}-${suffix}.tsx`;
      
      try {
          const response = await githubRaw.get(`/${demoPath}`);
          return response.data;
      } catch (error) {
          throw new Error(`Demo for component "${componentName}" not found in v4 registry`);
      }
  }

• src/utils/axios-react-native.ts:68-72 (helper)

  React Native framework implementation: returns a static message that demo is not available in the React Native registry.

  async function getComponentDemo(componentName: string): Promise<string> {
    // React Native registry typically doesn't have dedicated demo files per component
    // For now, return an informative message
    return `Demo for component "${componentName}" is not available in the React Native registry. Check the showcase app at apps/showcase for examples.`;
  }

• src/utils/axios-vue.ts:117-139 (helper)

  Vue framework implementation: tries multiple file paths (DEMOS_PATH/{Name}Demo.vue, DEMOS_PATH/{Name}.vue) to fetch the component demo from the Vue registry.

  async function getComponentDemo(
    componentName: string,
    style: string = "new-york-v4"
  ): Promise<string> {
    const formattedComponentName = formatComponentNameToCapital(componentName)
    const demoPaths = [
      `${DEMOS_PATH}/${formattedComponentName}Demo.vue`,
      `${DEMOS_PATH}/${formattedComponentName}.vue`,
    ]
  
    for (const demoPath of demoPaths) {
      try {
        const response = await githubRaw.get(`/${demoPath}`)
        return response.data
      } catch (error) {
        continue
      }
    }
  
    throw new Error(
      `Demo for component "${formattedComponentName}" not found in Vue registry (v4)`
    )
  }

• src/tools/components/get-component-demo.ts:17-22 (schema)

  Input schema definition for the tool: requires 'componentName' as a string with description 'Name of the shadcn/ui component (e.g., accordion, button)'.

  export const schema = {
    componentName: {
      type: 'string',
      description: 'Name of the shadcn/ui component (e.g., "accordion", "button")'
    }
  }; 

• src/tools/index.ts:56-64 (registration)

  Tool registration object: maps 'get_component_demo' to its name, description, inputSchema (with required componentName). Also exported in toolHandlers and toolSchemas maps on lines 22 and 35.

  'get_component_demo': {
    name: 'get_component_demo',
    description: 'Get demo code illustrating how a shadcn/ui v4 component should be used',
    inputSchema: {
      type: 'object',
      properties: getComponentDemoSchema,
      required: ['componentName']
    }
  },

• src/server/handler.ts:119-136 (registration)

  Server handler registration: includes the tool definition with name, description, inputSchema, and annotations (title 'Get Component Demo', readOnlyHint true) in the server's tool list.

  {
    name: 'get_component_demo',
    description: 'Get demo code illustrating how a shadcn/ui v4 component should be used',
    inputSchema: {
      type: 'object',
      properties: {
        componentName: {
          type: 'string',
          description: 'Name of the shadcn/ui component (e.g., "accordion", "button")',
        },
      },
      required: ['componentName'],
    },
    annotations: {
      title: "Get Component Demo",
      readOnlyHint: true,
    },
  },

• src/server/capabilities.ts:93-107 (registration)

  Capabilities registration: defines the tool in the server's capabilities with description and inputSchema.

  get_component_demo: {
    description:
      "Get demo code illustrating how a shadcn/ui v4 component should be used",
    inputSchema: {
      type: "object",
      properties: {
        componentName: {
          type: "string",
          description:
            'Name of the shadcn/ui component (e.g., "accordion", "button")',
        },
      },
      required: ["componentName"],
    },
  },