AdflowDocs

Adflow is an AI-native ad creative builder. Your agent connects via MCP (Model Context Protocol) to create design systems, build multi-scene projects, and generate AI imagery — all from natural language. This page documents every endpoint, schema, and skill your agent needs.

Quickstart MCP Setup MCP Endpoints Design System Schema Project Schema Scene Schema Format Specs Agent Skills Templates API Fallback Critical Rules

Quickstart

The typical agent workflow in five steps:

1list_design_systems — check if the client already has a design system
2create_design_system or update_design_system — set up the brand (all fields required)
3create_project — create scenes with headlines, copy, and CTA text
4get_projectupdate_project — patch scene-level styling fields (textColor, ctaBgColor, etc.)
5generate_image — create AI backgrounds, then attach to scenes via update

MCP Server Setup

Add the Adflow MCP server to your agent's configuration. You'll need an API key from the Admin panel.

Claude Code / Claude Desktop

{
  "mcpServers": {
    "adflow": {
      "command": "node",
      "args": ["/path/to/adflow/mcp-server/index.js"],
      "env": {
        "ADFLOW_API_KEY": "adk_your_api_key_here",
        "ADFLOW_URL": "https://adflow.design"
      }
    }
  }
}

Direct Node (local development)

{
  "mcpServers": {
    "adflow": {
      "command": "node",
      "args": ["/path/to/adflow/mcp-server/index.js"],
      "env": {
        "ADFLOW_API_KEY": "adk_your_api_key_here",
        "ADFLOW_URL": "https://adflow.design"
      }
    }
  }
}

Authentication

All requests require either:

X-API-Key headerFor MCP and CLI agents. Create keys in Admin → API Keys.
Authorization: BearerSupabase JWT token for browser sessions.

MCP Endpoints

16 tools available via the MCP server. All return JSON.

GET list_design_systems

List all design systems you have access to.

No parameters. Returns an array of full design system objects.

POST create_design_system

