MCPInstall

graph-viewer

by cognitedataAI & Agents

Integrate the reusable CDF graph viewer (useGraphViewer) into a Dune app by copying the local code bundle. Use when embedding a graph visualization, adding a knowledge graph, or showing CDF data model relationships and instances.

Installs
148
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/cognitedata/dune-skills --skill graph-viewer
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads graph-viewer automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Graph Viewer

Use This When

The user wants to embed an interactive graph of a CDF data model — nodes, direct relations, edges, and reverse relations — inside a Dune app.

Do not use this skill for static diagrams, pure dataflow visualizations, or non-CDF graphs.

Prerequisites

  • The app is wrapped in @cognite/dune's <DuneProvider> so useDune() returns an authenticated SDK.
  • The target data model exists in CDF and you know its space, externalId, and version.
  • The app uses React 18+ and TypeScript.

Integration Workflow

Follow these steps in order. Adapt to the target repo's conventions instead of inventing new ones.

  1. Inspect the target app. Read package.json and look at the existing folder structure (e.g. src/features/*, src/components/*, path aliases like @/*).

  2. Install missing dependencies with the app's package manager (npm, pnpm, yarn, …). See the Dependencies table below for purposes and suggested versions. Reuse the React version already pinned by the app rather than upgrading it, and prefer any versions the repo already pins over the suggestions here.

  3. Copy the bundle into the app. Copy every file from skills/graph-viewer/code/ into an app-local feature folder, for example:

    src/features/graph-viewer/

    If the repo already has a different feature/components layout or alias, mirror it.

  4. Import from the local folder, never from @skills/.... With a typical @/* alias:

    import { useGraphViewer } from "@/features/graph-viewer";

  5. Render GraphCanvas inside a container with explicit dimensions (height is required — see the minimal example below).

  6. Run typecheck and build (tsc --noEmit, npm run build, etc.) and fix any path or type issues introduced by the copy.

Minimal Example

import { useGraphViewer } from "@/features/graph-viewer";

export function GraphPanel() {
  const { GraphCanvas, isLoading, error } = useGraphViewer({
    dataModel: { space: "my-space", externalId: "my-data-model", version: "1" },
    instance: { space: "my-instance-space", externalId: "pump-001" },
  });

  if (isLoading) return <div>Loading graph…</div>;
  if (error) return <div>Error: {error}</div>;

  return <GraphCanvas className="h-[600px] w-full" />;
}

Dependencies

Suggested versions reflect the latest published majors at the time of writing. They are starting points — if the target app already pins different versions, defer to the app.

PackageSuggested versionPurpose
react^18.2.0UI framework (peer; reuse the app's version)
@cognite/sdk^10.10.0CDF API client (instances, data models)
@cognite/dune^2.1.0Provides the authenticated SDK via useDune()
reagraph^4.30.8WebGL graph rendering engine
lucide-react^1.14.0Icon set used by the node-type legend

Example install (npm; adapt to the app's package manager):

npm install @cognite/sdk@^10.10.0 @cognite/dune@^2.1.0 reagraph@^4.30.8 lucide-react@^1.14.0

CDF Cost & Performance

Graph expansion can issue many CDF requests, especially with reverse relations. For large or unfamiliar data models, be conservative:

  • Set whitelistedRelationProps to the few properties the app actually needs to traverse.
  • Lower initialConnectionLimit (it is a hard maximum of connections fetched per expansion).
  • Lower maxNodes to bound the in-memory LRU buffer.
  • Only declare coreReverseQueries for relations the app must surface; each entry adds an extra query per expansion.

Tuples in coreReverseQueries are version-aware: [space, viewExternalId, viewVersion, propertyName, isList].

Advanced Reference

For full configuration tables, return-value docs, layouts, theming, and richer examples, read code/README.md.

For implementation details, inspect the source files under code/.

Verification Checklist

  • The app is wrapped in <DuneProvider>.
  • All files from skills/graph-viewer/code/ were copied into an app-local folder.
  • Imports point to the app-local folder (e.g. @/features/graph-viewer), not @skills/....
  • @cognite/dune, @cognite/sdk, reagraph, and lucide-react are present in package.json.
  • The container that renders <GraphCanvas> has an explicit height.
  • tsc --noEmit and the app's build both pass.
  • No references to dune-industrial-components were introduced.

FAQ

What does the graph-viewer skill do?

Integrate the reusable CDF graph viewer (useGraphViewer) into a Dune app by copying the local code bundle. Use when embedding a graph visualization, adding a knowledge graph, or showing CDF data model relationships and instances.

How do I install graph-viewer?

Run npx skills add https://github.com/cognitedata/dune-skills --skill graph-viewer in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/graph-viewer/ (personal) or .claude/skills/graph-viewer/ (project).

Which AI agents can use graph-viewer?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is graph-viewer safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains graph-viewer?

It is published by cognitedata in cognitedata/dune-skills. It has 148 recorded installs.

More from cognitedata/dune-skills

View all →

code-quality

cognitedata/dune-skills

MUST be used whenever reviewing a Dune app for code quality, maintainability, or clean code issues — before a PR review, after a feature is complete, or when the user asks for a code review. Do NOT skip linting steps. Triggers: code quality, code review, clean code, refactor, maintainability, technical debt, any type, naming, dead code, duplication, DRY, single responsibility, component size, lint, linting, TypeScript strict, dependency injection, file structure.

Code Quality & Workflow343 installs

design

cognitedata/dune-skills

Open the skill to read its SKILL.md instructions.

341 installs

skill-creator

cognitedata/dune-skills

Open the skill to read its SKILL.md instructions.

AI & Agents341 installs

create-client-tool

cognitedata/dune-skills

MUST be used whenever creating an AtlasTool (client-side tool) for an Atlas agent. Do NOT manually write AtlasTool definitions or wire them into useAtlasChat — this skill handles the TypeBox schema, execute function, and hook wiring. This includes tools that fetch data, render UI, call APIs, show charts, query local state, or perform any browser-side action. Triggers: AtlasTool, client tool, add tool, create tool, new tool, tool definition, agent tool.

Frontend & Design340 installs

dune-app-review

cognitedata/dune-skills

Open the skill to read its SKILL.md instructions.

Code Quality & Workflow338 installs

integrate-atlas-chat

cognitedata/dune-skills

Open the skill to read its SKILL.md instructions.

338 installs

Popular ai & agents skills

View category →

google-agents-cli-publish

google/agents-cli

This skill should be used when the user wants to "publish an agent", "publish my ADK agent", "register an agent with Gemini", "publish to Gemini" (formerly Gemini Enterprise), or needs guidance on the agents-cli publish gemini command. Also use when the user wants to "manage agents in Agent Registry", "list/update/delete registered agents", or "register an MCP server". Covers ADK vs A2A registration modes, programmatic and interactive usage, flag reference, auto-detection from deployment metadata, Agent Registry fleet management, and troubleshooting. Part of the agents-cli skills suite. Do NOT use for deployment (use google-agents-cli-deploy).

AI & Agents513.9K installs

google-agents-cli-eval

google/agents-cli

This skill should be used when the user wants to "run an evaluation", "evaluate my agent", "evaluate my ADK agent", "write an eval dataset", "analyze eval failures", "compare eval results", "optimize agent", or needs guidance on the Gemini platform eval methodology and the Quality Flywheel. Covers eval metrics, dataset schema, LLM-as-judge scoring, and common failure causes. Applies to any agents-cli project, whatever framework the agent is written in. Do NOT use for agent API code patterns (ADK: use google-agents-cli-adk-code), deployment (use google-agents-cli-deploy), or project scaffolding (use google-agents-cli-scaffold).

AI & Agents513.5K installs

skill-creator

anthropics/skills

Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.

OfficialAI & Agents416.4K installs

codex-pet

prime-skills/runcomfy-agent-skills

Codex Pet generator on RunComfy. Build a Codex-compatible Codex Pet spritesheet.webp + pet.json from a single reference image, drop it into ${CODEXHOME:-$HOME/.codex}/pets/ / and Codex picks it up as a custom Codex Pet next to the 8 built-ins. This skill produces the exact Codex Pet atlas Codex expects (1536x1872 PNG/WebP, 8 cols x 9 rows, 192x208 cells, 9 animation states — idle, running-right, running-left, waving, jumping, failed, waiting, running, review). Calls OpenAI GPT Image 2 edit ONCE via the local RunComfy CLI as runcomfy run openai/gpt-image-2/edit to produce a canonical Codex Pet pose, then assembles all 9 animation rows programmatically with ImageMagick micro-transforms — no Codex Pro, no $imagegen, no OPENAIAPIKEY required, only RUNCOMFYTOKEN. Triggers on "codex pet", "create codex pet", "make codex pet", "hatch codex pet", "/hatch image", "desktop pet codex", "codex pets", "spritesheet.webp", or any explicit ask to build a custom pet for OpenAI Codex.

AI & Agents402.1K installs

full-output-enforcement

leonxlnx/taste-skill

Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.

AI & Agents401K installs

executing-plans

obra/superpowers

Use when executing an implementation plan in the current session as the implementer yourself — your human partner chose inline execution, or no subagent tool is available

AI & Agents245.7K installs