# With shell, you can just pass the correct header with each request
curl "api_endpoint_here" \
  -H "Authorization: Bearer {codia_api_key}"

curl 'https://api.codia.ai/v1/open/image_to_design' \
  -H 'Authorization: Bearer {codia_api_key}' \
  -H 'Content-Type: application/json' \
  --data '{
    "image_url": "your image url"
  }'

{
  "code": 0,
  "message": "ok",
  "data": {
    // The Schema Object Here...
  }
}

curl 'https://api.codia.ai/v1/open/pdf_to_design' \
  -H 'Authorization: Bearer {codia_api_key}' \
  -H 'Content-Type: application/json' \
  --form 'pdf_file=@"xx.pdf"' \
  --form 'page_no="0"'

{
  "code": 0,
  "message": "ok",
  "data": {
    "configuration": {
      "scalingFactor": 1,
      "baseWidth": 1940,
      "measurementUnit": "px"
    },
    "pages": [
      {
        // The Schema Object Here...
      }
    ],
    "size": {
      "height": 1080,
      "width": 1940
    }
  }
}

curl 'https://api.codia.ai/v1/open/remove_bg' \
  -H 'Authorization: Bearer {codia_api_key}' \
  -H 'Content-Type: application/json' \
  --data '{
    "image_url": "your image url"
  }'

{
  "code": 0,
  "message": "ok",
  "data": {
    "image_url": "https://processed-image-url.com/result.png"
  }
}

{
  "mcpServers": {
    "visual_struct_mcp": {
      "url": "https://mcp.codia.ai",
      "headers": {
        "Authorization": "Bearer ${CODIA_API_KEY}"
      }
    }
  }
}

{
  "mcpServers": {
    "visual_struct_mcp": {
      "url": "https://mcp.codia.ai",
      "headers": {
        "Authorization": "Bearer ${CODIA_API_KEY}"
      }
    }
  }
}

# Add to your shell profile (.bashrc, .zshrc, etc.)
export CODIA_API_KEY="your_api_key_here"

User: Analyze this screenshot and tell me about its structure
[Attaches screenshot image]

AI: I'll analyze this screenshot using the Codia Visual Struct API...
[MCP Server processes the image and returns structured data]

The screenshot shows a modern web application with:
- Header navigation with logo and menu items
- Main content area with card-based layout
- Sidebar with filtering options
- Footer with social links

User: Convert pages 0-2 of this PDF into structured design data
[Attaches PDF document]

AI: I'll process this PDF using the Codia Visual Struct API...
[MCP Server processes the PDF and returns structured data]

The PDF contains 3 pages with:
- Page 1: Title page with logo and heading
- Page 2: Content layout with text blocks and vector diagrams
- Page 3: Footer section with contact information

The structured data includes:
- Text content with formatting and positioning
- Vector graphics (shapes, paths, lines)
- Layout hierarchy for each page

User: Remove the background from this product image
[Attaches product image]

AI: I'll remove the background using the Codia Remove Background API...
[MCP Server processes the image]

Background removal complete! The image now has a transparent background,
making it perfect for use in:
- E-commerce product listings
- Marketing materials
- Web design compositions

Error: Unauthorized (401)

Error: Too many requests (429)

export MCP_DEBUG=true

{
  "visualElement": {
    // Main UI structure definition
  },
  "configuration": {
    // Global configuration options
  }
}

{
  "elementId": "element_001",
  "elementName": "Main Container",
  "elementType": "Body",
  "displayName": "Primary Layout Container",
  "layoutConfig": { /* Layout configuration */ },
  "styleConfig": { /* Style configuration */ },
  "processingMeta": { /* Processing metadata */ },
  "childElements": [ /* Child elements */ ],
  "contentData": { /* Content data */ },
  "boundingBox": [0, 0, 100, 100],
  "displayOrder": 1
}

{
  "elementType": "Panel",
  "elementName": "Header Section",
  "displayName": "Top Navigation Area"
}

{
  "flexAttributes": {
    "alignItems": "center",
    "justifyContent": "space-between",
    "flexDirection": "column",
    "flexWrap": "nowrap"
  }
}

{
  "absoluteAttrs": {
    "align": ["LEFT", "TOP"],
    "coord": [0, 0],
    "orginCoord": [0, 0]
  }
}

{
  "widthSpec": {
    "sizing": "FIXED",    // FIXED, FILL, FIT_CONTENT
    "value": 100
  },
  "heightSpec": {
    "sizing": "FILL",
    "value": 200
  }
}

{
  "textConfig": {
    "fontSize": 16,
    "fontStyle": "normal",        // normal, bold, italic, semi_bold
    "textAlign": ["LEFT", "CENTER"],
    "fontFamily": "Arial",
    "lineHeight": 1.5,
    "letterSpacing": 0
  }
}

