feat: add subgraph streaming demo for langgraph

Author: ranst91

typescript-sdk/apps/dojo/src/agents.ts

@@ -141,6 +141,10 @@ export const agentsIntegrations: AgentIntegrationConfig[] = [
         agentic_chat_reasoning: new LangGraphHttpAgent({
           url: `${envVars.langgraphPythonUrl}/agent/agentic_chat_reasoning`,
         }),
+        subgraphs: new LangGraphAgent({
+          deploymentUrl: envVars.langgraphPythonUrl,
+          graphId: "subgraphs",
+        }),
       };
     },
   },
@@ -169,6 +173,9 @@ export const agentsIntegrations: AgentIntegrationConfig[] = [
         agentic_chat_reasoning: new LangGraphHttpAgent({
           url: `${envVars.langgraphFastApiUrl}/agent/agentic_chat_reasoning`,
         }),
+        subgraphs: new LangGraphHttpAgent({
+          url: `${envVars.langgraphFastApiUrl}/agent/subgraphs`,
+        }),
       };
     },
   },
@@ -199,6 +206,10 @@ export const agentsIntegrations: AgentIntegrationConfig[] = [
         tool_based_generative_ui: new LangGraphAgent({
           deploymentUrl: envVars.langgraphTypescriptUrl,
           graphId: "tool_based_generative_ui",
+        }),
+        subgraphs: new LangGraphAgent({
+          deploymentUrl: envVars.langgraphTypescriptUrl,
+          graphId: "subgraphs",
         })
       };
     },

typescript-sdk/apps/dojo/src/app/[integrationId]/feature/layout.tsx

