Skip to main content
Beta Feature - Widget Studio is currently in beta. Widget Studio is only available for SDK 3.0 customers.
This guide walks you through creating and publishing your first widget in about 15 minutes. You’ll build a course recommendation widget that displays course information with images, ratings, and enrollment buttons.

​
Before You Start

Prerequisites:
1

External MCP Connected

You need at least one external MCP configured in your Mindset platform. If you don’t have one set up yet, follow our MCP Setup Guide.
2

Tool Tested

The tool you want to create a widget for must be tested at least once. When you try to create a widget, you’ll be prompted to test the tool if it hasn’t been tested yet.
3

Access to Widget Studio

Widget Studio is available in your AMS (Agent Management Studio).
If your tool isn’t tested yet, don’t worry—Widget Studio will prompt you to test it first. Just run a quick test and you’re ready to go.

​
Step 1: Navigate to Widget Studio

  1. Open your AMS (Agent Management Studio)
  2. Click Widget Studio in the left navigation
  3. Click the New Widget button
You’ll see the widget configuration screen.

​
Step 2: Configure Your Widget

Select Display—this is production-ready and fully functional.
Standalone mode is visible but not yet available for publishing. Focus on Display widgets for now.
Once published, when the agent calls this tool, your widget will ALWAYS display. There’s no option to show the tool without the widget. To stop showing the widget, you’ll need to unpublish or delete it.

​
Step 3: Generate Your Widget with AI

This is where Widget Studio’s power shows—you’ll describe what you want, and the Widget Editor Agent creates it for you.

​
The fastest way to get started:

  1. Click the Examples button
  2. Browse widgets by category:
    • Data Visualization
    • Forms & Surveys
    • Quizzes & Assessments
    • Content Display
    • And more
  3. Find one similar to what you want
  4. Click Copy Prompt
  5. Paste into the Agent chat
  6. Hit send
Example: If you want a course list, look for “Course Catalog” or “Product List” examples.

​
What Happens Next

  • The agent processes your request (you’ll see “Sending request…”)
  • Your widget appears in the preview pane automatically
  • No reply message comes back—changes just appear
The Widget Editor Agent currently processes requests silently. Check the preview to see your widget. We’re adding conversational responses soon.

​
Step 4: Preview and Refine

​
Preview Your Widget

Test your widget across different contexts:
  • Click Desktop to see full-width display
  • Click Mobile to see mobile appearance
  • Toggle Light Mode (default)
  • Toggle Dark Mode to check contrast and readability
  • Does the layout look good on both desktop and mobile?
  • Is text readable in both light and dark modes?
  • Are buttons and interactive elements properly sized?
  • Does it match your brand’s design system?

​
Make Changes

To refine your widget, just chat with the Agent: Example requests: “Make the buttons bigger and add more padding” “Change the color scheme to use our brand purple” “Add icons next to each course title” “Move the enrollment button to the bottom right” “Add a hover effect on the course cards” Each change creates a new version automatically. Keep iterating until you’re happy with the result.
Current limitation: If you switch to the Code or Data tab and return, your message history will be lost. Complete your edits in one session or keep external notes. This is being fixed soon.

​
Apply Your Design System

  1. Click the Design System dropdown
  2. Select from your configured design systems
  3. Preview updates immediately
  4. Switch between systems to see which looks best
Your brand colors automatically apply to buttons, backgrounds, and interactive elements.

​
Step 5: Publish Your Widget

When you’re satisfied with your widget:
  1. Click the Publish tab
  2. Review the publishing checklist—most items should be automatically checked:
    • Widget Name ✓
    • Widget Description ✓
    • Widget Mode selected ✓
    • Initial version created ✓
    • Widget code generated ✓
    • Widget compiles successfully ✓
  3. Click Publish
  4. Your widget is now live in your agent!
Success! Your widget is now active. Whenever the agent calls this tool, users will see your custom widget instead of plain text output.

​
Test Your Widget in Action

To see your widget in the agent:
  1. Open your agent chat interface
  2. Ask a question that would trigger the tool
  3. The agent will call the tool and display your widget
Example: If you built a course recommendation widget, ask: “Show me available courses” or “What courses do you recommend?”

​
What You Built

You just created a production-ready widget that:
  • ✅ Displays structured tool data in a custom visual interface
  • ✅ Automatically matches your brand’s design system
  • ✅ Works on desktop and mobile, light and dark modes
  • ✅ Shows whenever the agent calls that specific tool

​
Tips for Success

​
Getting Better Results

Be descriptive in your prompts:
  • ❌ “Make a quiz widget”
  • ✅ “Create a quiz widget that displays one question at a time with 4 multiple choice buttons and shows the score at the end”
Use the Examples Library:
  • Don’t start from scratch if you don’t have to
  • Find something close and modify it
  • Copy prompts from examples to get started faster
Iterate gradually:
  • Make one change at a time
  • Preview after each change
  • Build up complexity step by step

​
Avoiding Common Issues

  • Only create ONE widget for each tool
  • If you want to make changes, edit the existing widget
Currently, you can create multiple widgets on one tool, but only the most recently created widget will be active. We’re implementing automatic enforcement soon. When that happens, duplicate widgets will be automatically cleaned up, keeping only the latest one. If you have important work in non-active widgets, back up the MDX code from the Code tab.
  • Once you start generating, don’t switch between Display and Standalone
  • This causes unpredictable behavior
  • If you need to change modes, start a new widget from scratch
  • Don’t switch tabs while actively editing—you’ll lose message history
  • If you need to check something, finish your current edits first

​
Managing Your Widget

  1. Go to Widget Studio
  2. Find your widget in the list
  3. Click to open it
  4. Make edits in the Editor tab
  5. Publish the new version when ready

​
Next Steps

Widget Editor Guide

Learn all the features and capabilities of the Widget Editor

Widget Studio Overview

Understand what you can build with Widget Studio

​
Common Questions

You can, but only the most recently created widget will be active. We recommend keeping one widget per tool. Automatic enforcement is coming soon.
Not via the Import button yet (coming soon), but you can paste MDX code directly into the Agent chat and it will process it.
Your widget displays whenever the agent calls the tool it’s attached to. You don’t control when it shows—the agent’s LLM decides which tool to call based on the user’s request.
Yes. Open the widget, go to the Publish tab, and click Unpublish. The tool will continue working without displaying the widget.
Need help? Contact your Mindset AI account team.