
Open-webui with Artifacts
the famous AI Chat UI but easier to work with codes -- similar to v0.dev
open-webui-artifacts-overhaul
nick-tonjum/open-webui-artifacts-overhaul
Just deployed
Deploy and Host Open-webui with Artifacts on Railway
Open-webui with Artifacts is a customized version of Open-WebUI that enhances how AI-generated code is displayed, edited, and visualized. It includes tools like a live coding canvas, difference checker, and design viewer—all inside a chat interface. Ideal for developers, students, and builders working with AI outputs.
About Hosting Open-webui with Artifacts
Hosting this version means you can fully control the app environment and access its newest features without waiting for updates or approval in the main project. This fork is currently in BETA, but stable for most use cases.
Railway simplifies the deployment by handling environment setup, builds, and scaling automatically. All you need is a GitHub repo and a Railway account. You can deploy using a Dockerfile or railway.toml
configuration, and the service will auto-redeploy when you push updates.
Common Use Cases
- Interactive coding with AI: Edit and test AI-generated code in-browser with a built-in code editor.
- Frontend design preview: View and tweak HTML/CSS/React components instantly using the Design Viewer.
- Code comparison: Track and visualize changes between AI-generated code versions with a built-in diff tool.
Dependencies for Open-webui with Artifacts Hosting
- Docker: Required for containerized deployment on Railway.
- GitHub: To pull the forked repository into Railway for continuous deployment.
Deployment Dependencies
- GitHub repo: https://github.com/nick-tonjum/open-webui-artifacts-overhaul
- Optional (if customizing):
Key Features of this branch ⭐
- 🖼️ Coding Canvas: Shows AI-generated code on the right using Monaco editor (like VS Code). You can switch between different files and code versions.
- 🔍 Difference Checker: Highlights code changes made by the AI across versions. Toggle on/off with one click.
- 🎨 Design Viewer: Instantly see how HTML/CSS/JS (with Tailwind) would look—just click a button. Works with React too.
- ⚛️ React Visualizer: Renders React components if the code uses
export default
. Works about 80% of the time now. - 💼 Compacted Code: Code blocks in chat get collapsed into visual attachments when the Canvas is open—cleaner UI.
- 🌐 Supports Many Languages: Includes web, programming, scripting, markup, and other common formats.
Supported Languages
Web Development
- JavaScript (
js
) - TypeScript (
ts
) - HTML
- CSS
Programming
- Python
- Java
- C#
- C
- C++
- Kotlin
- Dart
- Ruby
Scripting
- Bash
- Shell
- PowerShell
Markup / Data
- JSON
- XML
- XAML
- YAML
- Markdown
Other
- SQL
- PHP
- ASP
- Applescript
- Scheme
- Liquid
Why Deploy Open-webui with Artifacts on Railway?
Railway is a singular platform to deploy your infrastructure stack. Railway will host your infrastructure so you don't have to deal with configuration, while allowing you to vertically and horizontally scale it.
By deploying Open-webui with Artifacts on Railway, you are one step closer to supporting a complete full-stack application with minimal burden. Host your servers, databases, AI agents, and more on Railway.
Template Content
open-webui-artifacts-overhaul
nick-tonjum/open-webui-artifacts-overhaul