get_component_docs

Fetch comprehensive documentation for Reacticx React Native components, including props, code examples, usage instructions, and installation guides.

Instructions

Fetch the full documentation for a specific Reacticx component, including props, code examples, usage, and installation instructions. Use the component slug (e.g. 'accordion', 'elastic-slider', 'aurora').

Input Schema

TableJSON Schema

Name	Required	Description	Default
`component`	Yes	Component slug (e.g. 'accordion', 'elastic-slider', 'aurora')

Implementation Reference

src/index.ts:77-145 (handler)

Main handler for get_component_docs tool. Validates component slug using getComponentBySlug, fetches documentation via fetchComponentDocs, formats output with component metadata, and provides error handling with suggestions for similar components when not found.

server.tool(
  "get_component_docs",
  "Fetch the full documentation for a specific Reacticx component, including props, code examples, usage, and installation instructions. Use the component slug (e.g. 'accordion', 'elastic-slider', 'aurora').",
  {
    component: z
      .string()
      .describe(
        "Component slug (e.g. 'accordion', 'elastic-slider', 'aurora')"
      ),
  },
  async ({ component }) => {
    const slug = component.toLowerCase().trim();
    const info = getComponentBySlug(slug);

    if (!info) {
      const suggestions = searchComponents(slug);
      const suggestText =
        suggestions.length > 0
          ? `\n\nDid you mean: ${suggestions
              .slice(0, 5)
              .map((s) => `"${s.slug}"`)
              .join(", ")}?`
          : "";
      return {
        content: [
          {
            type: "text" as const,
            text: `Component "${slug}" not found in registry.${suggestText}`,
          },
        ],
      };
    }

    try {
      const docs = await fetchComponentDocs(slug);

      const header = [
        `**Component:** ${info.name}`,
        `**Category:** ${info.category}`,
        `**Install:** \`bunx --bun reacticx add ${info.slug}\``,
        info.dependencies.length > 0
          ? `**Dependencies:** ${info.dependencies.join(", ")}`
          : null,
        "",
        "---",
        "",
      ]
        .filter(Boolean)
        .join("\n");

      return {
        content: [
          { type: "text" as const, text: header + docs },
        ],
      };
    } catch (error) {
      const message =
        error instanceof Error ? error.message : String(error);
      return {
        content: [
          {
            type: "text" as const,
            text: `Error fetching docs for "${slug}": ${message}\n\nBasic info:\n- Name: ${info.name}\n- Category: ${info.category}\n- Dependencies: ${info.dependencies.join(", ") || "none"}\n- Install: \`bunx --bun reacticx add ${info.slug}\`\n- Docs: https://www.reacticx.com/docs/components/${info.slug}`,
          },
        ],
      };
    }
  }
);

src/index.ts:80-86 (schema)
Zod schema defining the input parameter for get_component_docs: a required 'component' string that accepts the component slug (e.g., 'accordion', 'elastic-slider', 'aurora').
```
{
  component: z
    .string()
    .describe(
      "Component slug (e.g. 'accordion', 'elastic-slider', 'aurora')"
    ),
},
```

src/fetcher.ts:104-148 (helper)

fetchComponentDocs helper function that fetches HTML documentation from https://www.reacticx.com/docs/components/{slug}, converts it to Markdown using htmlToMarkdown, caches results for 30 minutes, and returns formatted content with installation instructions.

export async function fetchComponentDocs(
  slug: string
): Promise<string> {
  const cached = cache.get(slug);
  if (cached && Date.now() - cached.timestamp < CACHE_TTL) {
    return cached.content;
  }

  const url = `${DOCS_BASE_URL}/${slug}`;

  try {
    const response = await fetch(url, {
      headers: {
        "User-Agent": "ReacticxMCP/1.0",
        Accept: "text/html",
      },
    });

    if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }

    const html = await response.text();
    const markdown = htmlToMarkdown(html);

    const content = [
      `# ${slug} - Reacticx Component Documentation`,
      `Source: ${url}`,
      "",
      markdown,
      "",
      "---",
      `Installation: \`bunx --bun reacticx add ${slug}\``,
    ].join("\n");

    cache.set(slug, { content, timestamp: Date.now() });
    return content;
  } catch (error) {
    const message =
      error instanceof Error ? error.message : String(error);
    throw new Error(
      `Failed to fetch docs for "${slug}" from ${url}: ${message}`
    );
  }
}

src/registry.ts:790-796 (helper)
getComponentBySlug helper function that looks up component information by slug in the COMPONENT_REGISTRY, returning ComponentInfo or undefined if not found.
```
export function getComponentBySlug(
  slug: string
): ComponentInfo | undefined {
  return COMPONENT_REGISTRY.find(
    (c) => c.slug.toLowerCase() === slug.toLowerCase()
  );
}
```

