web

.tool-versions

@@ -0,0 +1 @@
+nodejs 24.11.1

web/.github/workflows/smoke.yml

@@ -0,0 +1,144 @@
+name: Smoke
+
+on:
+  push:
+    branches: main
+  pull_request:
+    branches: main
+  schedule:
+    - cron: "0 0 * * *" # Run daily at midnight UTC
+
+jobs:
+  smoke:
+    name: ${{ matrix.os }} / Node ${{ matrix.node }} / Python ${{ matrix.python }}
+    runs-on: ${{ matrix.os }}
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [ubuntu-latest, windows-latest, macos-latest]
+        node: [20, 22]
+        python: [3.12, 3.13]
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node }}
+
+      - name: Setup Python
+        uses: actions/setup-python@v4
+        with:
+          python-version: ${{ matrix.python }}
+
+      - name: Install uv
+        uses: astral-sh/setup-uv@v4
+        with:
+          enable-cache: true
+
+      - name: Configure uv to use matrix Python version
+        run: echo "UV_PYTHON=python${{ matrix.python }}" >> $GITHUB_ENV
+
+      - name: Install Node.js dependencies (root)
+        run: npm install
+
+      - name: Install Node.js dependencies (agent)
+        run: |
+          cd agent
+          npm install
+
+      - name: Build frontend
+        run: npm run build
+
+      - name: Test frontend startup (Linux/macOS)
+        if: runner.os != 'Windows'
+        run: |
+          # Start the Next.js frontend in background
+          npm start &
+          FRONTEND_PID=$!
+
+          # Wait for frontend to start (max 30 seconds)
+          timeout=30
+          elapsed=0
+          started=false
+
+          while [ $elapsed -lt $timeout ] && [ "$started" = false ]; do
+            if curl -s http://localhost:3000 > /dev/null 2>&1; then
+              started=true
+              echo "✅ Frontend started successfully"
+            else
+              sleep 1
+              elapsed=$((elapsed + 1))
+            fi
+          done
+
+          # Clean up background process
+          kill $FRONTEND_PID 2>/dev/null || true
+
+          if [ "$started" = false ]; then
+            echo "❌ Frontend failed to start within 30 seconds"
+            exit 1
+          fi
+        shell: bash
+
+      - name: Test frontend startup (Windows)
+        if: runner.os == 'Windows'
+        run: |
+          # Start the Next.js frontend in background
+          npm start &
+
+          # Wait for frontend to start (max 30 seconds)
+          $timeout = 30
+          $elapsed = 0
+          $started = $false
+
+          while ($elapsed -lt $timeout -and -not $started) {
+            try {
+              $response = Invoke-WebRequest -Uri "http://localhost:3000" -TimeoutSec 1 -ErrorAction SilentlyContinue
+              if ($response.StatusCode -eq 200) {
+                $started = $true
+                Write-Host "✅ Frontend started successfully"
+              }
+            } catch {
+              Start-Sleep -Seconds 1
+              $elapsed++
+            }
+          }
+
+          if (-not $started) {
+            Write-Host "❌ Frontend failed to start within 30 seconds"
+            exit 1
+          }
+        shell: pwsh
+
+      - name: Run linting
+        run: npm run lint
+
+  notify-slack:
+    name: Notify Slack on Failure
+    runs-on: ubuntu-latest
+    needs: smoke
+    if: |
+      failure() &&
+      github.event_name == 'schedule'
+    steps:
+      - name: Notify Slack
+        uses: slackapi/slack-github-action@v2.1.0
+        with:
+          webhook: ${{ secrets.SLACK_WEBHOOK_URL }}
+          webhook-type: incoming-webhook
+          payload: |
+            {
+              "text": ":warning: *Smoke test failed for `with-langgraph-python` :warning:.*",
+              "blocks": [
+                {
+                  "type": "section",
+                  "text": {
+                    "type": "mrkdwn",
+                    "text": ":warning: *Smoke test failed for <https://github.com/copilotkit/with-langgraph-python|with-langgraph-python> :warning:*\n\n<${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}|View run details>"
+                  }
+                }
+              ]
+            }

