its-just-ui MCP Server

Instructions

Implementation Reference

• src/tools/themeManager.ts:15-57 (handler)

  Main handler function configureTheme that generates and returns theme configuration code based on the input config object.

  export const themeTools = {
    configureTheme(config: ThemeConfig): string {
      const { mode, colors, borderRadius, fontFamily } = config;
  
      let themeCode = `import { ThemeProvider } from 'its-just-ui';
  import 'its-just-ui/styles.css';
  
  const customTheme = {`;
  
      if (colors) {
        themeCode += `
    colors: {${Object.entries(colors)
      .map(
        ([key, value]) => `
      ${key}: '${value}'`,
      )
      .join(",")}
    },`;
      }
  
      if (borderRadius) {
        themeCode += `
    borderRadius: '${borderRadius}',`;
      }
  
      if (fontFamily) {
        themeCode += `
    fontFamily: '${fontFamily}',`;
      }
  
      themeCode += `
  };
  
  export default function App() {
    return (
      <ThemeProvider ${mode ? `mode="${mode}"` : ""} theme={customTheme}>
        {/* Your app content */}
      </ThemeProvider>
    );
  }`;
  
      return themeCode;
    },

• src/index.ts:75-89 (schema)

  Zod schema defining the input structure for the configure_theme tool, matching the ThemeConfig interface.

  const ConfigureThemeSchema = z.object({
    mode: z.enum(["light", "dark", "system"]).optional(),
    colors: z
      .object({
        primary: z.string().optional(),
        secondary: z.string().optional(),
        success: z.string().optional(),
        warning: z.string().optional(),
        error: z.string().optional(),
        info: z.string().optional(),
      })
      .optional(),
    borderRadius: z.string().optional(),
    fontFamily: z.string().optional(),
  });

• src/index.ts:209-231 (registration)

  Tool registration in the list_tools response, defining name, description, and inputSchema.

    name: "configure_theme",
    description:
      "Configure theme settings including colors, mode, and typography",
    inputSchema: {
      type: "object",
      properties: {
        mode: { type: "string", enum: ["light", "dark", "system"] },
        colors: {
          type: "object",
          properties: {
            primary: { type: "string" },
            secondary: { type: "string" },
            success: { type: "string" },
            warning: { type: "string" },
            error: { type: "string" },
            info: { type: "string" },
          },
        },
        borderRadius: { type: "string" },
        fontFamily: { type: "string" },
      },
    },
  },

• src/index.ts:401-411 (handler)

  MCP call_tool handler that parses arguments using the schema and delegates to themeTools.configureTheme.

  case "configure_theme": {
    const config = ConfigureThemeSchema.parse(args);
    const themeCode = themeTools.configureTheme(config);
    return {
      content: [
        {
          type: "text",
          text: themeCode,
        },
      ],
    };

• src/tools/themeManager.ts:1-13 (schema)

  TypeScript interface ThemeConfig used in the handler function signature, matching the Zod schema.

  export interface ThemeConfig {
    mode?: "light" | "dark" | "system";
    colors?: {
      primary?: string;
      secondary?: string;
      success?: string;
      warning?: string;
      error?: string;
      info?: string;
    };
    borderRadius?: string;
    fontFamily?: string;
  }