src/fetcher.ts:6-102 (helper)

htmlToMarkdown helper function that converts HTML to Markdown by removing script/style tags, extracting main content, converting headings, code blocks, links, lists, tables, paragraphs, and handling HTML entities and whitespace cleanup.

function htmlToMarkdown(html: string): string {
  let text = html;

  // Remove script and style tags with content
  text = text.replace(/<script[\s\S]*?<\/script>/gi, "");
  text = text.replace(/<style[\s\S]*?<\/style>/gi, "");
  text = text.replace(/<nav[\s\S]*?<\/nav>/gi, "");
  text = text.replace(/<footer[\s\S]*?<\/footer>/gi, "");
  text = text.replace(/<header[\s\S]*?<\/header>/gi, "");

  // Extract the main content area if possible
  const mainMatch = text.match(
    /<main[\s\S]*?>([\s\S]*?)<\/main>/i
  );
  const articleMatch = text.match(
    /<article[\s\S]*?>([\s\S]*?)<\/article>/i
  );
  if (articleMatch) {
    text = articleMatch[1];
  } else if (mainMatch) {
    text = mainMatch[1];
  }

  // Convert headings
  text = text.replace(/<h1[^>]*>([\s\S]*?)<\/h1>/gi, "\n# $1\n");
  text = text.replace(/<h2[^>]*>([\s\S]*?)<\/h2>/gi, "\n## $1\n");
  text = text.replace(/<h3[^>]*>([\s\S]*?)<\/h3>/gi, "\n### $1\n");
  text = text.replace(/<h4[^>]*>([\s\S]*?)<\/h4>/gi, "\n#### $1\n");

  // Convert code blocks - handle <pre><code> combinations
  text = text.replace(
    /<pre[^>]*>\s*<code[^>]*class="[^"]*language-(\w+)"[^>]*>([\s\S]*?)<\/code>\s*<\/pre>/gi,
    "\n```$1\n$2\n```\n"
  );
  text = text.replace(
    /<pre[^>]*>\s*<code[^>]*>([\s\S]*?)<\/code>\s*<\/pre>/gi,
    "\n```\n$1\n```\n"
  );
  text = text.replace(
    /<pre[^>]*>([\s\S]*?)<\/pre>/gi,
    "\n```\n$1\n```\n"
  );

  // Convert inline code
  text = text.replace(/<code[^>]*>([\s\S]*?)<\/code>/gi, "`$1`");

  // Convert bold and italic
  text = text.replace(/<(strong|b)[^>]*>([\s\S]*?)<\/\1>/gi, "**$2**");
  text = text.replace(/<(em|i)[^>]*>([\s\S]*?)<\/\1>/gi, "*$2*");

  // Convert links
  text = text.replace(
    /<a[^>]*href="([^"]*)"[^>]*>([\s\S]*?)<\/a>/gi,
    "[$2]($1)"
  );

  // Convert list items
  text = text.replace(/<li[^>]*>([\s\S]*?)<\/li>/gi, "- $1\n");
  text = text.replace(/<\/?[ou]l[^>]*>/gi, "\n");

  // Convert table elements
  text = text.replace(/<tr[^>]*>([\s\S]*?)<\/tr>/gi, "$1|\n");
  text = text.replace(/<th[^>]*>([\s\S]*?)<\/th>/gi, "| $1 ");
  text = text.replace(/<td[^>]*>([\s\S]*?)<\/td>/gi, "| $1 ");
  text = text.replace(/<\/?table[^>]*>/gi, "\n");
  text = text.replace(/<\/?thead[^>]*>/gi, "");
  text = text.replace(/<\/?tbody[^>]*>/gi, "");

  // Convert paragraphs and breaks
  text = text.replace(/<p[^>]*>([\s\S]*?)<\/p>/gi, "\n$1\n");
  text = text.replace(/<br\s*\/?>/gi, "\n");
  text = text.replace(/<hr\s*\/?>/gi, "\n---\n");

  // Convert divs to newlines
  text = text.replace(/<div[^>]*>/gi, "\n");
  text = text.replace(/<\/div>/gi, "\n");

  // Remove remaining HTML tags
  text = text.replace(/<[^>]+>/g, "");

  // Decode HTML entities
  text = text.replace(/&/g, "&");
  text = text.replace(/</g, "<");
  text = text.replace(/>/g, ">");
  text = text.replace(/"/g, '"');
  text = text.replace(/'/g, "'");
  text = text.replace(/ /g, " ");
  text = text.replace(/&#(\d+);/g, (_, code) =>
    String.fromCharCode(parseInt(code))
  );

  // Clean up whitespace
  text = text.replace(/\n{3,}/g, "\n\n");
  text = text.trim();

  return text;
}

Reacticx MCP