CopilotTextarea.mdx

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

{/* GENERATE-DOCS path=packages/react-textarea/src/components/copilot-textarea/copilot-textarea.tsx component=CopilotTextarea */}

```jsx CopilotTextarea Example ```

<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:

```bash npm npm i @copilotkit/react-core @copilotkit/react-textarea ```

  yarn add @copilotkit/react-core @copilotkit/react-textarea

  pnpm add @copilotkit/react-core @copilotkit/react-textarea

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

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. 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
 },
}