Skip to main content
AI tutorials

Build and Publish Websites with Puter AI Builder

Learn how to install and run Puter AI Builder locally, create websites and applications from natural-language instructions, refine them through chat and visual editing, and publish finished projects. This tutorial also covers the platform’s integrated services, version history, support channels, and licensing.

Build and Publish Websites with Puter AI Builder

AI Builder logo

AI Builder is an open-source tool for creating websites and applications with natural-language instructions instead of writing code. It combines AI-assisted creation, live preview, visual editing, and publishing in a browser-based workflow.

The project is positioned as an open-source alternative to tools such as Lovable, Replit, and v0. It is licensed under the Apache License 2.0, so you can fork it, customize it, and adapt it to your needs.

What AI Builder Does

AI Builder turns an idea into a working website or application. You describe what you want, then use the builder to review the result, request changes, and publish the project when it is ready.

The platform uses Puter.js to provide integrated application services, including authentication, storage, databases, AI, networking, real-time capabilities, serverless functions, and hosting. The README describes these services as integrated without requiring additional setup for your projects.

Key Features

  • AI-assisted building: Describe a website or application in plain language without needing coding or technical knowledge.
  • Live preview: See the project as it takes shape and try it while you make changes.
  • Chat-based editing: Ask the AI to update parts of your project through conversation.
  • Visual editing: Select an element in the preview and tell the AI exactly what you want changed.
  • Integrated services: Use capabilities such as authentication, storage, databases, AI, networking, real-time features, and serverless functions through Puter.js.
  • Publishing: Publish a project to a public URL when it is ready to share.
  • Version history: Revisit saved versions and restore an earlier state while experimenting.

Install AI Builder Locally

To run the project from its source repository, make sure Git, Node.js, and npm are available in your development environment. Then clone the repository, enter its directory, install dependencies, and start the development server.

git clone https://github.com/HeyPuter/builder
cd builder
npm install
npm run dev

The git clone command downloads the repository. npm install installs its dependencies, and npm run dev starts the local development process. Follow the URL shown by the development server to open the builder in your browser.

Try the Live Demo

If you do not want to install the project first, use the official AI Builder live demo. This is the quickest way to explore the creation, editing, preview, and publishing workflow.

Build Your First Project

  1. Start with an idea: Open the local application or live demo and describe the website or application you want to create in plain language.
  2. Review the generated project: Use the live preview to see how the idea has been translated into a working interface.
  3. Request changes in chat: Explain what should be added, removed, or adjusted. AI Builder is designed to handle these updates through conversation.
  4. Use visual editing: Select a specific element in the preview and provide a focused instruction for that element.
  5. Test as you iterate: Check the live preview after each change so you can refine the project progressively.
  6. Restore an earlier version when needed: Use version history to revisit saved states and recover a previous version while experimenting.
  7. Publish the result: When the project is ready, publish it to a public URL and share it with others.

Example Prompt

You can begin with a simple description such as:

Create a landing page for a small software project with a clear headline, a short feature section, and a call-to-action button.

After the initial result appears, continue with more specific instructions. For example, you might ask the builder to revise a section, change an element selected in the preview, or refine the layout. The README does not prescribe a specific prompt format, so use plain language and iterate based on the live result.

Advanced Tips for the AI Builder Workflow

Work in Small Iterations

Instead of requesting every change at once, use the live preview to guide a series of focused updates. This makes it easier to identify which instruction produced a particular result and helps you evaluate the project as it develops.

Combine Chat and Visual Editing

Use chat for broader project-level changes, then select an individual element in the preview when you need a more precise update. This combination gives you both conversational control and element-specific direction.

Use Version History During Experiments

Save and revisit versions as you explore different ideas. If an experiment moves the project in the wrong direction, restore an earlier state instead of rebuilding the work manually.

Take Advantage of Integrated Services

For projects that need more than a static interface, consider the services provided through Puter.js. The platform integrates authentication, storage, databases, AI, networking, real-time capabilities, and serverless functions, allowing these needs to be handled within the Puter-based environment.

Publish Only When Ready

Use the preview to test changes before sharing the public URL. Once the project matches your intended result, publish it so others can access it.

Support and Community

For bugs or feature requests, open an issue in the repository. You can also follow the project on X or visit the Puter developer resources.

Security issues and abuse reports can be sent to security@puter.com. For general contact with the maintainers, email hi@puter.com.

License

AI Builder is licensed under the Apache License 2.0, unless a component states otherwise. Bundled third-party libraries and fonts may use their own licenses; consult the repository’s third-party notices for details.

Conclusion

AI Builder provides a complete AI-assisted workflow for turning plain-language ideas into websites and applications. Install it locally with npm or try the live demo, then use AI chat, visual editing, live preview, version history, and publishing to move from an initial concept to a shareable project.