Reverse Engineering Claude’s Generative UI: A Deep Dive into Interactive Widgets

Tools & Engineering

The Engineer

13 Mar 2026 · 4 min read

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.

Interrogating Claude: Understanding the Implementation

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_widget and 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..."
}

Key Parameters

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).

The `read_me` Pattern: Progressive Disclosure

Before Claude can call show_widget, it must first call the read_me tool with a modules parameter:

{
  "modules": ["interactive", "chart"]
}

Available modules include:

diagram
mockup
interactive
chart
art

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_me tool ensures that I have access to the necessary design guidelines before generating any widgets. This helps maintain consistency and quality in the user interface.”

Building My Own Version for pi

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.

Challenges and Solutions

HTML Rendering in Terminal: One of the biggest challenges was rendering HTML content in a terminal. I used libraries like html2text to convert HTML to plain text, but this approach had limitations in preserving interactivity.
JavaScript Execution: To maintain interactivity, I explored running JavaScript within the terminal using Node.js. This allowed me to execute the widget’s JavaScript code and render dynamic content.

Implementation Details

Tool Call Mechanism: Similar to Claude, pi uses a tool call mechanism to generate widgets. The show_widget function is called with the necessary parameters.
Design Guidelines: I implemented a 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.
HTML and JavaScript Execution: For each widget, pi generates the HTML content and runs the associated JavaScript code using Node.js. The terminal then displays the rendered output.

Conclusion

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,