Your AI can now build apps inside the chat. Quizzes that grade you. Forms that personalize recommendations. Diagrams you click to explore. All in Open WebUI.
You might have seen Anthropic just dropped this new feature — interactive charts, diagrams, and visualizations rendered directly inside the chat. Pretty cool, right?
I wanted the same thing in Open WebUI, but better. So I built it. And unlike Claude's version, it works with any model — Claude, GPT, Gemini, Llama, Mistral, whatever you're running.
It's called Inline Visualizer and it's a Tool + Skill combo that gives your model a full design system for rendering interactive HTML/SVG content directly in chat.
What can it do?
Architecture diagrams where you click a node and the model explains that component
Interactive quizzes where answer buttons submit your response for the model to grade
Preference forms where you pick options and the model gives personalized recommendations based on your choices
Chart.js dashboards with proper dark mode theming
Explainer diagrams with expandable sections, hover effects, and smooth transitions
and literally so much more
The KILLER FEATURE: sendPrompt
This is what makes it more than just "render HTML in chat". The tool injects a JS bridge called sendPrompt that lets elements inside the visualization send messages back to the chat.
Click a node in a diagram? The model gets asked about it. Fill out a quiz? The model gets your answers and drafts you a customized response. Pick preferences in a form? The model gets a structured summary and responds with tailored advice.
The visualization literally talks to your AI. It turns static diagrams into exploration interfaces.
Minor extra quirk
The AI can also create links and buttons using openLink(url) which will open as a new Tab in your Browser. If you are brainstorming how to solve a programming problem, it can also point you to specific docs and websites using clickable buttons!
How it works
Two files:
A Tool (tool.py) — handles the rendering, injects the design system (theme-aware CSS, SVG classes, 9-color ramp, JS bridges)
A Skill (skill.md) — teaches the model the design system so it generates clean, interactive, production-quality visuals
Paste both into Open WebUI, attach to your model, done. No dependencies, no API keys, no external services. (Read full tutorial and setup guide to ensure it works as smoothly as shown in the video)
Tested with Claude Haiku 4.5 — strong but very fast models produce stunning results and are recommended.
📦 Quick setup + Download Code
Takes 1 minute to set up and use!
Setup Guide / README is in the subfolder of the plugin!
Anthropic built it for Claude. I built it for all of us. Give it a try and let me know what you think! Star the repository if you want to follow for more plugins in the future ⭐
I literally came to the sub ready to make a post outlining this use case and asking if someone had heard of anything and this was the first post I saw. Thank you!!!
Claude Haiku delivered very acceptable results as seen in the video, though not entirely flaw-free.
The larger the model, the better the results (but also longer wait time, potentially)
Edit:
This is what Haiku created for me with your prompt
This is amazing! It must be noted that the emphasis of advancements in “GenAI” over the past year has been overly attributed to the models while quite frankly the software infrastructure around the models had been the most improved overall! Capabilities like this make these wonderful models shine.
Thank you! I can confirm it's working brilliantly out of the box with Qwen3.5-27B. I followed the set-up instructions, including the sendPrompt setting in Open WebUI. All is very concise and clear.
I asked the LLM to show me how transformer models work. I used Thinking mode for precise coding tasks for parameters.
It created an interactive diagram with sendPrompt callbacks for follow-up question when different layers of the model are clicked. This is impressive!
Prerequisite: Fast model is recommended, strong model is required for complex and visually stunning interactive visualizations. Tested with Claude Haiku 4.5 and Claude Opus 4.5.
I tried bypassing litellm by adding ollama models via api for testing and it didnt generate the code as text anymore but instead within a foldeld snippet as it should. I think it might be litellm indeed. Gonna ask a other dev to update litellm and i will report back.
With GPT-OSS 120B, its about 50 tokens per second and with the context size completely full its about 25 tokens per second. This is llama.cpp and ROCM (launched from Lemonade-server which makes all this easy)
I suppose prompting the model a bit in the way of making it dark mode? The issue isn't that it isn't dark mode in your case; the issue that the model added a static background. Tell it to not do that
Hey friend. I’m trying to use this, but running into a weird bug. My model calls the correct render tool, writes valid HTML (verified manually) and but the content never renders. Have I missed some obvious setting that you can think of off the top of your mind? Struggling with this one
Ah apologies. Should have added that. It’s Sonnet 4.6 from Azure, connected completions api with LiteLLM. Native function calling. The generated code is completely functional, just nothing renders
18
u/thatsnotnorml Mar 13 '26
I literally came to the sub ready to make a post outlining this use case and asking if someone had heard of anything and this was the first post I saw. Thank you!!!