Implement artifacts renderer - similar to Claude artifacts/v0

[bracesproul]

Feature: React Code Rendering in Chat Interface

Primary Objective: Enable users to view and interact with generated React code both in raw form and as a rendered application.

Key Requirements:

1. Display Location

   • Render the generated React code within the existing ArtifactRenderer section
   • Maintain the current raw code display as the default view
   • Implement a toggle switch between raw code and rendered application views

2. Performance Optimization

   • Lazy load the rendered application
   • Only instantiate the React rendering when a user explicitly toggles to the rendered view
   • Rationale: Prevents unnecessary rendering operations during code modifications

3. Technical Implementation

   • Utilize Code Sandbox API for the sandbox environment
   • Preserve visibility of quick actions and custom quick actions in both views

4. User Interaction Flow

   • Maintain chat functionality while viewing rendered application
   • Disable code highlighting when in rendered view
   • During code streaming (isStreaming true):
   • Pause parsing/rendering of new code chunks
   • Wait for complete code stream before updating render Rationale: Prevents partial or invalid renders during code generation

5. Error Handling

   • Display toast notifications for errors (invalid code, type errors, etc.)
   • Include specific error messages in notifications
   • Maintain last valid rendered state during errors Rationale: Ensures users can continue viewing working code while addressing issues

6. Integration

   • Integrate with Code Sandbox API for secure code execution
   • Do not expose the Code Sandbox editor/IDE they offer, and instead use the existing code renderer component. (using their IDE appears to be expensive from their docs)

The ArtifactCodeV3 interface should be updated with a new field sandboxURL so each revision can store the sandbox URL. This means when a user navigates between different revisions, it should update the rendered code.

Finally, in the final PR, it would be great if you could include a cost analysis so I have a rough idea as to how much it will cost.

[admineral]

Hello,

a easy solution would be sandpack by codesandbox, https://github.com/admineral/Reactor

[bracesproul]

Hello,

a easy solution would be sandpack by codesandbox,

https://github.com/admineral/Reactor

@admineral yes! Would love a contribution if you have time 🙂

[admineral]

Nope sry

[alchemistgo87]

I can do this. @bracesproul, do you want the same UI as in the above mentioned Reactor repo, or do you want to keep it simple without separate file tabs?

[alchemistgo87]

We can also make use of this - https://github.com/e2b-dev/code-interpreter

[admineral]

We can also make use of this - https://github.com/e2b-dev/code-interpreter

Another dependency … i dont think it runs locally

….

Get your E2B API key

Sign up to E2B here. Get your API key here. Set environment variable with your API key.

[bracesproul]

@alchemistgo87 I would love a contribution! Let me do some more research into the proper API for this, and I'll update this GitHub issue body with a more detailed product spec. Then, if you're still up for implementing it I can assign this issue to you!

[bracesproul]

hey @alchemistgo87 lets start with something simple and use the code sandbox API.

I just updated the GitHub body with a more detailed spec, and if that all looks good to you, let me know and I'll assign this issue to you!

[alchemistgo87]

hey @alchemistgo87 lets start with something simple and use the code sandbox API.

I just updated the GitHub body with a more detailed spec, and if that all looks good to you, let me know and I'll assign this issue to you!

Great, thanks for the update. I will start working on it today, you can assign me the issue.

[bracesproul]

Sweet! Looking forward to it @alchemistgo87

[bracesproul]

hey @alchemistgo87 going to unassign you from this, if you've already started feel free to still put a PR up though!