Skip to content

shadcn.io is an independent project built on shadcn/ui

MCP

plan_page

Plan a whole page as a stack of shadcn blocks for a brief: hero, features, pricing and more, each with a pick and alternatives, ready to install.

Group
Blocks
Inputs
briefbase?framework?kind?sections?
Access
Read-only

When to use it

  • The user wants a whole page (a landing page, an app shell) rather than one section.
  • To pick a consistent set of blocks in one call, then install them together.

Inputs

InputType
briefstring

What the page is for: "landing page for a form builder".

base?"base" | "aria" | "ark" | "radix"

React only. Default base (Base UI).

Type
"base" | "aria" | "ark" | "radix"
framework?"react" | "vue" | "svelte" | "solid"

Default react.

Type
"react" | "vue" | "svelte" | "solid"
kind?"marketing" | "app"

Default: read from the brief.

Type
"marketing" | "app"
sections?string[]

Category ids, to force the sections and their order.

Example prompts

Name the server, so the agent doesn't answer from memory:

Prompts
use shadcnio to plan a landing page for a form builder SaaS
use shadcnio to plan the screens of an admin app

Call and response

Asked “Plan a landing page for my form builder SaaS”, the agent sends this call. The response is real, trimmed: long lists show their first items and long strings are cut.

Call
plan_page({ brief: "landing page for a form builder SaaS" })
Response
{
  "brief": "landing page for a form builder SaaS",
  "kind": "marketing",
  "next": "get_block({ names: [\"navbar-landing-page\",\"hero-split-form-builder\",\"logos-static-grid-wall\",\"features-bento-grid\",\"stats-connected-kpi-bar-…",
  "sections": [
    {
      "alternatives": [
        {
          "category": "navbar",
          "group": "Mega menus",
          "line": "A one-bar marketing navbar for a product roadmap tool: a wordmark, a Product menu of four areas with icons and one-line descriptions, plain …",
          "slug": "navbar-saas-marketing",
          "title": "SaaS Marketing Navbar",
          "url": "https://kit.dev/blocks/navbar-saas-marketing"
        },
        {
          "category": "navbar",
          "group": "Link highlights",
          "line": "The least navbar there is: a slim 48 px bar with a wordmark, three plain links and one Shine Button for a journaling app, with no motion, th…",
          "slug": "navbar-minimal",
          "title": "Minimal Navbar",
          "url": "https://kit.dev/blocks/navbar-minimal"
        }
      ],
      "category": "navbar",
      "pick": {
        "category": "navbar",
        "group": "Link highlights",
        "line": "A 64 px navbar built for a landing page: a skip link that appears on keyboard focus, in-page links that jump to the page's sections, the cho…",
        "slug": "navbar-landing-page",
        "title": "Landing Page Navbar",
        "url": "https://kit.dev/blocks/navbar-landing-page"
      },
      "role": "Navigation"
    },
    {
      "alternatives": [
        {
          "category": "hero",
          "group": "Logos and social proof",
          "line": "A compact centered hero built as bands: an announcement pill, a headline, two calls to action and three trust points, then a ruled label and…",
          "slug": "hero-centered-trusted-logos",
          "title": "Centered Trusted By Logo Row Hero",
          "url": "https://kit.dev/blocks/hero-centered-trusted-logos"
        },
        {
          "category": "hero",
          "group": "Stats and live data",
          "line": "A compact centered hero for an invoicing app with an announcement pill, a Shine Button and a second action, over a hairline band of four fig…",
          "slug": "hero-animated-counter",
          "title": "Animated Counter Hero",
          "url": "https://kit.dev/blocks/hero-animated-counter"
        }
      ],
      "category": "hero",
      "pick": {
        "category": "hero",
        "group": "Product windows",
        "line": "A reverse split hero for a form builder: a builder window with a palette and a canvas of fields in a hairline frame with + marks, then a div…",
        "slug": "hero-split-form-builder",
        "title": "Split Layout Form Builder Hero",
        "url": "https://kit.dev/blocks/hero-split-form-builder"
      },
      "role": "Hero"
    },
    "… 8 more"
  ],
  "target": "React · Base UI"
}

Call it by hand

Your MCP client sends this for you. To try the tool without one, post the call yourself; the server answers in server-sent events, the result on the data: line.

Terminal
Sign in to get your config
Sign in with a Pro account, and this holds your MCP URL, ready to paste.
GoogleGitHub
Use email insteadPart of Pro

What your agent reads

The server's description of plan_page, one of the Blocks tools. Your agent reads it to decide when to call the tool:

tools/listplan_page.description
A page as an ordered stack of blocks for a brief: each section's role, the block picked and two alternatives, then the get_block call for the whole stack. kind marketing or app; sections forces the order.

Next

FAQ

What order do the sections come in?

A marketing page runs from navbar and hero through logos, features, stats or testimonials, pricing and FAQ to a call to action and footer. An app page starts with a sidebar or navbar, then its screens.

Can I choose the sections myself?

Pass sections, the category ids in the order you want (hero, pricing, footer). Each still gets a pick and two alternatives from the brief's words.

How do I add the whole plan?

The next call: get_block with every pick's name and the install, so the whole page is one command. Swap a pick for one of its alternatives first if it fits better.