Add Tanstack Router with multi-page demo structure

client/package.json

@@ -16,6 +16,8 @@
     "@copilotkit/react-ui": "^1.10.6",
     "@copilotkit/runtime": "^1.10.6",
     "@langchain/openai": "^0.6.16",
+    "@tanstack/react-router": "^1.133.21",
+    "@tanstack/router-devtools": "^1.133.21",
     "@types/express": "^5.0.3",
     "express": "^5.1.0",
     "react": "^19.1.1",

client/src/main.tsx

@@ -1,9 +1,20 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import App from "./App.tsx";
+import { RouterProvider, createRouter } from "@tanstack/react-router";
+import { routeTree } from "./routeTree.gen";
+
+// Create a new router instance
+const router = createRouter({ routeTree });
+
+// Register the router instance for type safety
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router;
+  }
+}
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </StrictMode>
 );

client/src/routeTree.gen.ts

@@ -0,0 +1,97 @@
+/* prettier-ignore-start */
+
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file is auto-generated by TanStack Router
+
+// Import Routes
+
+import { Route as rootRoute } from './routes/__root'
+import { Route as SquareColorImport } from './routes/square-color'
+import { Route as IndexImport } from './routes/index'
+
+// Create/Update Routes
+
+const SquareColorRoute = SquareColorImport.update({
+  path: '/square-color',
+  getParentRoute: () => rootRoute,
+} as any)
+
+const IndexRoute = IndexImport.update({
+  path: '/',
+  getParentRoute: () => rootRoute,
+} as any)
+
+// Populate the FileRoutesByPath interface
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexImport
+      parentRoute: typeof rootRoute
+    }
+    '/square-color': {
+      id: '/square-color'
+      path: '/square-color'
+      fullPath: '/square-color'
+      preLoaderRoute: typeof SquareColorImport
+      parentRoute: typeof rootRoute
+    }
+  }
+}
+
+// Create and export the route tree
+
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByPath
+  fullPaths: '/' | '/square-color'
+  fileRoutesByTo: FileRoutesByPath
+  to: '/' | '/square-color'
+  id: '__root__' | '/' | '/square-color'
+  fileRoutesById: {
+    __root__: typeof rootRoute
+    '/': typeof IndexRoute
+    '/square-color': typeof SquareColorRoute
+  }
+}
+
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  SquareColorRoute: typeof SquareColorRoute
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  SquareColorRoute: SquareColorRoute,
+}
+
+export const routeTree = rootRoute._addFileChildren(rootRouteChildren)._addFileTypes<FileRouteTypes>()
+
+/* prettier-ignore-end */
+
+/* ROUTE_MANIFEST_START
+{
+  "routes": {
+    "__root__": {
+      "filePath": "__root.tsx",
+      "children": [
+        "/",
+        "/square-color"
+      ]
+    },
+    "/": {
+      "filePath": "index.tsx"
+    },
+    "/square-color": {
+      "filePath": "square-color.tsx"
+    }
+  }
+}
+ROUTE_MANIFEST_END */

client/src/routes/__root.tsx

@@ -0,0 +1,17 @@
+import { CopilotKit } from "@copilotkit/react-core";
+import "@copilotkit/react-ui/styles.css";
+import { createRootRoute, Outlet } from "@tanstack/react-router";
+import { TanStackRouterDevtools } from "@tanstack/router-devtools";
+
+export const Route = createRootRoute({
+  component: RootComponent,
+});
+
+function RootComponent() {
+  return (
+    <CopilotKit runtimeUrl="/api/copilotkit" agent="agent">
+      <Outlet />
+      <TanStackRouterDevtools />
+    </CopilotKit>
+  );
+}

client/src/routes/index.module.css

@@ -0,0 +1,51 @@
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 40px 20px;
+}
+
+.title {
+  font-size: 48px;
+  font-weight: bold;
+  margin-bottom: 16px;
+  color: #1a1a1a;
+}
+
+.subtitle {
+  font-size: 20px;
+  color: #666;
+  margin-bottom: 40px;
+}
+
+.demoList {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 24px;
+}
+
+.demoCard {
+  padding: 24px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  text-decoration: none;
+  color: inherit;
+  transition: all 0.2s ease;
+}
+
+.demoCard:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  border-color: #646cff;
+  transform: translateY(-2px);
+}
+
+.demoCard h2 {
+  font-size: 24px;
+  margin-bottom: 12px;
+  color: #1a1a1a;
+}
+
+.demoCard p {
+  font-size: 16px;
+  color: #666;
+  line-height: 1.5;
+}

