Integrate Atlas Agent Chat Add a streaming Atlas Agent chat UI to this Dune app. Agent external ID: $ARGUMENTS Your job Complete these steps in order. Read each file before modifying it. Step 1 — Understand the app Read these files before touching anything: package.json — detect package manager ( packageManager field or lock file) and existing deps src/App.tsx (or equivalent entry component) — understand current structure Step 2 — Install dependencies Install the package and its required peer deps using the app's package manager: 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 Step 3 — Build the chat component Replace (or create) the main App.tsx with a full chat UI. The component must: Import useAtlasChat and ChatMessage from @cognite/dune-industrial-components/atlas-agent/react Get the SDK via useDune() from @cognite/dune Pass null while loading — client: isLoading ? null : sdk Show streaming text in real time using msg.isStreaming with a blinking cursor Show tool call events — when progress.startsWith("Executing:") , render it distinctly (e.g. a ⚙ icon + monospace tool name) so tool calls are clearly visible Show tool calls — each assistant message.toolCalls (after streaming completes) should appear as expandable cards beneath the message Abort button — show a "Stop" button while isStreaming , wired to abort() Reset button — "New chat" button wired to reset() Auto-scroll — scroll to bottom on new messages and progress updates Auto-resize textarea — expand up to ~120px, submit on Enter, newline on Shift+Enter Key hook 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 Tool call display pattern // 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 } /> ) ) } Step 4 — Python tools (optional) If the agent has Python tools (type runPythonCode in its CDF config), run the setup-python-tools skill to add Pyodide-based client-side execution: /setup-python-tools $ARGUMENTS That skill installs pyodide , sets up usePyodideRuntime , and wires the runtime into useAtlasChat via pythonRuntime . The library fetches Python tool code from the agent config automatically — no PythonToolConfig entries needed. You don't need this if the agent only uses built-in or regular client tools. Done Start the app and you should see a streaming chat UI connected to Atlas Agent $ARGUMENTS .