Skip to main content
Beta Feature - Widget Studio is currently in beta. Widget Studio is only available for SDK 3.0 customers.
The Widget Editor is your workspace for creating and refining widgets. This guide covers all the tools and techniques you need to build production-ready widgets efficiently.

​
Widget Editor Overview

The Widget Editor has three main tabs plus additional tools for previewing and publishing:
  • Assistant - Chat with AI to generate and modify your widget
  • Code - View and copy the MDX code for your widget
  • Data - See the data structure your tool provides

​
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
We’re adding conversational responses soon. For now, just check the preview to see if your changes worked.

​
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:
Good:
“Create a quiz widget with one question displayed at a time, four multiple choice buttons in a 2x2 grid, and a submit button at the bottom”Not as good:
“Make a quiz”

​
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:
Charts, graphs, dashboards
Forms, surveys, notifications
Lists, cards, tables
Forms, selectors, pickers
Calendars, timelines
Quizzes, polls
Readers, previews
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
Even if an example isn’t perfect, it’s often faster to start with something close and modify it than to start from scratch.

​
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
Current Limitation: If you switch to another tab (Code, Data, etc.) and come back, your message history will be gone. We’re fixing this soon. For now: Keep notes externally if you switch tabs, or try to complete edits in one session.

​
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.
For Now: If you have MDX code you want to use, paste it directly into the Agent chat and it should process it.

​
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

  • Desktop - How your widget looks in the full-width agent chat
  • Mobile - How it appears on mobile devices
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

  • Does the layout use space effectively?
  • Are buttons and interactive elements easy to click?
  • Is text easily readable?
  • Does content fit without horizontal scrolling?
  • Are touch targets large enough (buttons, links)?
  • Is text still readable at smaller sizes?
  • Is contrast sufficient for readability?
  • Do colors align with your brand?
  • Does text remain readable?
  • Do colors still look good?
  • Are borders and dividers visible?
Preview your widget in all modes before publishing. What looks great on desktop in light mode might be unreadable on mobile in dark mode.

​
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
Design systems are configured at the platform level. To learn more about Design System set up see here [doc link coming soon]

​
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
Only the latest version can be published. To publish an older version, you must first promote it to latest.

​
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

“Create a quiz widget that shows one question at a time with four multiple choice answers. Include a progress indicator and a submit button.”

​
Example 2: Building a Course Catalog

“Build a course catalog that displays courses as cards in a grid. Each card should show the thumbnail, title, rating, and duration.”

​
Example 3: Building a Booking Calendar

“Make a calendar widget for booking appointments. Show available time slots as buttons.”

​
Best Practices

​
Building Effective Widgets

Start Simple

Get basic functionality working first. Add visual polish and complexity later. Iterate gradually.

Test Thoroughly

Preview on desktop and mobile. Check light and dark modes. Test with real tool data if possible.

Consider Your Users

Make touch targets large enough for mobile. Use clear, readable text. Provide visual feedback for interactions.

​
Managing Your Workflow

  • Complete related edits in one session
  • Don’t switch tabs unnecessarily (message history will be lost)
  • Save/publish when you reach a good stopping point
  • Major milestones = good time to note the version
  • Can always revert if needed
  • Promotes a safety net for experimentation
  • Copy MDX code for critical widgets
  • Keep external notes on design decisions
  • Document what prompts worked well

​
Troubleshooting

Try:
  • Be more specific and descriptive
  • Reference the data structure from the Data tab
  • Use an example from the library as a starting point
Try:
  • Ask the Agent: “Make this responsive for mobile devices”
  • Simplify the layout for smaller screens
  • Test preview on Mobile mode as you iterate
Try:
  • Switch Design Systems
  • Ask the Agent: “Use colors from the [System Name] design system”
  • Contact your team if you need a new design system created
This happens when you switch tabs. For now:
  • Keep external notes
  • Try to complete edits in one session
  • We’re fixing this soon
Questions? Contact your Mindset AI team.