StackBlitz recently launched an innovative tool called Bolt.new, a browser-based AI development tool that empowers developers, project managers, or designers with the ability to build, run, edit, and deploy full-stack applications directly in the browser without any local setup. This article will provide a detailed introduction to Bolt.new, helping you gain a comprehensive understanding of this product.

social_preview_index.jpg

Introduction to Bolt.new

Bolt.new is an AI-driven web development agent that allows you to prompt, run, edit, and deploy full-stack applications directly from your browser, without the need for local setup. It integrates cutting-edge AI models and a browser development environment powered by StackBlitz's WebContainers, enabling you to:

  • Install and run npm tools and libraries (such as Vite, Next.js, etc.)
  • Run Node.js servers
  • Interact with third-party APIs
  • Deploy to production from chat
  • Share your work via URL

Unlike traditional development environments, Bolt.new gives AI models full control over the entire environment, including the file system, Node server, package manager, terminal, and browser console. This allows the AI agent to handle the entire application lifecycle from creation to deployment.

Key Features

  • Full-stack browser development: Integrates AI models and development environments in the browser.
  • Install and run npm tools: Supports the installation and running of various popular JavaScript frameworks and libraries.
  • Node.js server running: Allows direct Node.js server execution in the browser.
  • Third-party API interaction: Enables interaction with third-party APIs.
  • Production deployment: Direct deployment to production from chat.
  • Work sharing: Share your work via URL for easy team collaboration and demonstrations.
  • AI environment control: AI models can control the entire development environment, including the file system and server.

Applicable Scenarios

  1. Rapid prototyping: Developers can use Bolt.new to quickly build prototypes and iterate.
  2. Team collaboration: Team members can share URLs to view and edit project status in real-time.
  3. Education and learning: Students and developers can learn and practice full-stack development online with Bolt.new.

Usage Tutorial

  1. Visit the product website: Open your browser and visit the official website of Bolt.new.

    截屏2024-10-09 下午3.54.33.png

  2. Registration and login: Purchase a paid subscription in the settings if you need more AI tokens or private projects.

    截屏2024-10-09 下午3.53.36.png

  3. Create a new project: Click to create a new project, enter the project name and description.

    截屏2024-10-09 下午3.53.36.png

  4. Select the technology stack: Choose specific frameworks or libraries as needed.

    截屏2024-10-09 下午3.53.36.png

  5. Write code: Directly write and edit code in the browser.

    截屏2024-10-09 下午3.58.56.png

  6. Install dependencies: Use the built-in package manager to install necessary npm dependencies.
  7. Run and test: Run the project and test to ensure everything works as expected.

    截屏2024-10-09 下午3.58.03.png

  8. Deploy the application: Deploy the application to the production environment via chat commands.
  9. Share the project: Generate a project URL to share your work with others.

Conclusion

Bolt.new demonstrates significant potential in the web development field with its core advantage of full-stack development without the need for local setup. To learn more about how Bolt.new is transforming the development experience, please visit the Bolt.new website for more details.