multi-model-bolt.new：AI駆動型フルスタック開発ツールBolt.newをベースとしたオープンソース修正版

はじめに

multi-model-bolt.newは、次のようなアプリケーションをベースにしている。 ボルト.newの修正版で、TogetherAIモデルを使用でき、デプロイメント、モバイル・レスポンス、音声入力などの機能をサポートしています。ユーザーは、ブラウザ上で直接、フルスタックのアプリケーションをプロンプ、実行、編集、デプロイすることができ、ローカルでのセットアップは不要です。このツールは、最新のAIモデルとStackBlitzのWebContainersを統合し、開発環境の完全なコントロールを提供します。

オープンソース版：ボルト・オリジナル multi-model-bolt.new：AI駆動型フルスタック開発ツールBolt.newをベースとしたオープンソース修正版

Bolt（このコードベース）とBolt.newの違いは？

• ボルト・ニューこれはStackBlitzから。市販品AIはホスティングされたブラウザベースのAI開発ツールで、ユーザーはブラウザ上で直接フルスタックのウェブアプリケーションをプロンプし、実行し、編集し、デプロイすることができます。AIは Boltオープンソースライブラリ StackBlitzの WebContainer API サポートを提供する。
• ボルト（このコードベース）を構築する手段を提供するオープンソースライブラリである。 ボルト・ニュー 必要なコアコンポーネントコードベースには、Boltのユーザーインターフェースと リミックス・ラン ビルドこのコードベースとStackBlitzの WebContainer APIAIを活用した独自の開発ツールや、完全にブラウザ上で動作するフルスタック・アプリケーションを作成することができる。

機能一覧

• npmツールとライブラリのインストールと実行Vite、Next.jsなどの一般的なフレームワークをサポート。
• Node.jsサーバーの実行ブラウザで直接バックエンド・サービスを実行する。
• サードパーティAPIとの対話外部サービスの容易な統合
• チャットから本番環境へのデプロイ配備プロセスの合理化
• URLで作品を共有するチームワークの促進
• 環境制御AIモデルは、ファイルシステム、ノードサーバー、パッケージマネージャー、端末、ブラウザーコンソールを完全に制御できる。
• モバイル・レスポンスモバイルデバイスに対応したレスポンシブデザイン
• 音声入力音声入力機能を追加し、ユーザーエクスペリエンスを向上

ヘルプの使用

Boltは、AIの力とサンドボックス開発環境を組み合わせ、アシスタントとプログラマーが協力してコードを開発できる共同体験を作り出します。 WebContainer APIそしてクロード・ソネット3.5そしてリミックス 歌で応える AI SDK.

WebContainer API

ボルト使用 ウェブコンテナ 生成されたコードをブラウザーで実行する。WebContainersはフルスタックのサンドボックス環境を提供する。 WebContainer API WebContainersは、フルスタックアプリケーションをブラウザで直接実行することを可能にし、AIエージェントをクラウドでホスティングすることによるコストやセキュリティの懸念を回避します。WebContainersはインタラクティブで編集可能なため、BoltのAIはコードを実行し、ユーザーによる変更を理解することができます。

WebContainer API 個人使用やオープンソースプロジェクトには無料です。商用アプリケーションを作成する場合は、私たちの WebContainer APIを商用利用する場合の料金詳細.

リミックス・アプリケーション

ボルト使用 リミックス で構築されている。 CloudFlareページ 歌で応える クラウドフレアワーカー 配備。

AI SDKの統合

ボルト使用 AI SDK AIモデルの統合。現在、ボルトはAnthropicの クロード ソネット3． 人類APIコンソール Boltで使用するAPIキーを取得します。APIキーを取得するには ボルトのAI SDKの使い方.

前提条件

作業を始める前に、以下がインストールされていることを確認してください：

• Node.js (v20.15.1)
• pnpm (v9.4.0)

セットアップ手順

1. コードリポジトリをクローンする（まだクローンしていない場合）：

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

2. 依存関係をインストールします：

pnpmインストール

3. Supabase AuthとProvidersを設定する：

• Supabaseで新しいプロジェクトを作成し、新しい匿名キー（anon key）を生成する。
• 匿名キーを .env.local ドキュメンテーション
• SupabaseのURLを .env.local ドキュメンテーション
• Supabaseプロバイダー（Google、GitHubなど）の設定。

4. ルート・ディレクトリの作成 .env.local ファイルを開き、Anthropic APIキーを追加してください：

ANTHROPIC_API_KEY=your_api_key
TOGETHER_API_KEY=your_api_key

# SUPABASE
SUPABASE_URL=your_supabase_url
SUPABASE_ANON_KEY=your_anon_key
#クライアントスーパーベース
VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_anon_key

