├── web ├── README.md ├── app │ ├── favicon.ico │ ├── handler │ │ └── [...stack] │ │ │ └── page.tsx │ ├── (dashboard) │ │ ├── n │ │ │ └── page.tsx │ │ ├── layout.tsx │ │ └── [chatId] │ │ │ └── page.tsx │ ├── guide │ │ └── layout.tsx │ ├── layout.tsx │ ├── not-found.tsx │ ├── global-error.tsx │ ├── error.tsx │ ├── loading.tsx │ ├── page.tsx │ └── globals.css ├── public │ ├── vaporwave.png │ ├── music-record.png │ ├── vercel.svg │ ├── window.svg │ ├── file.svg │ ├── globe.svg │ └── next.svg ├── postcss.config.mjs ├── stack.tsx ├── env.example ├── lib │ ├── langgraph-client.ts │ ├── utils.ts │ └── convert_messages.ts ├── next.config.ts ├── components │ ├── ui │ │ ├── skeleton.tsx │ │ ├── textarea.tsx │ │ ├── label.tsx │ │ ├── input.tsx │ │ ├── separator.tsx │ │ ├── checkbox.tsx │ │ ├── tooltip-icon-button.tsx │ │ ├── tooltip.tsx │ │ ├── popover.tsx │ │ ├── avatar.tsx │ │ ├── scroll-area.tsx │ │ ├── button.tsx │ │ ├── card.tsx │ │ ├── calendar.tsx │ │ ├── dialog.tsx │ │ ├── sheet.tsx │ │ ├── date-range-picker.tsx │ │ └── canvas.tsx │ ├── tooltip-icon-button.tsx │ ├── interrupt-handler.tsx │ ├── trip-dialog.tsx │ ├── interrupts │ │ ├── generic-handler.tsx │ │ ├── date-selector.tsx │ │ ├── destination-selector.tsx │ │ └── activity-selector.tsx │ ├── chat-sidebar.tsx │ ├── markdown-renderer.tsx │ ├── canvas-component.tsx │ ├── chat.tsx │ ├── markdown-text.tsx │ ├── thread.tsx │ └── trip-card.tsx ├── types │ └── index.tsx ├── components.json ├── eslint.config.mjs ├── hooks │ └── use-mobile.tsx ├── .gitignore ├── tsconfig.json ├── middleware.ts ├── context │ ├── canvas-context.tsx │ ├── utils.ts │ └── action.tsx ├── package.json └── tailwind.config.ts ├── agent ├── README.md ├── .env.example ├── langgraph.json ├── .gitignore ├── pyproject.toml └── main.py └── README.md /web/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /agent/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /web/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ahmad2b/canvas-callback/HEAD/web/app/favicon.ico -------------------------------------------------------------------------------- /web/public/vaporwave.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ahmad2b/canvas-callback/HEAD/web/public/vaporwave.png -------------------------------------------------------------------------------- /web/public/music-record.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ahmad2b/canvas-callback/HEAD/web/public/music-record.png -------------------------------------------------------------------------------- /agent/.env.example: -------------------------------------------------------------------------------- 1 | LANGSMITH_TRACING=true 2 | LANGSMITH_API_KEY=your_langsmith_api_key 3 | 4 | OPENAI_API_KEY=your_openai_api_key -------------------------------------------------------------------------------- /web/public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /web/postcss.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('postcss-load-config').Config} */ 2 | const config = { 3 | plugins: { 4 | tailwindcss: {}, 5 | }, 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /web/stack.tsx: -------------------------------------------------------------------------------- 1 | import "server-only"; 2 | 3 | import { StackServerApp } from "@stackframe/stack"; 4 | 5 | export const stackServerApp = new StackServerApp({ 6 | tokenStore: "nextjs-cookie", 7 | }); 8 | -------------------------------------------------------------------------------- /agent/langgraph.json: -------------------------------------------------------------------------------- 1 | { 2 | "graphs": { 3 | "agent": "./main.py:graph" 4 | }, 5 | "env": ".env", 6 | "dependencies": [ 7 | "." 8 | ], 9 | "dockerfile_lines": [] 10 | } -------------------------------------------------------------------------------- /agent/.gitignore: -------------------------------------------------------------------------------- 1 | # Python-generated files 2 | __pycache__/ 3 | *.py[oc] 4 | build/ 5 | dist/ 6 | wheels/ 7 | *.egg-info 8 | 9 | # Virtual environments 10 | .venv 11 | .langgraph_api 12 | .langgraph_api/* 13 | .env 14 | .python-version -------------------------------------------------------------------------------- /web/env.example: -------------------------------------------------------------------------------- 1 | NEXT_PUBLIC_LANGGRAPH_API_KEY=your_langgraph_api_key 2 | NEXT_PUBLIC_LANGGRAPH_API_URL=http://localhost:2024 3 | 4 | NEXT_PUBLIC_STACK_PROJECT_ID=your_stack_project_id 5 | NEXT_PUBLIC_STACK_PUBLISHABLE_CLIENT_KEY=your_stack_publishable_client_key 6 | STACK_SECRET_SERVER_KEY=your_stack_secret_server_key 7 | -------------------------------------------------------------------------------- /web/app/handler/[...stack]/page.tsx: -------------------------------------------------------------------------------- 1 | import { stackServerApp } from "@/stack"; 2 | import { StackHandler } from "@stackframe/stack"; 3 | 4 | export default function Handler(props: unknown) { 5 | return ( 6 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /web/lib/langgraph-client.ts: -------------------------------------------------------------------------------- 1 | import { Client } from "@langchain/langgraph-sdk"; 2 | 3 | export const createClient = (): Client => { 4 | return new Client({ 5 | apiUrl: process.env.NEXT_PUBLIC_LANGGRAPH_API_URL, 6 | defaultHeaders: { 7 | "x-api-key": process.env.NEXT_PUBLIC_LANGGRAPH_API_KEY, 8 | }, 9 | }); 10 | }; 11 | -------------------------------------------------------------------------------- /web/next.config.ts: -------------------------------------------------------------------------------- 1 | import type { NextConfig } from "next"; 2 | 3 | const nextConfig: NextConfig = { 4 | /* config options here */ 5 | images: { 6 | remotePatterns: [ 7 | { 8 | protocol: "https", 9 | hostname: "images.unsplash.com", 10 | pathname: "/**", 11 | }, 12 | ], 13 | }, 14 | }; 15 | 16 | export default nextConfig; 17 | -------------------------------------------------------------------------------- /web/components/ui/skeleton.tsx: -------------------------------------------------------------------------------- 1 | import { cn } from "@/lib/utils" 2 | 3 | function Skeleton({ 4 | className, 5 | ...props 6 | }: React.HTMLAttributes) { 7 | return ( 8 |
12 | ) 13 | } 14 | 15 | export { Skeleton } 16 | -------------------------------------------------------------------------------- /web/app/(dashboard)/n/page.tsx: -------------------------------------------------------------------------------- 1 | import { createClient } from "@/lib/langgraph-client"; 2 | import { redirect } from "next/navigation"; 3 | 4 | export default async function ChatPage() { 5 | const client = createClient(); 6 | const thread = await client.threads.create({ 7 | metadata: { 8 | userId: "test_user", 9 | }, 10 | }); 11 | 12 | redirect(`/${thread.thread_id}`); 13 | } 14 | -------------------------------------------------------------------------------- /web/public/window.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /agent/pyproject.toml: -------------------------------------------------------------------------------- 1 | [project] 2 | name = "agent" 3 | version = "0.1.0" 4 | description = "Add your description here" 5 | readme = "README.md" 6 | requires-python = ">=3.11" 7 | dependencies = [ 8 | "dotenv>=0.9.9", 9 | "langchain-anthropic>=0.3.8", 10 | "langchain-openai>=0.3.7", 11 | "langgraph-supervisor>=0.0.4", 12 | "langgraph>=0.2.75", 13 | "pillow>=11.1.0", 14 | ] 15 | -------------------------------------------------------------------------------- /web/public/file.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /web/types/index.tsx: -------------------------------------------------------------------------------- 1 | export interface Canvas { 2 | id: string; 3 | type: string; 4 | data?: T; 5 | } 6 | 7 | export interface CanvasState { 8 | content: Canvas[]; 9 | is_open: boolean; 10 | } 11 | 12 | export type ImageAttachment = { 13 | base64: string; 14 | name: string; 15 | type: string; 16 | displayUrl: string; 17 | }; 18 | 19 | export type AgentState = { 20 | destination?: string; 21 | dates?: string; 22 | activities?: string[]; 23 | trips?: string; 24 | }; 25 | -------------------------------------------------------------------------------- /web/components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "default", 4 | "rsc": true, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "tailwind.config.ts", 8 | "css": "app/globals.css", 9 | "baseColor": "neutral", 10 | "cssVariables": true, 11 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "@/components", 15 | "utils": "@/lib/utils", 16 | "ui": "@/components/ui", 17 | "lib": "@/lib", 18 | "hooks": "@/hooks" 19 | }, 20 | "iconLibrary": "lucide" 21 | } -------------------------------------------------------------------------------- /web/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | import { FlatCompat } from "@eslint/eslintrc"; 2 | import { dirname } from "path"; 3 | import { fileURLToPath } from "url"; 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 | rules: { 16 | "@typescript-eslint/no-explicit-any": "off", 17 | }, 18 | }, 19 | ]; 20 | 21 | export default eslintConfig; 22 | -------------------------------------------------------------------------------- /web/app/(dashboard)/layout.tsx: -------------------------------------------------------------------------------- 1 | import { ChatSidebar } from "@/components/chat-sidebar"; 2 | import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar"; 3 | import { CanvasProvider } from "@/context/canvas-context"; 4 | 5 | export default function DashboardLayout({ 6 | children, 7 | }: { 8 | children: React.ReactNode; 9 | }) { 10 | return ( 11 |
12 | 13 | 14 | 15 | 16 | {children} 17 | 18 | 19 | 20 |
21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /web/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 | -------------------------------------------------------------------------------- /web/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.* 7 | .yarn/* 8 | !.yarn/patches 9 | !.yarn/plugins 10 | !.yarn/releases 11 | !.yarn/versions 12 | 13 | # testing 14 | /coverage 15 | 16 | # next.js 17 | /.next/ 18 | /out/ 19 | 20 | # production 21 | /build 22 | 23 | # misc 24 | .DS_Store 25 | *.pem 26 | 27 | # debug 28 | npm-debug.log* 29 | yarn-debug.log* 30 | yarn-error.log* 31 | .pnpm-debug.log* 32 | 33 | # env files (can opt-in for committing if needed) 34 | .env* 35 | 36 | # vercel 37 | .vercel 38 | 39 | # typescript 40 | *.tsbuildinfo 41 | next-env.d.ts 42 | 43 | .vercel 44 | -------------------------------------------------------------------------------- /web/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 | "@/*": ["./*"] 23 | } 24 | }, 25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 26 | "exclude": ["node_modules"] 27 | } 28 | -------------------------------------------------------------------------------- /web/components/ui/textarea.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | import { cn } from "@/lib/utils" 4 | 5 | const Textarea = React.forwardRef< 6 | HTMLTextAreaElement, 7 | React.ComponentProps<"textarea"> 8 | >(({ className, ...props }, ref) => { 9 | return ( 10 |