We Made Design Requestable by AI Agents — Here's How MCP Changes Creative Workflows

#ai #mcp #design #automation

Most AI agent workflows end at code, data, and text. Need a social media graphic? A product mockup? A brand asset? You're back to manual: open Figma, write a brief, wait for a designer, iterate.

We built a design platform that AI agents can talk to directly — using Model Context Protocol (MCP).

This post covers what we learned, how it works, and why design is the last major workflow that hasn't been automated by AI agents.

The Problem: AI Agents Can't "See" Design
Your AI coding assistant can write code, search docs, run terminal commands, query databases. But ask it to create a restaurant menu design, a social media carousel, or a brand asset — it hits a wall.

The typical workaround:

Developer → asks AI to write copy → manually opens Canva/Figma →
pastes copy → adjusts layout → exports → uploads
That's 4 manual steps for something that should be one instruction.

What MCP Actually Is (30-Second Version)
Model Context Protocol is an open standard (by Anthropic) that lets AI agents connect to external tools through a unified interface. Think of it as USB-C for AI — one protocol, any tool.

┌─────────────┐     MCP      ┌──────────────┐
│  AI Agent   │ ◄──────────► │  Tool Server │
│ (Claude,    │   JSON-RPC   │  (your app)  │
│  Cursor,    │              │              │
│  any LLM)   │              │              │
└─────────────┘              └──────────────┘

An MCP server exposes tools (functions the agent can call) and resources (data the agent can read). The agent discovers available tools, decides when to use them, and calls them with structured parameters.

Why Design is Perfect for MCP
Design requests are already structured:

{
  "type": "social_media_post",
  "platform": "instagram",
  "dimensions": "1080x1080",
  "brand": "my-coffee-shop",
  "copy": "Grand opening this Saturday!",
  "style": "warm, inviting, lifestyle photography",
  "include_logo": true
}

That's a function call. AI agents are built for exactly this.

How We Implemented It
At Meepo, we built an MCP server that exposes design operations as tools using the official @modelcontextprotocol/sdk. Here's the simplified architecture:

┌──────────────┐     MCP      ┌──────────────┐     API      ┌──────────────┐
│  Your AI     │ ◄──────────► │  Meepo MCP   │ ◄──────────► │  Design      │
│  Agent       │              │  Server      │              │  Pipeline    │
│              │              │  (Node/Bun)  │              │  (AI + Human)│
└──────────────┘              └──────────────┘              └──────────────┘

The Tools We Expose
Instead of a static array, the server uses standard MCP schema definitions to register tools dynamically. Here are the core tools our agent uses:

import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
import { z } from 'zod'

const server = new McpServer({
  name: 'meepo-studio',
  version: '1.0.0'
})

// 1. List available brand profiles
server.tool(
  'brand_list',
  'List all brands for your company. Returns brand names, logos, color palettes, and IDs.',
  {},
  async () => {
    const result = await designApi.get('/api/v1/brands')
    return { content: [{ type: 'text', text: JSON.stringify(result.data) }] }
  }
)

// 2. Fetch specific brand rules dynamically
server.tool(
  'brand_get',
  'Get detailed brand information including color palette, fonts, tone of voice, references, and product images.',
  { brandId: z.string().describe('The brand ID to retrieve') },
  async ({ brandId }) => {
    const result = await designApi.get(`/api/v1/brands/${brandId}`)
    return { content: [{ type: 'text', text: JSON.stringify(result.data) }] }
  }
)

// 3. Initiate a design request thread
server.tool(
  'chat_create',
  'Create a new design request. Starts a conversation with the AI designer.',
  {
    brandId: z.string().describe('Brand ID for the design'),
    title: z.string().describe('Request title (e.g. "Instagram post")'),
    type: z.enum(['AI', 'HUMAN']).describe('AI for instant preview, HUMAN for designer queue'),
    prompt: z.string().describe('Design brief - describe what you want designed'),
    designFormat: z.string().optional().describe('Format e.g. "Social Media Post"'),
    ratio: z.string().optional().describe('Aspect ratio: 1:1, 9:16, 16:9, etc.'),
    multipleDesign: z.boolean().optional().describe('Set true for carousel/multi-slide designs'),
    maxSlides: z.number().optional().describe('Max slides for carousel (3-15)'),
  },
  async ({ brandId, title, type, prompt, ...opts }) => {
    const result = await designApi.post('/api/v1/chats', { brandId, title, type, prompt, ...opts })
    return { content: [{ type: 'text', text: JSON.stringify(result.data) }] }
  }
)

