Skip to main content

​
Examples

These are example prompts you can give an AI agent connected to the Studio MCP server. Every change happens live on the Studio canvas — you see it instantly.

​
Getting started

​
See what’s on the page

“Show me the page structure”
The agent calls view_tree and displays the node hierarchy: 
[Page] id=root slots={children(3)}
  [Section] id=sec_1 slots={children(1)}
    [Scarcity] id=scarcity_1
  [Section] id=sec_2 slots={children(1)}
    [Layout.Container] id=container_1 slots={children(1)}
      [Heading] id=heading_1
  [Section] id=sec_3 slots={children(1)}
    ...

​
Check the template info

“What template am I editing?”
The agent calls read_template and returns: 
Template: "My Checkout" (v1.0.0)
Category: custom
Active page: page_1
Pages (1):
  - Checkout Page (29 nodes, 37 tokens)

​
Editing content

​
Change a heading

“Change the main heading to ‘Limited Time Offer’”
The agent will:
  1. find_nodes with kind: "Heading" to locate headings
  2. update_node to set content: "Limited Time Offer"
You see the heading change instantly on the canvas.

​
Update button text and color

“Make the checkout button say ‘Buy Now’ and make it green”
The agent will:
  1. find_nodes with kind: "CheckoutButton" or kind: "CTA"
  2. read_node to check current props
  3. update_node with { content: "Buy Now", backgroundColor: "#16a34a" }

​
Inspect a specific node

“What props does the order summary have?”
The agent calls read_node on the OrderSummary node ID and returns all its props, slots, and parent info.

​
Layout changes

​
Add a new section

“Add a guarantee badge below the payment form”
The agent will:
  1. describe_node_kind for "Guarantee" to learn available props
  2. find_nodes to locate the payment form’s parent
  3. add_node to insert the guarantee after the payment section

​
Reorder sections

“Move the testimonials above the pricing”
The agent calls move_node to reposition the testimonials section.

​
Wrap elements together

“Wrap the heading and subtitle in a Stack with centered alignment”
The agent calls wrap_nodes with the heading and subtitle node IDs, creating a new Layout.Stack container.

​
Working with tokens

​
List all text content

“Show me all the text tokens on this page”
The agent calls list_tokens and returns all copy/content tokens with their values and locales.

​
Translate content

“Add French translations for all text tokens”
The agent will:
  1. list_tokens to get all existing tokens
  2. add_token for each one with locale: "fr-FR" and the translated value

​
Change design tokens

“Update the primary color to blue (#2563eb)”
The agent calls update_token with tokenName: "color.primary" and value: "#2563eb".

​
Discovering components

​
List available components

“What components can I add?”
The agent calls list_node_kinds and returns all 49+ available component types grouped by category (section, layout, content, commerce, form).

​
Learn about a component

“What props does a Layout.Grid accept?”
The agent calls describe_node_kind with kind: "Layout.Grid" and returns the full schema — props, types, defaults, slots.

​
Full workflow example

Here’s a realistic conversation redesigning a checkout page:
1

Explore

You: “Show me the current page structure”Agent calls view_tree — you see the full layout hierarchy.
2

Read

You: “What does the heading say?”Agent calls find_nodes for headings, then read_node — you see it says “Secure Checkout”.
3

Edit

You: “Change it to ‘Complete Your Order’ and make the background of the first section light gray”Agent calls update_node on the heading, then update_node on the section. You see both changes live on the canvas.
4

Add

You: “Add a trust badge section below the payment form with a 30-day guarantee”Agent calls describe_node_kind for Guarantee, then add_node. A new guarantee component appears on the canvas.
5

Save

You: “Looks great, I’ll save it”You hit Save in Studio. The agent never deploys — you’re in control.

​
Tips for effective prompts

  1. Start with view_tree — ask the agent to show the page structure first, so it knows what’s there
  2. Be specific — “change the heading” is better than “make the page look nicer”
  3. Reference component types — “add a Layout.Stack” or “find all Buttons”
  4. Ask the agent to explore first — “what components are available?” before adding new ones
  5. Undo is free — all changes support Ctrl+Z in Studio, so experiment freely
  6. Save when ready — the agent never deploys; you save from Studio when happy