Form Filling Copilot

Use CopilotKit to fill out complex forms with a conversational agent.

Live Demo

Framework:

Standard

Use Case:

Form automation, Data entry

Auth:

Database:

CSS:

https://private-user-images.githubusercontent.com/746397/415452306-92356944-090a-440c-bf8f-749bec5475e2.mp4?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NDM0NDczNjksIm5iZiI6MTc0MzQ0NzA2OSwicGF0aCI6Ii83NDYzOTcvNDE1NDUyMzA2LTkyMzU2OTQ0LTA5MGEtNDQwYy1iZjhmLTc0OWJlYzU0NzVlMi5tcDQ_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMzMxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDMzMVQxODUxMDlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1mOWRhZjQxYTYyNzQ2ZmY0YThlMDhjMDYyOWUwMmE4ZGFjYzI0NWI4MmU1MTNmZWE2OTkxZDNmMDFmODZiMGU4JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.m7zGwNyfYof3TaUXeDO0EcX2PfszuEhaQFQr3vX50IY

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

Form-Filling Copilot for Security Incident Reports

🛠️ 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 install

Using other package managers

# Using yarn
yarn install

# Using pnpm
npm install

Create a .env file 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 dev

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

app/layout.tsx

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
});

app/page.tsx

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);
  },
});