<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) that allows the user to suggest changes to the text, for example providing a summary or rephrasing the text.

​
Integrating CopilotTextarea

Install the CopilotTextarea frontend packagess:

Use the CopilotTextarea component in your React application similarly to a standard <textarea />, with additional configurations for AI-powered features.

For example:

import { CopilotTextarea } from "@copilotkit/react-textarea";
import { useState } from "react";
 
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: {
            forwardedParams: {
              max_tokens: 20,
              stop: [".", "?", "!"],
            },
          },
        },
      }}
    />
  );
}

​
Props

disableBranding
boolean

Determines whether the CopilotKit branding should be disabled. Default is false.

placeholderStyle
React.CSSProperties

Specifies the CSS styles to apply to the placeholder text.

suggestionsStyle
React.CSSProperties

Specifies the CSS styles to apply to the suggestions list.

hoverMenuClassname
string

A class name to apply to the editor popover window.

value
string

The initial value of the textarea. Can be controlled via onValueChange.

onValueChange
(value: string) => void

Callback invoked when the value of the textarea changes.

onChange
(event: React.ChangeEvent<HTMLTextAreaElement>) => void

Callback invoked when a change event is triggered on the textarea element.

shortcut
string

The shortcut to use to open the editor popover window. Default is "Cmd-k".

autosuggestionsConfig
AutosuggestionsConfigUserSpecified
required

Configuration settings for the autosuggestions feature. Includes a mandatory textareaPurpose to guide the autosuggestions.

Autosuggestions can be configured as follows:

{
 // the purpose of the textarea
 textareaPurpose: string,
 chatApiConfigs: {
   // the config for the suggestions api (optional)
   suggestionsApiConfig: {
     // use this to provide a custom system prompt
     makeSystemPrompt: (textareaPurpose: string, contextString: string) => string;
     // custom few shot messages
     fewShotMessages: Message[];
     forwardedParams: {
       // max number of tokens to generate
       max_tokens: number,
       // stop generating when these characters are encountered, e.g. [".", "?", "!"]
       stop: string[],
     },
   },
   insertionApiConfig: //... the same options as suggestionsApiConfig
 },
}
<CopilotKit /><CopilotPopup />