---
title: "<CopilotTextarea />"
description: "A context-aware, auto-completing textarea."
---

{/* GENERATE-DOCS path=packages/react-textarea/src/components/copilot-textarea/copilot-textarea.tsx component=CopilotTextarea */}
 
<RequestExample>
```jsx CopilotTextarea Example
<CopilotTextarea
  autosuggestionsConfig={{
    textareaPurpose:
     "the body of an email message",
    chatApiConfigs: {},
  }}
/>
```
</RequestExample>
 
`<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()](./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.
 
<img src="/images/CopilotTextarea/CopilotTextarea.gif" width="500" />
 
## Integrating CopilotTextarea
 
Install the CopilotTextarea frontend packagess:
 
<CodeGroup>
```bash npm
  npm i @copilotkit/react-core @copilotkit/react-textarea
```
 
```bash yarn
  yarn add @copilotkit/react-core @copilotkit/react-textarea
```
 
```bash pnpm
  pnpm add @copilotkit/react-core @copilotkit/react-textarea
```
</CodeGroup>
 
Use the CopilotTextarea component in your React application similarly to a standard `<textarea />`,
with additional configurations for AI-powered features.
 
For example:
 
```tsx
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

<ResponseField name="disableBranding" type="boolean" >
Determines whether the CopilotKit branding should be disabled. Default is `false`.
</ResponseField>

<ResponseField name="placeholderStyle" type="React.CSSProperties" >
Specifies the CSS styles to apply to the placeholder text.
</ResponseField>

<ResponseField name="suggestionsStyle" type="React.CSSProperties" >
Specifies the CSS styles to apply to the suggestions list.
</ResponseField>

<ResponseField name="hoverMenuClassname" type="string" >
A class name to apply to the editor popover window.
</ResponseField>

<ResponseField name="value" type="string" >
The initial value of the textarea. Can be controlled via `onValueChange`.
</ResponseField>

<ResponseField name="onValueChange" type="(value: string) => void" >
Callback invoked when the value of the textarea changes.
</ResponseField>

<ResponseField name="onChange" type="(event: React.ChangeEvent<HTMLTextAreaElement>) => void" >
Callback invoked when a `change` event is triggered on the textarea element.
</ResponseField>

<ResponseField name="shortcut" type="string" >
The shortcut to use to open the editor popover window. Default is `"Cmd-k"`.
</ResponseField>

<ResponseField name="autosuggestionsConfig" type="AutosuggestionsConfigUserSpecified" required>
Configuration settings for the autosuggestions feature.
  Includes a mandatory `textareaPurpose` to guide the autosuggestions.
 
  Autosuggestions can be configured as follows:
 
  ```ts
  {
   // 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: MinimalChatGPTMessage[];
       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
   },
  }
  ```
</ResponseField>