@@ -34,8 +34,10 @@ export default function FeatureLayout({ children, params }: Props) {
 
   const files = (filesJSON as FilesJsonType)[`${integrationId}::${featureId}`] || [];
 
-  const readme = files.find(file => file.name.includes('.mdx'));
-  const codeFiles = files.filter(file => !file.name.includes('.mdx'));
+  const readme = files.find((file) => file?.name?.includes(".mdx")) || null;
+  const codeFiles = files.filter(
+    (file) => file && Object.keys(file).length > 0 && !file.name?.includes(".mdx"),
+  );
 
 
   const content = useMemo(() => {

typescript-sdk/apps/dojo/src/app/[integrationId]/feature/subgraphs/README.mdx

@@ -0,0 +1,186 @@
+# LangGraph Subgraphs Demo: Travel Planning Assistant ✈️
+
+This demo showcases **LangGraph subgraphs** through an interactive travel planning assistant. Watch as specialized AI agents collaborate to plan your perfect trip!
+
+## What are LangGraph Subgraphs? 🤖
+
+**Subgraphs** are the key to building modular, scalable AI systems in LangGraph. A subgraph is essentially "a graph that is used as a node in another graph" - enabling powerful encapsulation and reusability.
+
+### Key Concepts
+
+- **Encapsulation**: Each subgraph handles a specific domain with its own expertise
+- **Modularity**: Subgraphs can be developed, tested, and maintained independently  
+- **Reusability**: The same subgraph can be used across multiple parent graphs
+- **State Communication**: Subgraphs can share state or use different schemas with transformations
+
+## Demo Architecture 🗺️
+
+This travel planner demonstrates both **shared state** and **specialized routing** patterns:
+
+### Parent Graph: Trip Coordinator
+- **Role**: Analyzes user requests and routes to appropriate travel specialists
+- **Intelligence**: Uses keyword analysis to determine which specialist to activate
+- **State Management**: Maintains the complete travel plan across all subgraphs
+
+### Subgraph 1: 🚗 Transportation Specialist
+- **Specialization**: Flights, trains, car rentals, buses, cruises, and travel logistics
+- **Triggers**: "flight", "train", "car rental", "transportation", "departure", "arrival"
+- **Tools**: `update_transportation()` with booking tips and cost optimization
+
+### Subgraph 2: 🏨 Accommodation Expert  
+- **Specialization**: Hotels, Airbnb, resorts, hostels, camping, and lodging options
+- **Triggers**: "hotel", "accommodation", "stay", "room", "airbnb", "resort"
+- **Tools**: `update_accommodation()` with location and amenities optimization
+
+### Subgraph 3: 🎯 Activities Planner
+- **Specialization**: Attractions, restaurants, tours, cultural experiences, entertainment
+- **Triggers**: "activities", "attractions", "restaurant", "sightseeing", "tour", "experience"
+- **Tools**: `update_activities()` with local insights and time optimization
+
+## How It Works 🔄
+
+1. **User Input**: "Plan a 5-day trip to Paris for 2 people"
+2. **Coordinator Analysis**: Determines this requires all three subgraphs
+3. **Intelligent Routing**: Distributes specialized requests to each subgraph:
+   - Transportation: "Find flights to Paris and local transport"
+   - Accommodation: "Find hotels in central Paris for 2 guests"
+   - Activities: "Plan 5 days of Paris attractions and dining"
+4. **Parallel Processing**: All subgraphs work simultaneously 
+5. **State Synchronization**: Each subgraph updates its portion of the travel plan
+6. **Visual Feedback**: UI shows which subgraphs are active and updating
+
+## State Communication Patterns 📊
+
+### Shared State Schema
+```typescript
+interface TravelPlan {
+  destination: string;
+  travel_dates: string;
+  duration: string;
+  travelers: number;
+  budget: string;
+  transportation: Transportation;    // Owned by Transportation subgraph
+  accommodation: Accommodation;      // Owned by Accommodation subgraph  
+  activities: Activity[];            // Owned by Activities subgraph
+  travel_notes: string[];            // Shared across all
+}
+```
+
+### Domain-Specific Updates
+Each subgraph only modifies its own domain while preserving the complete travel plan:
+
+- **Transportation Subgraph**: Updates `travel_plan.transportation` object
+- **Accommodation Subgraph**: Updates `travel_plan.accommodation` object
+- **Activities Subgraph**: Updates `travel_plan.activities` array
+
+## Try These Examples! 💡
+
+### Transportation Focus
+- "Find me flights from New York to Tokyo"
+- "I want to take the train through Europe"
+- "Plan a road trip from Los Angeles to San Francisco"
+
+### Accommodation Focus  
+- "Find luxury hotels in downtown Manhattan"
+- "I want to camp in Yosemite National Park"
+- "Book an Airbnb near the Eiffel Tower"
+
+### Activities Focus
+- "What are the must-see attractions in Rome?"
+- "Find the best restaurants in Tokyo"
+- "Plan adventure activities in Costa Rica"
+
+### Multi-Domain Requests
+- "Plan a romantic weekend in Santorini"
+- "Organize a family vacation to Disney World"
+- "Create a backpacking itinerary through Southeast Asia"
+
+## Visual Features 👁️
+
+### Real-Time Subgraph Activity
+- **Glowing indicators** show which subgraph is currently active
+- **Animated routing paths** display request flow from coordinator to subgraphs
+- **Live travel plan updates** as each subgraph contributes
+
+### Travel Plan Visualization
+- **Dynamic travel overview** with destination and traveler indicators
+- **Comprehensive travel details** showing transportation, accommodation, and activities
+- **Smart destination emojis** that match popular travel destinations
+- **Planning progress tracking** across all travel aspects
+
+### Mobile Responsive
+- **Collapsible chat interface** for mobile users
+- **Touch-friendly controls** with gesture support
+- **Optimized layouts** for different screen sizes
+
+## Technical Implementation ⚙️
+
+### Backend (Python)
+- **LangGraph workflow** with embedded subgraphs
+- **Smart routing logic** using travel-specific keyword analysis
+- **State management** with shared travel plan object
+- **Tool definitions** for each travel domain specialist
+- **Event streaming** for real-time UI updates
+
+### Frontend (React + TypeScript)
+- **CopilotKit integration** for seamless chat experience
+- **Real-time state synchronization** with `useCoAgent`
+- **Animated UI components** showing subgraph activity
+- **Travel-themed design** with destination recognition
+- **Custom travel data models** for type safety
+
+## Learning Outcomes 🎯
+
+After exploring this demo, you'll understand:
+
+1. **Subgraph Architecture**: How to structure travel planning with specialized components
+2. **State Patterns**: When to use shared travel state vs. different schemas
+3. **Routing Logic**: How to intelligently direct travel requests to appropriate subgraphs  
+4. **Visual Representation**: Making AI travel planning visible to users
+5. **Real-World Applications**: Practical patterns for multi-specialist systems
+
+## Why Travel Planning Works So Well 🌟
+
+Travel planning is perfect for demonstrating subgraphs because:
+
+- **Clear Domain Separation**: Everyone understands transportation ≠ accommodation ≠ activities
+- **Real-World Relevance**: Everyone has planned a trip and can relate to the process
+- **Complex Coordination**: Shows how specialists must work together for optimal results
+- **Visual Appeal**: Travel plans are naturally visual and engaging
+- **Immediate Value**: Users can actually use this for real travel planning!
+
+## Next Steps 🚀
+
+Ready to build your own subgraph systems? Consider these patterns:
+
+- **E-commerce**: Product Finder → Inventory Checker → Price Calculator → Order Processor
+- **Healthcare**: Symptom Analyzer → Treatment Planner → Medication Manager → Appointment Scheduler
+- **Education**: Course Planner → Content Creator → Assessment Designer → Progress Tracker
+- **Content Creation**: Research → Writing → Editing → Publishing
+
+The possibilities are endless when you can compose specialized AI agents into powerful workflows! ⚡
+
+## Example Conversations 💬
+
+### Complete Trip Planning
+**User**: "Plan a 7-day trip to Japan for my honeymoon"
+
+**Trip Coordinator**: *Routes to Transportation Specialist*
+**🚗 Transportation**: "I'll find flights to Tokyo and plan your internal travel"
+
+**Trip Coordinator**: *Routes to Accommodation Specialist*  
+**🏨 Accommodation**: "Let me find romantic hotels and ryokans for your stay"
+
+**Trip Coordinator**: *Routes to Activities Specialist*
+**🎯 Activities**: "I'll curate amazing experiences from temples to cuisine"
+
+### Specific Domain Updates
+**User**: "Actually, let's fly business class"
+**Trip Coordinator**: *Routes to Transportation Specialist*
+**🚗 Transportation**: "Upgrading your flights to business class with better timing"
+
+**User**: "Find activities near our hotel"
+**Trip Coordinator**: *Routes to Activities Specialist*  
+**🎯 Activities**: "Adding nearby attractions and restaurants to your itinerary"
+
+This natural conversation flow demonstrates how subgraphs enable truly intelligent, specialized assistance! 🎉