Web Artifacts allow you to seamlessly create and share interactive, dynamic components (HTML/CSS/JavaScript) directly in your posts. From visualizations and quizzes to lightweight web apps.
The above artifact was generated using GPT-4o and the anime.js library
CSS Grid demo by Claude 3.5 Sonnet
Just want to add a few points for those who might be hesitant about using this. For the last few weeks, I have been primarily using ChatGPT with the 4o model to create plain/vanilla HTML pages using JavaScript and CSS. What is amazing is that the generated code almost never has a bug, but prompt engineering is needed to get the desired results. Sometimes, what you think and what the model thinks you want may not be the same, so a little tweaking of the prompt is needed.
If you have access to a canvas in coding mode or similar, these are great for getting your feet wet. Also, if you are not a programmer and don’t do this normally, one of the go-to tools for fixing bugs is to be aware of the F12 (ref) key with Internet browsers.
I could write a book on this, but I’ll stop here; you’re in a sandbox, so play around!
Simplified prompt for use as a AI Web Artifact (do not have access to AI Web Artifacts to test but should work or be very close)
Create a slot machine game, use JavaScript and CSS.
Actual prompt used with ChatGPT 4o
Create a simple HTML page for a slot machine game, use JavaScript and CSS. Create as a single HTML page for download.
Here is a more advanced prompt that was tweaked a few times before achieving a desired result. Will have to be modified for use with an AI Web Artifact.
Create a simple HTML page for a Blackjack game, use JavaScript and CSS.
Create as single HTML page for download.
Show the cards of the dealer after standing.
Add option for additional bot players, show the bot players cards.
Add option to bet and keep track of amount.
Show total of player cards.
Show dealer cards before displaying popup of who won.
If you want something a bit harder, create a game of checkers with a bot opponent.