Skip to main content
POST
/
v3
/
designs
Create a design
curl --request POST \
  --url https://api.magicpatterns.com/api/v3/designs \
  --header 'Content-Type: application/json' \
  --header 'x-mp-api-key: <api-key>' \
  --data '
{
  "name": "Onboarding flow",
  "prompt": "A login page with social sign-in.",
  "imageUrls": [
    "<string>"
  ],
  "designSystemId": "<string>",
  "designSystem": "<string>",
  "templateId": "<string>"
}
'
import requests

url = "https://api.magicpatterns.com/api/v3/designs"

payload = {
"name": "Onboarding flow",
"prompt": "A login page with social sign-in.",
"imageUrls": ["<string>"],
"designSystemId": "<string>",
"designSystem": "<string>",
"templateId": "<string>"
}
headers = {
"x-mp-api-key": "<api-key>",
"Content-Type": "application/json"
}

response = requests.post(url, json=payload, headers=headers)

print(response.text)
const options = {
method: 'POST',
headers: {'x-mp-api-key': '<api-key>', 'Content-Type': 'application/json'},
body: JSON.stringify({
name: 'Onboarding flow',
prompt: 'A login page with social sign-in.',
imageUrls: ['<string>'],
designSystemId: '<string>',
designSystem: '<string>',
templateId: '<string>'
})
};

fetch('https://api.magicpatterns.com/api/v3/designs', options)
.then(res => res.json())
.then(res => console.log(res))
.catch(err => console.error(err));
<?php

$curl = curl_init();

curl_setopt_array($curl, [
CURLOPT_URL => "https://api.magicpatterns.com/api/v3/designs",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "POST",
CURLOPT_POSTFIELDS => json_encode([
'name' => 'Onboarding flow',
'prompt' => 'A login page with social sign-in.',
'imageUrls' => [
'<string>'
],
'designSystemId' => '<string>',
'designSystem' => '<string>',
'templateId' => '<string>'
]),
CURLOPT_HTTPHEADER => [
"Content-Type: application/json",
"x-mp-api-key: <api-key>"
],
]);

$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);

if ($err) {
echo "cURL Error #:" . $err;
} else {
echo $response;
}
package main

import (
"fmt"
"strings"
"net/http"
"io"
)

func main() {

url := "https://api.magicpatterns.com/api/v3/designs"

payload := strings.NewReader("{\n \"name\": \"Onboarding flow\",\n \"prompt\": \"A login page with social sign-in.\",\n \"imageUrls\": [\n \"<string>\"\n ],\n \"designSystemId\": \"<string>\",\n \"designSystem\": \"<string>\",\n \"templateId\": \"<string>\"\n}")

req, _ := http.NewRequest("POST", url, payload)

req.Header.Add("x-mp-api-key", "<api-key>")
req.Header.Add("Content-Type", "application/json")

res, _ := http.DefaultClient.Do(req)

defer res.Body.Close()
body, _ := io.ReadAll(res.Body)

fmt.Println(string(body))

}
HttpResponse<String> response = Unirest.post("https://api.magicpatterns.com/api/v3/designs")
.header("x-mp-api-key", "<api-key>")
.header("Content-Type", "application/json")
.body("{\n \"name\": \"Onboarding flow\",\n \"prompt\": \"A login page with social sign-in.\",\n \"imageUrls\": [\n \"<string>\"\n ],\n \"designSystemId\": \"<string>\",\n \"designSystem\": \"<string>\",\n \"templateId\": \"<string>\"\n}")
.asString();
require 'uri'
require 'net/http'

url = URI("https://api.magicpatterns.com/api/v3/designs")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Post.new(url)
request["x-mp-api-key"] = '<api-key>'
request["Content-Type"] = 'application/json'
request.body = "{\n \"name\": \"Onboarding flow\",\n \"prompt\": \"A login page with social sign-in.\",\n \"imageUrls\": [\n \"<string>\"\n ],\n \"designSystemId\": \"<string>\",\n \"designSystem\": \"<string>\",\n \"templateId\": \"<string>\"\n}"

response = http.request(request)
puts response.read_body
{
  "editorId": "abc123",
  "editorUrl": "https://www.magicpatterns.com/c/abc123",
  "previewUrl": "https://project-onboarding-flow.magicpatterns.app",
  "activeArtifactId": "<string>",
  "availableFiles": [
    "<string>"
  ]
}
{
"error": "You do not have access to this resource."
}
{
"error": "You do not have access to this resource."
}
{
"error": "You do not have access to this resource."
}
{
"error": "You do not have access to this resource."
}

Authorizations

x-mp-api-key
string
header
required

Magic Patterns API key. The same key authenticates v3 REST and the MCP server. Create one at https://www.magicpatterns.com/settings/api-keys.

Body

application/json
name
string

Optional name for the design. Defaults to "Untitled".

Example:

"Onboarding flow"

prompt
string

Optional natural-language prompt. If supplied, AI generation runs in the background and the caller must poll GET /v3/designs/{editorId}/status. If omitted, a blank design with scaffold files is created instantly.

Example:

"A login page with social sign-in."

imageUrls
string<uri>[]

Optional image URLs to use as visual references (only used with prompt).

designSystemId
string

Optional ID of the design system to use. Discover IDs via GET /v3/design-systems.

designSystem
string

Optional design system name (e.g. "Shadcn"). Resolved case-insensitively. designSystemId takes precedence if both are provided.

templateId
string

Optional editor ID of an existing design to use as a template. The design is forked first, then any prompt is applied to the fork.

Response

Design created. If generation is in flight, poll status.

editorId
string
Example:

"abc123"

editorUrl
string<uri>
Example:

"https://www.magicpatterns.com/c/abc123"

previewUrl
string<uri> | null

Live preview URL. Only populated once the first artifact has been compiled.

Example:

"https://project-onboarding-flow.magicpatterns.app"

activeArtifactId
string | null

The artifact created at design-creation time. Null until the first artifact is ready.

availableFiles
string[]

File names in the active artifact. Empty while generation is still running.