Change Model Color

Instructions

Implementation Reference

• server.js:410-448 (registration)

  Registration of the 'change_model_color' tool with schema (color input validated via Zod/colorSchema) and the handler function that normalizes the color via normalizeColorToHex and routes the 'changeColor' command to the browser session.

  mcpServer.registerTool(
    'change_model_color',
    {
      title: 'Change Model Color',
      description: 'Change the color of the 3D model in the scene',
      inputSchema: {
        color: colorSchema
      }
    },
    async ({ color }) => {
      const hexColor = normalizeColorToHex(color);
      if (!hexColor) {
        return {
          content: [
            {
              type: 'text',
              text: `Invalid color: ${color}. Please use a hex code (e.g., "#ff0000") or an Apple crayon color name.`
            }
          ],
          isError: true
        };
      }
  
      routeToCurrentSession({
        type: 'changeColor',
        color: hexColor
      });
  
      const displayName = /^#[0-9A-Fa-f]{6}$/.test(color) ? hexColor : `${color} (${hexColor})`;
      return {
        content: [
          {
            type: 'text',
            text: `Model color changed to ${displayName}`
          }
        ]
      };
    }
  );

• server.js:419-447 (handler)

  Handler function that validates/normalizes the color input using normalizeColorToHex, then routes a 'changeColor' command to the connected browser via WebSocket, and returns a text response.

  async ({ color }) => {
    const hexColor = normalizeColorToHex(color);
    if (!hexColor) {
      return {
        content: [
          {
            type: 'text',
            text: `Invalid color: ${color}. Please use a hex code (e.g., "#ff0000") or an Apple crayon color name.`
          }
        ],
        isError: true
      };
    }
  
    routeToCurrentSession({
      type: 'changeColor',
      color: hexColor
    });
  
    const displayName = /^#[0-9A-Fa-f]{6}$/.test(color) ? hexColor : `${color} (${hexColor})`;
    return {
      content: [
        {
          type: 'text',
          text: `Model color changed to ${displayName}`
        }
      ]
    };
  }

• server.js:69-95 (helper)

  Helper function that normalizes color input - accepts hex codes (#rrggbb) or Apple crayon color names (case-insensitive, handles 'sea foam' variants) and returns the normalized hex color string.

  function normalizeColorToHex(colorInput) {
    if (!colorInput || typeof colorInput !== 'string') {
      return null;
    }
    
    // Check if it's already a hex code
    if (/^#[0-9A-Fa-f]{6}$/.test(colorInput)) {
      return colorInput.toLowerCase();
    }
    
    // Normalize the input: lowercase, trim, and handle variations
    let normalizedName = colorInput.toLowerCase().trim();
    
    // Handle "sea foam" variations (with space, without space, with hyphen)
    if (normalizedName === 'seafoam' || normalizedName === 'sea-foam') {
      normalizedName = 'sea foam';
    }
    
    // Try to find it as an Apple crayon color name
    const hexColor = appleCrayonColorsHexStrings.get(normalizedName);
    
    if (hexColor) {
      return hexColor.toLowerCase();
    }
    
    return null;
  }

• server.js:390-407 (schema)

  Zod schema for color input validation - accepts hex codes (#rrggbb) or Apple crayon color names (case-insensitive). Used as the input schema for the change_model_color tool.

  const colorSchema = z.string().refine(
    (val) => {
      // Accept hex codes
      if (/^#[0-9A-Fa-f]{6}$/.test(val)) {
        return true;
      }
      // Accept Apple crayon color names (case-insensitive)
      let normalizedName = val.toLowerCase().trim();
      // Handle "sea foam" variations
      if (normalizedName === 'seafoam' || normalizedName === 'sea-foam') {
        normalizedName = 'sea foam';
      }
      return appleCrayonColorsHexStrings.has(normalizedName);
    },
    {
      message: `Must be a hex color code (e.g., "#ff0000") or an Apple crayon color name. Available colors: ${availableColorNames}`
    }
  ).describe(`Hex color code (e.g., "#ff0000") or Apple crayon color name (e.g., "maraschino", "turquoise", "lemon"). Available colors: ${availableColorNames}`);

• src/utils/color/color.js:182-185 (helper)

  Exports the Apple Crayon color palette map used by normalizeColorToHex and colorSchema to resolve color names to hex values.

  export {
      appleCrayonColorsHexStrings,
      colorComplements
  };