refactor: move state-machine into root examples dir (#1445)

Signed-off-by: Tyler Slaton <tyler@copilotkit.ai>

CopilotKit/examples/state-machine/README.md

@@ -1,82 +0,0 @@
-# CopilotKit State Machine Example
-
-This example demonstrates how to build an AI-powered car sales application using CopilotKit and Next.js. It showcases a state machine pattern for managing complex conversational flows with an AI assistant.
-
-![State Machine](./assets/preview.png)
-
-## Overview
-
-The application simulates a car dealership experience where an AI assistant guides users through the process of:
-1. Collecting contact information
-2. Helping select a car
-3. Offering financing options
-4. Processing payment or financing details
-5. Confirming the final order
-
-## State Machine
-
-State machines are a common pattern for managing complex conversational flows. With CopilotKit, you can easily use the built-in
-API surface to create your own state machines. In this example, we've created a state machine for the car sales process.
-
-### Stages
-There are 6 stages in the state machine, each with a corresponding hook in the `stages` directory. Click through to read 
-more information about each stage.
-1. [getContactInfo](./src/lib/stages/use-stage-get-contact-info.tsx)
-2. [buildCar](./src/lib/stages/use-stage-build-car.tsx)
-3. [sellFinancing](./src/lib/stages/use-stage-sell-financing.tsx)
-4. [getFinancingInfo](./src/lib/stages/use-stage-get-financing-info.tsx)
-5. [getPaymentInfo](./src/lib/stages/use-stage-get-payment-info.tsx)
-6. [confirmOrder](./src/lib/stages/use-stage-confirm-order.tsx)
-
-Each stage hook encapsulates the stage-specific CopilotKit configuration as well as the prompts for those stages.
-
-### Global State
-
-Glueing all of these stages together is the [car-sales-chat.tsx](./src/components/car-sales-chat.tsx) component and the
-[use-global-state.tsx](./src/lib/stages/use-global-state.tsx) hook which manages the global state of the application.
-
-### Visualizer
-Included for visualizing the state machine is a [React Flow](https://reactflow.dev/) powered state machine visualizer. As the 
-assistant progress through the stages, the visualizer will update to reflect the current stage.
-
-## Running Locally
-
-1. Clone the repository:
-```bash
-git clone https://github.com/your-username/copilotkit.git
-cd copilotkit/examples/state-machine
-```
-
-2. Install dependencies:
-```bash
-pnpm install
-```
-
-3. Get a public API key from [Copilot Cloud](https://cloud.copilotkit.ai) (free).
-
-4. Set up your environment variables:
-```bash
-cp .env.example .env.local
-```
-
-Add your CopilotKit Public API key to `.env.local`:
-```
-NEXT_PUBLIC_CPK_PUBLIC_API_KEY=your_api_key_here
-```
-
-4. Run the development server:
-```bash
-pnpm dev
-```
-
-5. Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-## Learn More
-
-- [CopilotKit Documentation](https://docs.copilotkit.ai)
-- [Next.js Documentation](https://nextjs.org/docs)
-- [OpenAI API Documentation](https://platform.openai.com/docs)
-
-## Contributing
-
-Contributions are welcome! Please feel free to submit a Pull Request.

CopilotKit/scripts/docs/lib/files.ts

@@ -112,7 +112,8 @@ export const REFERENCE_DOCS: ReferenceDocConfiguration[] = [
     sourcePath: "packages/react-core/src/hooks/use-coagent-state-render.ts",
     destinationPath: "docs/content/docs/reference/hooks/useCoAgentStateRender.mdx",
     hook: "useCoAgentStateRender",
-    description: "The useCoAgentStateRender hook allows you to render the state of the agent in the chat.",
+    description:
+      "The useCoAgentStateRender hook allows you to render the state of the agent in the chat.",
   },
   {
     sourcePath: "packages/react-core/src/hooks/use-coagent.ts",

docs/content/docs/(root)/cookbook/state-machine.mdx

@@ -273,7 +273,7 @@ standard deterministic update (button clicks), and sometimes through LLM-driven
 ## Advanced Patterns
 
 This state machine pattern can be extended for complex interactions. Below are some advanced patterns you can implement with code sourced in our 
-[car sales example](https://github.com/CopilotKit/CopilotKit/tree/main/CopilotKit/examples/state-machine) which you already saw a demo of in the [overview](#overview).
+[car sales example](https://github.com/CopilotKit/CopilotKit/tree/main/examples/state-machine) which you already saw a demo of in the [overview](#overview).
 
 ### Stage Transition Approaches
 
@@ -294,7 +294,7 @@ const [stage, setStage] = useState<string>("one");
 The car sales demo uses this approach in generative UI (for more on generative UI, see the [section below](#generative-ui)) to transition between stages 
 when a user submits their contact information.
 
-Click here for the [source code](https://github.com/CopilotKit/CopilotKit/tree/main/CopilotKit/examples/state-machine/src/lib/stages/use-stage-get-contact-info.tsx)
+Click here for the [source code](https://github.com/CopilotKit/CopilotKit/tree/main/examples/state-machine/src/lib/stages/use-stage-get-contact-info.tsx)
 
 ```tsx title="src/lib/stages/use-stage-get-contact-info.tsx"
 // imports ...
@@ -339,7 +339,7 @@ export function useStageGetContactInfo() {
 
 Sometimes you need stages that can transition to different next stages based on user input or LLM-driven actions.
 
-Click here for the [source code](https://github.com/CopilotKit/CopilotKit/tree/main/CopilotKit/examples/state-machine/src/lib/stages/use-stage-sell-financing.tsx)
+Click here for the [source code](https://github.com/CopilotKit/CopilotKit/tree/main/examples/state-machine/src/lib/stages/use-stage-sell-financing.tsx)
 
 ```tsx title="src/lib/stages/use-stage-sell-financing.tsx"
 function useStageSellFinancing() {
@@ -378,7 +378,7 @@ function useStageSellFinancing() {
 When combined with the state machine pattern, you can build deep and interactive conversations with the user. For example, the `buildCar` stage in the car sales demo 
 uses generative UI to show the user available cars that they can choose from.
 
-Click here for the [source code](https://github.com/CopilotKit/CopilotKit/tree/main/CopilotKit/examples/state-machine/src/lib/stages/use-stage-build-car.tsx)
+Click here for the [source code](https://github.com/CopilotKit/CopilotKit/tree/main/examples/state-machine/src/lib/stages/use-stage-build-car.tsx)
 
 <video src="/images/cookbook/state-machine/gen-ui.mp4" controls autoPlay loop muted playsInline className="rounded-xl shadow-lg border" />
 
@@ -481,7 +481,7 @@ To add an initial message to the chat, we can use the `appendMessage` function p
   This is a temporary solution and we will be improving this in the near future.
 </Callout>
 
-Click here for the [source code](https://github.com/CopilotKit/CopilotKit/tree/main/CopilotKit/examples/state-machine/src/components/car-sales-chat.tsx)
+Click here for the [source code](https://github.com/CopilotKit/CopilotKit/tree/main/examples/state-machine/src/components/car-sales-chat.tsx)
 
 ```tsx title="src/components/car-sales-chat.tsx"
 import { useCopilotChat } from "@copilotkit/react-core";
@@ -517,7 +517,7 @@ Sometimes you'll want to guide the AI to call a specific tool when entering a st
 The payment info stage demonstrates how to guide the AI to make specific tool calls by 
 adding additional instructions to call the `getPaymentInformation` tool explicitly.
 
-Click here for the [source code](https://github.com/CopilotKit/CopilotKit/tree/main/CopilotKit/examples/state-machine/src/lib/stages/use-stage-get-payment-info.tsx)
+Click here for the [source code](https://github.com/CopilotKit/CopilotKit/tree/main/examples/state-machine/src/lib/stages/use-stage-get-payment-info.tsx)
 
 ```tsx title="src/lib/stages/use-stage-get-payment-info.tsx"
 export function useStageGetPaymentInfo() {

examples/copilot-state-machine/README.md

@@ -0,0 +1,150 @@
+# State Machine Copilot
+
+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](https://state-machine-copilot.vercel.app/)
+
+<div align="center">
+  <img src="./assets/preview.png" alt="State Machine Copilot for Car Sales"/>
+
+  <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%2014-black" alt="Built with Next.js"/>
+  </a>
+  <a href="https://reactflow.dev/" target="_blank">
+    <img src="https://img.shields.io/badge/Visualized%20with-React%20Flow-ff0072" alt="Visualized with React Flow"/>
+  </a>
+</div>
+
+## 🚗 Overview
+
+This application simulates a car dealership experience where an AI assistant guides users through a multi-stage process:
+
+1. **Contact Information** - Collecting customer details
+2. **Car Selection** - Helping users build their dream car
+3. **Financing Options** - Offering payment alternatives
+4. **Payment Processing** - Handling financing or direct payment
+5. **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
+
+1. Clone the repository:
+   ```bash
+   git clone https://github.com/CopilotKit/CopilotKit.git
+   cd CopilotKit/examples/copilot-state-machine
+   ```
+
+2. Install dependencies:
+
+   ```bash
+   pnpm install
+   ```
+
+   <details>
+     <summary><b>Using other package managers</b></summary>
+     
+     ```bash
+     # Using yarn
+     yarn install
+     
+     # Using npm
+     npm install
+     ```
+   </details>
+
+3. Create a `.env` file in the project root and add your [Copilot Cloud Public API Key](https://cloud.copilotkit.ai):
+   ```
+   NEXT_PUBLIC_CPK_PUBLIC_API_KEY=your_api_key_here
+   ```
+
+4. Start the development server:
+
+   ```bash
+   pnpm dev
+   ```
+
+   <details>
+     <summary><b>Using other package managers</b></summary>
+     
+     ```bash
+     # Using yarn
+     yarn dev
+     
+     # Using npm
+     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 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:
+
+1. [getContactInfo](./src/lib/stages/use-stage-get-contact-info.tsx) - Collecting customer information
+2. [buildCar](./src/lib/stages/use-stage-build-car.tsx) - Configuring car options
+3. [sellFinancing](./src/lib/stages/use-stage-sell-financing.tsx) - Presenting financing options
+4. [getFinancingInfo](./src/lib/stages/use-stage-get-financing-info.tsx) - Collecting financing details
+5. [getPaymentInfo](./src/lib/stages/use-stage-get-payment-info.tsx) - Processing payment information
+6. [confirmOrder](./src/lib/stages/use-stage-confirm-order.tsx) - Finalizing the order
+
+Each stage hook encapsulates stage-specific CopilotKit configuration and prompts.
+
+### Global State Management
+
+The [use-global-state.tsx](./src/lib/stages/use-global-state.tsx) hook manages the application's global state, while the [car-sales-chat.tsx](./src/components/car-sales-chat.tsx) component ties all stages together.
+
+### State Visualization
+
+A [React Flow](https://reactflow.dev/) powered visualizer ([state-visualizer.tsx](./src/components/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:
+
+```tsx
+// 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
+  },
+});
+```
+
+## 📚 Learn More
+
+Ready to build your own AI-powered state machine? Check out these resources:
+
+- [CopilotKit Documentation](https://docs.copilotkit.ai) - Comprehensive guides and API references
+- [CopilotKit Cloud](https://cloud.copilotkit.ai/) - Deploy your copilots with our managed cloud solution
+- [React Flow Documentation](https://reactflow.dev/docs/introduction/) - Learn more about building interactive node-based UIs
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.

examples/copilot-state-machine/package.json

@@ -3,15 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "example-dev": "next dev",
-    "example-build": "next build",
-    "example-start": "next start",
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
     "lint": "next lint",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist && rm -rf .next"
   },
   "dependencies": {
-    "@copilotkit/react-core": "workspace:*",
-    "@copilotkit/react-ui": "workspace:*",
+    "@copilotkit/react-core": "1.6.0",
+    "@copilotkit/react-ui": "1.6.0",
     "clsx": "^1.2.1",
     "motion": "^11.18.1",
     "next": "14.2.1",