its-just-ui MCP Server

Instructions

Implementation Reference

• src/tools/documentationTools.ts:4-27 (handler)

  Core handler function that retrieves the component from the registry and generates the appropriate documentation section based on the input parameters.

  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 defining the input parameters for the get_component_docs tool: component name (required) and optional section.

  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 entry in the listTools response, providing the tool name, description, and input schema for MCP discovery.

  {
    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)

  Dispatcher case in the main CallToolRequest handler that validates input with the schema and invokes the documentationTools.getComponentDocs function.

  case "get_component_docs": {
    const { component, section } = GetComponentDocsSchema.parse(args);
    const docs = documentationTools.getComponentDocs(component, section);
    return {
      content: [
        {
          type: "text",
          text: docs,
        },
      ],
    };
  }