# 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)
## 🛠️ 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
```
Using other package managers
```bash
# Using yarn
yarn install
# Using pnpm
npm install
```
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
```
Using other package managers
```bash
# Using yarn
yarn dev
# Using pnpm
npm run dev
```
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.
[app/layout.tsx](./app/layout.tsx)
```tsx
export default function RootLayout({
children,
}: Readonly<{ children: React.ReactNode }>) {
return (
{children}
);
}
```
### 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](./components/IncidentReportForm.tsx)
```tsx
useCopilotReadable({
description: "The security incident form fields and their current values",
value: formState,
});
```
[app/page.tsx](./app/page.tsx)
```tsx
useCopilotReadable({
description: "The current user information",
value: retrieveUserInfo(),
});
```
### CopilotAction
This allows the AI to update the form fields.
[components/IncidentReportForm.tsx](./components/IncidentReportForm.tsx)
```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.
