its-just-ui MCP Server

Instructions

Implementation Reference

• src/tools/componentGenerator.ts:4-25 (handler)

  Core handler function that generates JSX code for the specified its-just-ui component using props, children, and className. Fetches component from registry, validates props, formats them, and constructs the JSX string.

  export function generateComponent(
    componentName: string,
    props?: Record<string, any>,
    children?: string,
    className?: string,
  ): string {
    const component = componentRegistry.getComponent(componentName);
  
    if (!component) {
      throw new Error(`Component "${componentName}" not found in registry`);
    }
  
    const sanitizedProps = validateProps(props);
    const propsString = formatProps(sanitizedProps, className);
    const childrenContent = children || "";
  
    if (childrenContent) {
      return `<${componentName}${propsString}>\n  ${childrenContent}\n</${componentName}>`;
    } else {
      return `<${componentName}${propsString} />`;
    }
  }

• src/index.ts:29-42 (schema)

  Zod schema defining the input validation for the generate_component tool, including component name, optional props, children, and className.

  const GenerateComponentSchema = z.object({
    component: z
      .string()
      .describe("Name of the its-just-ui component to generate"),
    props: z
      .record(z.any())
      .optional()
      .describe("Props to pass to the component"),
    children: z
      .string()
      .optional()
      .describe("Children content for the component"),
    className: z.string().optional().describe("Additional Tailwind CSS classes"),
  });

• src/index.ts:132-157 (registration)

  Registration of the generate_component tool in the list_tools response, including name, description, and input schema.

    name: "generate_component",
    description:
      "Generate an its-just-ui component with specified props and styling",
    inputSchema: {
      type: "object",
      properties: {
        component: {
          type: "string",
          description: "Name of the its-just-ui component",
        },
        props: {
          type: "object",
          description: "Props to pass to the component",
        },
        children: {
          type: "string",
          description: "Children content for the component",
        },
        className: {
          type: "string",
          description: "Additional Tailwind CSS classes",
        },
      },
      required: ["component"],
    },
  },

• src/index.ts:361-373 (handler)

  MCP CallToolRequest handler case for generate_component: parses input with schema and invokes the generateComponent function to produce the output.

  case "generate_component": {
    const { component, props, children, className } =
      GenerateComponentSchema.parse(args);
    const code = generateComponent(component, props, children, className);
    return {
      content: [
        {
          type: "text",
          text: code,
        },
      ],
    };
  }