update TODO list tutorial

Author: mme

docs/pages/tutorial-ai-todo-list-copilot/step-1-checkout-repo.mdx

@@ -6,6 +6,7 @@ We'll begin by checking out the base code of the todo list app. We'll start from
 
 ```shell
 git clone -b base-start-here https://github.com/CopilotKit/example-todos-app.git
+cd example-todos-app
 ```
 
 ## Install dependencies
@@ -27,4 +28,3 @@ npm run dev
 You should be able to go to [http://localhost:3000](http://localhost:3000) and see the todo list app. Feel free to play around with the app to get a feel for it.
 
 Now, let's start adding some AI copilot superpowers to this app.
-

docs/pages/tutorial-ai-todo-list-copilot/step-2-setup-copilotkit.mdx

@@ -1,4 +1,4 @@
-import { Callout } from "nextra/components"
+import { Callout } from "nextra/components";
 import { TailoredExperience, LinkToCopilotCloud } from "@/components";
 import SelfHostingCopilotRuntimeCreateEndpoint from "@/snippets/self-hosting-copilot-runtime-create-endpoint.mdx";
 import SelfHostingCopilotRuntimeConfigureCopilotKitProvider from "@/snippets/self-hosting-copilot-runtime-configure-copilotkit-provider.mdx";
@@ -19,61 +19,63 @@ npm install @copilotkit/react-core @copilotkit/react-ui
 ```
 
 ## Setup CopilotKit
+
 <TailoredExperience.Toggle />
 
 <TailoredExperience.CloudContent>
 
-  ### Configure the `<CopilotKit />` Provider
+### Configure the `<CopilotKit />` Provider
 
-  The `<CopilotKit>` provider will wrap our app. Let's add it to the `page.tsx` file.
+The `<CopilotKit>` provider will wrap our app. Let's add it to the `page.tsx` file.
 
   <Callout type="info">
     <LinkToCopilotCloud>Click here to get your Copilot Cloud API key for free</LinkToCopilotCloud>. Then, replace `<your-public-api-key>` with your actual API key.
   </Callout>
 
-  ```tsx filename="app/page.tsx" showLineNumbers {5,9,13}
-  "use client";
-
-  import { TasksList } from "@/components/TasksList";
-  import { TasksProvider } from "@/lib/hooks/use-tasks";
-  import { CopilotKit } from "@copilotkit/react-core";
-
-  export default function Home() {
-    return (
-      <CopilotKit publicApiKey={"<your-public-api-key>"}>
-        <TasksProvider>
-          <TasksList />
-        </TasksProvider>
-      </CopilotKit>
-    );
-  }
-  ```
+```tsx filename="app/page.tsx" showLineNumbers {5,9,13}
+"use client";
+
+import { TasksList } from "@/components/TasksList";
+import { TasksProvider } from "@/lib/hooks/use-tasks";
+import { CopilotKit } from "@copilotkit/react-core";
+
+export default function Home() {
+  return (
+    <CopilotKit publicApiKey={"<your-public-api-key>"}>
+      <TasksProvider>
+        <TasksList />
+      </TasksProvider>
+    </CopilotKit>
+  );
+}
+```
+
 </TailoredExperience.CloudContent>
 
 <TailoredExperience.SelfHostContent>
   ### Step 1: Set up Copilot Runtime Endpoint
 
-  <SelfHostingCopilotRuntimeCreateEndpoint />
+<SelfHostingCopilotRuntimeCreateEndpoint />
 
-  ### Step 2: Configure the CopilotKit Provider
+### Step 2: Configure the CopilotKit Provider
 
-  ```tsx filename="app/page.tsx" showLineNumbers {5,9,13}
-  "use client";
+```tsx filename="app/page.tsx" showLineNumbers {5,9,13}
+"use client";
 
-  import { TasksList } from "@/components/TasksList";
-  import { TasksProvider } from "@/lib/hooks/use-tasks";
-  import { CopilotKit } from "@copilotkit/react-core";
+import { TasksList } from "@/components/TasksList";
+import { TasksProvider } from "@/lib/hooks/use-tasks";
+import { CopilotKit } from "@copilotkit/react-core";
 
-  export default function Home() {
-    return (
-      <CopilotKit runtimeUrl={"<your-runtime-url>"}>
-        <TasksProvider>
-          <TasksList />
-        </TasksProvider>
-      </CopilotKit>
-    );
-  }
-  ```
+export default function Home() {
+  return (
+    <CopilotKit runtimeUrl="/api/copilotkit">
+      <TasksProvider>
+        <TasksList />
+      </TasksProvider>
+    </CopilotKit>
+  );
+}
+```
 
 </TailoredExperience.SelfHostContent>
 
@@ -94,7 +96,7 @@ import "@copilotkit/react-ui/styles.css";
 
 export default function Home() {
   return (
-    <CopilotKit ...>
+    <CopilotKit runtimeUrl="/api/copilotkit">
       <TasksProvider>
         <TasksList />
       </TasksProvider>
@@ -113,4 +115,3 @@ Here's what we did:
 Now, head back to your app and you'll find a chat popup in the bottom right corner of the page. At this point, you can start interacting with your copilot! 🎉
 
 In the next step, we'll make our assistant smarter by providing it with readable state about our todo list.
-

docs/pages/tutorial-ai-todo-list-copilot/step-4-copilot-actions.mdx

@@ -1,4 +1,3 @@
-
 # Step 4: Copilot Actions
 
 Now it's time to make our copilot even more useful by taking actions.
@@ -13,14 +12,14 @@ Essentially, we want our copilot to be able to call the `addTask`, `setTaskStatu
 
 The [`useCopilotAction`](/reference/hooks/useCopilotAction) hook makes actions available to our copilot. Let's implement it in the [`lib/hooks/use-tasks.tsx`](https://github.com/CopilotKit/example-todos-app/blob/base-start-here/lib/hooks/use-tasks.tsx) file.
 
-```tsx filename="libs/hooks/use-tasks.tsx" showLineNumbers {8-22,24-38,40-61}
+```tsx filename="libs/hooks/use-tasks.tsx" showLineNumbers {3-3,8-22,24-38,40-61}
 // ... the rest of the file
 
-import { useCopilotReadable, useCopilotAction } from "@copilotkit/react";
+import { useCopilotReadable, useCopilotAction } from "@copilotkit/react-core";
 
 export const TasksProvider = ({ children }: { children: ReactNode }) => {
   const [tasks, setTasks] = useState<Task[]>(defaultTasks);
-  
+
   useCopilotAction({
     name: "addTask",
     description: "Adds a task to the todo list",
@@ -34,7 +33,7 @@ export const TasksProvider = ({ children }: { children: ReactNode }) => {
     ],
     handler: ({ title }) => {
       addTask(title);
-    }
+    },
   });
 
   useCopilotAction({
@@ -50,7 +49,7 @@ export const TasksProvider = ({ children }: { children: ReactNode }) => {
     ],
     handler: ({ id }) => {
       deleteTask(id);
-    }
+    },
   });
 
   useCopilotAction({
@@ -73,17 +72,15 @@ export const TasksProvider = ({ children }: { children: ReactNode }) => {
     ],
     handler: ({ id, status }) => {
       setTaskStatus(id, status);
-    }
+    },
   });
 
   // ... the rest of the file
