ここで試してみましょう
Open Canvas は、エージェントと協力してドキュメントをより適切に作成するためのオープンソース Web アプリケーションです。これは OpenAI の「Canvas」からインスピレーションを得ていますが、いくつかの重要な違いがあります。
オープン ソース: フロントエンドからコンテンツ生成エージェント、リフレクション エージェントに至るすべてのコードはオープン ソースであり、MIT ライセンスが付与されています。
内蔵メモリ: Open Canvas には、スタイル ルールとユーザーの洞察を共有メモリ ストアに保存するリフレクション エージェントが標準で付属しています。これにより、Open Canvas はセッション全体にわたってユーザーに関する事実を記憶できるようになります。
既存のドキュメントから開始: Open Canvas を使用すると、ユーザーは空白のテキストまたは選択した言語のコード エディターから開始できるため、チャット インタラクションから強制的に開始するのではなく、既存のコンテンツからセッションを開始できます。多くの場合、開始するコンテンツがすでにあり、その上で反復処理を行う必要があるため、これが理想的な UX であると私たちは考えています。
メモリ: Open Canvas には、あなたとチャット履歴に関する反映と記憶を自動的に生成するメモリ システムが組み込まれています。これらはその後のチャットのやり取りに組み込まれ、よりパーソナライズされたエクスペリエンスが提供されます。
カスタム クイック アクション: カスタム クイック アクションを使用すると、ユーザーに関連付けられ、セッション間で持続する独自のプロンプトを定義できます。これらは 1 回のクリックで簡単に呼び出すことができ、現在表示しているアーティファクトに適用できます。
事前構築されたクイック アクション: いつでも使用できる、一般的な書き込みおよびコーディング タスク用の一連の事前構築されたクイック アクションもあります。
アーティファクトのバージョン管理: すべてのアーティファクトには「バージョン」が関連付けられているため、過去に戻ってアーティファクトの以前のバージョンを確認できます。
コード、マークダウン、またはその両方: アーティファクト ビューでは、コードとマークダウンの両方を表示および編集できます。コードやマークダウン アーティファクトを生成するチャットを実行したり、それらを切り替えることもできます。
ライブ マークダウン レンダリングと編集: Open Canvas のマークダウン エディターを使用すると、編集中に前後に切り替えることなく、レンダリングされたマークダウンを表示できます。
opencanvas.langchain.com にアクセスすると、デプロイされたバージョンを無料で使用できます。
または
このリポジトリのクローンを作成して、ローカルで実行したり、独自のクラウドにデプロイしたりできます。これを行う手順については、次のセクションを参照してください。
Open Canvas の実行または開発は簡単です。まず、このリポジトリのクローンを作成し、ディレクトリに移動します。
git clone https://github.com/langchain-ai/open-canvas.gitcd open-canvas
次に、Yarn 経由で依存関係をインストールします。
糸のインストール
次に、グラフをローカルで実行するために必要な LangGraph Studio をインストールするか、LangSmith アカウントを作成して LangGraph Cloud の実稼働環境にデプロイします。
その後、 .env.example
ファイルの内容を.env
にコピーし、必要な値を設定します。
# LangSmith トレースLANGCHAIN_TRACING_V2=true LANGCHAIN_API_KEY=# LLM API キー# リフレクションに使用される Anthropic ANTHROPIC_API_KEY=# コンテンツ生成に使用される OpenAIOPENAI_API_KEY=# LangGraph デプロイメント、または LangGraph Studio 経由のローカル開発サーバー。# ローカルで実行する場合、この URL は `constants.ts` ファイルに設定する必要があります。 # LANGGRAPH_API_URL=# 認証用の Supabase# パブリックキーNEXT_PUBLIC_SUPABASE_URL= NEXT_PUBLIC_SUPABASE_ANON_KEY=
最後に、開発サーバーを起動します。
糸開発
次に、ブラウザで localhost:3000 を開いて対話を開始します。
ここで、Open Canvas をローカルでセットアップする方法に関する短い (2 分) ビデオ ウォークスルーを視聴することもできます。
Open Canvas は、あらゆる LLM モデルと互換性があるように設計されています。現在の展開には次のモデルが構成されています。
人間性クロード 3 俳句 ? : Haiku は Anthropic の最速モデルで、ドキュメントの編集などの素早いタスクに最適です。こちらから Anthropic アカウントにサインアップしてください。
花火ラマ 3 70B ? : Llama 3 は、Fireworks AI を搭載した Meta の SOTA オープンソース モデルです。ここでアカウントにサインアップできます。
OpenAI GPT 4o ミニ? : GPT 4o Mini は、OpenAI の最新かつ最小のモデルです。ここで API キーにサインアップできます。
新しいモデルを追加する場合は、次の簡単な手順に従ってください。
constants.ts
のモデルプロバイダー変数を追加または更新します。
プロバイダーに必要なパッケージ (例: @langchain/anthropic
) をインストールします。
src/agent/utils.ts
のgetModelNameAndProviderFromConfig
関数を更新して、新しいモデル名とプロバイダーを含めます。
手動でテストして次のことができるかどうかを確認します。
4a.新しいアーティファクトを生成する
4b.フォローアップ メッセージを生成します (アーティファクトの生成後に自動的に発生します)。
4c.チャットのメッセージを通じてアーティファクトを更新する
4d。クイックアクションでアーティファクトを更新する
4e.テキスト/コードに対して繰り返します (両方が機能することを確認します)
以下は、近い将来 Open Canvas に追加したい機能のリストです。
エディターで React をレンダリングする: 理想的には、Open Canvas で React (または HTML) コードを生成する場合、エディターでライブでレンダリングできるはずです。追記:現在企画中です!
複数のアシスタント: ユーザーは、それぞれが独自のメモリ ストアを持つ複数のアシスタントを作成できる必要があります。
アシスタントにカスタム 'ツール' を与える: LangGraph.js にRemoteGraph
実装したら、ユーザーはアシスタントに独自のグラフをツールとして呼び出すためのアクセス権を与えることができるはずです。これは、現在のイベントや個人のナレッジ グラフなどにアクセスできるようにアシスタントをカスタマイズできることを意味します。
機能のリクエストはありますか?問題を開いてください。
私たちは Open Canvas の開発と改善を続けていきたいと考えており、皆さんのご協力をお待ちしています。
まず、アプリの UX をさらに向上させるための改善と追加の概要を説明する機能リクエストに関する GitHub の問題がいくつかあります。主要なラベルは 3 つあります。
frontend
: このラベルは UI に焦点を当てた問題に追加され、エージェントでの作業はあまり必要ありません。
ai
: このラベルは、LLM エージェントの改善に焦点を当てた問題に追加されます。
fullstack
: このラベルは、フロントエンド コードとエージェント コードの両方に触れる必要がある問題に追加されます。
貢献についてご質問がある場合は、メールでご連絡ください: brace(at)langchain(dot)dev
。コードに関する一般的なバグ/問題については、GitHub で問題を作成してください。