compose_page

Compose a full HTML page from composable blocks and a style preset. Returns deployable HTML that can be passed directly to deploy.

Annotations

Annotation	Value
`readOnlyHint`	`true`
`destructiveHint`	`false`
`openWorldHint`	`false`

Parameters

Name	Type	Required	Description
`style`	`string`	Yes	Style preset ID (e.g., `noir`, `editorial`, `bold`, `fun`). Use `list_styles` to see options.
`blocks`	`array`	Yes	Ordered list of blocks, rendered top to bottom. Each item has a `blockId` and optional `props`.
`page`	`object`	No	Page-level metadata: `title`, `description`, `favicon`, `lang`, `customCss`, `customJs`.

Block item format

json

{
  "blockId": "hero-centered",
  "props": {
    "headline": "Welcome to Acme",
    "subheadline": "The future of deployment"
  }
}

blockId — required, from list_blocks
props — optional overrides. Only include what you want to change; defaults fill the rest.

Return format

Returns the complete HTML document in a code block. The HTML includes:

Full <!DOCTYPE html> document structure
Tailwind CSS CDN with custom color configuration
Google Fonts for the style's font families
All block HTML rendered in order
Any JavaScript from interactive blocks (FAQ accordion, countdown timer, forms) moved to the end of <body>

Example workflow

You: "Build me a landing page for my SaaS product called Beacon"

Claude:

Calls list_styles to check available styles
Calls list_blocks to check available sections
Calls compose_page with:
- Style: noir
- Blocks: navbar-simple → hero-centered → feature-grid → stats-row → pricing-three-tier → testimonials-cards → faq-accordion → cta-banner → footer-full
- Props customized with Beacon branding
Calls deploy with the resulting HTML
Shares the preview URL with you
After your approval, calls publish to go live

Compose + deploy flow

list_styles → list_blocks → compose_page → deploy (preview) → publish (live)

This is the recommended workflow for building new pages. The compose_page output can also be modified by Claude before deploying — it's standard HTML.

Notes

Block ordering matters. Blocks render top to bottom in the order you specify. A typical page starts with navbar-simple, has a hero section, content blocks, and ends with a footer.
Partial overrides. You don't need to provide all props. Each block has defaults that are used for any prop you don't override.
Read-only. This tool generates HTML but doesn't deploy it. Use deploy to create a preview.
Form handling. Contact and waitlist blocks include in their forms, which is replaced with the real submission endpoint at publish time.
Custom CSS/JS. The page.customCss and page.customJs parameters let you inject additional styles or scripts into the page.

compose_page ​

Annotations ​

Parameters ​

Block item format ​

Return format ​

Example workflow ​

Compose + deploy flow ​

Notes ​