Zenn
🌈

Bolt.new: ブラウザ上でAIを活用したフルスタックWeb開発

2024/10/07に公開
ai駆動開発
bolt.new
フルスタック開発
ブラウザ内開発環境
tech

Bolt.newは、ブラウザから直接フルスタックアプリケーションをプロンプト、実行、編集、デプロイできるAI駆動の Web 開発エージェントです。ローカル環境のセットアップは必要ありません。Boltのオープンソースコードベースを使用して独自のAI駆動のWeb開発エージェントを構築したい場合は、ここをクリックして始めましょう！

Bolt.newの特徴

Claude、v0などは素晴らしいですが、パッケージのインストール、バックエンドの実行、コードの編集はできません。Bolt.newはここで際立っています：

  • ブラウザ上でフルスタック: Bolt.newは最先端のAIモデルとStackBlitzのWebContainersによるブラウザ内開発環境を統合しています。これにより以下が可能になります：

    • npmツールやライブラリ（Vite、Next.jsなど）のインストールと実行
    • Node.jsサーバーの実行
    • サードパーティAPIとの対話
    • チャットからの本番環境へのデプロイ
    • URLを介した作業の共有

  • 環境制御を備えたAI: 従来の開発環境ではAIはコード生成のみを支援しますが、Bolt.newはAIモデルにファイルシステム、Nodeサーバー、パッケージマネージャー、ターミナル、ブラウザコンソールを含む環境全体の完全な制御を与えます。これによりAIエージェントはアプリケーションのライフサイクル全体（作成からデプロイまで）を処理できます。

経験豊富な開発者であっても、PMやデザイナーであっても、Bolt.newを使えば本番グレードのフルスタックアプリケーションを簡単に構築できます。

WebContainersを使用して独自のAI駆動開発ツールの構築に興味がある開発者は、このリポジトリにあるオープンソースのBoltコードベースをチェックしてください！

ヒントとコツ

Bolt.newを最大限に活用するためのヒントをいくつか紹介します：

  • スタックについて具体的に: 特定のフレームワークやライブラリ（Astro、Tailwind、ShadCN、その他の人気のあるJavacsriptフレームワーク）を使用したい場合は、初期プロンプトでそれらを明記し、Boltがプロジェクトを適切にスキャフォールディングすることを確認してください。

  • プロンプト強化アイコンを使用: プロンプトを送信する前に、'enhance'アイコンをクリックしてAIモデルにプロンプトの改善を手伝ってもらい、結果を編集してから送信してみてください。

  • まず基本をスキャフォールディングし、その後機能を追加: より高度な機能に取り組む前に、アプリケーションの基本構造が整っていることを確認してください。これによりBoltはプロジェクトの基礎を理解し、より高度な機能を構築する前にすべてが正しく接続されていることを確認できます。

  • シンプルな指示をバッチ処理: 簡単な指示をひとつのメッセージにまとめて時間を節約します。例えば、カラースキームの変更、モバイルレスポンシブ性の追加、開発サーバーの再起動をまとめて1回で依頼することで、時間を節約し、APIクレジットの消費を大幅に削減できます。

よくある質問

有料プランはどこで申し込めますか？
Bolt.newは無料で始められます。より多くのAIトークンやプライベートプロジェクトが必要な場合は、Bolt.newの設定（アプリケーションの左下隅）で有料サブスクリプションを購入できます。

無料利用制限に達した場合はどうなりますか？
1日の無料トークン制限に達すると、翌日までまたはプランをアップグレードするまでAIとのやり取りが一時停止されます。

Boltはベータ版ですか？
はい、Bolt.newはベータ版で、フィードバックに基づいて積極的に改善を行っています。

Bolt.newの問題はどのように報告できますか？
問題を報告したり新機能をリクエストしたりするには、Issues セクションをチェックしてください。検索機能を使用して、同じ問題/リクエストが他の人によってすでに提出されていないか確認してください。

現在Boltで動作するフレームワーク/ライブラリは何ですか？
Bolt.newは、ほとんどの人気のあるJavaScriptフレームワークとライブラリをサポートしています。StackBlitzで動作するものは、Bolt.newでも動作します。

自分のフレームワーク/プロジェクトがBoltでうまく動作するようにするにはどうすればよいですか？
JavaScriptエコシステムと協力してBoltの機能を改善することに興味があります。パートナーシップについて議論するには、hello@stackblitz.comまでご連絡ください。

リポジトリ

https://github.com/stackblitz/bolt.new

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Discussion