<CopilotTextarea />
<CopilotTextarea>
is a React component that acts as a drop-in replacement for the standard <textarea>
,
offering enhanced autocomplete features powered by AI. It is context-aware, integrating seamlessly with the
useCopilotReadable
hook to provide intelligent suggestions based on the application context.
In addition, it provides a hovering editor window (available by default via Cmd + K
on Mac and Ctrl + K
on Windows) that allows the user to
suggest changes to the text, for example providing a summary or rephrasing the text.
Example
import { CopilotTextarea } from '@copilot/react-textarea';
<CopilotTextarea
autosuggestionsConfig={{
textareaPurpose:
"the body of an email message",
chatApiConfigs: {},
}}
/>
Usage
Install Dependencies
This component is part of the @copilotkit/react-textarea package.
npm install @copilotkit/react-core @copilotkit/react-textarea
Usage
Use the CopilotTextarea component in your React application similarly to a standard <textarea />
,
with additional configurations for AI-powered features.
For example:
import { useState } from "react";
import { CopilotTextarea } from "@copilotkit/react-textarea";
export function ExampleComponent() {
const [text, setText] = useState("");
return (
<CopilotTextarea
className="custom-textarea-class"
value={text}
onValueChange={(value: string) => setText(value)}
placeholder="Enter your text here..."
autosuggestionsConfig={{
textareaPurpose: "Provide context or purpose of the textarea.",
chatApiConfigs: {
suggestionsApiConfig: {
maxTokens: 20,
stop: [".", "?", "!"],
},
},
}}
/>
);
}
Look & Feel
By default, CopilotKit components do not have any styles. You can import CopilotKit’s stylesheet at the root of your project:
...
export function YourRootComponent() {
return (
<CopilotKit>
...
</CopilotKit>
);
}
For more information about how to customize the styles, check out the Customize Look & Feel guide.
Properties
Determines whether the CopilotKit branding should be disabled. Default is false
.
Specifies the CSS styles to apply to the placeholder text.
Specifies the CSS styles to apply to the suggestions list.
A class name to apply to the editor popover window.
The initial value of the textarea. Can be controlled via onValueChange
.
Callback invoked when the value of the textarea changes.
Callback invoked when a change
event is triggered on the textarea element.
The shortcut to use to open the editor popover window. Default is "Cmd-k"
.
Configuration settings for the autosuggestions feature. For full reference, check the interface on GitHub.
The purpose of the text area in plain text.
Example: “The body of the email response”
The chat API configurations.
NOTE: You must provide specify at least one of suggestionsApiConfig
or insertionApiConfig
.
For full reference, please click here.
For full reference, please click here.
Whether the textarea is disabled.
Whether to disable the CopilotKit branding.
Specifies the CSS styles to apply to the placeholder text.
Specifies the CSS styles to apply to the suggestions list.
A class name to apply to the editor popover window.
The initial value of the textarea. Can be controlled via onValueChange
.
Callback invoked when the value of the textarea changes.
Callback invoked when a change
event is triggered on the textarea element.
The shortcut to use to open the editor popover window. Default is "Cmd-k"
.