# NETLIFY
NETLIFY_AUTH_TOKEN=あなたのAUTH_TOKEN
NETLIFY_CLIENT_SECRET=your_client_secret
VITE_NETLIFY_CLIENT_ID=your_client_id

オプション：デバッグ・レベルを設定する：

VITE_LOG_LEVEL=debug

重要な注意事項を置かないでください。 .env.local ファイルをバージョン管理にコミットする。このファイルは .gitignore 真ん中だ。

Together AI にカスタム・モデルを追加する

追加する 一緒に AIのカスタムモデルは、以下のように追加することができる。 app/components/chat/ProviderSelector.tsx ドキュメンテーション

const togetherModels = [
'meta-llama/Meta-Llama-3.1-405B-Instruct-Turbo'、
'meta-llama/Meta-Llama-3.1-70B-Instruct-Turbo'、
'mistralai/Mixtral-8x7B-Instruct-v0.1'、
'... ここにモデルを追加する...'
];

利用可能なスクリプト

• pnpm run dev開発用サーバーを起動します（ローカルでテストする場合は、Chrome Canaryを推奨します）。
• pnpm run buildプロジェクトを構築する。
• pnpm run startWrangler Pages を使ってビルドしたアプリケーションをローカルで実行します。このスクリプトは バインディング.sh 環境変数の設定が重複しないように、必要なバインディングを設定する。
• pnpm実行プレビュー本番環境のビルドをテストするためにプロジェクトをビルドした後、ローカルで開始します。HTTPストリーミングは ラングラーページ開発 が正しく機能しない可能性がある。
• pnpmテストVitest でテストスイートを実行します。
• pnpm run typecheckTypeScript の型チェックを実行します。
• pnpm run typegenTypeScriptの型を生成するにはWranglerを使う。
• pnpm run deployプロジェクトをビルドし、Cloudflare Pagesにデプロイします。

しぼる

開発サーバーを起動する：

pnpm run dev

これでRemix Vite Development Serverが起動します。

試験

テスト・スイートを実行する：

pnpmテスト

展開

アプリケーションをCloudflare Pagesにデプロイします：

pnpm run deploy

必要なパーミッションがあり、WranglerがCloudflareアカウントを適切に設定していることを確認してください。

詳細な機能操作の流れ

1. npmツールとライブラリのインストールと実行
   • プロジェクト作成時に、Vite、Next.jsなど、必要なnpmツールとライブラリを選択する。
   • ビルトインパッケージマネージャーを使用して依存関係をインストールし、プロジェクト環境が正しく設定されていることを確認する。
2. Node.jsサーバーの実行
   • Node.jsが提供する機能を使用するコードエディタでバックエンドのコードを書く。
   • サーバーを起動し、バックエンド・サービスがどのように動作しているかをリアルタイムで確認する。
3. サードパーティAPIとの対話
   • 決済インターフェース、地図サービスなどのサードパーティAPIをプロジェクトに統合する。
   • 組み込みのAPI管理ツールを使用して、外部サービスとの対話プロセスを簡素化します。
4. チャットから本番環境へのデプロイ
   • チャット・インターフェースでdeployコマンドを入力すると、システムは指定された本番環境にアプリケーションを自動的にデプロイします。
   • デプロイが完了すると、アプリケーションのアクセス URL が生成され、簡単にアクセスしてテストできるようになります。
5. URLで作品を共有する
   • プロジェクト終了後、プロジェクトのアクセスURLを生成します。
   • プロジェクトのコラボレーションやフィードバックのために、チームメンバーとURLを共有。
6. 環境制御
   • AIモデルは、ファイルシステム、ノードサーバー、パッケージマネージャー、ターミナル、ブラウザーコンソールを含む開発環境を完全にコントロールできる。
   • ユーザーは簡単なコマンドで複雑な環境設定や管理を行うことができる。
7. モバイル・レスポンス
   • このプロジェクトは、デフォルトでモバイルデバイス用のレスポンシブデザインをサポートしており、デバイス間で一貫した表示を保証します。
   • ユーザーは、必要に応じてモバイル・レスポンスのレイアウトやスタイルをカスタマイズできる。
8. 音声入力
   • 音声入力機能をプロジェクトに統合し、ユーザーとのインタラクション体験を強化する。
   • 内蔵の音声認識ツールを使用して、音声をテキストに変換し、その後の処理に使用します。

AIを始めるための素人ガイド

AIツールの活用方法を、低コスト・ゼロベースから学ぶことができます。AIはオフィスソフトと同様、誰にとっても必須のスキルです。 AIをマスターすれば、就職活動で有利になり、今後の仕事や勉強の労力も半減します。

詳細を見る