WebSim Setup and Usage Guide

1. Setting Up WebSim

Initial Setup

1. Access WebSim: Go to https://websim.ai to start.
2. Create an Account: Sign up or log in to your existing account.

Starting a Session

1. Provide a URL: Begin by entering a URL. This URL will act as your entry point into the simulated web space.
Example: https://websim.ai
2. Receive the Initial Page: WebSim will generate and display a full HTML representation of the imagined website.

2. Navigation and Exploration

Exploring Generated Pages

1. Clicking Links: Navigate by clicking on links within the generated HTML.
2. Providing New URLs: Enter new URLs to visit different parts of the simulated web.
Example: https://websim.ai/explore/quantum-realms
3. Using Forms: Interact with forms or other interactive elements on the page.

URL Structure and Parameters

1. Creative Interpretation: WebSim interprets URLs creatively. The domain, path, and query parameters contribute to the context of the generated site.
Example: https://quantum-internet.websim.ai/entangled-messaging?security=unbreakable

3. Utilizing Advanced Features

Generated Backend

1. Call Simulated Databases: Use the /api/backendhere endpoint to access a simulated database.
Example: /api/martianplants for generated plant information.
2. Prompting a Separate LLM: This allows for a predictable response format filled out generatively.

HTMX Streaming

1. Stream HTML Information: Use HTMX to stream content without reloading the page.
Example: Implementing HTMX for live chatting or searching in the Underground Martian Expedition.
2. How to Implement: Simply request HTMX usage when setting up your WebSim session.

Context Composition

1. Control Context Menu: Click the X to delete a section, or the Pin to save it. Drag and drop bookmarked pages into your context.
Example: Combining pages for generating a survival guide in the Martian Expedition.
2. Enhance Complexity: Utilize context effectively for more extensive and relevant generations.

!Continue Command

1. Continue Generation: Use the !Continue command to continue generating a large input when it loads unfinished.
2. Detecting the Need: Look for a black screen, non-functioning buttons, or other broken elements.

4. Practical Examples

Example: Chat Interface with Dynamic Formatting

1. Prompt One: Create a chat app using HTMX to pull from /api/cryptid.
2. Prompt Two: Theme the visuals based on the cryptid.
3. Prompt Three: Fix bugs to switch the button and send messages correctly.
4. Prompt Four: Use context with /api/cryptid_character_sheets to generate character sheets.

5. Limitations

1. No JavaScript Execution: WebSim cannot execute actual JavaScript or server-side code.
2. No Information Retention: WebSim doesn't retain information between separate chat sessions.
3. No Real-World Data Access: WebSim cannot access or modify real-world data or websites.

Conclusion

By following this guide, you can effectively set up and use WebSim to create and explore hypothetical web spaces. Utilize the advanced features to enhance your experience and push the boundaries of what's possible online.