client/src/routes/index.tsx

@@ -0,0 +1,26 @@
+import { createFileRoute, Link } from "@tanstack/react-router";
+import styles from "./index.module.css";
+
+export const Route = createFileRoute("/")({
+  component: IndexComponent,
+});
+
+function IndexComponent() {
+  return (
+    <div className={styles.container}>
+      <h1 className={styles.title}>CopilotKit Demos</h1>
+      <p className={styles.subtitle}>
+        Explore different examples of CopilotKit integration
+      </p>
+      <div className={styles.demoList}>
+        <Link to="/square-color" className={styles.demoCard}>
+          <h2>Square Color Demo</h2>
+          <p>
+            Interact with an AI assistant to change the color of a square using
+            actions and readable state
+          </p>
+        </Link>
+      </div>
+    </div>
+  );
+}

client/src/routes/square-color.module.css

@@ -0,0 +1,63 @@
+.container {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+  padding: 40px 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 40px;
+}
+
+.backLink {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  color: #646cff;
+  text-decoration: none;
+  font-size: 16px;
+  transition: opacity 0.2s;
+}
+
+.backLink:hover {
+  opacity: 0.8;
+}
+
+.square {
+  width: 200px;
+  height: 200px;
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  transition: background-color 0.3s ease;
+}
+
+.buttonContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  align-items: center;
+}
+
+.buttonContainer button {
+  padding: 12px 32px;
+  font-size: 16px;
+  font-weight: 500;
+  border: none;
+  border-radius: 8px;
+  background-color: #646cff;
+  color: white;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  min-width: 120px;
+}
+
+.buttonContainer button:hover {
+  background-color: #535bf2;
+}
+
+.currentColor {
+  margin-top: 8px;
+  font-size: 18px;
+  color: #1a1a1a;
+  font-weight: 500;
+}

client/src/routes/square-color.tsx

@@ -0,0 +1,81 @@
+import {
+  useCopilotAction,
+  useCopilotReadable,
+} from "@copilotkit/react-core";
+import { CopilotSidebar } from "@copilotkit/react-ui";
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { useState } from "react";
+import styles from "./square-color.module.css";
+
+export const Route = createFileRoute("/square-color")({
+  component: SquareColorDemo,
+});
+
+function Square({ color = "blue" }) {
+  return (
+    <div className={styles.square} style={{ backgroundColor: color }} />
+  );
+}
+
+function SquareColorDemo() {
+  const [color, setColor] = useState("blue");
+
+  useCopilotReadable({
+    description: "The current color of the square",
+    value: color,
+  });
+
+  useCopilotAction({
+    name: "setSquareColor",
+    description: "Set the color of the square",
+    parameters: [
+      {
+        name: "color",
+        type: "string",
+        description: "The new color for the square",
+      },
+    ],
+    handler: async ({ color }) => {
+      setColor(color);
+    },
+  });
+
+  return (
+    <>
+      <CopilotSidebar
+        defaultOpen
+        clickOutsideToClose={false}
+        hitEscapeToClose={false}
+        instructions={
+          "You are assisting the user as best as you can. Answer in the best way possible given the data you have."
+        }
+        labels={{
+          title: "Your Assistant",
+          initial: "Hi! 👋 How can I assist you today?",
+        }}
+        suggestions={[
+          {
+            title: "Change square color",
+            message: "Choose a new random background color.",
+          },
+          {
+            title: "What is the square color?",
+            message: "What is the square color?",
+          },
+        ]}
+      />
+      <div className={styles.container}>
+        <Link to="/" className={styles.backLink}>
+          ← Back to demos
+        </Link>
+        <Square color={color} />
+        <div className={styles.buttonContainer}>
+          <button onClick={() => setColor("red")}>Red</button>
+          <button onClick={() => setColor("blue")}>Blue</button>
+          <button onClick={() => setColor("green")}>Green</button>
+          <div className={styles.currentColor}>Current color: {color}</div>
+        </div>
+      </div>
+    </>
+  );
+}