メインコンテンツへ移動
AIチュートリアル

Liveblocksでマルチプレイヤー対応のJevとLLMワークフロービルダーを構築する

Jevワークフロービルダーのデモをインストールし、Liveblocks、Typesafe、Vercel AI Gatewayの認証情報を設定して開発サーバーを起動する方法を学びます。JevとLLMを接続するワークフローの構築、テスト実行のプレビュー、REST APIによるワークフローの呼び出し、マルチプレイヤーのプレゼンスとカーソルについても解説します。

約7分で読了
Liveblocksでマルチプレイヤー対応のJevとLLMワークフロービルダーを構築する

Jevワークフロービルダーの概要

Jevワークフロービルダーは、マルチプレイヤーAIワークフローを作成するためのデモアプリケーションです。Jevと大規模言語モデルを組み合わせ、Liveblocksを使用して共有状態と共同編集カーソルを提供します。

アプリケーションを起動すると、JevとLLMを接続し、ワークフローのテスト実行をプレビューし、REST API経由でワークフローを呼び出し、同じ共同編集環境で作業する他の参加者を確認できます。

主な機能

  • ビジュアルワークフロー構築: JevとLLMコンポーネントを接続してワークフローを作成できます。
  • マルチプレイヤー共同編集: Liveblocksを通じて、共有アプリケーション状態と他のユーザーのカーソルを確認できます。
  • ワークフローのテスト: 外部からワークフローを呼び出す前に、テスト実行をプレビューできます。
  • REST APIアクセス: 設定済みのワークフローをプログラムから呼び出せます。
  • AIサービス連携: それぞれのAPI認証情報を使用して、TypesafeとVercel AI Gatewayを利用できます。

前提条件

プロジェクトをセットアップする前に、Node.jsとnpmがマシンで利用できることを確認してください。また、このデモで使用する3つの外部サービスのアカウントも必要です。

インストールとセットアップ

1. 依存関係をインストールする

プロジェクトのルートでターミナルを開き、必要なパッケージをすべてインストールします。

npm install

2. Liveblocksのシークレットキーを取得する

  1. Liveblocksダッシュボードでアカウントを作成するか、サインインします。
  2. APIキーのページを開きます。
  3. secretキーをコピーします。

3. Typesafe APIキーを取得する

  1. typesafe.aiでアカウントを作成するか、サインインします。
  2. Typesafeキーコンソールを開きます。
  3. APIキーをコピーします。

4. Vercel AI Gatewayキーを取得する

  1. Vercelでアカウントを作成するか、サインインします。
  2. Vercel AI Gatewayダッシュボードを開きます。
  3. AI Gatewayキーをコピーします。

5. 環境変数を設定する

プロジェクトのルートに.envという名前のファイルを作成します。アプリケーションが想定する環境変数名を使用して、3つの認証情報を追加します。

LIVEBLOCKS_SECRET_KEY=your_liveblocks_secret_key
TYPESAFE_API_KEY=your_typesafe_api_key
AI_GATEWAY_API_KEY=your_vercel_ai_gateway_key

各プレースホルダーを対応するキーに置き換えます。このファイルには外部サービスへのアクセスを許可できる認証情報が含まれるため、非公開にしてください。

6. 開発サーバーを起動する

ローカル開発コマンドを実行します。

npm run dev

サーバーの準備ができたら、ブラウザーでhttp://localhost:3000を開きます。

基本的な使い方

ワークフローを構築する

ビルダーインターフェースを使用して、JevとLLMコンポーネントを接続します。テストしたい動作に合わせて、利用可能なワークフロー要素を配置し、接続します。

テスト実行をプレビューする

ワークフローのプレビュー機能を使用して、アプリケーションからテストを実行します。実行をプレビューすると、ビルダー内で作業を続けながらワークフローの動作を確認できます。

REST API経由でワークフローを呼び出す

このデモでは、REST API経由でワークフローを呼び出せます。リクエストを送信するときは、プロジェクトで公開されているAPIの詳細を使用してください。READMEには固定のエンドポイント、HTTPメソッド、リクエストスキーマが指定されていないため、一般的な形式を想定せず、実行中のアプリケーションが必要とするルートとペイロードを使用してください。

マルチプレイヤー共同編集を試す

複数の参加者でアプリケーションを開き、共同編集機能を確認します。Liveblocksはマルチプレイヤー状態を同期してカーソルを表示するため、共有ワークフロー環境で他のユーザーの操作を確認できます。

高度なヒント

認証情報を保護する

シークレット値をソースファイルに直接記載したり、クライアント側の例で公開したりしないでください。.envに保存し、そのファイルを共有しないようにします。誤って公開した場合は、プロバイダーのダッシュボードからキーをローテーションしてください。

サービスごとに設定を確認する

アプリケーションは起動するものの機能が動作しない場合は、各環境変数が存在し、正しい認証情報が設定されていることを確認してください。Liveblocksはマルチプレイヤー機能を提供し、TypesafeとVercel AI GatewayのキーはプロジェクトのAI関連連携を支えます。

環境変数の編集後に再起動する

開発サーバーの実行中にキーを追加または置き換えた場合は、npm run devを停止して再起動し、アプリケーションに環境設定を再読み込みさせます。

ワークフロー実行とは別に共同編集をテストする

まず、複数の参加者に共有状態とカーソルが表示されることを確認します。次に、ワークフローのプレビューとREST API呼び出しをテストします。これらの領域を個別に確認すると、設定の問題を特定しやすくなります。

プレビュー実行で反復する

JevとLLMコンポーネントの接続方法を調整する際は、プレビュー実行を使用してください。ビルダーでワークフローが期待どおりに動作することを確認したら、REST API経由での呼び出しに進みます。

まとめ

Jevワークフロービルダーは、AIワークフローの構築、RESTベースの実行、テスト用プレビュー、リアルタイムコラボレーションを1つのアプリケーションに統合する方法を示します。依存関係をインストールし、必要な3つのサービスキーを設定すれば、プロジェクトをローカルで実行し、JevとLLMのワークフローを組み立て、同期された状態やマルチプレイヤーのカーソルを確認できます。