StackOne의 CEO가 모든 개발자에게 필요하다고 말한 도구를 직접 만들었습니다
요약
AI 에이전트 개발 시 발생하는 도구 호출(tool call) 오류를 방지하기 위해 개발된 'StackOne Agent Playground'를 소개합니다. RPC 도구 테스터, 토큰 시각화, 워크플로우 시뮬레이터 등 에이전트 디버깅에 특화된 기능을 제공합니다.
핵심 포인트
- 에이전트 연결 전 RPC를 통한 개별 도구 테스트의 중요성
- 도구 이름 및 헤더 설정 오류 등 흔한 디버깅 사례 공유
- 토큰 사용량 최적화 및 프롬프트 인젝션 방어 기능 포함
- Vite 환경에서의 TypeScript import type 사용 주의사항
지난달에 AI 에이전트 (AI agent)를 디버깅하느라 30분을 허비했습니다.
오케스트레이션 (orchestration) 코드를 단계별로 실행해 보고, 프롬프트 (prompt)를 확인하고, 곳곳에 콘솔 로그 (console logs)를 추가했습니다. 알고 보니 도구 호출 (tool call) 자체가 실패하고 있었습니다. 에이전트와는 아무런 상관이 없었습니다.
잘못된 BambooHR 서브도메인. 조용한 리다이렉트 (Silent redirect). isError: false. 전형적인 사례입니다.
StackOne의 CEO가 바로 이 문제에 대해 게시물을 올렸습니다 — 에이전트에 연결하기 전에 RPC를 통해 도구를 테스트하라는 내용이었습니다. 하지만 이를 쉽게 수행할 수 있는 시각적 도구가 없었습니다. 그래서 제가 직접 만들었습니다.
이 프로젝트의 동기가 된 3가지 버그
버그 1 — Accept 헤더 (Accept header)
StackOne의 MCP 서버는 Accept 헤더에 application/json과 text/event-stream이 모두 포함되어야 합니다. 하나라도 누락되면 아무것도 처리하기 전에 연결을 거부합니다.
버그 2 — 조용한 BambooHR 실패
isError: false와 HTTP 200이 반환되었지만, 직원은 전혀 나타나지 않았습니다. StackOne에서 잘못된 서브도메인이 연결되었습니다. 응답은 생성이 아니라 리다이렉트였습니다. 응답 코드만 보지 말고 항상 대상 시스템에서 확인하십시오.
버그 3 — 잘못된 Slack 도구 이름
저는 slack_post_message라고 가정했습니다. 하지만 StackOne은 slack_send_message를 사용합니다. 도구 이름이 제공업체의 API와 일치할 것이라고 절대 가정하지 마세요. 항상 tools/list를 먼저 호출하십시오.
내가 만든 것
StackOne Agent Playground — 4가지 기능, 하나의 목표: 에이전트가 도구에 접근하기 전에 모든 것을 테스트하는 것입니다.
RPC 도구 테스터 (RPC Tool Tester)
연동 항목을 선택하고, 자동 로드된 목록에서 도구를 고르고, 인자 (arguments)를 채운 뒤 실행합니다. isError 배지와 지연 시간 (latency)이 포함된 전체 응답을 확인하세요. 더 이상 도구 이름을 추측할 필요가 없습니다.
토큰 시각화 도구 (Token Visualizer)
전체 도구 로딩 = 14,280 토큰. 도구 검색 (Tool Discovery) 이후 = 840 토큰. 94% 감소했습니다. 실제 수치가 표시되는 실시간 막대 차트를 제공합니다.
워크플로우 시뮬레이터 (Workflow Simulator)
4단계 온보딩 워크플로우 — Greenhouse와 BambooHR는 모의 (mock)로, Notion과 Slack은 라이브로 작동합니다. 실제 페이지가 생성되고 실제 Slack 메시지가 전송됩니다. 단계별 전체 감사 추적 (audit trail)을 제공합니다.
디펜더 테스터 (Defender Tester)
어떤 도구 응답이든 붙여넣으면 프롬프트 인젝션 (prompt injection)을 스캔합니다. 플래그가 지정된 정확한 문구를 강조 표시하고 공격 패턴을 설명합니다.
이것을 만들면서 마주친 버그 하나
// 이것은 Vite에서 런타임 에러(runtime error)를 발생시킵니다
import { ToolCallResult } from '../types'
...
전형적인 TypeScript + Vite의 주의 사항(gotcha)입니다. import type은 Vite에게 해당 임포트가 런타임이 아닌 타입 체크(type-checking)만을 위한 것임을 알려줍니다.
직접 시도해 보세요
git clone https://github.com/prathyushak828/stackone-agent-playground
cd stackone-agent-playground
npm install
...
백엔드(backend)는 필요 없습니다. 모의 모드(Mock mode)는 어떠한 자격 증명(credentials) 없이도 작동합니다.
GitHub: https://github.com/prathyushak828/stackone-agent-playground
AI 자동 생성 콘텐츠
본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기