State Machine Copilot

Transform complex conversational flows into manageable state machines.

Live Demo

Framework:

Standard

Use Case:

Sequential decision making, Conditional logic

Auth:

Database:

CSS:

https://youtu.be/BEXgWZJHNbQ?si=gNZniavscYkUuULs

Transform complex conversational flows into manageable state machines. This AI-powered car sales application demonstrates how to build sophisticated multi-stage interactions with contextual awareness and state transitions.

Click here for a running example

🚗 Overview

This application simulates a car dealership experience where an AI assistant guides users through a multi-stage process:

Contact Information - Collecting customer details
Car Selection - Helping users build their dream car
Financing Options - Offering payment alternatives
Payment Processing - Handling financing or direct payment
Order Confirmation - Finalizing the purchase

The example showcases how to implement complex conversational flows using a state machine pattern with CopilotKit.

🛠️ 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-state-machine

Install dependencies:

pnpm install

Using other package managers

# Using yarn
yarn install

# Using npm
npm install

Create a .env file in the project root and add your Copilot Cloud Public API Key:
```
NEXT_PUBLIC_CPK_PUBLIC_API_KEY=your_api_key_here
```

Start the development server:

pnpm dev

Using other package managers

# Using yarn
yarn dev

# Using npm
npm run dev

Open http://localhost:3000 in your browser to see the application.

🧩 How It Works

This demo uses several key CopilotKit features to implement a state machine pattern:

State Machine Architecture

The application is structured around 6 distinct stages, each with its own hook in the stages directory:

getContactInfo - Collecting customer information
buildCar - Configuring car options
sellFinancing - Presenting financing options
getFinancingInfo - Collecting financing details
getPaymentInfo - Processing payment information
confirmOrder - Finalizing the order

Each stage hook encapsulates stage-specific CopilotKit configuration and prompts.

Global State Management

The use-global-state.tsx hook manages the application's global state, while the car-sales-chat.tsx component ties all stages together.

State Visualization

A React Flow powered visualizer (state-visualizer.tsx) displays the current state and possible transitions, updating in real-time as the conversation progresses.

CopilotKit Integration

Each stage uses CopilotKit's hooks to provide context-aware AI assistance:

// Example from use-stage-build-car.tsx
useCopilotAction({
  name: "updateCarConfiguration",
  description: "Update the car configuration based on user preferences",
  parameters: [
    {
      name: "model",
      type: "string",
      required: true,
      description: "The car model selected by the user"
    },
    // Other parameters...
  ],
  handler: async (action) => {
    // Update state with the new configuration
  },
});