get_component_docs
Retrieve detailed documentation, usage examples, and prop descriptions for its-just-ui React components to streamline development and ensure accurate implementation.
Instructions
Get documentation, usage examples, and prop descriptions for a component
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| component | Yes | Component name | |
| section | No |
Implementation Reference
- src/tools/documentationTools.ts:4-27 (handler)Main handler function that retrieves the component from registry and dispatches to section-specific documentation generators based on the section parameter.getComponentDocs(componentName: string, section?: string): string { const component = componentRegistry.getComponent(componentName); if (!component) { return `Component "${componentName}" not found. Available components: ${Object.keys( componentRegistry.listComponents("all"), ).join(", ")}`; } if (!section || section === "usage") { return this.getUsageDoc(component); } switch (section) { case "props": return this.getPropsDoc(component); case "examples": return this.getExamplesDoc(component); case "accessibility": return this.getAccessibilityDoc(component); default: return this.getUsageDoc(component); } },
- src/index.ts:122-125 (schema)Zod schema for validating input parameters: component (required string) and optional section enum.const GetComponentDocsSchema = z.object({ component: z.string().describe("Component name to get documentation for"), section: z.enum(["usage", "props", "examples", "accessibility"]).optional(), });
- src/index.ts:323-338 (registration)Tool registration in the list of tools returned by ListToolsRequestHandler, including name, description, and input schema.{ name: "get_component_docs", description: "Get documentation, usage examples, and prop descriptions for a component", inputSchema: { type: "object", properties: { component: { type: "string", description: "Component name" }, section: { type: "string", enum: ["usage", "props", "examples", "accessibility"], }, }, required: ["component"], }, },
- src/index.ts:463-474 (handler)MCP server request handler case that parses arguments with schema and delegates to documentationTools.getComponentDocs.case "get_component_docs": { const { component, section } = GetComponentDocsSchema.parse(args); const docs = documentationTools.getComponentDocs(component, section); return { content: [ { type: "text", text: docs, }, ], }; }
- Helper function to generate usage documentation including description, basic example, category, features, installation, and import instructions.getUsageDoc(component: any): string { return `# ${component.name} Component ## Description ${component.description} ## Basic Usage \`\`\`jsx import { ${component.name} } from 'its-just-ui'; function MyComponent() { return ( ${component.examples[0] || `<${component.name} />`} ); } \`\`\` ## Category ${component.category} ## Key Features - ${component.accessibility.join("\n- ")} ## Installation \`\`\`bash npm install its-just-ui \`\`\` ## Import \`\`\`jsx import { ${component.name} } from 'its-just-ui'; import 'its-just-ui/styles.css'; \`\`\``;