mirror of
https://github.com/CopilotKit/CopilotKit.git
synced 2026-09-14 16:26:20 +08:00
Benjamin Taylor
79276a2d4f
CopilotChat message wrappers used viewport-keyed `cpk:sm:px-0`, collapsing horizontal padding to 0 at any viewport >=640px. The message column is `max-w-3xl` (768px) centered; the design assumes the chat fills the viewport, so at >=640px the column has side gutters and inner padding can drop to 0. But when the chat lives in a sub-viewport-width pane (e.g. the threads drawer rail beside the chat, ~580px on an 820px iPad-portrait viewport), `sm:px-0` still fires on viewport width while the 768px column overflows the narrow pane and sits flush against both edges. The input wrapper looked fine because it is visually inset by its own pill, so only message text appeared broken. Make the padding container-relative instead of viewport-relative: - add `cpk:@container` (container-type: inline-size) to the chat root, and - switch the message/input/suggestion wrappers from `cpk:sm:px-0` to the container variant `cpk:@3xl:px-0`. Padding now tracks the chat's own width and drops to 0 only once the container is at least as wide as the column's own max-width, so the column has real gutters; in any narrower pane the `px-4` inner padding is retained. React, Angular, and Vue kept in lockstep. Note on the breakpoint: Tailwind v4 container-query breakpoints differ from viewport breakpoints (`@sm` = 24rem/384px, not 640px). A mechanical `sm:` -> `@sm:` swap would still collapse the ~580px repro pane. `@3xl` (48rem/768px) is used because it exactly matches the column's `max-w-3xl`, which is the width at which side gutters first appear. Verified: full-width desktop chat unchanged (container >=768px -> px-0); 580px pane retains 16px padding; render-prop layouts without a container ancestor degrade safely to `px-4`; sidebar/popup `data-*` padding overrides are unaffected. ENT-1020 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
CopilotKit - React Core
✨ 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.