{
  "borderConfig": {
    "borderWidth": 2,
    "borderStyle": "solid",
    "borderColor": {
      "rgbValues": [128, 128, 128],
      "hexCode": "#808080"
    },
    "borderRadius": [10, 10, 10, 10]
  }
}

{
  "backgroundSpec": {
    "type": "COLOR",
    "backgroundColor": {
      "rgbValues": [255, 255, 255],
      "hexCode": "#ffffff"
    }
  }
}

{
  "backgroundSpec": {
    "type": "IMAGE",
    "imageUrl": "https://example.com/bg.jpg",
    "backgroundSize": "cover",
    "backgroundPosition": "center",
    "backgroundRepeat": "no-repeat"
  }
}

{
  "backgroundSpec": {
    "type": "LINEAR_GRADIENT",
    "deg": 45,
    "gradientStops": [
      {"color": {"rgbValues": [255, 0, 0]}, "position": 0},
      {"color": {"rgbValues": [0, 0, 255]}, "position": 100}
    ]
  }
}

{
  "styleConfig": {
    "widthSpec": {"sizing": "FIXED", "value": 200},
    "heightSpec": {"sizing": "FIXED", "value": 100},
    "characterData": {
      "0": {"size": 12, "fontFamily": "Arial"},
      "1": {"size": 14, "fontFamily": "Bold"}
    },
    "transformMatrix": [1.0, 0.0, 0.0, 1.0, 50.0, 100.0],
    "cornerRadius": 5,
    "isRightToLeft": false,
    "extendedMatrix": "matrix(1,0,0,1,0,0)"
  }
}

{
  "rgbValues": [255, 128, 0],
  "hexCode": "#ff8000"
}

{
  "textValue": "Welcome to our platform",
  "colorReference": "primary_text_color"
}

{
  "imageSource": "https://example.com/hero-image.jpg",
  "imageData": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJ..."
}

{
  "vectorData": {
    "pathItems": [
      {
        "pathType": "l",
        "coordinates": [
          {"xPosition": 0, "yPosition": 0},
          {"xPosition": 100, "yPosition": 100}
        ]
      }
    ],
    "evenOddRule": false,
    "layerIndex": 1,
    "vectorType": "path",
    "strokeOpacity": 1.0,
    "strokeColor": {
      "rgbValues": [0, 123, 255],
      "hexCode": "#007bff"
    },
    "strokeWidth": 2.0,
    "lineCapStyle": "round",
    "lineJoinStyle": "round",
    "isClosedPath": false
  },
  "maskingMode": "normal",
  "blendingType": "multiply"
}

{
  "componentReference": "button_primary",
  "componentAttributes": {
    "variant": {"type": "primary"},
    "size": {"value": "large"},
    "action": {"handler": "submitForm"}
  }
}

{
  "vectorData": {
    "pathItems": [
      {
        "pathType": "l",
        "coordinates": [
          {"xPosition": 50.0, "yPosition": 50.0},
          {"xPosition": 250.0, "yPosition": 50.0}
        ]
      },
      {
        "pathType": "c",
        "coordinates": [
          {"xPosition": 250.0, "yPosition": 50.0},
          {"xPosition": 275.0, "yPosition": 25.0},
          {"xPosition": 275.0, "yPosition": 75.0},
          {"xPosition": 250.0, "yPosition": 100.0}
        ]
      }
    ],
    "evenOddRule": false,
    "layerIndex": 1,
    "vectorType": "path",
    "strokeOpacity": 1.0,
    "strokeColor": {
      "rgbValues": [0, 123, 255],
      "hexCode": "#007bff"
    },
    "fillColor": {
      "rgbValues": [255, 255, 255],
      "hexCode": "#ffffff"
    },
    "fillOpacity": 0.5,
    "lineCapStyle": "round",
    "lineJoinStyle": "round",
    "dashPattern": [5, 3],
    "strokeWidth": 2.0,
    "isClosedPath": false
  }
}

{
  "componentId": "interactive_button",
  "componentName": "Interactive Button Component",
  "sourceCode": "/* React component implementation */",
  "configOptions": {
    "variant": "string",
    "size": "string",
    "disabled": "boolean",
    "onClick": "function"
  }
}

{
  "surfaceArea": 960000,
  "detectionScore": 0.95,
  "textContainerized": true
}

{
  "baseWidth": 782,
  "measurementUnit": "px",
  "scalingFactor": 1
}