// 4. Poll or check for generated output images
server.tool(
  'generation_poll',
  'Poll for AI-generated images until all slides are ready.',
  {
    chatId: z.string().describe('Chat ID to poll generations for'),
    expectedSlides: z.number().optional().describe('Number of slides to wait for')
  },
  async ({ chatId, expectedSlides = 1 }) => {
    // Polling loop returning finalized assets...
  }
)

What Happens When an Agent Calls chat_create
Agent sends structured request via MCP tool call.
MCP server validates payload and starts a design request thread.
AI pipeline generates initial concepts (seconds).
Returns generated design records and image URLs to the agent:

{
  "chat": {
    "id": "c_abc123",
    "title": "Instagram Announcement",
    "type": "AI"
  },
  "generations": [
    {
      "id": "g_xyz789",
      "urls": [
        "https://cdn.meepo.app/previews/d_abc123_v1.webp",
        "https://cdn.meepo.app/previews/d_abc123_v2.webp"
      ],
      "creditsUsed": 1
    }
  ]
}

Real Use Case: Automated Social Media Pipeline
Here's where it gets interesting. Imagine this agent workflow:

Agent monitors your calendar/CRM for events.
Detects: "Product launch next Tuesday".
Calls chat_create → Instagram announcement post (1:1).
Calls chat_create → LinkedIn banner (16:9).
Calls chat_create → Twitter/X header.
Schedules posts via social media API.
Zero human intervention for routine marketing design. Your brand guidelines are pre-loaded, AI generates on-brand concepts, and if you want premium quality — human designers polish async.

Technical Gotchas We Hit

Brand Consistency Across Calls AI agents don't remember your brand colors. Every chat_create call needs access to the brand profile. Instead of maintaining complex static resources, we let the agent query brand assets dynamically via brand_get before launching design requests:

// Step 1: Read brand guidelines
const brand = await mcpClient.callTool("brand_get", { brandId: "brand_coffee_shop" });

// Step 2: Feed brand-specific contexts into the design request brief
const design = await mcpClient.callTool("chat_create", {
  brandId: "brand_coffee_shop",
  title: "Special offer",
  type: "AI",
  prompt: `Use brand font ${brand.bodyFont}. Apply palette colors: ${brand.colorPalette.join(', ')}.`
});

Async vs Sync
AI-generated designs return in seconds (sync). Human-polished designs take hours (async). The agent needs to handle both. We solved this by using generation_poll to block/poll for AI-complete assets instantly, while exposing async task tools for tracking human designers' progress when a longer-term queue is preferred.
Rate Limiting ≠ Credit System
MCP doesn't have native rate limiting concepts. We map credits directly to tool calls and return remaining balance details. Agents check balance via subscription_get before scheduling heavy generation batches.

Why This Matters Beyond Our Use Case
Design is just one example. The pattern applies to any creative service:

Video editing — agent sends footage + brief, gets edited video.
Copywriting — agent sends context, gets brand-voice copy.
Audio — agent sends script, gets voiceover.
MCP makes all of these composable. An agent could chain: research → write copy → generate design → create video → schedule post — all through standard tool calls.

Getting Started
If you're building an MCP server for any creative tool:

Start with the tool schema — what inputs does your creative process actually need?
Expose brand/context dynamically — agents need real-time data access to produce consistent output.
Handle async gracefully — creative work often has human-in-the-loop steps.
Return previews, not just IDs — agents (and the humans using them) need to see results. MCP specification: modelcontextprotocol.io

If you want to try design via MCP specifically, we're building this at Meepo — AI generates concepts instantly, human designers polish to agency quality.

What creative workflows are you automating with AI agents? Would love to hear what's worked (and what's been painful).