Announcing: AI Web Artifacts

Introducing Web Artifacts in Discourse AI!

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

Learn more at: Discourse AI - Web Artifacts

16 Likes

Sheikah Slate Compendium

This is a whole new level of fun in Discourse! :tada:

10 Likes

Magic Web Artifact for Finding Answers

To use: hold a question in your mind, and press the magic item icon. :magic_wand:

Okay, I’m gonna take a break for now… so many ideas!

6 Likes

Any of those examples shows nothing on iPad :cry: And if open fullscreen on the Hub I can’t get out of it without leaving a forum.

2 Likes

We have a new build of hub that @pmusaraj is publishing, have you updated to latest ?

3 Likes

Yes! Esc to leave fullscreen is difficult on tablets, and using the back button does not take me back to the topic but one step further backwards.

3 Likes

I think we can push state when you click the button to fix full screen

Maybe that overlay makes no sense on touch , it does get in the way of controls at the top anyway

2 Likes

This is a great addition!

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!

3 Likes

If system has updated it, then yes. 2.0.7 two weeks ago.

1 Like

Yeah, it was Hub issue indeed. Safari shows nicely.

Is an example of prompting possible for us non-coders?

Edit

First try worked. That kind of dev-work is great. Just telling what is needed. But some questions:

  • where that code lives in my forum? I mean can or can’t I destroy that PM?
  • can we start using Support with this questions?
2 Likes

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.

2 Likes

That release did not include the artifact fix. New version, 2.0.8, submitted for review just now, it should be available shortly.

7 Likes

Googly Eyes

Got it in one!

Inspired by Xeyes – Wikipedia :eyes:

4 Likes