docs/content/docs/reference/v2/components/CopilotChatInput.mdx
CopilotChatInput is the primary text input and control surface for chat interactions. It provides a multi-line textarea that auto-grows up to a configurable maximum number of rows (default 5), action buttons for sending messages, voice transcription, and file attachment, and an optional tools menu for declarative command surfaces.
The component operates in three modes: "input" (default text entry), "transcribe" (replaces the textarea with an audio recorder), and "processing" (indicates background processing is underway). When text spans multiple rows, the layout stacks the textarea above the control row.
import { CopilotChatInput } from "@copilotkit/react-core/v2";
import "@copilotkit/react-core/v2/styles.css";
All slot props follow the CopilotKit slot system: each accepts a replacement React component, a className string that is merged into the default component's classes, or a partial props object that extends the default component.
As a className:
<CopilotChatInput textArea="font-mono text-sm" />
As a replacement component:
<CopilotChatInput
sendButton={({ onClick }) => (
<button onClick={onClick} className="bg-blue-500 text-white px-3 py-1 rounded">
Send
</button>
)}
/>
The ToolsMenuItem type defines items in the tools menu. Items can trigger actions directly or contain nested submenus.
type ToolsMenuItem = { label: string } & (
| { action: () => void }
| { items: (ToolsMenuItem | "-")[] }
);
Use the string "-" as an array entry to render a visual separator between menu items:
toolsMenu={[
{ label: "Search", action: () => search() },
"-",
{ label: "Settings", action: () => openSettings() },
]}
Menu items with an items array render as expandable submenus:
toolsMenu={[
{
label: "Export",
items: [
{ label: "As PDF", action: () => exportPDF() },
{ label: "As CSV", action: () => exportCSV() },
"-",
{ label: "Print", action: () => printDoc() },
],
},
]}
A visual audio waveform component used during transcription mode. It displays a real-time waveform visualization of the microphone input and exposes an imperative API via ref.
import { CopilotChatAudioRecorder } from "@copilotkit/react-core/v2";
The component exposes the following imperative methods via React ref:
import { useRef } from "react";
import { CopilotChatAudioRecorder } from "@copilotkit/react-core/v2";
function CustomRecorder() {
const recorderRef = useRef(null);
return (
<div>
<CopilotChatAudioRecorder ref={recorderRef} />
<button onClick={() => recorderRef.current?.start()}>Record</button>
<button onClick={() => recorderRef.current?.stop()}>Stop</button>
</div>
);
}
import { useState } from "react";
import { CopilotChatInput } from "@copilotkit/react-core/v2";
function ChatInput() {
const [value, setValue] = useState("");
return (
<CopilotChatInput
value={value}
onChange={setValue}
onSubmitMessage={(text) => {
sendMessage(text);
setValue("");
}}
autoFocus
/>
);
}
import { useState } from "react";
import { CopilotChatInput } from "@copilotkit/react-core/v2";
function VoiceInput() {
const [mode, setMode] = useState<"input" | "transcribe">("input");
const [value, setValue] = useState("");
return (
<CopilotChatInput
mode={mode}
value={value}
onChange={setValue}
onSubmitMessage={(text) => sendMessage(text)}
onStartTranscribe={() => setMode("transcribe")}
onCancelTranscribe={() => setMode("input")}
onFinishTranscribeWithAudio={async (blob) => {
const text = await transcribeAudio(blob);
setValue(text);
setMode("input");
}}
/>
);
}
import { CopilotChatInput } from "@copilotkit/react-core/v2";
function InputWithTools() {
return (
<CopilotChatInput
onSubmitMessage={(text) => sendMessage(text)}
toolsMenu={[
{ label: "Search the web", action: () => triggerSearch() },
{ label: "Analyze data", action: () => triggerAnalysis() },
"-",
{
label: "Export",
items: [
{ label: "As PDF", action: () => exportPDF() },
{ label: "As Markdown", action: () => exportMarkdown() },
],
},
]}
/>
);
}
import { CopilotChatInput } from "@copilotkit/react-core/v2";
import { useAgent } from "@copilotkit/react-core/v2";
function ChatInputWithAgent() {
const { agent } = useAgent();
return (
<CopilotChatInput
isRunning={agent.isRunning}
onSubmitMessage={(text) => {
agent.addMessage({ role: "user", content: text, id: crypto.randomUUID() });
agent.runAgent();
}}
onStop={() => agent.abortRun()}
autoFocus
/>
);
}
import { CopilotChatInput } from "@copilotkit/react-core/v2";
function AdaptiveInput() {
return (
<CopilotChatInput onSubmitMessage={(text) => sendMessage(text)}>
{({ isMultiline }) => (
<div className={isMultiline ? "border-2 border-blue-300 rounded-xl p-2" : ""}>
{isMultiline && (
<div className="text-xs text-gray-400 mb-1">Multi-line mode</div>
)}
</div>
)}
</CopilotChatInput>
);
}
import { CopilotChatInput } from "@copilotkit/react-core/v2";
function StyledInput() {
return (
<CopilotChatInput
onSubmitMessage={(text) => sendMessage(text)}
textArea="font-mono text-sm bg-gray-50 rounded-lg"
sendButton="bg-green-500 hover:bg-green-600 text-white rounded-full"
/>
);
}
mode to "transcribe" replaces the textarea with the audioRecorder slot component. The transcription control buttons (cancelTranscribeButton, finishTranscribeButton) replace the standard send button.value and onChange) and uncontrolled mode (internal state management).toolsMenu prop enables a declarative menu with support for flat items, separators ("-"), and nested submenus. The menu button is only rendered when toolsMenu is provided.CopilotChatView -- Higher-level chat view that composes this componentCopilotChatAudioRecorder -- Audio recorder used during transcription modeuseCopilotChatConfiguration -- Provider for localized input labels