its-just-ui MCP Server

Instructions

Implementation Reference

• src/tools/utilityTools.ts:288-379 (handler)

  The core handler function that implements the create_responsive_layout tool logic. It returns predefined responsive layout JSX templates based on the provided type (grid, flexbox, container, sidebar, hero, card-grid).

    createResponsiveLayout(config: {
      type: string;
      breakpoints?: Record<string, string>;
    }): string {
      const { type } = config;
  
      const layouts: Record<string, string> = {
        grid: `// Responsive Grid Layout
  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 p-4">
    <Card>Item 1</Card>
    <Card>Item 2</Card>
    <Card>Item 3</Card>
    <Card>Item 4</Card>
  </div>`,
  
        flexbox: `// Responsive Flexbox Layout
  <div className="flex flex-col md:flex-row gap-4 p-4">
    <div className="flex-1">
      <Card>Flex Item 1</Card>
    </div>
    <div className="flex-1">
      <Card>Flex Item 2</Card>
    </div>
    <div className="flex-1">
      <Card>Flex Item 3</Card>
    </div>
  </div>`,
  
        container: `// Responsive Container Layout
  <div className="container mx-auto px-4 sm:px-6 lg:px-8">
    <div className="max-w-7xl mx-auto">
      <h1 className="text-2xl md:text-3xl lg:text-4xl font-bold mb-4">
        Page Title
      </h1>
      <div className="prose lg:prose-xl">
        {/* Content */}
      </div>
    </div>
  </div>`,
  
        sidebar: `// Responsive Sidebar Layout
  <div className="flex flex-col md:flex-row min-h-screen">
    {/* Sidebar */}
    <aside className="w-full md:w-64 lg:w-72 bg-gray-100 p-4">
      <nav>
        <ul className="space-y-2">
          <li><Anchor href="#home">Home</Anchor></li>
          <li><Anchor href="#about">About</Anchor></li>
          <li><Anchor href="#contact">Contact</Anchor></li>
        </ul>
      </nav>
    </aside>
    
    {/* Main Content */}
    <main className="flex-1 p-4 md:p-6 lg:p-8">
      {/* Content */}
    </main>
  </div>`,
  
        hero: `// Responsive Hero Section
  <section className="relative bg-gradient-to-r from-blue-500 to-purple-600 text-white">
    <div className="container mx-auto px-4 py-16 md:py-24 lg:py-32">
      <div className="max-w-4xl mx-auto text-center">
        <h1 className="text-3xl md:text-5xl lg:text-6xl font-bold mb-4">
          Welcome to Our Site
        </h1>
        <p className="text-lg md:text-xl lg:text-2xl mb-8">
          Build amazing experiences with its-just-ui
        </p>
        <div className="flex flex-col sm:flex-row gap-4 justify-center">
          <Button size="lg" variant="primary">Get Started</Button>
          <Button size="lg" variant="outline">Learn More</Button>
        </div>
      </div>
    </div>
  </section>`,
  
        "card-grid": `// Responsive Card Grid
  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6 p-4">
    {[1, 2, 3, 4, 5, 6, 7, 8].map((item) => (
      <Card key={item} variant="elevated" className="hover:shadow-xl transition-shadow">
        <div className="aspect-video bg-gray-200 rounded-t-lg mb-4"></div>
        <h3 className="text-lg font-semibold mb-2">Card Title {item}</h3>
        <p className="text-gray-600 mb-4">Card description goes here.</p>
        <Button variant="primary" fullWidth>View Details</Button>
      </Card>
    ))}
  </div>`,
      };
  
      return layouts[type] || layouts.container;
    },

• src/index.ts:247-277 (registration)

  Registration of the 'create_responsive_layout' tool in the MCP server, including name, description, and input schema.

  {
    name: "create_responsive_layout",
    description:
      "Create a responsive layout using Tailwind CSS and its-just-ui components",
    inputSchema: {
      type: "object",
      properties: {
        type: {
          type: "string",
          enum: [
            "grid",
            "flexbox",
            "container",
            "sidebar",
            "hero",
            "card-grid",
          ],
        },
        breakpoints: {
          type: "object",
          properties: {
            sm: { type: "string" },
            md: { type: "string" },
            lg: { type: "string" },
            xl: { type: "string" },
          },
        },
      },
      required: ["type"],
    },
  },

• src/index.ts:427-443 (handler)

  MCP server request handler that parses input, calls the utilityTools.createResponsiveLayout function, and returns the result.

  case "create_responsive_layout": {
    const config = z
      .object({
        type: z.string(),
        breakpoints: z.record(z.string()).optional(),
      })
      .parse(args);
    const layout = utilityTools.createResponsiveLayout(config);
    return {
      content: [
        {
          type: "text",
          text: layout,
        },
      ],
    };
  }

• src/index.ts:251-277 (schema)

  Input schema definition for the create_responsive_layout tool, specifying the expected parameters.

    inputSchema: {
      type: "object",
      properties: {
        type: {
          type: "string",
          enum: [
            "grid",
            "flexbox",
            "container",
            "sidebar",
            "hero",
            "card-grid",
          ],
        },
        breakpoints: {
          type: "object",
          properties: {
            sm: { type: "string" },
            md: { type: "string" },
            lg: { type: "string" },
            xl: { type: "string" },
          },
        },
      },
      required: ["type"],
    },
  },