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. This example uses HTMX and generated backend to create a chat interface with cryptids, where the visual theme of the page changes based on which cryptid the user summons.