Alem Tuzlak
79ce60c580
Replace eslint and prettier with oxlint and oxfmt for faster linting and formatting across the monorepo. Remove all eslint and prettier configs, dependencies, and related packages. Add .oxlintrc.json and .oxfmtrc.json for the new tooling. Update CI workflows and lefthook hooks accordingly. Reformat codebase with oxfmt. https://claude.ai/code/session_01GMkSf29p78HuMR1mbXn8He
Form-Filling Copilot
Transform tedious form-filling into natural conversations. Your AI assistant asks the right questions, understands context, and completes forms for you—no more field-by-field drudgery.
Click here for a running example
🛠️ Getting Started
Prerequisites
- Node.js 18+
- npm, yarn, or pnpm
Installation
-
Clone the repository:
git clone https://github.com/CopilotKit/CopilotKit.git cd CopilotKit/examples/copilot-form-filling -
Install dependencies:
pnpm installUsing other package managers
# Using yarn yarn install # Using pnpm npm install -
Create a
.envfile in the project root and add your Copilot Cloud Public API Key:NEXT_PUBLIC_COPILOT_PUBLIC_API_KEY=your_copilotkit_api_key -
Start the development server:
pnpm devUsing other package managers
# Using yarn yarn dev # Using pnpm npm run dev -
Open http://localhost:3000 in your browser to see the application.
🧩 How It Works
This demo uses several key CopilotKit features:
CopilotKit Provider
This provides the chat context to all of the children components.
export default function RootLayout({
children,
}: Readonly<{ children: React.ReactNode }>) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
<CopilotKit
publicApiKey={process.env.NEXT_PUBLIC_COPILOT_PUBLIC_API_KEY}
>
{children}
</CopilotKit>
</body>
</html>
);
}
CopilotReadable
This provides the form fields and their current values to the AI so it understands the current state of the form and session.
components/IncidentReportForm.tsx
useCopilotReadable({
description: "The security incident form fields and their current values",
value: formState,
});
useCopilotReadable({
description: "The current user information",
value: retrieveUserInfo(),
});
CopilotAction
This allows the AI to update the form fields.
components/IncidentReportForm.tsx
useCopilotAction({
name: "fillIncidentReportForm",
description: "Fill out the incident report form",
parameters: [
{
name: "fullName",
type: "string",
required: true,
description: "The full name of the person reporting the incident",
},
// other parameters ...
],
handler: async (action) => {
form.setValue("name", action.fullName);
form.setValue("email", action.email);
form.setValue("description", action.incidentDescription);
form.setValue("date", new Date(action.date));
form.setValue("impactLevel", action.incidentLevel);
form.setValue("incidentType", action.incidentType);
},
});
📚 Learn More
Ready to build your own AI-powered form assistant? Check out these resources:
CopilotKit Documentation - Comprehensive guides and API references to help you build your own copilots.
CopilotKit Cloud - Deploy your copilots with our managed cloud solution for production-ready AI assistants.