github-starred/open-webui
2
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-05-06 19:08:59 -05:00
Code Issues 1.3k Packages Projects Releases 126 Wiki Activity

[GH-ISSUE #3988] feat: Add artifacts like experience to live preview HTML/JS code #28985

New Issue
Closed
opened 2026-04-25 03:28:03 -05:00 by GiteaMirror · 5 comments
GiteaMirror commented 2026-04-25 03:28:03 -05:00
Owner
Copy Link

Originally created by @zabirauf on GitHub (Jul 18, 2024).
Original GitHub issue: https://github.com/open-webui/open-webui/issues/3988

Originally assigned to: @tjbck on GitHub.

Is your feature request related to a problem? Please describe.
Quickly prototyping any HTML/JS code requires a bunch of steps which makes iterations cumbersome.

In part related to broader #1321

Describe the solution you'd like
The recent Anthropic Artifacts experience has been great for in app quick prototyping with HTML/JS. It reduces the amount of time to see the result of the code in a an interactive manner. This also allows rapid iteration by seeing the code results and then asking LLM to update in certain ways, allow users to build quick websites and tools.

Describe alternatives you've considered
The changes would include

  • Added a sandbox for running code within browser. The sandpack-client from Codesandbox.io could be a good candidate as its well-used by them. Should evaluate licensing and any privacy related stuff.
  • Added some language detection library to make sure code is HTML/JS. As I've seen that the lang field may not always be accurate and in some models I've seen it to be php even when code was HTML. This could also benefit the current rudimentary Python code detection. One candidate for this is the vscode-languagedetection library.
  • Add support for both whole HTML page and only vanilla javascript as well. For javascript only this would mean potentially seeing if sandpack-client allows hooking over to console so we can get whats the output and put it in UX.

Additional context
Here is the demo of the prototype I worked on using sandpack-client. Code is here https://github.com/zabirauf/open-webui/pull/3/files

2024-07-18_12-07-30

Originally created by @zabirauf on GitHub (Jul 18, 2024). Original GitHub issue: https://github.com/open-webui/open-webui/issues/3988 Originally assigned to: @tjbck on GitHub. **Is your feature request related to a problem? Please describe.** Quickly prototyping any HTML/JS code requires a bunch of steps which makes iterations cumbersome. In part related to broader #1321 **Describe the solution you'd like** The recent Anthropic Artifacts experience has been great for in app quick prototyping with HTML/JS. It reduces the amount of time to see the result of the code in a an interactive manner. This also allows rapid iteration by seeing the code results and then asking LLM to update in certain ways, allow users to build quick websites and tools. **Describe alternatives you've considered** The changes would include * Added a sandbox for running code within browser. The [sandpack-client](https://sandpack.codesandbox.io/docs/advanced-usage/client) from Codesandbox.io could be a good candidate as its well-used by them. Should evaluate licensing and any privacy related stuff. * Added some language detection library to make sure code is HTML/JS. As I've seen that the `lang` field may not always be accurate and in some models I've seen it to be `php` even when code was HTML. This could also benefit the current rudimentary Python code detection. One candidate for this is the [vscode-languagedetection](https://github.com/Microsoft/vscode-languagedetection) library. * Add support for both whole HTML page and only vanilla javascript as well. For javascript only this would mean potentially seeing if sandpack-client allows hooking over to console so we can get whats the output and put it in UX. **Additional context** Here is the demo of the prototype I worked on using sandpack-client. Code is here https://github.com/zabirauf/open-webui/pull/3/files ![2024-07-18_12-07-30](https://github.com/user-attachments/assets/c10080dd-d877-460b-8212-54cc4b0b3e87)
GiteaMirror commented 2026-04-25 03:28:04 -05:00
Author
Owner
Copy Link

@Yanyutin753 commented on GitHub (Jul 20, 2024):

amazing🤩

<!-- gh-comment-id:2241162050 --> @Yanyutin753 commented on GitHub (Jul 20, 2024): amazing🤩
GiteaMirror commented 2026-04-25 03:28:05 -05:00
Author
Owner
Copy Link

@Yanyutin753 commented on GitHub (Jul 21, 2024):

https://github.com/user-attachments/assets/8eea591c-1693-4e80-a5e5-fbb8800f1209

<!-- gh-comment-id:2241391927 --> @Yanyutin753 commented on GitHub (Jul 21, 2024): https://github.com/user-attachments/assets/8eea591c-1693-4e80-a5e5-fbb8800f1209
GiteaMirror commented 2026-04-25 03:28:05 -05:00
Author
Owner
Copy Link

@mihow commented on GitHub (Aug 1, 2024):

This is fantastic, thank you for jumping on this feature. What do we need to do to test & get it merged?

<!-- gh-comment-id:2261763596 --> @mihow commented on GitHub (Aug 1, 2024): This is fantastic, thank you for jumping on this feature. What do we need to do to test & get it merged?
GiteaMirror commented 2026-04-25 03:28:06 -05:00
Author
Owner
Copy Link

@JamesClarke7283 commented on GitHub (Sep 22, 2024):

Could we make it more like Anthropic's artifacts? where Code blocks are concise filenames blocks. and when you click on the artifact it shows the code on the right hand side?

that way you dont have to scroll down just to copy each of the code snippets, i think it would save a lot of time.

as it generates each file, it displays the content on the right hand side (optional addition)

Here is an example:
artifacts

<!-- gh-comment-id:2365461964 --> @JamesClarke7283 commented on GitHub (Sep 22, 2024): Could we make it more like Anthropic's artifacts? where Code blocks are concise `filenames blocks`. and when you click on the `artifact` it shows the code on the right hand side? that way you dont have to scroll down just to copy each of the code snippets, i think it would save a lot of time. as it generates each file, it displays the content on the right hand side (optional addition) Here is an example: ![artifacts](https://github.com/user-attachments/assets/9510c893-584c-415e-9f41-86744be387fb)
GiteaMirror commented 2026-04-25 03:28:07 -05:00
Author
Owner
Copy Link

@tjbck commented on GitHub (Oct 6, 2024):

image

Available now on the latest dev! Will be merged with 0.3.31!

<!-- gh-comment-id:2395348818 --> @tjbck commented on GitHub (Oct 6, 2024): <img width="1507" alt="image" src="https://github.com/user-attachments/assets/5dd3c592-edab-4feb-8777-fdc3ad72aad2"> Available now on the latest dev! Will be merged with 0.3.31!
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
bug
confirmed
confirmed issue
core
documentation
enhancement
good first issue
help wanted
non-core
pull-request
Mirrored from GitHub Pull Request
 python
question
testing wanted
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/open-webui#28985
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?