CopilotTextarea.mdx

import { PropertyReference, LinkToCopilotCloud } from "@/components";

import { Tabs } from "nextra/components";

import { Callout } from "nextra/components";

<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 '@copilotkit/react-textarea';
import "@copilotkit/react-textarea/styles.css";
 
<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";
import "@copilotkit/react-textarea/styles.css";
 
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:

...
import "@copilotkit/react-textarea/styles.css";
 
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](https://github.com/CopilotKit/CopilotKit/blob/main/CopilotKit/packages/react-textarea/src/types/base/base-copilot-textarea-props.tsx#L8). The purpose of the text area in plain text.

Example: "The body of the email response"

The chat API configurations.

<strong>NOTE:</strong> You must provide specify at least one of `suggestionsApiConfig` or `insertionApiConfig`.

<PropertyReference name="suggestionsApiConfig" type="SuggestionsApiConfig">
    For full reference, please [click here](https://github.com/CopilotKit/CopilotKit/blob/main/CopilotKit/packages/react-textarea/src/types/autosuggestions-config/suggestions-api-config.tsx#L4).
</PropertyReference>
<PropertyReference name="insertionApiConfig" type="InsertionApiConfig">
    For full reference, please [click here](https://github.com/CopilotKit/CopilotKit/blob/main/CopilotKit/packages/react-textarea/src/types/autosuggestions-config/insertions-api-config.tsx#L4).
</PropertyReference>

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"`.