-}
+};
 ```
 
 The `useCopilotAction` hook is a powerful hook that allows us to register actions with our copilot. It takes an object with the following properties:
 
-
-
 - `name` is the name of the action.
 - `description` is a description of the action. It's important to choose a good description so that our copilot can choose the right action.
 - `parameters` is an array of parameters that the action takes. It follows the [JSON Schema](https://json-schema.org/) format.
@@ -101,4 +98,3 @@ Now, head back to the app and ask your pilot to do any of the following:
 - etc.
 
 Your copilot is now more helpful than ever 💪
-

docs/snippets/self-hosting-copilot-runtime-create-endpoint.mdx

@@ -12,13 +12,14 @@ Copilot Runtime is designed to run as a handler for HTTP endpoints (typically `/
   <Tabs.Tab>
     Create a new route to handle the `/api/copilotkit` endpoint.
 
-    ```ts showLineNumbers filename="app/copilotkit/route.ts"
+    ```ts showLineNumbers filename="app/api/copilotkit/route.ts"
     import {
       CopilotRuntime,
       OpenAIAdapter,
       copilotRuntimeNextJSAppRouterEndpoint,
     } from "@copilotkit/runtime";
     import OpenAI from "openai";
+    import { NextRequest } from "next/server";
 
     const openai = new OpenAI();
     const serviceAdapter = new OpenAIAdapter({ openai });
@@ -37,6 +38,7 @@ Copilot Runtime is designed to run as a handler for HTTP endpoints (typically `/
     ```
 
     Your Copilot Runtime endpoint should be available at `http://localhost:{port}/api/copilotkit`.
+
   </Tabs.Tab>
   <Tabs.Tab>
     Create a new route to handle the `/api/copilotkit` endpoint:
@@ -67,6 +69,7 @@ Copilot Runtime is designed to run as a handler for HTTP endpoints (typically `/
     ```
 
     Your Copilot Runtime endpoint should be available at `http://localhost:{port}/api/copilotkit`.
+
   </Tabs.Tab>
   <Tabs.Tab>
     Create a new Express.js app and set up the Copilot Runtime handler:
@@ -97,6 +100,7 @@ Copilot Runtime is designed to run as a handler for HTTP endpoints (typically `/
     ```
 
     Your Copilot Runtime endpoint should be available at `http://localhost:4000/copilotkit`.
+
   </Tabs.Tab>
   <Tabs.Tab>
     Set up a simple Node.js HTTP server and use the Copilot Runtime to handle requests:
@@ -126,27 +130,31 @@ Copilot Runtime is designed to run as a handler for HTTP endpoints (typically `/
     ```
 
     Your Copilot Runtime endpoint should be available at `http://localhost:4000/copilotkit`.
+
   </Tabs.Tab>
   <Tabs.Tab>
   ```ts showLineNumbers filename="copilotkit.controller.ts"
   import { All, Controller, Req, Res } from "@nestjs/common";
   import { AppService } from "./app.service";
   import { CopilotRuntime, OpenAIAdapter } from "@copilotkit/backend";
 
-  @Controller()
-  export class AppController {
-    constructor(private readonly appService: AppService) {}
+@Controller()
+export class AppController {
+constructor(private readonly appService: AppService) {}
 
     @All("/copilotkit")
     copilotkit(@Req() req: Request, @Res() res: Response) {
       const copilotKit = new CopilotRuntime();
       const openaiAdapter = new OpenAIAdapter();
       copilotKit.streamHttpServerResponse(req, res, openaiAdapter);
     }
-  }
-  ```
 
-  Your Copilot Runtime endpoint should be available at `http://localhost:{port}/copilotkit`.
-  </Tabs.Tab>
+}
+
+```
+
+Your Copilot Runtime endpoint should be available at `http://localhost:{port}/copilotkit`.
+</Tabs.Tab>
 </Tabs>
 
+```