Integrate Atlas Agent Chat

Your job

Step 1 — Understand the app

• 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

• 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

App.tsx

1. Import

   useAtlasChat

   and

   ChatMessage

   from

   @cognite/dune-industrial-components/atlas-agent/react

2. Get the SDK via

   useDune()

   from

   @cognite/dune

3. Pass

   null

   while loading —

   client: isLoading ? null : sdk

4. Show streaming text in real time using

   msg.isStreaming

   with a blinking cursor
5. Show tool call events — when

   progress.startsWith("Executing:")

   , render it distinctly (e.g. a ⚙ icon + monospace tool name) so tool calls are clearly visible
6. Show tool calls — each assistant

   message.toolCalls

   (after streaming completes) should appear as expandable cards beneath the message
7. Abort button — show a "Stop" button while

   isStreaming

   , wired to

   abort()

8. Reset button — "New chat" button wired to

   reset()

9. Auto-scroll — scroll to bottom on new messages and progress updates
10. 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)

runPythonCode

setup-python-tools

/setup-python-tools $ARGUMENTS

pyodide

usePyodideRuntime

useAtlasChat

pythonRuntime

PythonToolConfig

Done

$ARGUMENTS