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!