How to create Claude's Artifacts with Bubble?

joaquintorroba · 2024-10-04T14:16:57.096Z

Hey,
Has anyone tried to build something similar to Anthropic’s Artifact with Bubble?
If so, can you share how you did it?
Thanks!

redvivi · 2024-10-05T21:40:53.490Z

What’s your use-case?

joaquintorroba · 2024-10-06T19:55:29.421Z

For instance displaying code or showcasing “creations” such as “ads”, “emails”, etc.
Let’s say the assistant is an expert on email marketing, then I’d like to have the regular chat, but when the assistant creates emails or other creations they are displayed in a second-screen (just like Artifacts from claude).

redvivi · 2024-10-06T20:47:59.347Z

I guess it is possible by displaying the relevant Claude’s response on a separate panel using native Bubble elements.

Typically I would ask Claude to insert a code such as in the relevant response which are typically stored in a RG and display the related RG’s row on a separate tab.

Not exactly the same implementation as Claude, but it may work.

joaquintorroba · 2024-10-06T20:59:14.359Z

Do you mean solving it with prompts + conditionals in Bubble?
Meaning, prompt Claude or ChatGPT so that when making a “creation” they use code like “< creation> creation here < /creation>” and then with Bubble show what’s in that format in a separate element and the rest of the conversation in the central RG?

redvivi · 2024-10-06T21:12:43.969Z

Yes, conditionals + prompt.
You may specify it in the instructions. Such as:
« when you provide a code or email, always end your message with <artifact> »

Or whatever you like as long as you may use it to identify which row to display on the side panel.

system · 2024-12-13T14:17:40.176Z

This topic was automatically closed after 70 days. New replies are no longer allowed.