Copilot Textarea

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

npm install @copilotkit/react-textarea

import "@copilotkit/react-textarea/styles.css";

import { FC, useState } from "react";
import { CopilotTextarea } from '@copilotkit/react-textarea';
 
const ExampleComponent: FC = () => {
  const [text, setText] = useState<string>('');
 
  return (
    <CopilotTextarea
      className="w-full p-4 border border-gray-300 rounded-md"
      value={text}
      onValueChange={setText}

      autosuggestionsConfig={{
        textareaPurpose: "the body of an email message",
        chatApiConfigs: {},
      }}
    />
  );
};

Next Steps

• We highly recommend that you check out our simple Copilot Textarea Tutorial.
• Check out the full CopilotTextarea reference