## LLM 노드를 범용적으로 설계하기 XGen 캔버스에서 가장 핵심적인 노드는 LLM 노드다. ChatOpenAI, ChatAnthropic, 그리고 사내 모델까지 하나의 인터페이스로 다룰 수 있어야 했다. 이 글에서는 어떻게 다양한 LLM을 통합 설계했는지 정리한다. ### 공통 인터페이스 정의 모든 LLM 노드가 공유하는 기본 인터페이스를 정의했다. ```typescript interface LLMNodeData { provider: 'openai' | 'anthropic' | 'custom'; model: string; temperature: number; maxTokens: number; systemPrompt: string; topP?: number; frequencyPenalty?: number; presencePenalty?: number; } // 모델 목록 관리 const MODEL_OPTIONS: Record = { openai: ['gpt-4o', 'gpt-4o-mini', 'gpt-4-turbo', 'o1-preview'], anthropic: ['claude-sonnet-4-20250514', 'claude-3.5-sonnet', 'claude-3-haiku'], custom: [], // 동적으로 로드 }; ``` ### ChatOpenAI 노드 UI 구현 각 LLM 노드는 모델 선택, 파라미터 조정, 프롬프트 입력을 하나의 노드 안에서 처리한다. ```tsx const ChatOpenAINode: React.FC> = ({ data, id }) => { const updateNodeData = useCanvasStore((s) => s.updateNodeData); return ( } color="green"> updateNodeData(id, { model: v })} /> updateNodeData(id, { temperature: v })} /> updateNodeData(id, { systemPrompt: v })} /> ); }; ``` ### ChatAnthropic 노드 차별점 Anthropic 모델은 OpenAI와 파라미터 체계가 조금 다르다. 특히 `top_k` 파라미터가 추가로 존재하고, 시스템 프롬프트 처리 방식도 다르다. 이런 차이를 노드 UI에서 자연스럽게 반영했다. ### 프롬프트 템플릿 시스템 자주 사용하는 시스템 프롬프트를 템플릿으로 저장하고 불러올 수 있는 기능을 추가했다. 변수 치환을 지원해서 `{{context}}`나 `{{question}}` 같은 플레이스홀더를 사용할 수 있다. ```typescript interface PromptTemplate { id: string; name: string; content: string; variables: string[]; } function resolveTemplate(template: string, vars: Record) { return template.replace(/\{\{(\w+)\}\}/g, (_, key) => vars[key] || ''); } ``` ### 중요 교훈 LLM 프로바이더마다 API 응답 형식이 미묘하게 다른데, 프론트엔드에서 이를 통일된 형태로 보여주려면 중간 변환 레이어가 필수다. 백엔드 API를 설계할 때부터 응답 형식을 통일하는 것이 나중에 프론트 작업을 크게 줄여준다.