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

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

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

bun add @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

disableBrandingboolean

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

placeholderStyleReact.CSSProperties

Specifies the CSS styles to apply to the placeholder text.

suggestionsStyleReact.CSSProperties

Specifies the CSS styles to apply to the suggestions list.

hoverMenuClassnamestring

A class name to apply to the editor popover window.

valuestring

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.

shortcutstring

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

autosuggestionsConfigAutosuggestionsConfigUserSpecifiedrequired

Configuration settings for the autosuggestions feature. For full reference, check the interface on GitHub.

textareaPurposestringrequired

The purpose of the text area in plain text.

Example: “The body of the email response”

chatApiConfigsChatApiConfigs

The chat API configurations.

NOTE: You must provide specify at least one of suggestionsApiConfig or insertionApiConfig.

suggestionsApiConfigSuggestionsApiConfig

For full reference, please click here.

insertionApiConfigInsertionApiConfig