integrate-atlas-chat

Atlas Agent チャットを統合する

この Dune アプリに、ストリーミング対応の Atlas Agent チャット UI を追加します。

エージェントの外部 ID：$ARGUMENTS

作業内容

以下の手順を順番に完了してください。変更する前に各ファイルを読んでください。

---

ステップ 1 — アプリを理解する

作業を始める前に、以下のファイルを読んでください。

• package.json — パッケージマネージャー（packageManager フィールドまたはロックファイル）と既存の依存関係を確認します
• src/App.tsx（または同等のエントリーコンポーネント）— 現在の構造を把握します

---

ステップ 2 — 依存関係をインストールする

アプリのパッケージマネージャーを使って、パッケージと必要なピア依存関係をインストールします。

• pnpm → pnpm add "github:cognitedata/dune-industrial-components#semver:*" @sinclair/typebox ajv ajv-formats
• npm → npm install "github:cognitedata/dune-industrial-components#semver:*" @sinclair/typebox ajv ajv-formats
• yarn → yarn add "github:cognitedata/dune-industrial-components#semver:*" @sinclair/typebox ajv ajv-formats

---

ステップ 3 — チャットコンポーネントを作成する

メインの App.tsx を、チャット UI 全体に置き換える（または新規作成する）必要があります。コンポーネントには以下が必要です。

1. インポートする：@cognite/dune-industrial-components/atlas-agent/react から useAtlasChat と ChatMessage をインポートします
2. SDK を取得する：@cognite/dune の useDune() を使います
3. 読み込み中は null を渡す：client: isLoading ? null : sdk
4. ストリーミング中のテキストを表示する：msg.isStreaming を使ってリアルタイムに表示し、点滅カーソルを付けます
5. ツール呼び出しイベントを表示する：progress.startsWith("Executing:") の場合、区別できるように（例：⚙ アイコンと等幅フォントのツール名で）表示します
6. ツール呼び出しを表示する：ストリーミング完了後、各アシスタントの message.toolCalls をメッセージの下に展開可能なカードとして表示します
7. 中止ボタン：isStreaming の間は「Stop」ボタンを表示し、abort() に接続します
8. リセットボタン：reset() に接続した「New chat」ボタンを表示します
9. 自動スクロール：新しいメッセージや進行状況の更新時に、最下部までスクロールします
10. テキストエリアを自動リサイズする：最大約 120px まで拡張し、Enter で送信、Shift+Enter で改行します

主なフック API

import { useAtlasChat } from "@cognite/dune-industrial-components/atlas-agent/react";
import type { ChatMessage } from "@cognite/dune-industrial-components/atlas-agent/react";

const { messages, send, isStreaming, progress, error, reset, abort } = useAtlasChat({
  client: isLoading ? null : sdk,   // null-safe — hook waits for a real client
  agentExternalId: "...",
  tools?: AtlasTool[],              // optional client-side tools
});

// messages[n].role          — "user" | "assistant"
// messages[n].text          — full text (streams chunk-by-chunk via isStreaming)
// messages[n].isStreaming   — true while this message is being written
// messages[n].toolCalls     — ToolCall[] once response is complete (client + server-side, in call order)
// progress                  — e.g. "Agent thinking" or "Executing: get_timeseries"
// isStreaming               — true for the entire duration of a response

ツール呼び出しの表示パターン

// During streaming — show as a distinct "tool call" bubble above the message
{isStreaming && progress?.startsWith("Executing:") && (
  <div>⚙ {progress}</div>
)}

// After response — show tool calls on the assistant message
{msg.toolCalls?.map((tc, i) => (
  <ToolResult key={i} name={tc.name} output={tc.output} details={tc.details} />
))}

---

ステップ 4 — Python ツール（任意）

エージェントに Python ツールがある場合（CDF 設定で runPythonCode の型を指定）、setup-python-tools スキルを実行して、Pyodide ベースのクライアント側実行機能を追加します。

/setup-python-tools $ARGUMENTS

このスキルは pyodide をインストールし、usePyodideRuntime を設定して、pythonRuntime 経由でランタイムを useAtlasChat に接続します。このライブラリはエージェント設定から Python ツールのコードを自動的に取得するため、PythonToolConfig のエントリーは不要です。

エージェントが組み込みツールまたは通常のクライアントツールのみを使う場合は、この手順は不要です。

---

完了

アプリを起動すると、Atlas Agent $ARGUMENTS に接続されたストリーミング対応のチャット UI が表示されます。