Features
- Exports
- Infinite Canvas
- Custom Components (Beta)
- Chrome Extension
- Team Collaboration
Learn: Magic Patterns University
- AI Prototyping like a Pro
- Build a Landing Page (16 mins)
- Build an Existing Design (6 mins)
- How to Use (11 mins)
Security & Legal
- Legal
- Security
API
Endpoints
Create a new design (V2)
Creates a new design based on the provided prompt and optional images. This version supports both default and custom preset configurations.
POST
/
v2
/
pattern
Copy
Ask AI
curl --request POST \
--url https://api.magicpatterns.com/api/v2/pattern \
--header 'Content-Type: multipart/form-data' \
--header 'x-mp-api-key: <api-key>' \
--form mode=fast \
--form 'prompt=Create a login page' \
--form presetId=html-tailwind \
--form 'images=[
null
]'
Copy
Ask AI
{
"id": "abc123",
"sourceFiles": [
{
"id": "<string>",
"name": "<string>",
"code": "<string>",
"type": "javascript"
}
],
"compiledFiles": [
{
"id": "<string>",
"fileName": "<string>",
"hostedUrl": "<string>",
"type": "javascript"
}
],
"editorUrl": "https://www.magicpatterns.com/c/abc123",
"previewUrl": "https://abc123-preview.magicpatterns.app",
"chatMessages": [
{
"role": "assistant",
"content": "I will create a login page with a centered layout."
}
]
}
Authorizations
Body
multipart/form-data
Response
200
application/json
Successfully created a new design.
The response is of type object
.
Was this page helpful?
Copy
Ask AI
curl --request POST \
--url https://api.magicpatterns.com/api/v2/pattern \
--header 'Content-Type: multipart/form-data' \
--header 'x-mp-api-key: <api-key>' \
--form mode=fast \
--form 'prompt=Create a login page' \
--form presetId=html-tailwind \
--form 'images=[
null
]'
Copy
Ask AI
{
"id": "abc123",
"sourceFiles": [
{
"id": "<string>",
"name": "<string>",
"code": "<string>",
"type": "javascript"
}
],
"compiledFiles": [
{
"id": "<string>",
"fileName": "<string>",
"hostedUrl": "<string>",
"type": "javascript"
}
],
"editorUrl": "https://www.magicpatterns.com/c/abc123",
"previewUrl": "https://abc123-preview.magicpatterns.app",
"chatMessages": [
{
"role": "assistant",
"content": "I will create a login page with a centered layout."
}
]
}
Assistant
Responses are generated using AI and may contain mistakes.