Maxim
25817605cc
Fixes the six defects a 12-agent review found in the banking skin, by
fixing the thing that caused most of them: the skin had **three
disagreeing answers to "what did we spend"**.
| Source | Total | Drove |
|---|---|---|
| `charges-data.ts` fixture (45 rows, Apr–Jun) | $632,806 | the Charges
page |
| `seed.json` ledger (4 rows, **Apr–May only**) | $30,089 | the report's
**charts** |
| static `policies[].spent` | $137,000 | the report's **KPI** |
Every one of those numbers appeared in the product, and they were never
reconciled.
## The headline defect
`SpendingTrendChart` substituted a hard-coded `[3200, 4100, 3600, 5200,
4800, 6400]` / Jan–Jun series whenever fewer than three distinct months
were present. Intended as an empty state — but the ledger spanned
exactly **two** months, so the fallback was the **default path**. The
report's "Spend over time" showed six invented figures, roughly 20×
smaller than the total printed directly above them, under a card whose
own docstring reads:
> Every number is computed here from the live ledger … so a report can
never quote a figure the app disagrees with.
Reproduced in the running app before fixing (`POST
/api/banking/v1/reports`, no agent needed), and there's a nasty
interaction worth knowing: attaching an invoice dates a synthetic
transaction *today*, supplying a third month, so **attaching an invoice
masked the bug**. A test written casually would sit in the masked state
and pass.
## The fix: one ledger
The 45 charges now live in `seed.json` as real transactions across
**Apr/May/Jun**, and the Charges page reads them over REST like every
other surface.
**Team and policy are now different axes.** A charge belongs to one of
seven org teams; a policy is one of three budget envelopes (Technology /
Go-to-Market / G&A) and several teams share one. They were a single
`ExpenseRole` enum — which is exactly why covering every team meant
choosing between a seven-slice donut and discarding real charges.
`ExpenseRole` still types a member's own team; `PolicyType` types the
envelopes, joined by `policyForTeam`.
**`policies[].spent` is derived from approved charges on every read.**
It could no longer disagree with the charts — and it also now *moves*:
approving a charge previously left `spent` untouched, so the budget
never reflected the approval and the over-limit gate kept comparing
against a stale figure. Verified live: approving a \$960 charge moved
`spent` by exactly \$960.
**Over-limit is derived-only.** A charge no longer *stores*
`over-limit`; the Charges badge resolves through `withOverLimit`, the
same rule the report uses.
## The six review findings
| | Defect | Fix |
|---|---|---|
| a1 | report charted fabricated spend | charts real months; explicit
empty state at zero |
| a2 | donut its own docs said would collapse | real \$533k base — the
\$900k invoice that hit **89%** now reaches **73%**; 89% would need
~\$2.8M |
| a3 | `report` matched inside "quarterly report" | anchored both sides,
whole words |
| a4 | `as Transaction` laundered a nullable `policyId` | cast removed;
compiler checks it |
| a5 | comment claimed additions "have no policyId" | corrected — three
lines from the code that sets it |
| a6 | `?sort=banana` lit the "active" tint | params validated; unknown
reads as unset |
All six existed **identically in `examples/showcases/banking/`** — they
came from the upstream PRs this skin replayed, not from the port. Scoped
to the skin per review; banking still carries them.
## The scripted demo is unchanged by construction
- the four demo-load-bearing transactions survive byte-identical
- over-limit is still **exactly 3 charges / \$30,000**
- AWS \$15,000 still derives over-limit for the teach-mode pill
- Delta Airlines is still the only Delta charge (the fixture's
near-duplicate "Delta Air Lines" became United Airlines)
- all four status badges still appear (`Amazon Business` is kept
pending, under its policy's headroom, so a plain **Pending** chip
survives)
The donut goes 44/40/16 → **48/27/24** and is relabelled "Spend by
policy", which is what it reads.
## Verification
```
nx build react-core,a2ui-renderer,core,runtime,shared exit 0
tsc --noEmit 0 errors
vitest 239 passed (was 215)
eslint 0 problems
```
Plus live checks against a running server: 49 transactions over 3
months, derived `spent` tracking an approval, over-limit holding at
3/\$30,000.
The 24 new tests are confirmed **red** against the old code —
`parseSort("banana")` returned `"banana"`, `parseTop("-5")` returned
`-5`, the seed spanned two months, no row carried a team, and `spent`
was stored.
## Not in this PR
A "tool replay-guard sweep" (4 items, `navigateToPageAndPerform` and
three approval tools missing the resolved-state guard `showCharges` has)
and ~13 subject-neutral items are captured as follow-ups.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
CopilotKit
Build agent-native applications — on any framework, on any surface.
Generative UI, shared state, and human-in-the-loop workflows for React, Angular, Vue, React Native — and beyond the browser.
What is CopilotKit
CopilotKit is a best-in-class SDK for building full-stack agentic applications, Generative UI, and chat applications.
What started as a React library is now a multi-platform agentic framework: the same agent can power your web app, your mobile app, and your team's Slack workspace.
We are the company behind the AG-UI Protocol - adopted by Google, LangChain, AWS, Microsoft, Mastra, PydanticAI, and more!
Quick Start
Up and running in under five minutes. All you need is an LLM key (OpenAI, Anthropic, Gemini, etc.).
npx copilotkit@latest create
Agent Skills
CopilotKit ships agent skills that teach your coding agent (Claude Code, Codex, Cursor, Gemini, and others) how to set up, build with, integrate, debug, and upgrade CopilotKit.
Install them into any project directory:
npx copilotkit@latest skills install
Run it again any time to refresh to the latest skills.
Bring Your App to Life
https://github.com/user-attachments/assets/72b7b4f3-b6e7-460c-a932-5746fe3c8db3
Features:
- Chat UI – A fully customizable chat interface that supports message streaming, tool calls, and agent responses.
- Backend Tool Rendering – Enables agents to call backend tools that return UI components rendered directly in the client.
- Generative UI – Allows agents to generate and update UI components dynamically at runtime based on user intent and agent state.
- Shared State – A synchronized state layer that both agents and UI components can read from and write to in real time.
- Human-in-the-Loop – Lets agents pause execution to request user input, confirmation, or edits before continuing.
- Self-Learning (early access) – Agents that continuously improve from user feedback via in-context reinforcement learning (CLHF).
🧩 Works With Your Stack
One agent backend. Every frontend.
| Platform | Status | Get Started |
|---|---|---|
| ⚛️ React / Next.js | ✅ GA | Quickstart |
| 🅰️ Angular | ✅ Supported | Source Code & Quickstart |
| 💚 Vue | ✅ Supported | Source Code - Quickstart coming soon |
| 📱 React Native | ✅ Supported | Quickstart |
| 💬 Slack / MS Teams / Discord / Google Chat | 🟡 Beta | Request early access |
Your agent logic stays the same — AG-UI handles the wire protocol, CopilotKit handles the UI layer for each framework.
💬 Beyond the Browser: Slack & Microsoft Teams (Discord, Google Chat coming soon...)
Your agents can run and generate Generative UI beyond the web app (Learn more).
CopilotKit now lets you deploy the same agent to the places your users already work:
- Slack – Agents as first-class Slack apps: threads, tool calls, and human-in-the-loop approvals right in the channel.
- Microsoft Teams – Bring agentic workflows to the enterprise, where your org already lives.
🔒 Early access: We're onboarding teams now.
🧠 Self-Learning Agents
Improve your product by learning over time.
With Continuous Learning from Human Feedback (CLHF), part of the CopilotKit Intelligence Platform, agents improve with every interaction:
- In-context reinforcement learning – Agents automatically improve from user interactions, no model fine-tuning required.
- Automatic prompt augmentation – Agent behavior adapts based on recent interactions and outcomes.
- Per-user adaptation – Agents learn individual preferences and get better for each user over time.
- Threads & persistence – Full interaction history — generative UI, human-in-the-loop, shared state — captured across sessions.
Available via CopilotKit Cloud or self-hosted.
🔒 Early access: We're onboarding teams now.
https://github.com/user-attachments/assets/7372b27b-8def-40fb-a11d-1f6585f556ad
What this gives you:
- CopilotKit installed – Core packages are fully set up in your app
- Provider configured – Context, state, and hooks ready to use
- Agent <> UI connected – Agents can stream actions and render UI immediately
- Deployment-ready – Your app is ready to deploy
Complete getting started guide →
How it works:
CopilotKit connects your UI, agents, and tools into a single interaction loop.
This enables:
- Agents that ask users for input
- Tools that render UI
- Stateful workflows across steps and sessions
- One agent, deployed across web, mobile, and chat platforms
⭐️ useAgent Hook
The useAgent hook sits directly on AG-UI, giving you full programmatic control over the agent connection.
// Programmatically access and control your agents
const { agent } = useAgent({ agentId: "my_agent" });
// Render and update your agent's state
return <div>
<h1>{agent.state.city}</h1>
<button onClick={() => agent.setState({ city: "NYC" })}>
Set City
</button>
</div>
Check out the useAgent docs to learn more.
https://github.com/user-attachments/assets/67928406-8abc-49a1-a851-98018b52174f
Generative UI
Generative UI is a core CopilotKit pattern that allows agents to dynamically render UI as part of their workflow.
https://github.com/user-attachments/assets/3cfacac0-4ffd-457a-96f9-d7951e4ab7b6
Compare the Three Types
Explore:
Generative UI educational repo →
🖥️ AG-UI: The Agent–User Interaction Protocol
Connect agent workflows to user-facing apps, with deep partnerships and 1st-party integrations across the agentic stack—including LangChain, CrewAI, Mastra, PydanticAI, and more.
npx create-ag-ui-app my-agent-app
🤝 Community
Have questions or need help?
Join our Discord →Read the Docs →
Try the Enterprise Intelligence Platform →
Stay up to date with our latest releases!
Follow us on LinkedIn →Follow us on X →
🙋🏽♂️ Contributing
Thanks for your interest in contributing to CopilotKit! 💜
We value all contributions, whether it's through code, documentation, creating demo apps, or just spreading the word.
Here are a few useful resources to help you get started:
-
For code contributions, CONTRIBUTING.md.
-
For documentation-related contributions, check out the documentation contributions guide.
-
Want to contribute but not sure how? Join our Discord and we'll help you out!
📄 License
This repository's source code is available under the MIT License.