What is it?

Websim is an AI-powered website builder that offers a unique “hallucinated” internet experience. It enables you to generate webpages and AI-generated images based on natural language prompts, without the need for coding. Pages are dynamically generated as you navigate, presenting an initial page with links that become active only when visited.

The platform is highly versatile, catering to rapid prototyping, experimentation, and no-code development. With Websim, you can create, edit, or modify individual page elements with ease. It’s particularly useful for exploring ideas related to layout, color schemes (dark, light, or specific color palettes), or themes (such as MaterialUI). The generated websites are shareable, and you can browse creations by other users, drawing inspiration or using them as a starting point.

You can choose from various models to use, such as Claude and GPT-4o.

Prompt ideas

To get started, try prompting Websim with:

  • A quirky concept, like “Social media website where users are cats and the pictures are outdoors”.
  • An idea or prototype for your web development, such as “Professional homepage with experience, gallery, and contact form. Dark theme. MaterialUI”.
  • A real website reimagined, like “https://apple.com but in the 1990s”, or with a different color theme or product offerings.

Check out my creations at websim.ai/@MichaelPythonDev, or explore the feed of user creations on the homepage to see what others have built.

Leveraging AJAX requests

When loading a new page, the layout and styling may not always be consistent. To address this, when creating interactive tools, it is recommended to load a portion of the page with AI responses instead of loading the entire page.

Specifically, you can ask Websim to query the “/api/generate” endpoint with an AJAX request (so it will use Websim’s internal API) and to update the content in-place with the response. This approach typically yields excellent results, as demonstrated in my Language Assistant - Dutch Conversation Practice page.

Generating AI-Powered Images

One of Websim’s strengths lies in its ability to generate new images using AI, to make the pages more engaging. This is achieved by creating an image element with alt text for the description, then generating and replacing the current element with the AI-generated image. This feature can be utilized to create galleries of images that are mostly fixed but slightly different on each page load, as showcased in the Amsterdam Houses Architecture Gallery.

Additionally, you can develop interactive tools that generate images based on user input. An example of such a tool is the Fidget Toy Builder, which allows users to create custom fidget spinners.

Downloading and customizing Websim code

Websim provides the option to download your creation, which will consist of static HTML, CSS, and JavaScript in one .html file. It’s important to note that when running this files locally, the dynamic AI-generated content and functionality provided by Websim.io will not be available, and any AJAX API requests will fail since they originate from outside the website.

However, this static code can serve as a starting point for further customization and integration with other AI tools. If your webpage is entirely static and non-interactive, such as an About page, the absence of AI-generated content may not be a concern, and you can continue modifying and using the downloaded code locally.