HUMAN-IN-THE-LOOP • CANVAS • IMPLEMENTATION • AI UIs
In today's conversational AI landscape, the most powerful applications go beyond simple text exchanges. They create rich, interactive experiences that blend AI capabilities with human input and visual components. This guide introduces you to the Canvas pattern - a powerful approach for building dynamic, interactive spaces within chat-based AI applications.
The Canvas approach transforms conversational interfaces from linear exchanges into rich workspaces where users and AI Agents can solve problems together.
Canvas is a specialized UI component that provides a dedicated workspace alongside your chat interface. Unlike the standard back-and-forth of chat, a Canvas creates a persistent, interactive space for complex visualizations, user inputs, and dynamic content.
Live examples:
The Canvas UI pattern enables entirely new kinds of AI applications with richer information display, structured input collection, collaborative workflows, and context preservation throughout conversations.
Visualizations
User Controls
Structured Data
Interactive Media
"The combination of Canvas UI and LangGraph's interrupt capabilities enables entirely new kinds of applications where humans and AI can truly collaborate."
The Canvas pattern represents a complementary workspace alongside a chat interface. Key characteristics include:
Canvas implementations typically feature toggle controls to show/hide the canvas and can be updated by either user actions or agent responses.
LangGraph's interrupt mechanism creates a collaborative approach beyond traditional LLM applications:
┌─────────────┐ ┌───────────────┐ ┌────────────────────┐
│ User Request│────▶│ Agent Process │────▶│ Generate Response │
└─────────────┘ └───────────────┘ └────────────────────┘
│ ▲
▼ │
┌────────────┐ ┌────────────────┐
│ Interrupt │─────────▶│ Human Response │
└────────────┘ └────────────────┘
The real power comes from combining these approaches:
This creates a structured, collaborative workflow between human and AI Agents.
The Canvas + Interrupt pattern enables diverse applications across domains:
┌────────────────────────────────────────┐
│ UI Layer │
│ ┌──────────┐ ┌─────────────┐ │
│ │ Chat │◄────────►│ Canvas │ │
│ └──────────┘ └─────────────┘ │
└────────────┬───────────────┬───────────┘
│ │
▼ ▼
┌────────────────┐ ┌──────────────────┐
│ Message Handler│ │ Interrupt Handler│
└────────┬───────┘ └────────┬─────────┘
│ │
▼ ▼
┌────────────────────────────────────────┐
│ LangGraph Runtime │
│ │
│ ┌───────────┐ ┌───────────────┐ │
│ │ Agent │◄────►│ Interrupts │ │
│ └───────────┘ └───────────────┘ │
└────────────────────────────────────────┘
The Canvas implementation uses a compound component pattern with distinct parts (Root, Header, Content, Footer) that work together. This provides flexibility and consistent structure across different canvas uses.
components/ui/canvas.tsx in the source codeThe interrupt handler uses a type-based routing pattern to direct different interrupt types to specialized components. This keeps the code modular and makes adding new interrupt types straightforward.
components/interrupt-handler.tsx in the source codeCanvas state is managed through a dedicated context provider and hook system, making it available throughout the application while keeping the implementation details abstracted away from consumer components.
context/canvas-context.tsx and hooks/use-canvas.tsx in the source codeFor handling chat-specific features like streaming, auto-scrolling, and markdown rendering, libraries such as Assistant UI are great at managing the chat while integrating with canvas implementations.
All implementation code for Canvas and Human-in-the-Loop integration is available in the open-source repository. I encourage you to explore the code for detailed implementation approaches.
Start simple and progressively reveal more options as needed to avoid overwhelming users with too many options or complex interfaces.
Adapt canvas content to the conversation context by using the agent state to determine what to show in the canvas.
Chain interrupts together to collect multiple pieces of information sequentially, with each interrupt triggering the next.
Create visualizations that can be updated by both user inputs and AI outputs to visually represent the collaborative work.
The combination of Canvas UI and LangGraph interrupts creates powerful new possibilities for collaborative AI applications. By implementing these patterns, you can build experiences where:
Users and AI truly work together rather than just exchanging messages
Complex information is visualized in dedicated spaces
Input collection is structured and context-aware
Workflows seamlessly transition between AI and human control
This guide has provided the tools, patterns, and examples needed to implement these capabilities in your own applications. As you build with these techniques, you'll discover even more ways to enhance human-AI collaboration and create truly interactive experiences.
I'm available to help you working with Canvas, AI UIs and Agents.