WebSim.ai Advanced Guide

1. Generated Backend

Generated Backends allow users to call on a simulated database in their websims. To use, type '/api/backendhere'. For example, for the Underground Martian Expedition, '/api/martianplants' was used. When the user asks for a plant, it gives back a generated plant and its information from a simulated database.

What happens in the background, is just another prompt to an LLM. With the generated backend function, the user is able to prompt separately to a different LLM than the one currently being used within the main prompt bar. This allows for a predictable response format, filled out generatively. In the martian expedition example, the defined format is an image, followed by habitat, size, color, and special adaptations.

Example: In this Tarot Card Generator, /api/new_card is used to generate tarot cards. The following two prompts are "make the svg cooler", followed by "make the svg even cooler"

Tip: Generated backends work great when you need to generate large amounts of information within the framework of what you ask for.

2. HTMX Streaming

Using HTMX can allow a websim to stream HTML information without reloading the page. In the Underground Martian Expedition, HTMX was used so the user would be able to search plants without waiting for a full page loading sequence.

Users can also use HTMX for live chatting with various LLM personas - a great example is Rudy's Boom Boom Room - Lightning Round by Jazmaan/OneMeatball.

In order to implement HTMX, simply tell websim you would like to use HTMX. You can specify when, and where to implement, but it is generally not required.

HTMX codes in HTML, which can be better for making visuals compared to the data-focused JSON that the simulated backend uses.

3. Context Composition

Context composition allows users to have finer control over their existing context menu that appears when the prompt bar is opened.

Click the X to delete a section from your generations context, or click the Pin in order to save something in your context. Users can also drag and drop bookmarked pages from the left sidebar of websim into their context. Doing this allows the page being working on to take inspiration from whatever has been brought in.

Example: In this version of the underground martian expedition, the page was combined with an unfinished version of this guide in order to help websim generate a survival guide for the red planet.

Tip: Utilizing context effectively can allow users to create more extensive and complex generations within websim.

4. !Continue

The !Continue feature is currently the only true command in websim. When generating a particularly large input, the generation can load unfinished. When this happens, users can type !Continue into the typical prompt bar, and it will continue generating the page on the next load.

Tip: It can be tough to notice when a page needs to continue. Websim has a feature that will sometimes detect when !continue, and it will show a button in the prompt bar for you to click. Other ways to notice are a black screen, buttons that do nothing, and other broken elements.

Extra Examples

1. Claude Advanced Guide

Check out this advanced guide to using Claude effectively.

2. Chat Interface with Dynamic Formatting

Here is an example of how to make a chat interface that can alter its own formatting and create a character sheet for an entity you're interacting with

Prompt one: using HTMX so that the page does not have to be reloaded, lets create a chat app that allows the user to type in what cryptid they would like to talk to. When the user clicks 'send', this will pull from /api/cryptid to create an entity to chat to.

Making the visuals in real time per cryptid

Prompt two: awesome work! when a cryptid is brought into chat, lets re-theme the visuals of the website to be based around the cryptid, pulling from /api/cryptid_design_elements

Bugfixing

Prompt three: there is one issue - once a conversation is entered with a cryptid, the start chat button should switch to a send message button, and their messages should be sent to the specified cryptid, rather than entering into a new chat.

Next, the Monstrous Compendium was dragged into context

Prompt four: use the new context with /api/cryptid_character_sheets to generate character sheets for whatever cryptid is pulled for the user.