Create a new design system. All scenes inherit colours, fonts, logo, and layout from here.
ParamTypeDescription
namestringrequiredDisplay name (e.g. "Acme Corp")
primaryColorhexrequiredPrimary brand colour
secondaryColorhexoptionalSecondary brand colour
darkColorhexoptionalDark colour (default #111111)
lightColorhexoptionalLight colour (default #ffffff)
fontHeadlinestringoptionalHeadline font stack
fontBodystringoptionalBody font stack
fontImportURLoptionalGoogle Fonts import URL
fontH1fontCtastringoptionalPer-element font overrides
h1WeightctaWeightstringoptionalFont weights (e.g. "800")
h1TransformctaTransformstringoptional"none" or "uppercase"
h1LetterSpacingctaLetterSpacingstringoptionalCSS letter-spacing
ctaRadiusstringoptionalCTA border-radius multiplier
logoSvgURLoptionalLogo SVG URL
logoPositionstringoptional9-grid position (e.g. "top-left")
logoScalenumberoptionalLogo size (100 = default)
contentPositionstringoptional"top", "middle", or "bottom"
contentAlignstringoptional"left" or "center"
ctaAlignstringoptional"left" or "center"
disclaimerstringoptionalLegal disclaimer text
globalGenPromptstringoptionalDefault AI prompt prefix

PATCH update_design_system

Update any properties on an existing design system.
ParamTypeDescription
idstringrequiredDesign system slug (e.g. "acme-corp")
dataobjectrequiredKey-value pairs to update (see full schema below)

GET list_projects

List all projects with metadata.

No parameters. Returns id, filename, name, designSystemId, sceneCount, savedAt.

GET get_project

Get full project data including all scenes.
ParamTypeDescription
idstringrequiredProject UUID

POST create_project

Create a new project with scenes. Colours, layout, and logo position are inherited from the design system automatically.
ParamTypeDescription
namestringrequiredProject name (e.g. "June Campaign")
designSystemstringrequiredDesign system slug
formatenumoptionalActive format: square, portrait, vertical, landscape, wide
scenesarrayrequiredArray of scene objects (see below)

Scene object

FieldTypeDescription
h1stringrequiredHeadline text
h2stringoptionalSupporting text
h3stringoptionalThird line of text
ctastringoptionalCTA button text
bgTypeenumoptionalcolour, gradient, or image
bgColorhexoptionalBackground colour (default: DS Dark)
bgImageURLoptionalBackground image URL
bgGradientFromhexoptionalGradient start colour
bgGradientTohexoptionalGradient end colour
bgGradientAnglenumberoptionalGradient angle degrees (default 180)
textColorhexoptionalText colour (default: DS Light)
ctaBgColorhexoptionalCTA bg (default: DS Primary)
ctaTextColorhexoptionalCTA text (default: DS Light)
contentPositionenumoptionaltop, middle, bottom
contentAlignenumoptionalleft or center
logoPositionstringoptional9-grid position (e.g. "top-left")
overlayTypeenumoptionalnone, fill, gradient
overlayColourhexoptionalOverlay colour
overlayOpacitynumberoptionalOverlay opacity 0–1
notesstringoptionalDescription / AI image prompt
durationnumberoptionalSeconds (default 3)
audioUrlURLoptionalAudio URL (use upload_audio)
audioFileNamestringoptionalAudio filename for display
audioPlayModeenumoptionalloop, once, fade
audioVolumenumberoptionalVolume 0–100 (default 100)
audioOffsetnumberoptionalStart offset in ms
audioCropStartnumberoptionalTrim start in ms
audioCropEndnumberoptionalTrim end in ms
audioFadeOutnumberoptionalFade out duration in ms

PUT update_project

Update an existing project. Fetch the project first, modify it, then pass the full object back.
ParamTypeDescription
idstringrequiredProject UUID
filenamestringrequiredProject filename
projectobjectrequiredFull project object

DELETE delete_project

Permanently delete a project.
ParamTypeDescription
idstringrequiredProject UUID

POST generate_image

Generate an AI image for use as a scene background.
ParamTypeDescription
promptstringrequiredImage generation prompt
filenamestringoptionalOutput filename
modelenumoptionalAI model (see table below)
widthnumberoptionalWidth in px (default 2160)
heightnumberoptionalHeight in px (default 2160)

Available models

gpt-image-1ChatGPT Image v2 (default, best quality)
flux-devFlux Dev (fast)
flux-proFlux Pro
imagen4Google Imagen 4
imagen4-fastGoogle Imagen 4 Fast
nano-banana-proNano Banana Pro
ideogram-v3Ideogram v3

GET list_generations

Browse previously generated images for a client.
ParamTypeDescription
prefixstringrequiredClient slug prefix (e.g. "beau-brummell")

POST upload_image

Upload an image from a URL to Blob storage for use as a scene background.
ParamTypeDescription
urlstringrequiredPublic URL of the image
filenamestringoptionalFilename for the stored image

POST outpaint_image

Expand an image's edges using AI outpainting (fal.ai flux-2-pro).
ParamTypeDescription
image_urlstringrequiredPublic URL of the source image
expand_topnumberoptionalPixels to expand at top (0–2048)
expand_bottomnumberoptionalPixels to expand at bottom
expand_leftnumberoptionalPixels to expand at left
expand_rightnumberoptionalPixels to expand at right
filenamestringoptionalOutput filename

POST generate_vector

Generate an SVG illustration via Quiver AI.
ParamTypeDescription
promptstringrequiredDescription of the SVG to generate
modelstringoptionalQuiver model (default: arrow-1.1)
filenamestringoptionalOutput filename
viewBoxstringoptionalSVG viewBox (e.g. "0 0 100 100")

POST duplicate_project

Duplicate a project (creates a copy with "(Copy)" suffix).
ParamTypeDescription
idstringrequiredProject UUID to duplicate

POST upload_audio

Upload an audio file from a URL for use as scene audio. Returns a Blob URL.
ParamTypeDescription
urlstringrequiredPublic URL of audio file (mp3, wav, ogg, aac, m4a)
filenamestringoptionalFilename for stored audio

DELETE delete_design_system

Delete a design system (cannot delete "default").
ParamTypeDescription
idstringrequiredDesign system slug to delete

Design System Schema

The complete field reference for design systems. All fields are required for correct rendering.

FieldTypeDescription
idstringURL-safe slug (e.g. beau-brummell)
namestringDisplay name
clientNamestringClient display name
colorVarsarray4 named colour swatches: [{hex, name}] — Primary, Secondary, Dark, Light
fontHeadlinestringHeadline font stack (e.g. "Montserrat, sans-serif")
fontBodystringBody font stack (e.g. "Inter, sans-serif")
fontImportURLGoogle Fonts import URL
customFontsarrayUploaded fonts: [{name, url, fileName}]
fontH1fontH3stringPer-element font overrides (blank = inherit)
fontCtastringCTA button font (blank = inherit fontBody)
h1WeightctaWeightstringCSS font-weight values
h1TransformctaTransformstringnone or uppercase
h1LetterSpacingctaLetterSpacingstringCSS letter-spacing
ctaRadiusstringButton radius multiplier (e.g. 0.5)
ctaAlignstringleft or center
contentAlignstringleft or center
contentPositionstringtop, middle, or bottom
logoPositionstring9-grid position (e.g. top-left, bottom-center)
logoScalenumberLogo size percentage (100 = default)
logoSvgstringLogo SVG blob URL
logoFileNamestringLogo filename
disclaimerstringLegal disclaimer text (blank if none)
disclaimerAlignstringleft or center
globalGenPromptstringDefault AI image generation prompt prefix
globalLocksobjectLocked fields applied across all scenes

Project Schema

The full project object structure returned by get_project and expected by update_project.

{
  "version": 2,
  "designSystemId": "client-slug",
  "preset": { /* full design system snapshot */ },
  "activeFormat": "square",
  "activeSceneId": "scene-uuid",
  "totalDuration": 12,
  "scenes": [ /* array of scene objects */ ]
}
FieldTypeDescription
versionnumberSchema version (always 2)
designSystemIdstringLinked design system slug
presetobjectFull design system embedded in project
activeFormatenumsquare, portrait, vertical, landscape, wide
activeSceneIdstringCurrently selected scene
totalDurationnumberSum of all scene durations
scenesarrayOrdered array of scene objects

Scene Schema

Every scene in a project contains these fields. All are required for correct rendering.

FieldTypeDescription
Content
idstringUnique scene identifier
namestringScene display name
h1stringHeadline text
h2stringSupporting text
h3stringThird line
ctaTextstringCTA button label
disclaimerOverridestringPer-scene disclaimer (blank = use preset)
durationnumberScene duration in seconds
Layout
logoPositionstring9-grid logo placement
logoScalenumberPer-scene logo scale (100 = default)
contentPositionstringtop, middle, bottom
contentAlignstringleft or center
ctaAlignstringleft or center
paddingPerFormatobjectPer-format padding: {square: {left, right}, ...}
Colours
bgColorhexSolid background colour
textColorhexText colour
ctaBgColorhexCTA background
ctaTextColorhexCTA text
themeModestring"", dark, light, brand
colorOverridesobjectPer-element overrides: {logo: "light", h1: "brand"}
textOpacitynumberText layer opacity (0–1)
Scale
h1ScalectaScalenumberElement size percentage (default 100)
disclaimerScalenumberDisclaimer size percentage (default 100)
Background
bgTypeenumcolour, gradient, image, video, folder
bgImageURLBackground image URL
bgImageFileNamestringBackground image filename
bgVideoURLBackground video URL
bgVideoFileNamestringBackground video filename
bgVideoTrimStartnumberVideo trim start (0–1 normalised)
bgVideoTrimEndnumberVideo trim end (0–1 normalised)
bgGradientFromhexGradient start colour
bgGradientTohexGradient end colour
bgGradientAnglenumberGradient angle in degrees
bgScalenumberBackground zoom (100 = default)
bgFlipHbooleanFlip background horizontally
bgFlipVbooleanFlip background vertically
bgCropTopbgCropRightnumberBackground crop pixels per side
focusPinobject{x: 50, y: 50} — image focal point
focusPinsobjectPer-format focus: {square: {x,y}, ...}
bgPerFormatobjectPer-format bg overrides: {square: {bgType, bgColor, ...}}
bgFolderIndexnumberActive index in folder bg mode
Overlay
overlayTypeenumnone, fill, gradient
overlayColourhexOverlay colour
overlayOpacitynumberOverlay opacity (0–1)
overlayGradientDirstringtop, bottom, both, radial
overlayGradientColourhexGradient overlay colour
SVG Layers & Glyphs
svgLayersarray[{id, svg, fileName, scale, offsetX, offsetY, colorOv}]
glyphsarray[{id, char, font, x, y, scale, rotation, colorOv}]
AI Generation
genAiPromptstringAI image prompt for this scene
genAiModelstringAI model key
genAiCamerastringCamera angle (e.g. "eye-level")
genAiLensstringLens type (e.g. "standard")
genAiShotSizestringShot size (e.g. "medium-shot")
genAiLightingstringLighting style
genAiBackgroundstringBackground description
genAiStylestringVisual style (e.g. "photo-realistic")
genAiMoodstringMood/atmosphere
genAiImagesobjectPer-format generated images
bgImageHistoryobjectPer-format image history arrays
bgImageHistoryIndexobjectPer-format history index
Cinematic
cinematicbooleanEnable cinematic mode (hides text)
cinematicShowLogobooleanShow logo in cinematic mode
cinematicLogoScalenumber|nullLogo scale override for cinematic
cinematicLogoPositionstring|nullLogo position override for cinematic
Audio
audioUrlURLAudio file URL
audioFileNamestringAudio filename
audioOffsetnumberAudio offset in ms
audioPlayModestringloop, once, fade
audioVolumenumberVolume 0–100
audioCropStartaudioCropEndnumberAudio trim in ms
audioFadeOutnumberFade out duration in ms
Capture
captureEnabledbooleanEnable capture mode (overrides imaging)
captureUrlURLURL to capture
captureFilterstringCSS filter preset name
captureAnimModestringnone or animate
captureEasingstringEasing function name
captureKeyframesobjectPer-format keyframes
Advanced
htmlOverridestringCustom HTML content
useHtmlOverridebooleanEnable HTML override mode
notesstringInternal notes
animationNotesstringAnimation description
elementAnimationsobjectPer-format element animation data

Format Specifications

Font sizes are calculated by the renderer, not stored. The root unit determines all text sizes via multipliers.

FormatDimensionsRootH1 (3x)H2 (2x)H3 (1.25x)CTA (1x)
Square1080 × 108024px72px48px30px24px
Portrait1080 × 135028px84px56px35px28px
Vertical1080 × 192028px84px56px35px28px
Landscape1920 × 108022px66px44px28px22px
Wide1200 × 62822px66px44px28px22px

Per-scene scale overrides: h1Scale, h2Scale, h3Scale, ctaScale (percentage, default 100).

Agent Skills

Skills are prompt modules your agent can invoke to get context-aware guidance for specific tasks. Install the adflow skill in your agent to unlock all MCP tools and workflow knowledge.

Core Skill

adflow

Primary skill for all Adflow operations. Covers MCP tool usage, design system creation, project workflows, scene field requirements, and AI image generation. Triggers on adflow, design system, create a project, build scenes, generate ad creative.

JSON Templates

Download these templates, fill in your client's brand details, and import via the API or MCP tools.

design-system.json project.json

Design System Template

{
  "id": "your-client-slug",
  "name": "Your Client Name",
  "brandColor1": "#2563eb",
  "brandColor2": "#1e40af",
  "bgColor": "#0a0a0a",
  "textColor": "#ffffff",
  "ctaBgColor": "#2563eb",
  "ctaTextColor": "#ffffff",
  "uiAccent": "#2563eb",
  "colorVars": [
    { "hex": "#2563eb", "name": "Primary" },
    { "hex": "#1e40af", "name": "Secondary" },
    { "hex": "#0a0a0a", "name": "Dark" },
    { "hex": "#f5f5f5", "name": "Light" }
  ],
  "fontHeadline": "'Inter', sans-serif",
  "fontBody": "'Inter', sans-serif",
  "fontH1": "'Inter', sans-serif",
  "fontH2": "'Inter', sans-serif",
  "fontH3": "'Inter', sans-serif",
  "fontCta": "'Inter', sans-serif",
  "fontImport": "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap",
  "h1Weight": "900",
  "h2Weight": "400",
  "h3Weight": "400",
  "ctaWeight": "700",
  "h1Transform": "none",
  "h2Transform": "none",
  "ctaTransform": "uppercase",
  "h1LetterSpacing": "-0.02em",
  "h2LetterSpacing": "0",
  "ctaLetterSpacing": "0.05em",
  "ctaRadius": "4px",
  "ctaAlign": "center",
  "contentAlign": "left",
  "contentPosition": "middle",
  "logoPosition": "top-left",
  "logoScale": 100,
  "logoSvg": "",
  "logoFileName": "",
  "disclaimer": "",
  "disclaimerAlign": "left"
}

Project Template

{
  "name": "My Campaign Name",
  "designSystem": "your-client-slug",
  "scenes": [
    {
      "h1": "Your Main Headline",
      "h2": "Supporting copy goes here",
      "h3": "",
      "cta": "Call To Action",
      "bgType": "colour",
      "bgColor": "#0a0a0a",
      "notes": "Scene description or AI image prompt",
      "duration": 6
    },
    {
      "h1": "Second Scene",
      "h2": "Another supporting message",
      "h3": "",
      "cta": "Learn More",
      "bgType": "gradient",
      "bgColor": "#1e40af",
      "notes": "",
      "duration": 6
    }
  ]
}

Direct API Fallback

When MCP tools aren't available, use the REST API directly with your API key.

# List design systems
curl -s -H "X-API-Key: YOUR_KEY" "https://adflow.design/api/design-systems/list"

# Save / update design system
curl -s -X POST -H "X-API-Key: YOUR_KEY" -H "Content-Type: application/json" \
  "https://adflow.design/api/design-systems/save" \
  -d '{"id": "client-slug", "data": { ... }}'

# List projects
curl -s -H "X-API-Key: YOUR_KEY" "https://adflow.design/api/projects/list"

# Get project by UUID
curl -s -H "X-API-Key: YOUR_KEY" "https://adflow.design/api/projects/PROJECT_UUID"

# Create new project
# project blob MUST include version, designSystemId, preset.name, activeFormat
curl -s -X POST -H "X-API-Key: YOUR_KEY" -H "Content-Type: application/json" \
  "https://adflow.design/api/projects/save" \
  -d '{"filename": "project-slug", "project": {"version":2, "designSystemId":"client-slug", "preset":{"name":"Client Name"}, "activeFormat":"square", "scenes":[...]}}'

# Update existing project
curl -s -X POST -H "X-API-Key: YOUR_KEY" -H "Content-Type: application/json" \
  "https://adflow.design/api/projects/save" \
  -d '{"filename": "project-slug", "projectId": "UUID", "project": {"version":2, "designSystemId":"client-slug", "preset":{"name":"Client Name"}, "activeFormat":"square", "scenes":[...]}}'

Critical Rules

Font names must use SINGLE QUOTES.
Font values are injected into HTML style="" attributes. Double quotes break the attribute, silently dropping all CSS properties after the font declaration. Text renders at 16px with no styling.

WRONG: "Inter", sans-serif
RIGHT: 'Inter', sans-serif
All design system fields are required.
Missing fields cause the renderer to fall back to DEFAULT_PRESET values (system font, black text, white background). Always provide the complete field set.
Scenes inherit from the design system.
The create_project tool automatically inherits textColor, ctaBgColor, ctaTextColor, contentAlign, contentPosition, and logoPosition from the design system. You can override any field per-scene in the create_project call or via update_project afterwards.
Font sizes are read-only.
Font sizes are calculated by the renderer from format dimensions. Do not attempt to set font sizes in design systems or scenes.
Projects MUST include designSystemId in the project blob.
The /api/projects/save endpoint reads project.designSystemId to populate the design_system_id DB column. Projects are filtered by design system in the UI — if this field is missing or null, the project will not appear in the project list. You must also include version: 2, preset: {name: "..."}, and activeFormat for the project to load correctly.

WRONG: {"project": {"designSystem": "slug", "scenes": [...]}}
RIGHT: {"project": {"version": 2, "designSystemId": "slug", "preset": {"name": "Client"}, "activeFormat": "square", "scenes": [...]}}
Autosave can overwrite API updates.
The frontend autosaves to the server every 2 seconds. If a user has the project open while your agent updates via API, the frontend's next autosave will overwrite your changes. Coordinate with the user to close the project before making API updates.

Adflow — AI-native ad creative builder — adflow.design