Skip to main content

​
Introduction

Widgets allow you to render visual or interactive content directly inside ChatGPT conversations whenever an MCP tool is invoked.
They are based on OpenAI’s ChatKit Widgets, which enable the display of rich components such as charts, tables, forms, or dashboards within a conversational flow. General view of the widget editor

​
Devic Abstraction Layer

Devic provides an abstraction layer that allows technical teams to easily define and deploy widgets that visually represent your SaaS whenever a user interacts with ChatGPT through your MCP. In other words:
  • Your SaaS can define its own interface components (widgets).
  • When a customer uses ChatGPT and invokes a tool from your MCP, the widget you designed will be displayed using your branding and customized visual experience.
  • Devic handles the infrastructure, the link between tools and widgets, and automatic publishing for ChatGPT.

​
Create a New Widget

To create a widget, go to the ChatGPT Apps tab inside your MCP and click New. The component editor will open, where you can define the widget content using three main tabs:
  • HTML — component structure
  • CSS — visual styling
  • JS — dynamic behavior or scripting
New widget created

​
Example of a Simple Widget

HTML 
<div class="widget">Hello Widget</div>
CSS 
.widget {
  font-family: system-ui;
  padding: 8px;
  background: #222;
  color: #fff;
  border-radius: 6px;
}
JS 
// You can access the root element with document.currentScript?.parentElement
console.log('widget loaded');
Editor HTML, CSS y JS del widget

​
Component Parameters

On the right side of the editor, you can configure the widget’s properties:
  • Name — unique name of the component.
  • Description — short description of the widget’s purpose.
  • Invoking Text / Invoked Text — text displayed while the widget is running.
  • Display with card border — option to show the widget inside a visual card.
Component parameter configuration

​
Bind a Widget to a Tool

For a widget to be automatically invoked from a Tool, it must be associated with that tool using the Widget Binding field found in the More Options section of the tool configurator. This allows Devic to render the linked widget with the data returned when the tool is executed inside a ChatGPT conversation. Bind widget in More Options of the Tool
⚙️ Important: The name provided in Widget Binding must match the widget’s name exactly.
If they do not match, the component will not be invoked from the tool.

​
Additional Resources

To learn more about how to build and use ChatGPT-compatible widgets, check out the official OpenAI documentation for ChatKit Widgets:
👉 https://platform.openai.com/docs/guides/chatkit-widgets

Next step

Learn how to integrate your MCPs and widgets into external applications using Devic’s SDKs.