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):
  • Docker CLI
  • Railway CLI

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.