web/.gitignore

@@ -0,0 +1,50 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# lock files
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
+bun.lockb
+
+# LangGraph API
+.langgraph_api

web/LICENSE

@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) Atai Barkai
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

web/README.md

@@ -0,0 +1,105 @@
+# CopilotKit <> LangGraph Starter
+
+This is a starter template for building AI agents using [LangGraph](https://www.langchain.com/langgraph) and [CopilotKit](https://copilotkit.ai). It provides a modern Next.js application with an integrated LangGraph agent to be built on top of.
+
+## Prerequisites
+
+- Node.js 18+ 
+- Python 3.8+
+- Any of the following package managers:
+  - [pnpm](https://pnpm.io/installation) (recommended)
+  - npm
+  - [yarn](https://classic.yarnpkg.com/lang/en/docs/install/#mac-stable)
+  - [bun](https://bun.sh/)
+- OpenAI API Key (for the LangGraph agent)
+
+> **Note:** This repository ignores lock files (package-lock.json, yarn.lock, pnpm-lock.yaml, bun.lockb) to avoid conflicts between different package managers. Each developer should generate their own lock file using their preferred package manager. After that, make sure to delete it from the .gitignore.
+
+## Getting Started
+
+1. Install dependencies using your preferred package manager:
+```bash
+# Using pnpm (recommended)
+pnpm install
+
+# Using npm
+npm install
+
+# Using yarn
+yarn install
+
+# Using bun
+bun install
+```
+
+> **Note:** Installing the package dependencies will also install the agent's python dependencies via the `install:agent` script.
+
+
+2. Set up your OpenAI API key:
+```bash
+echo 'OPENAI_API_KEY=your-openai-api-key-here' > agent/.env
+```
+
+3. Start the development server:
+```bash
+# Using pnpm
+pnpm dev
+
+# Using npm
+npm run dev
+
+# Using yarn
+yarn dev
+
+# Using bun
+bun run dev
+```
+
+This will start both the UI and agent servers concurrently.
+
+## Available Scripts
+The following scripts can also be run using your preferred package manager:
+- `dev` - Starts both UI and agent servers in development mode
+- `dev:debug` - Starts development servers with debug logging enabled
+- `dev:ui` - Starts only the Next.js UI server
+- `dev:agent` - Starts only the LangGraph agent server
+- `build` - Builds the Next.js application for production
+- `start` - Starts the production server
+- `lint` - Runs ESLint for code linting
+- `install:agent` - Installs Python dependencies for the agent
+
+## Documentation
+
+The main UI component is in `src/app/page.tsx`. You can:
+- Modify the theme colors and styling
+- Add new frontend actions
+- Customize the CopilotKit sidebar appearance
+
+## 📚 Documentation
+
+- [LangGraph Documentation](https://langchain-ai.github.io/langgraph/) - Learn more about LangGraph and its features
+- [CopilotKit Documentation](https://docs.copilotkit.ai) - Explore CopilotKit's capabilities
+- [Next.js Documentation](https://nextjs.org/docs) - Learn about Next.js features and API
+- [YFinance Documentation](https://pypi.org/project/yfinance/) - Financial data tools
+
+## Contributing
+
+Feel free to submit issues and enhancement requests! This starter is designed to be easily extensible.
+
+## License
+
+This project is licensed under the MIT License - see the LICENSE file for details.
+
+## Troubleshooting
+
+### Agent Connection Issues
+If you see "I'm having trouble connecting to my tools", make sure:
+1. The LangGraph agent is running on port 8000
+2. Your OpenAI API key is set correctly
+3. Both servers started successfully
+
+### Python Dependencies
+If you encounter Python import errors:
+```bash
+npm install:agent
+```

web/agent/.gitignore

@@ -0,0 +1,9 @@
+venv/
+__pycache__/
+*.pyc
+.env
+.vercel
+
+# python
+.venv/
+.langgraph_api/

web/agent/langgraph.json

@@ -0,0 +1,10 @@
+{
+  "python_version": "3.12",
+  "dockerfile_lines": [],
+  "dependencies": ["."],
+  "package_manager": "uv",
+  "graphs": {
+    "sample_agent": "./main.py:graph"
+  },
+  "env": ".env"
+}

web/agent/main.py

@@ -0,0 +1,136 @@
+"""
+This is the main entry point for the agent.
+It defines the workflow graph, state, tools, nodes and edges.
+"""
+
+from typing import Any, List
+
+from langchain.tools import tool
+from langchain_core.messages import BaseMessage, SystemMessage
+from langchain_core.runnables import RunnableConfig
+from langchain_openai import ChatOpenAI
+from langgraph.graph import END, MessagesState, StateGraph
+from langgraph.prebuilt import ToolNode
+from langgraph.types import Command
+
+
+class AgentState(MessagesState):
+    """
+    Here we define the state of the agent
+
+    In this instance, we're inheriting from CopilotKitState, which will bring in
+    the CopilotKitState fields. We're also adding a custom field, `language`,
+    which will be used to set the language of the agent.
+    """
+
+    proverbs: List[str]
+    tools: List[Any]
+    # your_custom_agent_state: str = ""
+
+
+@tool
+def get_weather(location: str):
+    """
+    Get the weather for a given location.
+    """
+    return f"The weather for {location} is 70 degrees."
+
+
+# @tool
+# def your_tool_here(your_arg: str):
+#     """Your tool description here."""
+#     print(f"Your tool logic here")
+#     return "Your tool response here."
+
+backend_tools = [
+    get_weather
+    # your_tool_here
+]
+
+# Extract tool names from backend_tools for comparison
+backend_tool_names = [tool.name for tool in backend_tools]
+
+
+async def chat_node(state: AgentState, config: RunnableConfig) -> Command[str]:
+    """
+    Standard chat node based on the ReAct design pattern. It handles:
+    - The model to use (and binds in CopilotKit actions and the tools defined above)
+    - The system prompt
+    - Getting a response from the model
+    - Handling tool calls
+
+    For more about the ReAct design pattern, see:
+    https://www.perplexity.ai/search/react-agents-NcXLQhreS0WDzpVaS4m9Cg
+    """
+
+    # 1. Define the model
+    model = ChatOpenAI(model="gpt-5-mini")
+
+    # 2. Bind the tools to the model
+    model_with_tools = model.bind_tools(
+        [
+            *state.get("tools", []),  # bind tools defined by ag-ui
+            *backend_tools,
+            # your_tool_here
+        ],
+        # 2.1 Disable parallel tool calls to avoid race conditions,
+        #     enable this for faster performance if you want to manage
+        #     the complexity of running tool calls in parallel.
+        parallel_tool_calls=False,
+    )
+
+    # 3. Define the system message by which the chat model will be run
+    system_message = SystemMessage(
+        content=f"You are a helpful assistant. The current proverbs are {state.get('proverbs', [])}."
+    )
+
+    # 4. Run the model to generate a response
+    response = await model_with_tools.ainvoke(
+        [
+            system_message,
+            *state["messages"],
+        ],
+        config,
+    )
+
+    # only route to tool node if tool is not in the tools list
+    if route_to_tool_node(response):
+        print("routing to tool node")
+        return Command(
+            goto="tool_node",
+            update={
+                "messages": [response],
+            },
+        )
+
+    # 5. We've handled all tool calls, so we can end the graph.
+    return Command(
+        goto=END,
+        update={
+            "messages": [response],
+        },
+    )
+
+
+def route_to_tool_node(response: BaseMessage):
+    """
+    Route to tool node if any tool call in the response matches a backend tool name.
+    """
+    tool_calls = getattr(response, "tool_calls", None)
+    if not tool_calls:
+        return False
+
+    for tool_call in tool_calls:
+        if tool_call.get("name") in backend_tool_names:
+            return True
+    return False
+
+
+# Define the workflow graph
+workflow = StateGraph(AgentState)
+workflow.add_node("chat_node", chat_node)
+workflow.add_node("tool_node", ToolNode(tools=backend_tools))
+workflow.add_edge("tool_node", "chat_node")
+workflow.set_entry_point("chat_node")
+
+graph = workflow.compile()

web/agent/pyproject.toml

@@ -0,0 +1,16 @@
+[project]
+name = "sample-agent"
+version = "0.1.0"
+description = "A LangGraph agent"
+requires-python = ">=3.12"
+dependencies = [
+    "langchain==1.1.0",
+    "langgraph==1.0.4",
+    "langsmith>=0.4.49",
+    "openai>=1.68.2,<2.0.0",
+    "fastapi>=0.115.5,<1.0.0",
+    "uvicorn>=0.29.0,<1.0.0",
+    "python-dotenv>=1.0.0,<2.0.0",
+    "langgraph-cli[inmem]>=0.4.7",
+    "langchain-openai>=1.1.0",
+]

web/eslint.config.mjs

@@ -0,0 +1,19 @@
+import nextCoreWebVitals from "eslint-config-next/core-web-vitals";
+import nextTypescript from "eslint-config-next/typescript";
+
+const eslintConfig = [
+  ...nextCoreWebVitals,
+  ...nextTypescript,
+  {
+    ignores: [
+      "node_modules/**",
+      ".next/**",
+      "out/**",
+      "build/**",
+      "next-env.d.ts",
+      "agent",
+    ],
+  },
+];
+
+export default eslintConfig;

web/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

web/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "cavepediav2-web",
+  "version": "1.0",
+  "private": true,
+  "scripts": {
+    "dev": "concurrently \"npm run dev:ui\" \"npm run dev:agent\" --names ui,agent --prefix-colors blue,green --kill-others",
+    "dev:debug": "LOG_LEVEL=debug npm run dev",
+    "dev:agent": "cd agent && npx @langchain/langgraph-cli dev --port 8123 --no-browser",
+    "dev:ui": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint .",
+    "install:agent": "sh ./scripts/setup-agent.sh || scripts\\setup-agent.bat",
+    "postinstall": "npm run install:agent"
+  },
+  "dependencies": {
+    "@ag-ui/langgraph": "0.0.18",
+    "@copilotkit/react-core": "1.10.6",
+    "@copilotkit/react-ui": "^0.2.0",
+    "@copilotkit/runtime": "1.10.6",
+    "next": "^16.0.7",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "zod": "^3.24.4"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@langchain/langgraph-cli": "^1.0.4",
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "concurrently": "^9.1.2",
+    "eslint": "^9",
+    "eslint-config-next": "16.0.1",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

web/postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;

web/public/file.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

web/public/globe.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

web/public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

web/public/vercel.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

web/public/window.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

web/scripts/setup-agent.bat

@@ -0,0 +1,6 @@
+@echo off
+REM Navigate to the agent directory
+cd /d "%~dp0\..\agent" || exit /b 1
+
+REM Install dependencies using uv
+uv sync 

web/scripts/setup-agent.sh

@@ -0,0 +1,7 @@
+#!/bin/bash
+
+# Navigate to the agent directory
+cd "$(dirname "$0")/../agent" || exit 1
+
+# Install dependencies using uv
+uv sync

web/src/app/api/copilotkit/route.ts

@@ -0,0 +1,35 @@
+import {
+  CopilotRuntime,
+  ExperimentalEmptyAdapter,
+  copilotRuntimeNextJSAppRouterEndpoint,
+} from "@copilotkit/runtime";
+
+import { LangGraphAgent } from "@ag-ui/langgraph"
+import { NextRequest } from "next/server";
+ 
+// 1. You can use any service adapter here for multi-agent support. We use
+//    the empty adapter since we're only using one agent.
+const serviceAdapter = new ExperimentalEmptyAdapter();
+ 
+// 2. Create the CopilotRuntime instance and utilize the LangGraph AG-UI
+//    integration to setup the connection.
+const runtime = new CopilotRuntime({
+  agents: {
+    "sample_agent": new LangGraphAgent({
+      deploymentUrl: process.env.LANGGRAPH_DEPLOYMENT_URL || "http://localhost:8123",
+      graphId: "sample_agent",
+      langsmithApiKey: process.env.LANGSMITH_API_KEY || "",
+    }),
+  }
+});
+ 
+// 3. Build a Next.js API route that handles the CopilotKit runtime requests.
+export const POST = async (req: NextRequest) => {
+  const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
+    runtime, 
+    serviceAdapter,
+    endpoint: "/api/copilotkit",
+  });
+ 
+  return handleRequest(req);
+};

web/src/app/globals.css

@@ -0,0 +1,24 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+body,
+html {
+  height: 100%;
+}

web/src/app/layout.tsx

@@ -0,0 +1,26 @@
+import type { Metadata } from "next";
+
+import { CopilotKit } from "@copilotkit/react-core";
+import "./globals.css";
+import "@copilotkit/react-ui/styles.css";
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={"antialiased"}>
+        <CopilotKit runtimeUrl="/api/copilotkit" agent="sample_agent">
+          {children}
+        </CopilotKit>
+      </body>
+    </html>
+  );
+}

web/src/app/page.tsx

@@ -0,0 +1,171 @@
+"use client";
+
+import { useCoAgent, useCopilotAction } from "@copilotkit/react-core";
+import { CopilotKitCSSProperties, CopilotSidebar } from "@copilotkit/react-ui";
+import { useState } from "react";
+
+export default function CopilotKitPage() {
+  const [themeColor, setThemeColor] = useState("#6366f1");
+
+  // 🪁 Frontend Actions: https://docs.copilotkit.ai/guides/frontend-actions
+  useCopilotAction({
+    name: "setThemeColor",
+    parameters: [{
+      name: "themeColor",
+      description: "The theme color to set. Make sure to pick nice colors.",
+      required: true, 
+    }],
+    handler({ themeColor }) {
+      setThemeColor(themeColor);
+    },
+  });
+
+  return (
+    <main style={{ "--copilot-kit-primary-color": themeColor } as CopilotKitCSSProperties}>
+      <YourMainContent themeColor={themeColor} />
+      <CopilotSidebar
+        clickOutsideToClose={false}
+        defaultOpen={true}
+        labels={{
+          title: "Popup Assistant",
+          initial: "👋 Hi, there! You're chatting with an agent. This agent comes with a few tools to get you started.\n\nFor example you can try:\n- **Frontend Tools**: \"Set the theme to orange\"\n- **Shared State**: \"Write a proverb about AI\"\n- **Generative UI**: \"Get the weather in SF\"\n\nAs you interact with the agent, you'll see the UI update in real-time to reflect the agent's **state**, **tool calls**, and **progress**."
+        }}
+      />
+    </main>
+  );
+}
+
+// State of the agent, make sure this aligns with your agent's state.
+type AgentState = {
+  proverbs: string[];
+}
+
+function YourMainContent({ themeColor }: { themeColor: string }) {
+  // 🪁 Shared State: https://docs.copilotkit.ai/coagents/shared-state
+  const { state, setState } = useCoAgent<AgentState>({
+    name: "sample_agent",
+    initialState: {
+      proverbs: [
+        "CopilotKit may be new, but its the best thing since sliced bread.",
+      ],
+    },
+  })
+
+  // 🪁 Frontend Actions: https://docs.copilotkit.ai/coagents/frontend-actions
+  useCopilotAction({
+    name: "addProverb",
+    parameters: [{
+      name: "proverb",
+      description: "The proverb to add. Make it witty, short and concise.",
+      required: true,
+    }],
+    handler: ({ proverb }) => {
+      setState({
+        ...state,
+        proverbs: [...(state.proverbs || []), proverb],
+      });
+    },
+  });
+
+  //🪁 Generative UI: https://docs.copilotkit.ai/coagents/generative-ui
+  useCopilotAction({
+    name: "get_weather",
+    description: "Get the weather for a given location.",
+    available: "disabled",
+    parameters: [
+      { name: "location", type: "string", required: true },
+    ],
+    render: ({ args }) => {
+      return <WeatherCard location={args.location} themeColor={themeColor} />
+    },
+  });
+
+  return (
+    <div
+      style={{ backgroundColor: themeColor }}
+      className="h-screen w-screen flex justify-center items-center flex-col transition-colors duration-300"
+    >
+      <div className="bg-white/20 backdrop-blur-md p-8 rounded-2xl shadow-xl max-w-2xl w-full">
+        <h1 className="text-4xl font-bold text-white mb-2 text-center">Proverbs</h1>
+        <p className="text-gray-200 text-center italic mb-6">This is a demonstrative page, but it could be anything you want! 🪁</p>
+        <hr className="border-white/20 my-6" />
+        <div className="flex flex-col gap-3">
+          {state.proverbs?.map((proverb, index) => (
+            <div 
+              key={index} 
+              className="bg-white/15 p-4 rounded-xl text-white relative group hover:bg-white/20 transition-all"
+            >
+              <p className="pr-8">{proverb}</p>
+              <button 
+                onClick={() => setState({
+                  ...state,
+                  proverbs: (state.proverbs || []).filter((_, i) => i !== index),
+                })}
+                className="absolute right-3 top-3 opacity-0 group-hover:opacity-100 transition-opacity 
+                  bg-red-500 hover:bg-red-600 text-white rounded-full h-6 w-6 flex items-center justify-center"
+              >
+                ✕
+              </button>
+            </div>
+          ))}
+        </div>
+        {state.proverbs?.length === 0 && <p className="text-center text-white/80 italic my-8">
+          No proverbs yet. Ask the assistant to add some!
+        </p>}
+      </div>
+    </div>
+  );
+}
+
+// Simple sun icon for the weather card
+function SunIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-14 h-14 text-yellow-200">
+      <circle cx="12" cy="12" r="5" />
+      <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" strokeWidth="2" stroke="currentColor" />
+    </svg>
+  );
+}
+
+// Weather card component where the location and themeColor are based on what the agent
+// sets via tool calls.
+function WeatherCard({ location, themeColor }: { location?: string, themeColor: string }) {
+  return (
+    <div
+    style={{ backgroundColor: themeColor }}
+    className="rounded-xl shadow-xl mt-6 mb-4 max-w-md w-full"
+  >
+    <div className="bg-white/20 p-4 w-full">
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="text-xl font-bold text-white capitalize">{location}</h3>
+          <p className="text-white">Current Weather</p>
+        </div>
+        <SunIcon />
+      </div>
+      
+      <div className="mt-4 flex items-end justify-between">
+        <div className="text-3xl font-bold text-white">70°</div>
+        <div className="text-sm text-white">Clear skies</div>
+      </div>
+      
+      <div className="mt-4 pt-4 border-t border-white">
+        <div className="grid grid-cols-3 gap-2 text-center">
+          <div>
+            <p className="text-white text-xs">Humidity</p>
+            <p className="text-white font-medium">45%</p>
+          </div>
+          <div>
+            <p className="text-white text-xs">Wind</p>
+            <p className="text-white font-medium">5 mph</p>
+          </div>
+          <div>
+            <p className="text-white text-xs">Feels Like</p>
+            <p className="text-white font-medium">72°</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  );
+}

web/tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}