{
  "visualElement": {
    "elementId": "pdf_page_1",
    "elementName": "PDF Document Page",
    "elementType": "Panel",
    "displayName": "First Page",
    "displayOrder": 0,
    "boundingBox": [0, 0, 595, 842],
    "layoutConfig": {
      "positionMode": "Normal",
      "flexibleMode": "Absolute"
    },
    "styleConfig": {
      "widthSpec": {"sizing": "FIXED", "value": 595},
      "heightSpec": {"sizing": "FIXED", "value": 842},
      "backgroundSpec": {
        "type": "COLOR",
        "backgroundColor": {"rgbValues": [255, 255, 255]}
      }
    },
    "processingMeta": {
      "surfaceArea": 501490,
      "detectionScore": 0.92,
      "textContainerized": false
    },
    "childElements": [
      {
        "elementId": "vector_diagram",
        "elementName": "Process Diagram",
        "elementType": "Shape",
        "displayOrder": 1,
        "layoutConfig": {
          "positionMode": "Absolute",
          "absoluteAttrs": {
            "align": ["LEFT", "TOP"],
            "coord": [50, 100]
          }
        },
        "styleConfig": {
          "widthSpec": {"sizing": "FIXED", "value": 300},
          "heightSpec": {"sizing": "FIXED", "value": 200}
        },
        "processingMeta": {
          "surfaceArea": 60000,
          "detectionScore": 0.89,
          "textContainerized": false
        },
        "contentData": {
          "vectorData": {
            "pathItems": [
              {
                "pathType": "l",
                "coordinates": [
                  {"xPosition": 50.0, "yPosition": 50.0},
                  {"xPosition": 250.0, "yPosition": 50.0}
                ]
              }
            ],
            "evenOddRule": false,
            "layerIndex": 1,
            "vectorType": "path",
            "strokeOpacity": 1.0,
            "strokeColor": {
              "rgbValues": [0, 123, 255],
              "hexCode": "#007bff"
            },
            "strokeWidth": 2.0,
            "lineCapStyle": "round",
            "lineJoinStyle": "round",
            "isClosedPath": false
          }
        }
      }
    ]
  },
  "configuration": {
    "baseWidth": 595,
    "measurementUnit": "pt",
    "scalingFactor": 1
  }
}

<!DOCTYPE html>
<html>
  <head>
    <title>Codia Design Generator</title>
  </head>
  <body>
    <button id="generateBtn">Generate Design</button>

    <script>
      const generateBtn = document.getElementById("generateBtn");

      // Configuration
      const CODIA_API_KEY = "YOUR_API_KEY_HERE";
      const IMAGE_URL = "https://your-image-url.com/screenshot.png";

      // Call Codia API to get design data
      async function fetchDSLFromCodia() {
        try {
          const response = await fetch(
            "https://api.codia.ai/v1/open/image_to_design",
            {
              method: "POST",
              headers: {
                Authorization: `Bearer ${CODIA_API_KEY}`,
                "Content-Type": "application/json",
              },
              body: JSON.stringify({
                image_url: IMAGE_URL,
              }),
            }
          );

          if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
          }

          const data = await response.json();

          if (data.code !== 0) {
            throw new Error(data.message || "API request failed");
          }

          return data.data.visualElement;
        } catch (error) {
          console.error("Failed to fetch DSL from Codia:", error);
          throw error;
        }
      }

      // Generate design on button click
      generateBtn.addEventListener("click", async () => {
        try {
          const designData = await fetchDSLFromCodia();
          if (!designData) {
            return;
          }

          // Send message to plugin main thread
          parent.postMessage(
            {
              pluginMessage: {
                type: "generate-design",
                data: designData,
              },
            },
            "*"
          );
        } catch (error) {
          console.error("Error:", error);
        }
      });

      // Listen for plugin main thread responses
      window.addEventListener("message", (event) => {
        const msg = event.data.pluginMessage;
        if (msg && msg.type === "design-result") {
          if (msg.success) {
            console.log("Design generation successful!");
          } else {
            console.error("Generation failed:", msg.error);
          }
        }
      });
    </script>
  </body>
</html>

npm install figma-image-to-design

// Import Codia SDK
import { DesignGenerator } from "figma-image-to-design";

// Show plugin UI
figma.showUI(__html__, { width: 300, height: 200 });

// Listen to messages from UI
figma.ui.onmessage = async (msg) => {
  if (msg.type === "generate-design") {
    try {
      // Use Codia SDK to generate design
      const result = await DesignGenerator.generateFromVisualElement(msg.data);

      if (result.status === "SUCCESS") {
        // Send success message back to UI
        figma.ui.postMessage({
          type: "design-result",
          success: true,
          result: result,
        });
      } else {
        // Send failure message back to UI
        figma.ui.postMessage({
          type: "design-result",
          success: false,
          error: result.message,
        });
      }
    } catch (error) {
      // Send error message back to UI
      figma.ui.postMessage({
        type: "design-result",
        success: false,
        error: error.message,
      });
    }
  }
};

interface DesignGenerateResult {
  message: string; // Result message
  statusCode: number; // Status code
  status: "SUCCESS" | "SCRIPT_ERROR" | "CONVERSION_ERROR"; // Generation status
}