Template staging
Build on what you already have.
Add a section to an existing Bricks export, or compare two versions. Review the structure and download the result. Templates stay in this browser tab until you export them.
1. Existing page
Paste a Bricks JSON export. Leave empty to start a new page.
2. New section or version
Add a section, or supply a complete version when comparing.
No WordPress connection required
Generate Bricks Templates
in Seconds
60+ pre-built templates, 45+ color palettes, 30+ style presets.
Describe what you need and get editable Bricks Builder JSON, ready for review in your site.
Try an example:
Getting started · ChatGPT & import
- Try a built-in template without an API key.
- For AI generation, open Settings, select a provider, enter your API key and test the connection. Then enable AI mode.
- Choose the export type and download JSON. In WordPress, go to Bricks → Templates → Import templates. Review responsive layouts, links, forms and images before publishing.
Sign in with ChatGPT on this computer
Install the official Codex CLI, then start BricksSnap with npm run dev:local. Open Settings → Sign in with ChatGPT, complete the OpenAI sign-in, then select Check ChatGPT connection and Use ChatGPT account for AI generation. Enable AI mode to generate.
This uses your account’s Codex limits without an API key. It supports text prompts and runs on localhost; the hosted website cannot use this computer’s sign-in. API providers remain available for hosted use and image references.
Connect from ChatGPT using MCP
ChatGPT can design your template and use BricksSnap to validate it, without a separate OpenAI API call. Enable BRICKSSNAP_MCP_ENABLED=true on your BricksSnap server, restart it, and connect its /api/mcp endpoint in ChatGPT developer mode through a secure MCP tunnel or public HTTPS URL. Availability depends on your account and workspace.
The endpoint only provides the template catalog, schema guidance and JSON validation. It does not access your API keys or WordPress site.
Official ChatGPT connection instructionsExample: “Use BricksSnap to design a responsive restaurant landing page. Get the schema, create native elements, validate them and give me the template as a JSON file.”
Import from ChatGPT or Bricks
Paste an element array or a template object. Global classes and component metadata are retained; missing dependencies are reported.
Bricks 2.4
Bricks now has native AI Abilities, HTML/CSS conversion, component management and global data transfers. For direct site editing, configure the official integration in WordPress → Bricks → AI. BricksSnap remains a standalone template workspace. Its preview is a structure sketch; Bricks is the final rendering check.
Bricks AI setupAI + Built-in Engine
Use your chosen AI model or ChatGPT connection, or generate built-in templates without an API key.
45+ Color Palettes
Pre-built palettes from Trust & Professional to Dark Themes and Tech Startups, applied to every element.
30+ Style Presets
Industry, aesthetic, mood, and trend presets. From SaaS to Restaurant, Minimalist to Neo-Brutalism.
BYOK - Your Keys
Connect OpenAI, Anthropic, Azure or OpenRouter. Keys pass through this server to your provider; API usage is billed by your provider.