Integration

MCP Protocol

Model Context Protocol integration enables AI agents to interact with Platphorm Design programmatically.

What is MCP?

The Model Context Protocol (MCP) is a standard for AI systems to interact with external tools and services. Platphorm Design implements MCP to allow AI agents to create, modify, and export designs.

This enables workflows like:

Automated design generation from natural language
Batch processing of design assets
AI-driven design iterations and improvements
Integration with other MCP-compatible tools

Server Configuration

MCP server endpoint and setup

{
  "name": "platphorm-design",
  "version": "1.0.0",
  "url": "https://phorm.platphormnews.com/api/mcp",
  "transport": "http",
  "capabilities": {
    "tools": true,
    "resources": true
  }
}

Available Tools

design_create

Create a new design document

Parameters:

name- string - Design name

width- number - Canvas width (default: 1920)

height- number - Canvas height (default: 1080)

background- string - Background color (default: #ffffff)

design_add_element

Add an element to the canvas

Parameters:

design_id- string - Target design ID

type- string - Element type (rectangle, ellipse, text, image, line, path)

x- number - X position

y- number - Y position

width- number - Element width

height- number - Element height

fill- string - Fill color

stroke- string - Stroke color

design_export

Export design to image format

Parameters:

design_id- string - Design ID to export

format- string - Export format (svg, png, jpeg, webp)

preset- string - Size preset (og-image, twitter-card, instagram)

scale- number - Scale factor (1-4)

design_suggest

Get AI suggestions for design improvements

Parameters:

design_id- string - Design ID to analyze

type- string - Suggestion type (layout, color, typography, all)

design_list

List all designs

Parameters:

limit- number - Results per page (default: 20)

offset- number - Pagination offset

Example: Create OG Image

End-to-end example using MCP tools

// 1. Create a new design
const design = await mcp.call("design_create", {
  name: "Blog Post OG Image",
  width: 1200,
  height: 630,
  background: "#1a1a2e"
});

// 2. Add text element
await mcp.call("design_add_element", {
  design_id: design.id,
  type: "text",
  x: 100,
  y: 250,
  content: "How to Build AI Apps",
  fontSize: 64,
  fill: "#ffffff"
});

// 3. Add decorative element
await mcp.call("design_add_element", {
  design_id: design.id,
  type: "rectangle",
  x: 100,
  y: 350,
  width: 200,
  height: 4,
  fill: "#4ade80"
});

// 4. Export as PNG
const exported = await mcp.call("design_export", {
  design_id: design.id,
  format: "png",
  scale: 2
});

console.log("OG Image URL:", exported.url);

Platphorm Network MCP

Cross-service tools available through the Platphorm network

When connected to the Platphorm network, additional MCP tools become available:

svg.platphormnews.com

svg_search, svg_import

docs.platphormnews.com

doc_create, doc_publish

sheets.platphormnews.com

data_fetch, data_bind

emoji.platphormnews.com

emoji_search, emoji_insert