# 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](https://copilotkit.ai/examples/form-filling-copilot)

<div align="center">
  <img src="./preview.gif" alt="Form-Filling Copilot for Security Incident Reports"/>

  <a href="https://copilotkit.ai" target="_blank">
    <img src="https://img.shields.io/badge/Built%20with-CopilotKit-6963ff" alt="Built with CopilotKit"/>
  </a>
  <a href="https://nextjs.org" target="_blank">
    <img src="https://img.shields.io/badge/Built%20with-Next.js%2015-black" alt="Built with Next.js"/>
  </a>
  <a href="https://ui.shadcn.com/" target="_blank">
    <img src="https://img.shields.io/badge/Styled%20with-shadcn%2Fui-black" alt="Styled with shadcn/ui"/>
  </a>
</div>

## 🛠️ Getting Started

### Prerequisites

- Node.js 18+
- npm, yarn, or pnpm

### Installation

1. Clone the repository:

   ```bash
   git clone https://github.com/CopilotKit/CopilotKit.git
   cd CopilotKit/examples/copilot-form-filling
   ```

2. Install dependencies:

   ```bash
   pnpm install
   ```

   <details>
     <summary><b>Using other package managers</b></summary>
     
     ```bash
     # Using yarn
     yarn install
     
     # Using pnpm
     npm install
     ```
   </details>

3. Create a `.env` file in the project root and add your [Copilot Cloud Public API Key](https://dashboard.operations.copilotkit.ai):

   ```
   NEXT_PUBLIC_COPILOT_PUBLIC_API_KEY=your_copilotkit_api_key
   ```

4. Start the development server:

   ```bash
   pnpm dev
   ```

   <details>
     <summary><b>Using other package managers</b></summary>
     
     ```bash
     # Using yarn
     yarn dev
     
     # Using pnpm
     npm run dev
     ```
   </details>

5. Open [http://localhost:3000](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.

<em>[app/layout.tsx](./app/layout.tsx)</em>

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

<em>[components/IncidentReportForm.tsx](./components/IncidentReportForm.tsx)</em>

```tsx
useCopilotReadable({
  description: "The security incident form fields and their current values",
  value: formState,
});
```

<em>[app/page.tsx](./app/page.tsx)</em>

```tsx
useCopilotReadable({
  description: "The current user information",
  value: retrieveUserInfo(),
});
```

### CopilotAction

This allows the AI to update the form fields.

<em>[components/IncidentReportForm.tsx](./components/IncidentReportForm.tsx)</em>

```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](https://docs.copilotkit.ai) - Comprehensive guides and API references to help you build your own copilots.

[CopilotKit Cloud](https://dashboard.operations.copilotkit.ai/) - Deploy your copilots with our managed cloud solution for production-ready AI assistants.
