> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tagada.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Examples

> Real prompts and workflows for AI agents editing Studio templates live

# 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:

<Steps>
  <Step title="Explore">
    **You:** "Show me the current page structure"

    *Agent calls `view_tree` — you see the full layout hierarchy.*
  </Step>

  <Step title="Read">
    **You:** "What does the heading say?"

    *Agent calls `find_nodes` for headings, then `read_node` — you see it says "Secure Checkout".*
  </Step>

  <Step title="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.*
  </Step>

  <Step title="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.*
  </Step>

  <Step title="Save">
    **You:** "Looks great, I'll save it"

    *You hit Save in Studio. The agent never deploys — you're in control.*
  </Step>
</Steps>

***

## 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