클로드 기반 MCP 도구, 빌드 도구 없이 대화형 HTML 컴포넌트 생성
아키텍처와 워크플로우
한 개발자가 daub.dev를 만들었습니다. 이 시스템에서 Claude는 MCP(Model Context Protocol) 서버의 두뇌 역할을 하여 요청에 따라 대화형 HTML 컴포넌트를 생성합니다. 설정은 Claude가 MCP 서버에 연결하고 필요한 사항에 대한 자연어 설명과 함께 generate_ui 도구를 호출하는 방식으로 이루어집니다.
이 도구는 React, 번들러 또는 빌드 파이프라인이 필요 없이 어떤 페이지에나 바로 삽입할 수 있는 독립형 HTML+CSS+JS 스니펫을 반환합니다.
Claude가 이 사용 사례에 적합한 이유
개발자에 따르면, Claude는 구조화된 도구 스키마에 대한 지시 따르기가 놀랍도록 일관적입니다. generate_ui 도구는 컴포넌트 유형, 데이터 및 스타일 제약 조건에 대한 매개변수를 가진 엄격한 입력 스키마를 가지고 있으며, Claude는 필드를 망상하거나 제약 조건을 무시하는 경우가 거의 없습니다.
다른 모델을 사용할 때는 개발자가 상당한 방어적 파싱을 추가해야 했지만, Claude를 사용하면 출력이 예측 가능하게 깨끗합니다. 또한 Claude의 시맨틱 HTML 이해력이 충분히 강력하여 생성하는 컴포넌트가 기본적으로 접근성이 보장됩니다. 명시적인 지시 없이도 올바른 랜드마크 역할, 레이블 연결 및 키보드 탐색이 구현됩니다.
도구 출력 형식
MCP 도구는 레이아웃, 슬롯 및 컴포넌트 데이터를 설명하는 JSON 객체인 render_spec을 출력하며, 클라이언트는 이를 HTML로 하이드레이션합니다. 이 접근 방식은 원시 HTML 문자열을 반환하는 것보다 깔끔합니다. 전체 재렌더링 없이 상태 변경 시 더 쉽게 비교(diff), 캐시 및 업데이트할 수 있기 때문입니다.
개발자는 도구 스키마 설계, 렌더 파이프라인 또는 7단계 자체 검증(selfCheck)이 어떻게 작동하는지 논의할 수 있다고 언급했습니다. 시스템을 시험해 볼 수 있는 플레이그라운드는 daub.dev/playground에서 이용할 수 있습니다.
📖 전체 Source 읽기: r/ClaudeAI
👀 See Also
AI 서브루틴: 제로 토큰 비용으로 결정론적 브라우저 자동화
rtrvr.ai의 AI 서브루틴은 브라우저 작업을 한 번 기록하여 호출 가능한 도구로 저장하며, 인증이 자동으로 전파된 상태로 웹페이지 컨텍스트 내에서 재실행되어, 반복 작업에 대한 LLM 추론 비용과 비결정성을 제거합니다.
다중 에이전트 AI 시스템 비교: Anthropic의 Harness 대 Agyn의 엔지니어링 조직 모델
Anthropic은 장기 실행 애플리케이션 개발을 위한 하네스 설계를 발표한 반면, Agyn의 팀 기반 자율 소프트웨어 엔지니어링을 위한 다중 에이전트 시스템은 지난달 오픈소스로 공개되었습니다. 두 시스템 모두 단일 에이전트 모델을 거부하고 역할 분리, 구조화된 인계, 검토 루프를 선호합니다.
데이터 분석가가 프론트엔드 경험 없이 Claude로 프롬프트 보정 도구 구축
HTML, CSS, JavaScript 경험이 없는 데이터 분석가가 프롬프트 캘리브레이터(Prompt Calibrator)를 개발했습니다. 이 클라이언트 측 웹 도구는 네 개의 필드와 네 가지 모드를 가진 폼을 통해 AI 프롬프트를 구조화합니다. 이 도구는 Claude를 코드 리뷰 파트너로 사용하여 개발되었으며 GitHub Pages에 호스팅되어 있습니다.
Freestyle Launches Sandboxes for AI Coding Agents with Live Forking
Freestyle provides cloud sandboxes for AI coding agents that start in ~500ms and feature live forking with <400ms pause, allowing full VM clones including memory state. They run full Debian with hardware virtualization on bare metal infrastructure.