mirror of
https://github.com/CopilotKit/CopilotKit.git
synced 2026-09-14 16:26:20 +08:00
Mark
17ed176736
## Summary Follow-up to #5025 addressing @marthakelly's [review suggestion](https://github.com/CopilotKit/CopilotKit/pull/5025#discussion_r3307285578): add oxlint `RuleTester` coverage for the `copilotkit/no-single-arg-zod-record` rule. Since the underlying Zod 4 incompatibility is **type-level** (no runtime test can catch a regression), this lint rule is the real safety net, so it's worth testing directly. ## Cases (via `oxlint/plugins-dev` `RuleTester`) **valid** - two-arg `z.record(z.string(), z.unknown())` — no false positive - two-arg with `.optional()` chain - single-arg `.record()` on a non-`z` object (`cache.record(entry)`) — confirms the rule is scoped to the `z` alias and won't over-fire **invalid** - single-arg `z.record(z.unknown())` → fires + autofix output `z.record(z.string(), z.unknown())` - chained `z.record(z.unknown()).optional()` → fixes the inner call - `z.record(...spread)` → reports **without** a fix (`output: null`) ## Node version gate (important) oxlint's `RuleTester` requires **Node ≥ 22** (it throws at parse time on older runtimes). The CI unit matrix includes a **Node 20** job, so the cases are gated to skip below Node 22 — verified locally: **6/6 pass on Node 22**, **skips cleanly on Node 20**. The lint rule itself is still exercised on every Node version through the `oxlint` job; only these RuleTester unit tests are gated. Also extends the `react-ui` vitest `include` to pick up co-located `oxlint-rules/**/*.test.mjs`. ## Test plan - [x] `vitest run` on the new file under Node 22 → 6 passed - [x] same under Node 20 → 1 skipped (gate works; Node 20 CI job stays green) - [x] `oxlint` clean on the new test + config 🤖 Generated with [Claude Code](https://claude.com/claude-code)
CopilotKit - React UI
✨ Why CopilotKit?
- Minutes to integrate - Get started quickly with our CLI
- Framework agnostic - Works with React, Next.js, AGUI and more
- Production-ready UI - Use customizable components or build with headless UI
- Built-in security - Prompt injection protection
- Open source - Full transparency and community-driven
🧑💻 Real life use cases
Deploy deeply-integrated AI assistants & agents that work alongside your users inside your applications.
🖥️ Code Samples
Drop in these building blocks and tailor them to your needs.
Build with Headless APIs and Pre-Built Components
// Headless UI with full control
const { visibleMessages, appendMessage, setMessages, ... } = useCopilotChat();
// Pre-built components with deep customization options (CSS + pass custom sub-components)
<CopilotPopup
instructions={"You are assisting the user as best as you can. Answer in the best way possible given the data you have."}
labels={{ title: "Popup Assistant", initial: "Need any help?" }}
/>
// Frontend actions + generative UI, with full streaming support
useCopilotAction({
name: "appendToSpreadsheet",
description: "Append rows to the current spreadsheet",
parameters: [
{ name: "rows", type: "object[]", attributes: [{ name: "cells", type: "object[]", attributes: [{ name: "value", type: "string" }] }] }
],
render: ({ status, args }) => <Spreadsheet data={canonicalSpreadsheetData(args.rows)} />,
handler: ({ rows }) => setSpreadsheet({ ...spreadsheet, rows: [...spreadsheet.rows, ...canonicalSpreadsheetData(rows)] }),
});
Integrate In-App CoAgents with LangGraph
// Share state between app and agent
const { agentState } = useCoAgent({
name: "basic_agent",
initialState: { input: "NYC" }
});
// agentic generative UI
useCoAgentStateRender({
name: "basic_agent",
render: ({ state }) => <WeatherDisplay {...state.final_response} />,
});
// Human in the Loop (Approval)
useCopilotAction({
name: "email_tool",
parameters: [
{
name: "email_draft",
type: "string",
description: "The email content",
required: true,
},
],
renderAndWaitForResponse: ({ args, status, respond }) => {
return (
<EmailConfirmation
emailContent={args.email_draft || ""}
isExecuting={status === "executing"}
onCancel={() => respond?.({ approved: false })}
onSend={() =>
respond?.({
approved: true,
metadata: { sentAt: new Date().toISOString() },
})
}
/>
);
},
});
// intermediate agent state streaming (supports both LangGraph.js + LangGraph python)
const modifiedConfig = copilotKitCustomizeConfig(config, {
emitIntermediateState: [
{
stateKey: "outline",
tool: "set_outline",
toolArgument: "outline",
},
],
});
const response = await ChatOpenAI({ model: "gpt-4o" }).invoke(
messages,
modifiedConfig,
);
🏆 Featured Examples
Documentation
To get started with CopilotKit, please check out the documentation.