BricksSnap

A Next.js tool that creates editable Bricks Builder JSON templates. Build modern pages in the Studio without AI, or use an AI provider (OpenAI, Anthropic, Azure, OpenRouter), local ChatGPT sign-in through Codex, or connect ChatGPT or Claude over MCP. Review exports in Bricks before publishing.

Try it: bricks-snap.vercel.app · Start here: setup, both AI connections and import guide.

Free for your own and your clients' websites. You may not offer BricksSnap itself to others as a hosted app or sell it; see licensing.

v0.13: Mobile menus, carousels, motion and class updates (release notes). Every header gets a real mobile menu, reviews and portfolio come as carousels, content can fade in on scroll, and sites with older BricksSnap classes can update them with undo.

v0.12: Import & Modernize and 90 layouts (release notes). Paste any Bricks JSON and get it back on your design system: tokens instead of fixed colors, fluid sizes, clean bs- classes and mobile rules, restyled by your brand kit. The Studio grows from 40 to 90 layouts, including bento grids, a pricing switch and a FAQ accordion built on Bricks' native tabs and accordion.

v0.9: Library of ready-made designs. 12 complete designs for different industries and styles, as pages and sections, in the app and in Bricks' remote library (release notes).

v0.8: Studio (release notes). Pick from 40 layouts in five style directions, set your brand color, fonts, corners and spacing, and get copy written for your industry in German or English. Export native Bricks JSON whose global classes follow one design system, and install that system's palette and variables on a connected site.

v0.5: review, render and apply changes to a live Bricks page (release notes).

• Load a page from a connected site, add sections and compare the before/after as Bricks itself renders it.
• Save with Bricks' atomic document-digest guard, verify the read-back and restore the previous revision.
• Runs locally through the official WordPress MCP Adapter.

v0.7: site design, classes and templates (release notes). Generate sections in a connected site's colors and fonts, import images and create missing global classes before saving, and edit headers, footers and their display conditions.

v0.6: Bricks remote library and AI client guidance (release notes). Add a BricksSnap deployment under Bricks → Remote libraries to browse and insert the catalog inside the builder.

v0.5 builds on v0.4's read-only connection and v0.3's template staging and local MCP. See the release plan and the Bricks AI/MCP research.

Features

• Studio: 92 layouts in 22 section types and five style directions, with mobile menus, carousels and optional scroll motion; a brand kit (color, fonts, corners, spacing, light/dark, motion), industry copy in German or English, live preview at three widths, quality checks
• Modernize: any Bricks JSON rebuilt on the design system (tokens, fluid scale, bs- classes, mobile rules), locally in the browser
• Design system: bs- global classes with var(--bs-*, fallback) values; palette and variables installable on a connected site with ownership guards
• Pre-built template library (Hero, Navbar, Features, Pricing, Testimonials, Footer and more)
• Full page presets
• Design tokens (colors, border-radius, shadows, spacing, typography, dark mode)
• API route for AI-powered generation (/api/generate)
• Export as Bricks Import JSON + copy-to-clipboard
• Local Sign in with ChatGPT, Claude and ChatGPT over MCP, and JSON paste/file import
• Bricks 2.4.1 native element/control registry, reference repair and responsive defaults
• Export types and preservation of global classes/component metadata
• Staging workspace: prepend/append sections or insert after a root, with ID collision handling and structural comparison
• Eleven MCP tools over optional HTTP or local stdio; Studio pages, modernizing Bricks JSON, section generation, page assembly, merge and comparison
• Local WordPress connection: page search, live page import with Bricks' document digest, site class and palette import, class conflict warnings
• Bricks-rendered before/after preview (1280/390 px), guarded apply with read-back verification and revision restore
• Import of external images into the site's media library and guarded creation of missing global classes before applying
• Built-in sections in a connected site's colors (palettes and the loaded page) and fonts
• Site templates: load headers, footers and sections, save them back guarded, edit their display conditions, and save reviewed changes as new templates
• Bricks remote template library (/wp-json/bricks/v1/get-templates-data) with optional whitelist/password

Prerequisites

• Node.js 22.12+
• npm 10+

Getting Started

npm ci
npm run dev

Then open in your browser:

• http://localhost:3000

Production Build

npm run lint
npm test
npm run build
npm run typecheck
npm run start

AI Mode (optional)

The API supports OpenAI Responses, Anthropic, Azure OpenAI and OpenRouter. Use Settings to choose a provider/model and test the connection. API usage is billed by your provider; a ChatGPT subscription does not include API credit.

For Sign in with ChatGPT, install the official Codex CLI and use npm run dev:local. In Settings, sign in, check the connection and enable the ChatGPT account option. This loopback-only mode uses your Codex account limits and supports text prompts. It is unavailable on the public Vercel deployment. See setup for the separate MCP option.

Request fields:

• prompt (string)
• apiKey (string)
• useAI (boolean, defaults to false)
• provider ("openai" | "anthropic" | "azure" | "openrouter")
• model (optional string); Azure requires endpoint/deployment

Project Structure

• src/app/page.tsx – Main UI
• src/app/api/generate/route.ts – Generation API
• src/lib/bricks-engine.ts – Bricks JSON engine + section generators
• src/lib/wordpress-client.ts – MCP Adapter client for Bricks abilities (/api/wordpress, local only)
• src/lib/kit/* – Studio: tokens, classes, layouts, industry copy, designs (library.ts), preview
• src/lib/templates.ts – Classic catalog (MCP bricks_list_templates)
• src/components/* – UI components (form, preview, cards)

Notes

• Built with the Next.js App Router.
• Apply deployment rate limits. Keep server-funded keys disabled on public deployments without authentication.
• Validation covers structure/control names, not all nested values or WordPress runtime behavior. See the audit for outstanding integration checks.

License

BricksSnap is licensed under the PolyForm Shield License 1.0.0. Use it for your own and your clients' websites, commercial work included, and use the templates you generate without attribution. Do not offer BricksSnap or a modified version to others as a product, and do not redistribute its layouts as a template pack. See licensing for details, sample-content licenses and the third-party notices. Versions up to 0.8.0 were released under the MIT License.

BricksSnap is an independent project and is not affiliated with or endorsed by Bricks.