OpenGenerativeUI CLAUDE.md

Project guidance for a CopilotKit and LangGraph todo-list example, where an AI agent and a person can change the same live task list. It is organized as a Turborepo monorepo, meaning one repository containing several related apps.

In plain words
What is it for?
Use it when developing the demo's Next.js app, agent-driven todo actions, shared state, or CopilotKit API integration.
Why use it?
It explains how the agent, frontend, and shared task state fit together, making changes less likely to break synchronization between them.

Instructions file

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add instructions/copilotkit/opengenerativeui/claude-md
Clone the repo
git clone --depth 1 https://github.com/CopilotKit/OpenGenerativeUI
Per session 2,348 This file is loaded in full into every session.
When invoked 2,348 The same file — it is already loaded in full.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.02348 $0.02348
Opus 5 $0.01174 $0.01174
Sonnet 5 $0.00470 $0.00470
Haiku 4.5 $0.00235 $0.00235

Measured 2d ago against content hash 0d9e1b799b3e, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

OpenGenerativeUI CLAUDE.md scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

Origin

Copies of this mod

1 near-identical copy found in the catalogue:

CLAUDE.md · 287 lines

How it starts

The opening of the file, as written. The whole thing — 287 lines — stays where its author put it; the contents beside it link to each section on GitHub.

CopilotKit + LangGraph Todo Demo

Purpose

This repository serves as both a showcase and template for building AI agents with CopilotKit and LangGraph. It demonstrates how CopilotKit can drive interactive UI beyond just chat, using a collaborative todo list as the primary example.

Target audience: Developers evaluating CopilotKit or starting new projects with AI agents.

Core Concept

The todo list demonstrates agent-driven UI where:

  • The agent can manipulate application state (adding todos, updating status, organizing tasks)
  • Users can interact with the same state (editing titles, checking off tasks, deleting todos)
  • Both agent and user changes update the same shared state
  • The UI reactively updates based on agent state changes

This uses CopilotKit's v2 agent state pattern where state lives in the agent and syncs to the frontend.

Architecture

This is a Turborepo monorepo with three apps:

Repository Structure

apps/
├── app/                         # Next.js frontend
│   ├── src/
│   │   ├── app/
│   │   │   ├── page.tsx        # Main page - wires up all components
│   │   │   └── api/copilotkit/ # CopilotKit API route
│   │   ├── components/
│   │   │   ├── canvas/         # Todo list UI
│   │   │   │   ├── index.tsx   # Canvas container
│   │   │   │   ├── todo-list.tsx    # Todo list with columns
│   │   │   │   ├── todo-column.tsx  # Column (pending/completed)
│   │   │   │   └── todo-card.tsx    # Individual todo card
│   │   │   ├── example-layout/ # Layout: chat + canvas side-by-side
│   │   │   └── generative-ui/  # Example generative UI components
│   │   └── hooks/
│   │       ├── use-generative-ui-examples.tsx  # Example CopilotKit patterns
│   │       └── use-example-suggestions.tsx     # Chat suggestions
├── agent/                       # LangGraph Python agent
│   ├── main.py                  # Agent entry point
│   └── src/
│       ├── todos.py             # Todo tools and state schema
│       └── query.py             # Example data query tool
└── mcp/                         # MCP (Model Context Protocol) integration

Read the full file on GitHub · 287 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 2d ago First seen · 287 lines · 2,348 tokens per session scan A 0d9e1b799b3e

Subscribe to this mod's changes

OpenGenerativeUI CLAUDE.md is an instructions file published in the GitHub repository CopilotKit/OpenGenerativeUI (1,534 stars, last pushed 2mo ago), licensed MIT. It adds 2,348 tokens to every session, about $0.0117 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.