CopilotTextarea is a React component that provides an AI-powered textarea with autocompletion functionality. It's a fork of CopilotKit, designed to allow for more flexible and custom implementations without being tied to a specific cloud solution.
npm install copilot-react-textareaCopilotTextarea is a React component that provides an AI-powered textarea with autocompletion functionality. It's a fork of CopilotKit, designed to allow for more flexible and custom implementations without being tied to a specific cloud solution.
To install CopilotTextarea, run the following command:
``bash`
npm install copilot-react-textarea
or if you're using yarn:
`bash`
yarn add copilot-react-textarea
Here's an example of how to use the CopilotTextarea component:
`tsx
import { CopilotTextarea } from "copilot-react-textarea";
import { useState, type ChangeEvent } from "react";
function YourComponent() {
const [value, setValue] = useState("");
const handleChange = (e: ChangeEvent
setValue(e.target.value);
};
return (
className="min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
rows={5}
cols={50}
onChange={handleChange}
value={value}
textareaPurpose="chat"
createSuggestionFunction={async (data: {
textAfterCursor: string;
textBeforeCursor: string;
}): Promise
// Implement your autocomplete logic here
return "Autocomplete suggestion";
}}
insertionOrEditingFunction={async (editorState: any): Promise
// Implement your insertion or editing logic here
const stream = new ReadableStream({
start(controller) {
controller.enqueue("Inserted text");
controller.close();
},
});
return stream;
}}
onKeyDown={(event) => {
// Handle key down events
}}
disableWhenEmpty={true}
/>
);
}
`
The CopilotTextarea component accepts the following props:
- placeholder: Placeholder text for the textareaclassName
- : CSS class for styling the textarearows
- : Number of visible text linescols
- : Visible width of the textareaonChange
- : Function to handle changes in the textareavalue
- : Current value of the textareatextareaPurpose
- : Purpose of the textarea (e.g., "chat")createSuggestionFunction
- : Async function to generate autocomplete suggestionsinsertionOrEditingFunction
- : Async function to handle text insertion or editingonKeyDown
- : Function to handle keydown eventsdisableWhenEmpty`: Boolean to disable the textarea when empty
-
- AI-powered autocompletion
- Customizable styling
- Flexible autocomplete and text insertion functions
- Key event handling
CopilotTextarea is a fork of CopilotKit, created with the motivation to provide more flexibility in custom implementations. The original CopilotKit was tightly coupled with their cloud solution, which limited its use in projects that required custom backend integrations or self-hosted solutions.
By forking the project, we've made it possible to use these open-source components with your own implementation of autocomplete and text generation functions. This allows developers to integrate CopilotTextarea with their preferred AI services or custom backend solutions without being locked into a specific cloud provider.
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License.