Exploring Bolt.New live: The Next Big Thing in Development with AI, Fullstack Apps in Your Browser!

Bolt New Exploration and Feature Enhancement: A Deep Dive

Key Concepts:

• Bolt New: An AI-powered web development tool by Stock Blitz that builds full-stack web applications in the browser.
• Stock Blitz: A company specializing in online development environments.
• Web Containers: A Stock Blitz technology that allows running a limited Linux environment with Node.js in the browser.
• Open Router: An API aggregator that provides access to various AI models through a single endpoint.
• Anthropic: An AI company and creator of the Claude model.
• Remix: A full-stack JavaScript framework used by Bolt New.
• IndexDB: A browser-based NoSQL database used for storing chat histories.
• Jszip: A JavaScript library for creating, reading, and editing ZIP archives.

1. Introduction to Bolt New

• Bolt New is a new product from Stock Blitz that acts as an assistant for building web applications directly in the browser.
• It allows users to write prompts in English, and the tool generates the necessary code and configurations.
• The tool leverages Stock Blitz's web container technology to run a full-stack environment within the browser.

Example:

• The presenter demonstrates Bolt New by prompting it to create a "fancy animated hello world full-stack application" with a Node.js backend.

2. Comparison with Other AI Coding Tools

• Get Lazy AI: An earlier AI coding tool that the presenter found challenging to use.
• GPT Engineer: A tool that works well but is limited to front-end development and has usage limits on the free tier.
• Replit Agent: A paid tool that the presenter found ineffective.
• Bolt New is considered more promising because it works better than Get Lazy AI and Replit, and it supports full-stack development, unlike GPT Engineer.

Key Differences:

• Bolt New is open source, allowing for community contributions and modifications.
• It supports full-stack development, including both front-end and back-end components.
• It offers a free tier with a generous token allowance.

3. Setting Up Bolt New Locally

• The presenter clones the Bolt New repository from GitHub.
• The project requires Node.js version 18 or higher.
• The presenter uses npm install to install the project dependencies.
• The presenter uses WebStorm as the code editor and Cursor as an AI-powered IDE.

Steps:

1. Fork the Bolt New repository on GitHub.
2. Clone the forked repository to your local machine.
3. Install Node.js version 18 or higher.
4. Run npm install to install the project dependencies.
5. Run npm run dev to start the development server.

4. Integrating Open Router API

• The presenter aims to replace the default Anthropic API with Open Router to allow using different AI models.
• The presenter installs the Open Router SDK using npm install @openrouter/sdk.
• The presenter modifies the model.ts file to use the Open Router API.
• The presenter hardcodes an Open Router API key for testing purposes.

Code Modifications:

• The model.ts file is modified to use the Open Router SDK instead of the Anthropic SDK.
• The streamText function is updated to accept an API key as a parameter.

5. Implementing Client-Side API Key Input

• The presenter adds an input field to the header of the Bolt New UI to allow users to enter their Open Router API key.
• The presenter uses React hooks (useState and useEffect) to store the API key in a cookie.
• The API key is then passed to the streamText function for use in the AI model.

UI Changes:

• An input field is added to the header of the Bolt New UI.
• The input field is styled to be visually appealing and user-friendly.

6. Debugging and Troubleshooting

• The presenter encounters several issues during the development process, including:
  • Missing dependencies
  • Module compatibility issues
  • Incorrect API key usage
• The presenter uses a combination of debugging tools and techniques to identify and resolve these issues.

Debugging Techniques:

• Using console.log statements to track the flow of data.
• Using the Node.js debugger to step through the code.
• Using the browser's developer tools to inspect the UI and network requests.

7. Implementing Project Export as ZIP

• The presenter aims to add a feature to export the current project as a ZIP file.
• The presenter initially attempts to use the jszip library but encounters compatibility issues.
• The presenter switches to a pure JavaScript implementation of ZIP creation.
• The presenter adds a button to the UI to trigger the export process.

Code Implementation:

• A new function is created to generate a ZIP file from the project files.
• The function iterates through the project files and adds them to the ZIP archive.
• The ZIP archive is then downloaded to the user's computer.

8. Challenges and Limitations

• The presenter encounters several challenges during the development process, including:
  • Compatibility issues with certain libraries
  • Difficulties in debugging the server-side code
  • Limitations in the Cursor AI IDE
• The presenter acknowledges that the project is still in an early stage of development and has several limitations.

Known Issues:

• The exported ZIP file may contain duplicate files.
• The UI is not fully polished and may have some visual issues.
• The process of loading and resuming projects is not yet implemented.

9. Conclusion and Future Directions

• The presenter successfully integrates Open Router API, implements client-side API key input, and adds a project export feature to Bolt New.
• The presenter plans to continue working on the project in the future, focusing on:
  • Adding a model selector to allow users to choose different AI models.
  • Implementing self-hosting capabilities.
  • Improving the UI and overall user experience.

Main Takeaways:

• Bolt New is a promising AI-powered web development tool with the potential to simplify the development process.
• The open-source nature of Bolt New allows for community contributions and modifications.
• The integration of Open Router API enables the use of various AI models.
• The project export feature allows users to save and share their projects.