Reacticx MCP

Instructions

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(/&amp;/g, "&"); text = text.replace(/&lt;/g, "<"); text = text.replace(/&gt;/g, ">"); text = text.replace(/&quot;/g, '"'); text = text.replace(/&#39;/g, "'"); text = text.replace(/&nbsp;/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; }