├── agent ├── .env.example ├── .gitignore ├── langgraph.json └── requirements.txt ├── .env.local.example ├── src ├── app │ ├── favicon.ico │ ├── layout.tsx │ ├── api │ │ └── copilotkit │ │ │ └── route.ts │ └── globals.css ├── lib │ ├── utils.ts │ └── canvas │ │ ├── state.ts │ │ ├── types.ts │ │ └── updates.ts ├── components │ ├── ui │ │ ├── aspect-ratio.tsx │ │ ├── skeleton.tsx │ │ ├── sonner.tsx │ │ ├── label.tsx │ │ ├── separator.tsx │ │ ├── textarea.tsx │ │ ├── progress.tsx │ │ ├── toaster.tsx │ │ ├── collapsible.tsx │ │ ├── input.tsx │ │ ├── switch.tsx │ │ ├── avatar.tsx │ │ ├── checkbox.tsx │ │ ├── radio-group.tsx │ │ ├── hover-card.tsx │ │ ├── toggle.tsx │ │ ├── badge.tsx │ │ ├── popover.tsx │ │ ├── alert.tsx │ │ ├── scroll-area.tsx │ │ ├── tooltip.tsx │ │ ├── tabs.tsx │ │ ├── toggle-group.tsx │ │ ├── resizable.tsx │ │ ├── slider.tsx │ │ ├── accordion.tsx │ │ ├── button.tsx │ │ ├── card.tsx │ │ ├── input-otp.tsx │ │ ├── breadcrumb.tsx │ │ ├── table.tsx │ │ ├── pagination.tsx │ │ ├── form.tsx │ │ ├── alert-dialog.tsx │ │ ├── dialog.tsx │ │ ├── sheet.tsx │ │ ├── drawer.tsx │ │ ├── toast.tsx │ │ ├── command.tsx │ │ ├── carousel.tsx │ │ ├── select.tsx │ │ ├── navigation-menu.tsx │ │ ├── calendar.tsx │ │ ├── context-menu.tsx │ │ ├── dropdown-menu.tsx │ │ └── menubar.tsx │ ├── empty-state.tsx │ └── canvas │ │ ├── NewItemMenu.tsx │ │ ├── AppChatHeader.tsx │ │ ├── ItemHeader.tsx │ │ └── CardRenderer.tsx └── hooks │ ├── use-mobile.tsx │ ├── use-media-query.ts │ └── use-toast.ts ├── postcss.config.mjs ├── public ├── vercel.svg ├── window.svg ├── file.svg ├── globe.svg └── next.svg ├── next.config.ts ├── scripts ├── setup-agent.bat └── setup-agent.sh ├── eslint.config.mjs ├── tsconfig.json ├── .gitignore ├── LICENSE ├── package.json ├── .github └── workflows │ └── smoke.yml └── README.md /agent/.env.example: -------------------------------------------------------------------------------- 1 | OPENAI_API_KEY= 2 | LANGSMITH_API_KEY= 3 | 4 | LANGGRAPH_DEPLOYMENT_URL= -------------------------------------------------------------------------------- /.env.local.example: -------------------------------------------------------------------------------- 1 | COPILOT_CLOUD_PUBLIC_API_KEY= 2 | 3 | # LANGSMITH_API_KEY= 4 | # LANGGRAPH_DEPLOYMENT_URL= -------------------------------------------------------------------------------- /src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CopilotKit/canvas-with-langgraph-python/HEAD/src/app/favicon.ico -------------------------------------------------------------------------------- /agent/.gitignore: -------------------------------------------------------------------------------- 1 | venv/ 2 | __pycache__/ 3 | *.pyc 4 | .env 5 | .vercel 6 | 7 | # python 8 | .venv/ 9 | .langgraph_api/ -------------------------------------------------------------------------------- /postcss.config.mjs: -------------------------------------------------------------------------------- 1 | const config = { 2 | plugins: ["@tailwindcss/postcss"], 3 | }; 4 | 5 | export default config; 6 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /next.config.ts: -------------------------------------------------------------------------------- 1 | import type { NextConfig } from "next"; 2 | 3 | const nextConfig: NextConfig = { 4 | /* config options here */ 5 | }; 6 | 7 | export default nextConfig; 8 | -------------------------------------------------------------------------------- /src/lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { clsx, type ClassValue } from "clsx" 2 | import { twMerge } from "tailwind-merge" 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)) 6 | } 7 | -------------------------------------------------------------------------------- /agent/langgraph.json: -------------------------------------------------------------------------------- 1 | { 2 | "python_version": "3.12", 3 | "dockerfile_lines": [], 4 | "dependencies": ["."], 5 | "graphs": { 6 | "sample_agent": "./agent.py:graph" 7 | }, 8 | "env": ".env" 9 | } 10 | -------------------------------------------------------------------------------- /agent/requirements.txt: -------------------------------------------------------------------------------- 1 | langchain==0.3.26 2 | langgraph>=0.4.12,<0.7.0 3 | langsmith==0.4.4 4 | openai>=1.68.2,<2.0.0 5 | fastapi>=0.115.5,<1.0.0 6 | uvicorn>=0.29.0,<1.0.0 7 | python-dotenv>=1.0.0,<2.0.0 8 | langgraph-cli[inmem]>=0.3.5 9 | langchain-openai>=0.0.1 10 | copilotkit>=0.1.0,<0.2.0 11 | -------------------------------------------------------------------------------- /src/components/ui/aspect-ratio.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio" 4 | 5 | function AspectRatio({ 6 | ...props 7 | }: React.ComponentProps) { 8 | return 9 | } 10 | 11 | export { AspectRatio } 12 | -------------------------------------------------------------------------------- /src/components/ui/skeleton.tsx: -------------------------------------------------------------------------------- 1 | import { cn } from "@/lib/utils" 2 | 3 | function Skeleton({ className, ...props }: React.ComponentProps<"div">) { 4 | return ( 5 |
10 | ) 11 | } 12 | 13 | export { Skeleton } 14 | -------------------------------------------------------------------------------- /public/window.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/file.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /scripts/setup-agent.bat: -------------------------------------------------------------------------------- 1 | @echo off 2 | REM Navigate to the agent directory 3 | cd /d "%~dp0\..\agent" || exit /b 1 4 | 5 | REM Create virtual environment if it doesn't exist 6 | if not exist ".venv" ( 7 | python -m venv .venv 8 | ) 9 | 10 | REM Activate the virtual environment 11 | call .venv\Scripts\activate.bat 12 | 13 | REM Install requirements using pip 14 | pip install -r requirements.txt -------------------------------------------------------------------------------- /scripts/setup-agent.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # Navigate to the agent directory 4 | cd "$(dirname "$0")/../agent" || exit 1 5 | 6 | # Create virtual environment if it doesn't exist 7 | if [ ! -d ".venv" ]; then 8 | python3 -m venv .venv || python -m venv .venv 9 | fi 10 | 11 | # Activate the virtual environment 12 | source .venv/bin/activate 13 | 14 | # Install requirements using pip3 or pip 15 | (pip3 install -r requirements.txt || pip install -r requirements.txt) 16 | -------------------------------------------------------------------------------- /eslint.config.mjs: -------------------------------------------------------------------------------- 1 | import { dirname } from "path"; 2 | import { fileURLToPath } from "url"; 3 | import { FlatCompat } from "@eslint/eslintrc"; 4 | 5 | const __filename = fileURLToPath(import.meta.url); 6 | const __dirname = dirname(__filename); 7 | 8 | const compat = new FlatCompat({ 9 | baseDirectory: __dirname, 10 | }); 11 | 12 | const eslintConfig = [ 13 | ...compat.extends("next/core-web-vitals", "next/typescript"), 14 | ]; 15 | 16 | export default eslintConfig; 17 | -------------------------------------------------------------------------------- /src/components/empty-state.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import type React from "react"; 4 | import { cn } from "@/lib/utils"; 5 | 6 | export function EmptyState(props: { className?: string; children?: React.ReactNode }) { 7 | return ( 8 |
14 | {props.children} 15 |
16 | ); 17 | } 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/hooks/use-mobile.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | const MOBILE_BREAKPOINT = 768 4 | 5 | export function useIsMobile() { 6 | const [isMobile, setIsMobile] = React.useState(undefined) 7 | 8 | React.useEffect(() => { 9 | const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`) 10 | const onChange = () => { 11 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) 12 | } 13 | mql.addEventListener("change", onChange) 14 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) 15 | return () => mql.removeEventListener("change", onChange) 16 | }, []) 17 | 18 | return !!isMobile 19 | } 20 | -------------------------------------------------------------------------------- /src/components/ui/sonner.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import { useTheme } from "next-themes" 4 | import { Toaster as Sonner, ToasterProps } from "sonner" 5 | 6 | const Toaster = ({ ...props }: ToasterProps) => { 7 | const { theme = "system" } = useTheme() 8 | 9 | return ( 10 | 22 | ) 23 | } 24 | 25 | export { Toaster } 26 | -------------------------------------------------------------------------------- /src/hooks/use-media-query.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | 3 | export function useMediaQuery(query: string): boolean { 4 | const [matches, setMatches] = useState(false); 5 | 6 | useEffect(() => { 7 | if (typeof window === "undefined" || typeof window.matchMedia === "undefined") return; 8 | const mediaQueryList = window.matchMedia(query); 9 | const updateMatch = () => setMatches(mediaQueryList.matches); 10 | updateMatch(); 11 | mediaQueryList.addEventListener("change", updateMatch); 12 | return () => mediaQueryList.removeEventListener("change", updateMatch); 13 | }, [query]); 14 | 15 | return matches; 16 | } 17 | 18 | export default useMediaQuery; 19 | 20 | 21 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2017", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "noEmit": true, 9 | "esModuleInterop": true, 10 | "module": "esnext", 11 | "moduleResolution": "bundler", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "plugins": [ 17 | { 18 | "name": "next" 19 | } 20 | ], 21 | "paths": { 22 | "@/*": ["./src/*"] 23 | } 24 | }, 25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 26 | "exclude": ["node_modules"] 27 | } 28 | -------------------------------------------------------------------------------- /src/components/ui/label.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as LabelPrimitive from "@radix-ui/react-label" 5 | 6 | import { cn } from "@/lib/utils" 7 | 8 | function Label({ 9 | className, 10 | ...props 11 | }: React.ComponentProps) { 12 | return ( 13 | 21 | ) 22 | } 23 | 24 | export { Label } 25 | -------------------------------------------------------------------------------- /src/components/ui/separator.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as SeparatorPrimitive from "@radix-ui/react-separator" 5 | 6 | import { cn } from "@/lib/utils" 7 | 8 | function Separator({ 9 | className, 10 | orientation = "horizontal", 11 | decorative = true, 12 | ...props 13 | }: React.ComponentProps) { 14 | return ( 15 | 25 | ) 26 | } 27 | 28 | export { Separator } 29 | -------------------------------------------------------------------------------- /src/components/ui/textarea.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | import { cn } from "@/lib/utils" 4 | 5 | function Textarea({ className, ...props }: React.ComponentProps<"textarea">) { 6 | return ( 7 |