LangGraph Studio

// Studio 连接配置
const studioConfig = {
  // 连接到 LangGraph Platform 部署的应用
  endpoint: 'https://your-app.langgraph.app',

  // 认证信息
  apiKey: 'your-api-key',

  // 调试选项
  debugMode: true,
  captureState: true,
  enableBreakpoints: true,
};

interface StateSnapshot {
  timestamp: number;
  messages: BaseMessage[];
  currentStep: string;
  executionPath: string[];
  metadata: Record<string, any>;
}

// Studio 中的状态历史
const stateHistory: StateSnapshot[] = [
  {
    timestamp: Date.now(),
    messages: [],
    currentStep: 'start',
    executionPath: ['start'],
    metadata: {}
  },
  {
    timestamp: Date.now() + 500,
    messages: [{ role: 'assistant', content: 'Hello' }],
    currentStep: 'greeting',
    executionPath: ['start', 'greeting'],
    metadata: { node: 'greeting_node' }
  }
];

// 在代码中设置断点标记
export async function debuggableNode(state: State) {
  // Studio 会在此处暂停执行
  debugger; // 或使用 Studio 的可视化断点
  
  const result = await processLogic(state);
  
  // 可以检查中间结果
  console.log('中间结果:', result);
  
  return { processedData: result };
}

// Studio 自动收集的状态快照
interface ExecutionSnapshot {
  executionId: string;
  timestamp: number;
  nodeResults: Record<string, any>;
  stateChanges: Array<{
    nodeId: string;
    before: any;
    after: any;
  }>;
}

// 时间旅行功能
class TimeTravelDebugger {
  snapshots: ExecutionSnapshot[] = [];
  
  captureSnapshot(snapshot: ExecutionSnapshot) {
    this.snapshots.push(snapshot);
  }
  
  navigateTo(executionId: string) {
    return this.snapshots.find(s => s.executionId === executionId);
  }
  
  compareSnapshots(id1: string, id2: string) {
    const s1 = this.navigate(id1);
    const s2 = this.navigate(id2);
    
    // Studio 会可视化差异
    return this.diff(s1.stateChanges, s2.stateChanges);
  }
}

// 问题：代理在多步推理中迷失方向
// 解决方案：使用 Studio 追踪每一步的状态变化

async function complexReasoningNode(state: State) {
  // 步骤 1：分析问题
  const analysis = await analyzeQuery(state.messages);
  
  // 在 Studio 中检查分析结果
  console.log('分析结果:', analysis);
  
  // 步骤 2：制定计划
  const plan = await createPlan(analysis);
  
  // 检查计划是否合理
  console.log('执行计划:', plan);
  
  // 步骤 3：执行计划
  const result = await executePlan(plan);
  
  return { analysis, plan, result };
}

// 在 Studio 中可以看到代理间的消息传递
interface AgentInteraction {
  fromAgent: string;
  toAgent: string;
  message: BaseMessage;
  timestamp: number;
  context: Record<string, any>;
}

// Studio 会可视化这些交互
const agentFlow = [
  { from: 'supervisor', to: 'researcher', action: 'search_task' },
  { from: 'researcher', to: 'supervisor', action: 'search_results' },
  { from: 'supervisor', to: 'writer', action: 'write_task' },
  { from: 'writer', to: 'supervisor', action: 'draft_content' },
];

// 1. 添加有意义的日志
export async function wellLoggedNode(state: State) {
  console.log('节点开始执行:', {
    nodeId: 'wellLoggedNode',
    inputState: state,
    timestamp: new Date().toISOString(),
  });
  
  try {
    const result = await processData(state);
    
    console.log('节点执行成功:', {
      nodeId: 'wellLoggedNode',
      result,
      executionTime: Date.now() - startTime,
    });
    
    return result;
  } catch (error) {
    console.error('节点执行失败:', {
      nodeId: 'wellLoggedNode',
      error: error.message,
      stack: error.stack,
    });
    throw error;
  }
}

// 2. 使用结构化的状态
const StructuredState = Annotation.Root({
  // 核心数据
  messages: Annotation<BaseMessage[]>({
    reducer: (x, y) => x.concat(y),
    default: () => [],
  }),
  
  // 调试信息
  debug: Annotation<{
    currentStep: string;
    executionPath: string[];
    startTime: number;
  }>({
    reducer: (x, y) => ({ ...x, ...y }),
    default: () => ({
      currentStep: '',
      executionPath: [],
      startTime: Date.now(),
    }),
  }),
});

// 缓存策略
const cache = new Map<string, any>();

export async function cachedNode(state: State) {
  const key = generateCacheKey(state);
  
  if (cache.has(key)) {
    console.log('缓存命中:', key);
    return cache.get(key);
  }
  
  const result = await expensiveOperation(state);
  cache.set(key, result);
  
  console.log('缓存未命中，执行耗时:', result.executionTime);
  return result;
}

interface CustomNodeStyle {
  backgroundColor: string;
  borderColor: string;
  icon: string;
  label: string;
  size: 'small' | 'medium' | 'large';
}

// 自定义节点样式
const customNode: CustomNodeStyle = {
  backgroundColor: '#4CAF50',
  borderColor: '#1B5E20',
  icon: '🤖',
  label: 'Custom Node',
  size: 'medium',
};

langgraph dev