New tools released over the past two weeks make it easier than ever to build and share games, dashboards, and interactive learning experiences using just prompts. Let's see how this is done...
Websim
Websim.ai, as described by Tom's Guide, is "a zero hype, no brand minnow project that popped out of nowhere". It lets you build websites, interactive demos and games in seconds using prompts, and then share links to your creations or download the HTML files to your computer. Websim uses the most powerful LLMs - Claude 3.5 Sonnet and GPT-4o, and it's completely free to use! All you need to do is register using your Google account.
On Websim's home page you can explore the top creations of the day, week or month (they are all public) to get some inspiration. At the top, you'll see a line labelled "What would you like to create today?" - that's where you type in your prompt.
As an example, I've created "Angroids", a combination of Asteroids and Angry Birds. This is the initial prompt I used:
Create a new twist on the classic Asteroids game, where an angry bird is trying to shoot down alien pigs.
When you enter a prompt, you can select which model to use. In my experience, the default model, Claude 3.5 Sonnet, gives the best results. Press the "Send" button, and you will see a progress bar. After a few seconds, your website will be ready!
If the results of your first attempt are not satisfactory, you can add prompts to improve your creation in the text box at the top. For full disclosure, the game above was created after adding the following to the original prompt:
Add a start game button. Make the pigs more realistic. Make the pigs explode into pieces like in the original Asteroids game. Make it work on mobile by swiping and tapping on the screen. Add 3 lives. Add the ability to move forward by pressing the Up arrow as in the original game.
Note that sometimes the progress bar just keeps loading forever, or the app isn't usable after a requested change. In that case, press the "Reload" button at the top, and the app will be regenerated. If that fails (which can happen when the load on Websim's servers is high), press the "Home" button and start again with your original prompt.
You can play my Websim Angroids game here. Enjoy!
Claude Artifacts
With the release of their latest Large Language Model Claude 3.5 Sonnet, Anthropic introduced a new feature in the Claude chatbot interface called "Artifacts". Artifacts are documents, graphics, code snippets or websites which are created by Claude in response to a user prompt, and displayed in a dedicated window next to the chat. When you press the "Publish" button on an Artifact, you get a link that can be shared with other Claude users. The receiving user can use your Artifact as-is or "Remix" it, which means adding prompts to refine that artifact. Note that the prompts you used to create your Artifact are not visible when you share the Artifact with others.
Now let's try the same prompt and create an Angroids game with Claude Artifacts.
As you can see, this initial attempt did create an Artifact, but the Artifact is a design document for the game, and not the HTML code of the game itself. So I've added this prompt:
Make a website with this game
Now I got an actual game Artifact, which is perfectly playable (after you click inside the window to gain focus), but - very basic...
The design document mentioned special types of eggs, levels, sounds effects, and more - but none of those features exist in the initial version.
So I wrote another prompt prompt which describes some missing features which should be added to the game:
Add a start game button. Make the birds and the pigs much more realistic. Make the pigs explode into smaller pigs that continue to wander in space like the original pigs. Add 3 lives. When a pig collides with the angry bird detect this, reduce the lives by one, and restart the game. When the lives reach 0, declare game over, and show a "Restart Game" button.
This is how the game looks after these changes:
Much better! Here's a link to this Published Claude Artifact. There's still a bug where the game immediately ends when the angry bird is hit once, but I'll let you Remix this Artifact to solve it...
Poe Previews
Poe is a very useful web and mobile app that lets you play around with multiple AI chatbots under one interface. It has some great features, such as creating custom chatbots, uploading files, and sharing conversations. Recently, Poe introduced a feature called "Previews", which lets you run HTML/CSS/JS code generated by a chatbot in a separate window. It is quite similar to Claude Artifacts, but works with any chatbot supported by Poe.
Since ChatGPT doesn't support running interactive apps directly in the chatbot window, but GPT-4o is still of the best LLMs around, I decided to re-create the Angroids app with GPT-4o under the Poe interface. This time I started with a more comprehensive prompt, aiming to get a better version on the first attempt:
Create a new twist on the classic Asteroids game, where an angry bird is trying to shoot down alien pigs, using web code. The game should have the following features: Start button, score, highly realistic angry bird and pigs, pigs explode into smaller pigs that continue to wander in space like the original pigs, 3 lives, when a pig collides with the angry bird detect this, reduce the lives by one, and restart the game, and when the lives reach 0, declare game over, and show a "Restart Game" button.
Here's my conversation with Poe:
This looked very promising, but when I pressed the "Start Game" button, I got some ugly errors:
So I just copied and pasted these errors into the GPT-4o chat window, and it updated the HTML code.
Unfortunately, this still resulted in an error: "Error loading image". Then I realized this was probably due to the use of external images, so I added this prompt:
Create the images using graphics, not by loading them from an external file.
This fixed the error, and my Angroids game came to life!
There are still some issue, for example the angry bird moves with the cursor keys instead of turning. The nice thing about sharing Previews in Poe is that you share your whole conversation, so you can now continue where I left off.
Summary
Building games, interactive simulations and web apps just got a lot easier with the release of Websim, Claude Artifacts and Poe Previews, all of them this month (and July isn't over yet...). You can go to the Websim home page, and independent Claude Artifacts directories such as artifacts.directory and GPTsdex AI Artifacts to explore what's possible and get inspiration for your next no-code project.
With these new capabilities, anyone can develop apps and share them with the world, so... what will you build next?
Commentaires