Widget Studio: Widget Editor Guide

Widget Editor Overview

The Widget Editor has three main tabs plus additional tools for previewing and publishing:

Assistant Tab: Building with AI

How the Widget Editor Agent Works

The Agent generates MDX code based on your natural language descriptions. You don't need to know how to code - just describe what you want.

What Happens When You Send a Message:

1. Type and send

   You type your request and hit send

2. Processing status

   Status shows "Sending request..."

3. Widget updates

   Widget updates automatically in the preview

4. Changes appear

   No reply message appears - changes just show up

Writing Effective Prompts

The key to great results is being specific about what you want.

Good prompt structure:
[Action] + [Component] + [Visual details] + [Interaction behavior]

Examples:

Using the Examples Library

The fastest way to build is starting with an example.

To Access:

1. Click the Examples button in the Editor
2. Browse by category or search by keyword
3. Click on any example to see details

Categories Include:

To Use an Example:

1. Find an example

   Find an example close to what you want

2. Copy Prompt

   Click Copy Prompt

3. Return to Assistant

   Return to Assistant tab

4. Paste the prompt

   Paste the prompt

5. Send it

   Send it

6. Modify from there

   Modify from there

Iterating on Your Widget

Making Changes:

Just chat naturally with the Agent:

• "Make the buttons larger"
• "Change the color scheme to use our brand purple"
• "Add icons next to each option"
• "Move the submit button to the right side"
• "Add a congratulations message when the quiz is complete"

Each Message Creates a New Version:

• Your edit history is saved as versions
• You can always revert to a previous version
• See the Versions tab for full history

Working with Tool Data

Your widget displays data from your tool. The Data tab shows you what information your tool provides.

To Reference Tool Data in Your Prompts:

"Show the course title, description, and rating from the tool data"

"Display the quiz questions as a list with the question text and four answer options"

"Create a card for each result that shows the thumbnail image, title, and price"

The Agent understands your tool's data structure and will map it correctly.

Code Tab: Viewing and Copying MDX

What's in the Code Tab

The Code tab shows the MDX (Markdown + JSX) code that powers your widget. You don't need to understand this code to use Widget Studio, but it's here if you want to:

• Copy the code to use elsewhere
• Share it with developers
• Keep a backup

Copying Your Code

1. Go to the Code tab

   Navigate to the Code tab

2. Click the Copy button

   Click the Copy button

3. Code is copied

   Your MDX code is now on your clipboard

You can paste this into:

• External code editors
• Other AI tools for further refinement
• Documentation for your team

Import Function (Coming Soon)

You'll see an Import button in the Code tab. This doesn't work yet - we're enabling it soon.

Data Tab: Understanding Tool Output

What the Data Tab Shows

The Data tab displays the structure of data your tool returns. This helps you understand what information you have available to display in your widget.

Example Data Structure:

{
  "courses": [
    {
      "title": "Introduction to Python",
      "description": "Learn Python basics",
      "rating": 4.5,
      "thumbnail": "https://...",
      "duration": "6 weeks"
    }
  ]
}

Using Data in Your Widget

When you describe your widget to the Agent, reference the data fields you see:

"Show each course as a card with the thumbnail image, title, rating, and duration. Add an 'Enroll Now' button for each."

The Agent maps your description to the actual data structure automatically.

Preview: Testing Your Widget

Preview Modes

Why Preview Matters:

• Text that's readable on desktop might be too small on mobile
• Colors that work in light mode might not contrast well in dark mode
• Interactive elements need to be touch-friendly on mobile

What to Check

Design System: Applying Your Brand

What Design Systems Do

Design systems automatically apply your brand colors throughout your widget. When you select a design system, colors propagate to:

• Buttons
• Backgrounds
• Text highlights
• Borders
• Interactive elements

Changing Design Systems

1. Click the Design System dropdown

   Click the Design System dropdown

2. Select from your configured design systems

   Select from your configured design systems

3. Preview updates immediately

   Preview updates immediately

4. Switch between systems

   Switch between systems to see which looks best

Versions: Managing Widget History

How Versioning Works

Every time you edit your widget and the Agent generates new code, a new version is created automatically.

Version Information:

• Version number (0.1, 0.2, 0.3, etc.)
• Timestamp of creation
• Status (Published, Unpublished, Latest)

Viewing Version History

1. Go to the Versions tab

   Go to the Versions tab

2. See all versions

   See all versions listed with timestamps

3. Click on any version

   Click on any version to view its code

Reverting to a Previous Version

To go back to an earlier version:

1. Unpublish your current widget

   Unpublish your current widget

2. Go to Versions tab

   Go to Versions tab

3. Find the version you want

   Find the version you want

4. Click Promote to Latest

   Click Promote to Latest

5. Go to Publish tab

   Go to Publish tab

6. Click Publish

   Click Publish

Publishing: Making Your Widget Live

Publishing Checklist

Before you can publish, certain requirements must be met:

• ✓ Widget Name - Must have a name
• ✓ Widget Description - Must have a description
• ✓ Widget Mode - Display or Standalone selected
• ✓ Initial Version - At least version 0.1 created
• ✓ Widget Code - MDX code generated
• ✓ Widget Compiles - Code compiles successfully

Most of these are automatically checked as you build. If something's missing, you'll see what needs attention.

Publishing Your Widget

1. Go to the Publish tab

   Go to the Publish tab

2. Review the checklist

   Review the checklist - all items should be checked

3. Click Publish

   Click Publish

4. Your widget is now live!

   Your widget is now live!

What Happens When Published:

• Widget becomes active in your agent
• When the agent calls your tool, the widget displays automatically
• End users see your widget in the agent chat

Unpublishing

To take a widget offline:

1. Open the widget

   Open the widget

2. Go to Publish tab

   Go to Publish tab

3. Click Unpublish

   Click Unpublish

4. Tool continues to work

   Tool continues to work, but widget won't display

When to Unpublish:

• Making major edits
• Widget isn't working as expected
• Testing changes before republishing

Practical Examples

Example 1: Building a Quiz Widget

Example 2: Building a Course Catalog

Example 3: Building a Booking Calendar

Best Practices

Building Effective Widgets

Managing Your Workflow

Troubleshooting