POST
/
pattern
curl --request POST \
  --url https://api.magicpatterns.com/api/pattern \
  --header 'Content-Type: multipart/form-data' \
  --header 'x-mp-api-key: <api-key>' \
  --form 'prompt=Create a login page' \
  --form designSystem=html \
  --form styling=tailwind \
  --form shouldAwaitGenerations=false \
  --form requestSummary=false \
  --form numberOfGenerations=2
{
  "id": "123456",
  "snapshots": [
    {
      "prompt": "<string>",
      "activeGenerationId": "<string>",
      "generations": [
        {
          "id": "<string>",
          "status": "NOT_STARTED",
          "type": "NEW",
          "sourceCode": "<string>",
          "error": "<string>",
          "previewJob": {
            "url": "<string>",
            "status": "NOT_STARTED"
          }
        }
      ]
    }
  ],
  "url": "https://www.magicpatterns.com/123456",
  "summary": "The login page was created with a green button and a centered layout.",
  "iFrameUrl": "https://www.magicpatterns.com/iframe/123456"
}

Authorizations

​
x-mp-api-key
string
header
required

Body

​
prompt
string

The prompt for the new design.

​
designSystem
enum<string>

The design system to use for creating the design.

Available options:
html,
shadcn,
chakraUi
​
styling
enum<string>

The styling approach to apply to the design.

Available options:
tailwind,
inline,
customTailwind
​
image
file

An optional image to inspire or guide the design creation.

​
shouldAwaitGenerations
boolean
default:
false

Whether to wait for all generations to complete before responding.

​
requestSummary
boolean
default:
false

Whether to request a summary of UI decisions that were made. Must be used in conjunction with shouldAwaitGenerations=true.

​
numberOfGenerations
integer
default:
1

The number of generations to process for the design. Must be at least 1.

Required range: x > 1

Response

200
application/json
Successfully created a new design.
​
id
string

The unique ID of the created design.

​
snapshots
object[]
​
url
string

This is the main 'editor' URL, which shows multiple generations at a time.

​
summary
string

A summary of the UI decisions that were made, if requested by requestSummary=true and shouldAwaitGenerations=true.

​
iFrameUrl
string

This is an iframe of purely the 'active' generation. By default the "export to figma" button will show. Use the dontShowFigma query param to hide the Figma button. Example - https://www.magicpatterns.com/iframe/123456?dontShowFigma=true. You can also use the generationId query param to point to a specific generation. Example - https://www.magicpatterns.com/iframe/123?generationId=abc.

Was this page helpful?

Suggest editsRaise issue
API Product OverviewUpdate an existing design