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."
}Create a design
Creates a new Magic Patterns design.
Behavior depends on the request:
- With
prompt: kicks off AI generation in the background. The response returns immediately witheditorId; pollGET /v3/designs/{editorId}/statusuntilisGeneratingisfalse. Generation typically takes 2–10 minutes. - Without
prompt: creates a blank design with scaffold files (App.tsx, index.tsx, index.css, tailwind.config.js) and returns immediately. - With
templateId: forks an existing design first, then optionally applies the prompt to the fork.
Generation calls bill credits from the authenticated user’s normal credit balance.
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
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
Optional name for the design. Defaults to "Untitled".
"Onboarding flow"
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.
"A login page with social sign-in."
Optional image URLs to use as visual references (only used with prompt).
Optional ID of the design system to use. Discover IDs via GET /v3/design-systems.
Optional design system name (e.g. "Shadcn"). Resolved case-insensitively. designSystemId takes precedence if both are provided.
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.
"abc123"
"https://www.magicpatterns.com/c/abc123"
Live preview URL. Only populated once the first artifact has been compiled.
"https://project-onboarding-flow.magicpatterns.app"
The artifact created at design-creation time. Null until the first artifact is ready.
File names in the active artifact. Empty while generation is still running.
Was this page helpful?