openui

Translates plain English descriptions into rendered HTML/CSS components by routing prompts through a FastAPI backend that orchestrates requests to multiple LLM providers (OpenAI, Ollama, Anthropic). The system maintains a session-based conversation history stored in Peewee ORM, allowing iterative refinement of generated components. Generated HTML is immediately rendered in an iframe-isolated preview, enabling real-time visual feedback without XSS risk.

Converts generated HTML components into multiple frontend framework syntaxes (React, Svelte, Vue, Web Components) through a backend transpilation pipeline. The system parses the raw HTML output from the LLM, applies framework-specific transformations (JSX conversion, reactive binding syntax, component lifecycle hooks), and outputs framework-ready code. Tailwind CSS classes are preserved across all transpilation targets to maintain styling consistency.

Supports multiple languages in the UI through i18n configuration (likely using react-i18next or similar), with language selection in settings. The frontend loads language-specific strings from JSON files, allowing users to interact with OpenUI in their preferred language. Backend API responses (error messages, validation feedback) are also localized. Component generation prompts can be submitted in any language, and the LLM is instructed to generate HTML with language-neutral content (or language-specific content if specified).

Implements OAuth 2.0 authentication using fastapi-sso library to support login via Google, GitHub, or other OAuth providers. Users authenticate once and receive a session token stored in HTTP-only cookies. The backend validates tokens on each request and associates generated components with authenticated users. Session data (history, preferences, shared components) is scoped to the authenticated user. Unauthenticated users can still use OpenUI but their history is stored in localStorage only and not persisted server-side.

Renders generated HTML components in an isolated iframe sandbox to prevent XSS attacks and style conflicts with the main application. The iframe is configured with restrictive sandbox attributes (no-scripts, no-same-origin) and communicates with the parent page via postMessage API for safe data exchange. Component styles are scoped to the iframe context, preventing CSS from leaking into the main page. The preview updates in real-time as users edit code or request new generations.

Provides real-time validation and autocomplete for Tailwind CSS classes in the Monaco Editor, checking that classes are valid and suggesting alternatives for typos. The system maintains a bundled list of Tailwind CSS classes (from the installed version) and validates generated HTML against this list. Autocomplete suggestions appear as users type, with class descriptions and preview of the applied style. Invalid classes are highlighted in the editor with warnings.

Provides an interactive HTML Annotator component that overlays visual markers on generated UI elements within an iframe-isolated preview. Users can click elements to inspect computed styles, DOM structure, and Tailwind CSS classes applied. The annotator communicates with the iframe via postMessage API to avoid XSS vulnerabilities while enabling real-time inspection of component properties without breaking encapsulation.

Accepts uploaded reference images or screenshots as context for component generation, allowing users to describe UI components while providing visual examples. The backend processes uploaded images (via multipart form data), stores them temporarily, and includes image metadata in the LLM prompt context. The system uses vision-capable LLM models (GPT-4V, Claude 3 Vision) to analyze reference images and generate components that match the visual style and layout patterns shown in the reference.

Maintains a persistent conversation history for each user session using Peewee ORM with SQLite/PostgreSQL backend, storing prompts, generated code, and metadata (timestamps, model used, framework selected). The frontend uses Jotai state management to sync local component state with server-side session storage, enabling users to revisit previous generations, compare versions, and continue iterating on components across browser sessions. Version history is tracked with localStorage fallback for offline access.

Enables users to export and share generated components by uploading them to S3 storage (via boto3 client) with signed URLs for public access. The backend generates unique component IDs, serializes the HTML/CSS/metadata as JSON, uploads to S3, and returns a shareable link. Recipients can import shared components by providing the S3 URL, which the frontend fetches and renders in the preview pane. Metadata includes component description, framework variants, and generation timestamp.

Abstracts LLM provider differences through a FastAPI backend that routes requests to OpenAI, Anthropic, or local Ollama instances based on configuration. The system maintains provider-specific prompt templates, handles authentication (API keys), manages rate limiting per provider, and implements fallback logic (e.g., if OpenAI fails, retry with Ollama). Each provider integration includes response parsing to extract HTML from model outputs, with provider-specific error handling and retry strategies.

Embeds Monaco Editor (VS Code's editor engine) in the frontend to provide syntax-highlighted, editable code output with real-time preview updates. Users can manually edit generated HTML/CSS/JSX, and changes are immediately reflected in the iframe preview. The editor includes language detection (HTML, JSX, Vue, Svelte), autocomplete for Tailwind CSS classes, and keyboard shortcuts matching VS Code. Changes trigger a re-render of the preview without requiring a new LLM generation.

Implements PWA features (service worker, manifest, offline caching) using vite-plugin-pwa to enable OpenUI to function offline with cached components and generation history. The service worker caches frontend assets, API responses, and previously generated components, allowing users to browse history and edit existing components without network connectivity. When online, the app syncs new generations to the server and updates the cache. Offline mode falls back to localStorage for session data.

Provides a backend evaluation framework that assesses generated component quality across multiple dimensions: HTML validity (W3C compliance), CSS correctness (Tailwind class validation), accessibility (WCAG compliance check), and visual fidelity (comparison to reference image if provided). The evaluation system runs automatically after generation and returns a quality score (0-100) with detailed feedback on issues. Results are stored in the database for analytics and model improvement.