fumadocs-mcp

Instructions

Implementation Reference

• src/tools/get-component.ts:15-87 (handler)

  Main handler function getComponent that executes the tool logic: validates input, looks up component path from COMPONENT_PATHS or searches the docs index, fetches documentation content, and returns formatted output with usage tips

  export async function getComponent(params: GetComponentParams): Promise<string> {
    const { component } = params;
  
    if (!component || component.trim().length === 0) {
      return "Error: Please provide a component name.";
    }
  
    const normalizedComponent = component.toLowerCase().trim();
  
    // Try exact match first
    let componentPath = COMPONENT_PATHS[normalizedComponent];
  
    // If no exact match, try to find it
    if (!componentPath) {
      // Search for it in the docs index
      const searchResults = searchDocsIndex(normalizedComponent, "ui");
      const componentResult = searchResults.find(
        (r) => r.path.includes("/components/") && r.title.toLowerCase().includes(normalizedComponent)
      );
  
      if (componentResult) {
        componentPath = componentResult.path;
      }
    }
  
    if (!componentPath) {
      // List available components
      const availableComponents = Object.keys(COMPONENT_PATHS).sort();
      return [
        `Component not found: ${component}`,
        "",
        "Available components:",
        ...availableComponents.map((c) => `- ${c}`),
        "",
        "Tips:",
        "- Use the exact component name",
        "- Try `search_docs` with your query to find related documentation",
      ].join("\n");
    }
  
    try {
      const content = await fetchPage(componentPath);
  
      const output: string[] = [
        `# Component: ${component}`,
        `Path: ${componentPath}`,
        "",
        "---",
        "",
        content,
        "",
        "---",
        "",
        "## Usage Tips",
        "",
        "1. Import the component from `fumadocs-ui/components`",
        "2. Check the props table above for configuration options",
        "3. See the examples for common usage patterns",
        "",
        `Source: https://fumadocs.vercel.app${componentPath}`,
      ];
  
      return output.join("\n");
    } catch (error) {
      if (error instanceof FumadocsError) {
        if (error.code === "PAGE_NOT_FOUND") {
          return `Component documentation not found at: ${componentPath}`;
        }
        return `Error fetching component docs: ${error.message} (${error.code})`;
      }
      return `Unexpected error: ${error instanceof Error ? error.message : "Unknown error"}`;
    }
  }

• src/tools/get-component.ts:5-13 (schema)

  Schema definition for the get_component tool: getComponentSchema defines the Zod validation schema for the component parameter, and GetComponentParams type defines the TypeScript interface

  export const getComponentSchema = {
    component: z
      .string()
      .describe("Component name (e.g., 'accordion', 'tabs', 'codeblock', 'steps')"),
  };
  
  export type GetComponentParams = {
    component: string;
  };

• src/index.ts:78-89 (registration)

  Tool registration in src/index.ts where get_component is registered with the MCP server using server.tool(), including the tool description, schema binding, and async handler wrapper

  // Register get_component tool
  server.tool(
    "get_component",
    "Get documentation for a specific Fumadocs UI component. Includes props, usage examples, and configuration options. Available components: accordion, tabs, codeblock, steps, files, banner, and more.",
    getComponentSchema,
    async (params) => {
      const result = await getComponent(params);
      return {
        content: [{ type: "text", text: result }],
      };
    }
  );

• src/data/docs-index.ts:26-41 (helper)

  COMPONENT_PATHS helper data structure that maps component names (e.g., 'accordion', 'tabs', 'codeblock') to their documentation paths, used by getComponent for exact matching

  export const COMPONENT_PATHS: Record<string, string> = {
    accordion: "/docs/ui/components/accordion",
    "auto-type-table": "/docs/ui/components/auto-type-table",
    banner: "/docs/ui/components/banner",
    codeblock: "/docs/ui/components/codeblock",
    "code-block": "/docs/ui/components/codeblock",
    "dynamic-codeblock": "/docs/ui/components/dynamic-codeblock",
    files: "/docs/ui/components/files",
    "github-info": "/docs/ui/components/github-info",
    "graph-view": "/docs/ui/components/graph-view",
    "image-zoom": "/docs/ui/components/image-zoom",
    "inline-toc": "/docs/ui/components/inline-toc",
    steps: "/docs/ui/components/steps",
    tabs: "/docs/ui/components/tabs",
    "type-table": "/docs/ui/components/type-table",
  };

• src/data/docs-index.ts:478-535 (helper)

  searchDocsIndex helper function that performs fuzzy search across the documentation index when an exact component match isn't found, scoring matches by title, description, keywords, and path

  export function searchDocsIndex(
    query: string,
    section?: SectionId
  ): DocEntry[] {
    const normalizedQuery = query.toLowerCase();
    const queryWords = normalizedQuery.split(/\s+/);
  
    let results = DOCS_INDEX;
  
    // Filter by section if specified
    if (section) {
      results = results.filter((entry) => entry.section === section);
    }
  
    // Score and filter results
    const scored = results
      .map((entry) => {
        let score = 0;
        const titleLower = entry.title.toLowerCase();
        const descLower = entry.description.toLowerCase();
  
        for (const word of queryWords) {
          // Title matches (highest weight)
          if (titleLower.includes(word)) {
            score += 10;
            if (titleLower === word || titleLower.startsWith(word)) {
              score += 5;
            }
          }
  
          // Description matches
          if (descLower.includes(word)) {
            score += 5;
          }
  
          // Keyword matches
          for (const keyword of entry.keywords) {
            if (keyword.includes(word)) {
              score += 3;
              if (keyword === word) {
                score += 2;
              }
            }
          }
  
          // Path matches
          if (entry.path.toLowerCase().includes(word)) {
            score += 2;
          }
        }
  
        return { entry, score };
      })
      .filter((item) => item.score > 0)
      .sort((a, b) => b.score - a.score);
  
    return scored.map((item) => item.entry);
  }