The Drum · Weekly AI news, freeSubscribe →
Share
Explore how Anthropic's Claude generates interactive UI elements like sliders and charts within chat interfaces, revealing the complexity beyond simple HTML embeddings.
Anthropic recently announced a significant update to Claude, their AI assistant, by introducing generative UI capabilities. This feature allows interactive widgets-such as sliders, charts, and animations-to be rendered directly within the chat interface of claude.ai. These are not just static images or code blocks; they are fully functional HTML applications with JavaScript running inside the conversation.
My initial assumption was that Claude was embedding HTML directly into its markdown responses, which the frontend would then render inline. However, Claude corrected me:
“Ha, yes! Caught me - it’s not ‘part of the markdown output’ at all. I call a tool called
show_widgetand pass the HTML as a parameter.”
This is a tool call, similar to web search or file operations. The HTML content is passed as a parameter payload, not streamed text. Here’s the structure Claude described:
{
"i_have_seen_read_me": true,
"title": "snake_case_identifier",
"loading_messages": ["First loading message", "Second loading message"],
"widget_code": "...styles...\n...html content...\n..."
}
i_have_seen_read_me: A boolean forcing function. Claude must call a read_me tool first to load design guidelines before it can use show_widget. This ensures that the widget adheres to certain design standards.title: A snake_case identifier for the widget, which helps in uniquely identifying and managing multiple widgets.loading_messages: 1-4 short strings displayed while the widget is rendering. These messages provide a user-friendly experience during the loading process.widget_code: The raw HTML fragment that makes up the widget content. It includes styles and HTML structure but lacks the full document structure (no <!DOCTYPE>, <html>, <head>, or <body> tags).read_me Pattern: Progressive DisclosureBefore Claude can call show_widget, it must first call the read_me tool with a modules parameter:
{
"modules": ["interactive", "chart"]
}
Available modules include:
diagrammockupinteractivechartart
Each module provides different design guidelines. For example, the chart module returns patterns for using Chart.js, while the art module gives rules for illustrations, and the mockup module provides UI component tokens.
Claude described this process as:
“It’s a lazy documentation pattern. The
read_metool ensures that I have access to the necessary design guidelines before generating any widgets. This helps maintain consistency and quality in the user interface.”
Inspired by Claude’s implementation, I decided to build a similar feature for pi, a terminal-based coding agent. The goal was to enable pi to generate interactive widgets within the terminal environment.
html2text to convert HTML to plain text, but this approach had limitations in preserving interactivity.show_widget function is called with the necessary parameters.read_me function that loads design guidelines for different modules (e.g., chart, interactive). This ensures that the generated widgets adhere to consistent design standards.Anthropic’s introduction of generative UI in Claude is a significant step forward in enhancing the interactivity and usability of AI assistants. By understanding and reverse-engineering their implementation, we can apply similar techniques to other projects,
Tags
Original Sources
About the author
Kai built ML infrastructure at a Bay Area startup before developing an obsession with transformer architectures and inference optimisation that eventually pulled him out of product work entirely. A stint at a compute research lab sharpened his instinct for what actually matters in a model release versus what is marketing. He writes from the inside — from the perspective of someone who has debugged the systems he is describing at three in the morning. He is allergic to hype and instinctively drawn to the unglamorous plumbing questions that everyone else skips over.
More from The Engineer →This Week's Edition
13 March 2026
133 articles
Related Articles
Related Articles
More Stories
