Recreating Anthropic’s Claude Artifacts Feature - Part 1

--- type: transcript date: 2024-11-27 youtube_id: IRdKFsuSOhg --- # Transcript: Recreating Anthropic’s Claude Artifacts Feature - Part 1 in this video I'm going to be going over artifacts how they work now this was originally popularized by anthropic but ever since then there's just a ton of different applications that are leveraging these same sort of patterns I thought it'd be valuable to actually just to go over this at a high level how this works how maybe if you wanted to build out your own application to some of these popular code generation tools how you could potentially get started now I'm not going to be diving into the code mod in this video but I wanted to do a bit of a highlevel overview and really just explain the pieces on how this works first off basically what happens is you have this Center panel within the screen here right and within the query once you send your query through what that will do is it's going to send that request to a backend the backend portion of this isn't actually that complicated and I'll touch on this for a couple reasons at first when I was building this out my thought is that they must be using a ton of different function calls and have this complicated agent architecture to make it all work and that's actually not the case is actually just through their system prompt what's unique with how they have it set up on anthropic and a lot of other systems is that backend can really be agnostic you can use Lang chain you can use the vercel AI SDK and basically the trick with this is within the system promt there are very specific instructions on what you're asking to return now the key aspect with this is generally speaking the more powerful the llm the better that it will follow the system prompt and be able to give you those results that ultimately render as artifacts once you have that system prompt you can really send this to whatever you want anthropic Gemini open AI Gro you can send it to quen if you want really it's quite agnostic but the key functionality to make it work as if it is the anthropics artifact feature is you just have to make sure whatever llm that you're using does have streaming now as you start to get those responses back the key with the responses is going to be based on this system prompt in large part how I figured this out is a result of this Anonymous Twitter account as well as GitHub account and what this account has done is and continues to do is that every time that there's one of these Frontier models that comes out they go ahead and actually figure out what the system prompt is now if you just look at the anthropic system prompt there is a ton within this and this is something that I want to emphasize is that you can really put a ton of instructions within your system prompt I think a lot of people actually really shy in this regard there's a ton of information I'm not going to read through it here but in terms of some of the key pieces with artifacts good artifacts are a substantial amount of content over 15 lines content that users are likely to iterate on modify take ownership up don't use artifacts for the following now in terms of some of the specifics about artifacts and how they work there are a number of key buckets there's code there's documents things like markdown there's HTML svgs and the list goes on in terms of some of the features that I really focused on it was really for the h HML web app a type of rendering HTML that's one style of rendering now there is another style for if you want to set up something like a react component because those ultimately need to be compiled right that's something as well and for svgs you effectively render it as if it were an SVG if it's a mermaid diagram you effectively render it with these markers that are going to be on the XML tags if we go back to our drawing here once you get that response back take this Arrow all the way over here this video is brought to you by scrimba the Innovative coding platform that brings Interactive Learning To Life dive into a variety of courses from AI engineering to frontend python UI design and much more scrim is gamechanging feature is their unique scrim screencast format which lets you pause the lesson anytime and start directly editing the teachers code their curriculum is built in collaboration with industry leaders including mazilla mdn hugging face and Lang chain and includes building application with open AI CLA mistal models and guides you on deploying projects to platforms like Cloud flare while AI tools can assist with coding a solid grasp of the fundamentals is essential for achieving real experience scrimba offers something for everyone from complete beginners to Advanced developers and about 80% of scrimba content is completely free sign up for a free account today using my link below and enjoy an extra 20% discount on their Pro plans when you're ready to upgrade I'm sure you'll love it so what will happen is the response will start to stream out here and it will stream out in the middle of the screen here the response will start coming in and what will happen is as soon as an artifact is detected this will move to the left hand side and within that the way that it's determined if the artifacts panel will open up is you'll have something like ant thinking which will look like this and it'll be like this will be a good use case for an artifact now this won't be exactly what it says or anything but this is largely what actually happens it will go ant thinking and so there will be these XML tags that will be hidden and then immediately after this tag there will be one right after this that will be something like ant artifact and then within this is going to be the marker just like some pseudo code here but this will be like a react component or this will be a a SVG or something to that effect and this is the key all of these tokens as they get streamed out this is going to occur on this side of the screen here right anything that's within the artifact or with enclosing anti artifact XML tag those are going to be on the right hand panel in addition to this as soon as that's detected the code there's going to be a title there will be something like title your cool homepage right now the thing with this title is this will also be within the button that you see within the artifact right detect this is with Rex a lot of people say that the web app for Claud can feel a bit heavy and I suspect that this is probably the result what's happening all these tokens are streaming in it's performing that redx to actually compare everything that's coming in to see where it should be delegated Within D in terms of where it's actually structured and state and stuff there is some Liberty in terms of how you want to set that up but largely that's pretty much it it's really not as complicated as I think people think and what's really great with this is we're seeing a ton of great applications with this we see v0 we see bolt. new and the thing with how this is set up is as soon as you determine when these things open and close and what pieces of code are considered an artifact you you all of a sudden have a little bit more Liberty in terms of what you want to do with it maybe instead of just rendering it here you want to save it within a file and begin to implement a bit of a file system right we see this on a lot of different tools and within that you'll be able to leverage something like more of a full stack application or a multifile application right we see this within v0 both new lovable all of these systems are following a similar pattern now some of them also have agentic features within it but at its core the sort of OG of all of this is what anthropic figured out with this ant thinking ant artifact and that a lot of this code is really based on the front end and a lot of really creative tricks on how you can take that response that's just going to be a stream of tokens that's ultimately going to be a big long string and how to ultimately parse that this is just a little bit of an intro I plan on doing more content on the specific of this in the future I don't know exactly when I don't know exactly what that will look like but I do want to continue to dive into this a little bit and really share more and more how you can build something like this otherwise that's it for this one I know it's a relatively short one a little bit different in terms of my style of videos I know a little bit of a whiteboard type of situation but I just wanted to give you a highle overview on all of this hopefully you found this video useful if you did please like comment share and subscribe otherwise until the next one