Quickstart: CopilotTextarea
How to integrate CopilotTextarea into your application
Setup
Install CopilotKit
Install the CopilotKit frontend packagess:
Setup the frontend
A CopilotKit
must wrap all components which interact with CopilotKit.
For simplicity’s sake, it’s recommended you wrap a CopilotKit
around your entire application:
"use client";
import { CopilotKit } from "@copilotkit/react-core";
import "@copilotkit/react-textarea/styles.css"; // also import this if you want to use the CopilotTextarea component
export default function RootLayout({ children }) {
return (
<CopilotKit publicApiKey="the api key or self host (see below)">
{children}
</CopilotKit>
);
}
Setup the Copilot Runtime endpoint:
Setup the Copilot Runtime endpoint, see Quickstart-Runtime
Provide context
You likely want to provide external context to inform CopilotTextarea completions, insertions, and edits.
You can do so through the useCopilotReadable
and useMakeCopilotDocumentReadable
react hooks.
See their respective documentation for additional details.
In particular, you can specify categories which bind specific context to specific textareas, and not to others.
"use client";
import { useCopilotReadable } from "@copilotkit/react-core";
import {
useMakeCopilotDocumentReadable,
DocumentPointer,
} from "@copilotkit/react-document";
// You can pass top-level data to the Copilot engine by calling `useCopilotReadable`.
const employeeContextId = useCopilotReadable({
description: "Employee name",
value: employeeName,
});
// Pass a parentID to maintain a hierarchical structure.
// Especially useful with child React components, list elements, etc.
useCopilotReadable({
description: "Work profile",
value: workProfile.description(),
parentId: employeeContextId,
});
useCopilotReadable({
description: "Employee work profile",
value: workProfile.description(),
parentId: employeeContextId,
});
const document: DocumentPointer = {
id: "2",
name: "Travel Pet Peeves",
sourceApplication: "Google Docs",
iconImageUri: "/images/GoogleDocs.svg",
getContents: () => {
return "hello document";
},
} as DocumentPointer;
// ...then, in a react component:
useMakeCopilotDocumentReadable(document);
Integrate a CopilotTextarea
CopilotTextarea
is configured essentially identically to a standard react <textarea />
.
The primary difference is the additional autosuggestionsConfig
variable, which provides copilot-specific configurations.
See the CopilotTextarea documentation for all parameters.
import { CopilotTextarea } from "@copilotkit/react-textarea";
import { useState } from "react";
export function SomeReactComponent() {
const [text, setText] = useState("");
return (
<>
<CopilotTextarea
className="px-4 py-4"
value={text}
onValueChange={(value: string) => setText(value)}
placeholder="What are your plans for your vacation?"
autosuggestionsConfig={{
textareaPurpose:
"Travel notes from the user's previous vacations. Likely written in a colloquial style, but adjust as needed.",
chatApiConfigs: {
suggestionsApiConfig: {
forwardedParams: {
max_tokens: 20,
stop: [".", "?", "!"],
},
},
},
}}
/>
</>
);
}