Skip to content

README.md

Latest commit

 

History

History
73 lines (44 loc) · 3 KB

README.md

File metadata and controls

73 lines (44 loc) · 3 KB

OpenUI Generative UI Tool for Open WebUI

An Open WebUI tool that renders interactive generative UI components (charts, forms, tables, cards, follow-ups) in chat using OpenUI Lang.

Demo

demo.mp4

How it works

  1. The LLM calls render_openui(openui_lang_code, title) with complete OpenUI Lang code
  2. The tool builds a self-contained HTML page that loads the OpenUI renderer + component library from CDN
  3. Open WebUI renders it as an inline iframe embed
  4. User interactions (follow-up clicks, form submissions, buttons) post back into chat via sendPrompt

Installation

Option A: From openwebui.com (recommended)

Visit the tool page on openwebui.com/tools and import directly.

Option B: Manual

  1. Go to Admin > Tools in your Open WebUI instance
  2. Click + to create a new tool
  3. Paste the contents of tool.py
  4. Save

That's it. No other setup needed — the JS bundle and CSS are loaded from CDN automatically.

Usage

Enable the tool in a chat (click the tools icon next to the message input). Then ask questions that would benefit from visual responses:

  • "Show me a comparison table of the top 5 programming languages"
  • "Create a bar chart of monthly revenue"
  • "Build a contact form with name, email, and message"
  • "Give me a step-by-step guide to setting up Docker"

The model will call render_openui and the UI will appear inline in the chat.

Components available

The tool supports 40+ components from the OpenUI chat library:

  • Content: TextContent, CardHeader, MarkDownRenderer, Callout, CodeBlock, Image, ImageGallery
  • Charts: BarChart, LineChart, AreaChart, PieChart, RadarChart, ScatterChart, HorizontalBarChart, RadialChart
  • Tables: Table with typed columns
  • Forms: Form, Input, TextArea, Select, DatePicker, Slider, CheckBoxGroup, RadioGroup, SwitchGroup
  • Layout: Tabs, Accordion, Carousel, SectionBlock, Steps
  • Interactive: Button, ListBlock, FollowUpBlock (sends follow-up as user message)

Architecture

tool.py                 Python tool (paste into Open WebUI Admin > Tools)

The tool loads a pre-built browser bundle from CDN (@openuidev/browser-bundle) which contains React, the OpenUI parser/renderer, and the full component library (recharts, radix-ui, etc.) in a single IIFE file.

Configuration

The tool has one Valve (configurable in Admin > Tools):

  • cdn_base_url: Base CDN URL for the OpenUI bundle. Defaults to https://cdn.jsdelivr.net/npm/@openuidev/browser-bundle@latest. Change if self-hosting or using a different version.

Limitations

  • No streaming: Tools execute after the LLM finishes generating the tool call arguments. The UI renders all at once, not token-by-token.
  • Bundle size: The first load fetches ~650KB (gzipped) from CDN. Subsequent loads are cached by the browser.