Canvas Callback is an open-source implementation that demonstrates how to transform AI chat interfaces into interactive visual workspaces using LangGraph's interrupt for human-in-the-loop workflows.
Canvas Callback showcases a powerful pattern for building collaborative AI applications that go beyond typical chat interfaces:
- Canvas UX Pattern: A dedicated workspace alongside chat for rich, interactive content
- Human-in-the-Loop: LangGraph interrupts for collecting structured user input
- Joint Problem Solving: Create experiences where humans and AI can truly collaborate
The project demonstrates how these patterns work together in a travel planning agent that interrupts its workflow to collect specific information through specialized UIs.
- 🖼️ Canvas UI Component: A flexible, compound component for creating persistent visual workspaces
- 🔄 Interrupt Handling: Type-based routing system for different interrupt types
- 🧩 Modular Architecture: Clean separation between UI, state management, and agent logic
- 🌐 LangGraph Integration: Full implementation using LangGraph's interrupt
- 🧠 Interactive Demo: Practical travel planning agent showcasing the patterns in action
┌────────────────────────────────────────┐
│ UI Layer │
│ ┌──────────┐ ┌─────────────┐ │
│ │ Chat │◄────────►│ Canvas │ │
│ └──────────┘ └─────────────┘ │
└────────────┬───────────────┬───────────┘
│ │
▼ ▼
┌────────────────┐ ┌──────────────────┐
│ Message Handler│ │ Interrupt Handler│
└────────┬───────┘ └────────┬─────────┘
│ │
▼ ▼
┌────────────────────────────────────────┐
│ LangGraph Runtime │
│ │
│ ┌───────────┐ ┌───────────────┐ │
│ │ Agent │◄────►│ Interrupts │ │
│ └───────────┘ └───────────────┘ │
└────────────────────────────────────────┘
- Thread.tsx: Manages the chat interface and message display
- Canvas.tsx: Implements the canvas UI component
- InterruptHandler.tsx: Routes different interrupt types to specialized UIs
- Specific Interrupt Components: Specialized UIs for different interrupt types
- LangGraph SDK: Communicates with the LangGraph server
Canvas Callback is designed as a focused, accessible implementation to help you understand and integrate the Canvas UX pattern using LangGraph interrupts. Once you've understand these core concepts, you may want to explore LangChain's OpenCanvas for advanced features like memory systems, custom actions, and artifact versioning.
Canvas Callback's pattern can be applied to diverse domains:
- Travel Planning: Interactive destination selection and itinerary building
- Education: Shared workspaces for tutoring and problem-solving
- Data Analysis: Collaborative data exploration and visualization
- Healthcare: Visual symptom assessment and tracking
- Product Design: Collaborative design sessions with structured feedback
- Node.js 18+
- Python 3.11+
- LangGraph CLI
- Clone the repository:
git clone https://github.com/ahmad2b/canvas-callback.git
cd canvas-callback- Install frontend dependencies:
cd web
npm install
# or
pnpm install- Install LangGraph CLI and backend dependencies:
cd ../agent
# Install LangGraph CLI
pip install -U "langgraph-cli[inmem]"
# Install project dependencies
poetry install
# or
pip install -r requirements.txt- Set up environment variables:
cp web/.env.example web/.env
cp agent/.env.example agent/.envAdd your API keys and configuration details to both .env files.
For LangGraph, you'll need a LangSmith API key which can be created from the LangSmith UI (Settings > API Keys). Add it to your agent/.env file:
LANGSMITH_API_KEY=your_api_key_here
- Start the development server:
# Terminal 1 - Frontend
cd web
npm run dev
# Terminal 2 - LangGraph Agent
cd agent
langgraph devWhen the LangGraph server starts successfully, you'll see something like:
Ready!
* API: http://localhost:2024
* Docs: http://localhost:2024/docs
* LangGraph Studio Web UI: https://smith.langchain.com/studio/?baseUrl=http://127.0.0.1:2024
- Open http://localhost:3000 in your browser to see the application.
- LangGraph Interrupt API Guide
- Human-in-the-Loop Patterns
- LangGraph Server Documentation
- Testing LangGraph Apps Locally
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License
Join the Canvas Conversation
Exploring Canvas patterns or building human-in-the-loop AI interfaces? I'd love to hear about your projects and exchange ideas with the community.
Share Your Implementation
If you build something with these patterns, consider sharing it! Your innovations can help evolve this approach.