Docs
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
The typical agent workflow in five steps:
1 list_design_systems — check if the client already has a design system
2 create_design_system or update_design_system — set up the brand (all fields required)
3 create_project — create scenes with headlines, copy, and CTA text
4 get_project → update_project — patch scene-level styling fields (textColor, ctaBgColor, etc.)
5 generate_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.
Param Type Description
namestring required Display name (e.g. "Acme Corp")
primaryColorhex required Primary brand colour
secondaryColorhex optional Secondary brand colour
darkColorhex optional Dark colour (default #111111)
lightColorhex optional Light colour (default #ffffff)
fontHeadlinestring optional Headline font stack
fontBodystring optional Body font stack
fontImportURL optional Google Fonts import URL
fontH1–fontCtastring optional Per-element font overrides
h1Weight–ctaWeightstring optional Font weights (e.g. "800")
h1Transform–ctaTransformstring optional "none" or "uppercase"
h1LetterSpacing–ctaLetterSpacingstring optional CSS letter-spacing
ctaRadiusstring optional CTA border-radius multiplier
logoSvgURL optional Logo SVG URL
logoPositionstring optional 9-grid position (e.g. "top-left")
logoScalenumber optional Logo size (100 = default)
contentPositionstring optional "top", "middle", or "bottom"
contentAlignstring optional "left" or "center"
ctaAlignstring optional "left" or "center"
disclaimerstring optional Legal disclaimer text
globalGenPromptstring optional Default AI prompt prefix
PATCH update_design_system
Update any properties on an existing design system.
Param Type Description
idstring required Design system slug (e.g. "acme-corp")
dataobject required Key-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.
Param Type Description
idstring required Project UUID
POST create_project
Create a new project with scenes. Colours, layout, and logo position are inherited from the design system automatically.
Param Type Description
namestring required Project name (e.g. "June Campaign")
designSystemstring required Design system slug
formatenum optional Active format: square, portrait, vertical, landscape, wide
scenesarray required Array of scene objects (see below)
Scene object
Field Type Description
h1string required Headline text
h2string optional Supporting text
h3string optional Third line of text
ctastring optional CTA button text
bgTypeenum optional colour, gradient, or image
bgColorhex optional Background colour (default: DS Dark)
bgImageURL optional Background image URL
bgGradientFromhex optional Gradient start colour
bgGradientTohex optional Gradient end colour
bgGradientAnglenumber optional Gradient angle degrees (default 180)
textColorhex optional Text colour (default: DS Light)
ctaBgColorhex optional CTA bg (default: DS Primary)
ctaTextColorhex optional CTA text (default: DS Light)
contentPositionenum optional top, middle, bottom
contentAlignenum optional left or center
logoPositionstring optional 9-grid position (e.g. "top-left")
overlayTypeenum optional none, fill, gradient
overlayColourhex optional Overlay colour
overlayOpacitynumber optional Overlay opacity 0–1
notesstring optional Description / AI image prompt
durationnumber optional Seconds (default 3)
audioUrlURL optional Audio URL (use upload_audio)
audioFileNamestring optional Audio filename for display
audioPlayModeenum optional loop, once, fade
audioVolumenumber optional Volume 0–100 (default 100)
audioOffsetnumber optional Start offset in ms
audioCropStartnumber optional Trim start in ms
audioCropEndnumber optional Trim end in ms
audioFadeOutnumber optional Fade out duration in ms
PUT update_project
Update an existing project. Fetch the project first, modify it, then pass the full object back.
Param Type Description
idstring required Project UUID
filenamestring required Project filename
projectobject required Full project object
DELETE delete_project
Permanently delete a project.
Param Type Description
idstring required Project UUID
POST generate_image
Generate an AI image for use as a scene background.
Param Type Description
promptstring required Image generation prompt
filenamestring optional Output filename
modelenum optional AI model (see table below)
widthnumber optional Width in px (default 2160)
heightnumber optional Height 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.
Param Type Description
prefixstring required Client slug prefix (e.g. "beau-brummell")
POST upload_image
Upload an image from a URL to Blob storage for use as a scene background.
Param Type Description
urlstring required Public URL of the image
filenamestring optional Filename for the stored image
POST outpaint_image
Expand an image's edges using AI outpainting (fal.ai flux-2-pro).
Param Type Description
image_urlstring required Public URL of the source image
expand_topnumber optional Pixels to expand at top (0–2048)
expand_bottomnumber optional Pixels to expand at bottom
expand_leftnumber optional Pixels to expand at left
expand_rightnumber optional Pixels to expand at right
filenamestring optional Output filename
POST generate_vector
Generate an SVG illustration via Quiver AI.
Param Type Description
promptstring required Description of the SVG to generate
modelstring optional Quiver model (default: arrow-1.1)
filenamestring optional Output filename
viewBoxstring optional SVG viewBox (e.g. "0 0 100 100")
POST duplicate_project
Duplicate a project (creates a copy with "(Copy)" suffix).
Param Type Description
idstring required Project UUID to duplicate
POST upload_audio
Upload an audio file from a URL for use as scene audio. Returns a Blob URL.
Param Type Description
urlstring required Public URL of audio file (mp3, wav, ogg, aac, m4a)
filenamestring optional Filename for stored audio
DELETE delete_design_system
Delete a design system (cannot delete "default").
Param Type Description
idstring required Design system slug to delete
Design System Schema
The complete field reference for design systems. All fields are required for correct rendering.
Field Type Description
idstring URL-safe slug (e.g. beau-brummell)
namestring Display name
clientNamestring Client display name
colorVarsarray 4 named colour swatches: [{hex, name}] — Primary, Secondary, Dark, Light
fontHeadlinestring Headline font stack (e.g. "Montserrat, sans-serif")
fontBodystring Body font stack (e.g. "Inter, sans-serif")
fontImportURL Google Fonts import URL
customFontsarray Uploaded fonts: [{name, url, fileName}]
fontH1 – fontH3string Per-element font overrides (blank = inherit)
fontCtastring CTA button font (blank = inherit fontBody)
h1Weight – ctaWeightstring CSS font-weight values
h1Transform – ctaTransformstring none or uppercase
h1LetterSpacing – ctaLetterSpacingstring CSS letter-spacing
ctaRadiusstring Button radius multiplier (e.g. 0.5)
ctaAlignstring left or center
contentAlignstring left or center
contentPositionstring top, middle, or bottom
logoPositionstring 9-grid position (e.g. top-left, bottom-center)
logoScalenumber Logo size percentage (100 = default)
logoSvgstring Logo SVG blob URL
logoFileNamestring Logo filename
disclaimerstring Legal disclaimer text (blank if none)
disclaimerAlignstring left or center
globalGenPromptstring Default AI image generation prompt prefix
globalLocksobject Locked 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 */ ]
}
Field Type Description
versionnumber Schema version (always 2)
designSystemIdstring Linked design system slug
presetobject Full design system embedded in project
activeFormatenum square, portrait, vertical, landscape, wide
activeSceneIdstring Currently selected scene
totalDurationnumber Sum of all scene durations
scenesarray Ordered array of scene objects
Scene Schema
Every scene in a project contains these fields. All are required for correct rendering.
Field Type Description
Content
idstring Unique scene identifier
namestring Scene display name
h1string Headline text
h2string Supporting text
h3string Third line
ctaTextstring CTA button label
disclaimerOverridestring Per-scene disclaimer (blank = use preset)
durationnumber Scene duration in seconds
Layout
logoPositionstring 9-grid logo placement
logoScalenumber Per-scene logo scale (100 = default)
contentPositionstring top, middle, bottom
contentAlignstring left or center
ctaAlignstring left or center
paddingPerFormatobject Per-format padding: {square: {left, right}, ...}
Colours
bgColorhex Solid background colour
textColorhex Text colour
ctaBgColorhex CTA background
ctaTextColorhex CTA text
themeModestring "", dark, light, brand
colorOverridesobject Per-element overrides: {logo: "light", h1: "brand"}
textOpacitynumber Text layer opacity (0–1)
Scale
h1Scale–ctaScalenumber Element size percentage (default 100)
disclaimerScalenumber Disclaimer size percentage (default 100)
Background
bgTypeenum colour, gradient, image, video, folder
bgImageURL Background image URL
bgImageFileNamestring Background image filename
bgVideoURL Background video URL
bgVideoFileNamestring Background video filename
bgVideoTrimStartnumber Video trim start (0–1 normalised)
bgVideoTrimEndnumber Video trim end (0–1 normalised)
bgGradientFromhex Gradient start colour
bgGradientTohex Gradient end colour
bgGradientAnglenumber Gradient angle in degrees
bgScalenumber Background zoom (100 = default)
bgFlipHboolean Flip background horizontally
bgFlipVboolean Flip background vertically
bgCropTop–bgCropRightnumber Background crop pixels per side
focusPinobject {x: 50, y: 50} — image focal point
focusPinsobject Per-format focus: {square: {x,y}, ...}
bgPerFormatobject Per-format bg overrides: {square: {bgType, bgColor, ...}}
bgFolderIndexnumber Active index in folder bg mode
Overlay
overlayTypeenum none, fill, gradient
overlayColourhex Overlay colour
overlayOpacitynumber Overlay opacity (0–1)
overlayGradientDirstring top, bottom, both, radial
overlayGradientColourhex Gradient overlay colour
SVG Layers & Glyphs
svgLayersarray [{id, svg, fileName, scale, offsetX, offsetY, colorOv}]
glyphsarray [{id, char, font, x, y, scale, rotation, colorOv}]
AI Generation
genAiPromptstring AI image prompt for this scene
genAiModelstring AI model key
genAiCamerastring Camera angle (e.g. "eye-level")
genAiLensstring Lens type (e.g. "standard")
genAiShotSizestring Shot size (e.g. "medium-shot")
genAiLightingstring Lighting style
genAiBackgroundstring Background description
genAiStylestring Visual style (e.g. "photo-realistic")
genAiMoodstring Mood/atmosphere
genAiImagesobject Per-format generated images
bgImageHistoryobject Per-format image history arrays
bgImageHistoryIndexobject Per-format history index
Cinematic
cinematicboolean Enable cinematic mode (hides text)
cinematicShowLogoboolean Show logo in cinematic mode
cinematicLogoScalenumber|null Logo scale override for cinematic
cinematicLogoPositionstring|null Logo position override for cinematic
Audio
audioUrlURL Audio file URL
audioFileNamestring Audio filename
audioOffsetnumber Audio offset in ms
audioPlayModestring loop, once, fade
audioVolumenumber Volume 0–100
audioCropStart–audioCropEndnumber Audio trim in ms
audioFadeOutnumber Fade out duration in ms
Capture
captureEnabledboolean Enable capture mode (overrides imaging)
captureUrlURL URL to capture
captureFilterstring CSS filter preset name
captureAnimModestring none or animate
captureEasingstring Easing function name
captureKeyframesobject Per-format keyframes
Advanced
htmlOverridestring Custom HTML content
useHtmlOverrideboolean Enable HTML override mode
notesstring Internal notes
animationNotesstring Animation description
elementAnimationsobject Per-format element animation data
Font sizes are calculated by the renderer, not stored. The root unit determines all text sizes via multipliers.
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 Template
Copy
{
"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
Copy
{
"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.