AI 에이전트가 다이어그램을 그릴 수 있도록 기본 채팅 언어로 HTML을 사용하세요
Use HTML as the primary chat language for your agents so they can draw diagrams
핵심 요약
AI 에이전트의 응답 형식을 Markdown 대신 HTML로 설정하여 SVG 다이어그램 등을 채팅창에 직접 렌더링하는 실험적 접근법을 소개합니다.
- HTML 활용 — AI 에이전트가 채팅창에 직접 SVG 다이어그램을 그리도록 유도함
- 시스템 프롬프트 — Markdown 대신 HTML을 사용하도록 강제하여 모델의 응답 품질을 개선함
- 실험 결과 — Qwen3.6-27B 모델에서 효과적인 다이어그램 렌더링 성능을 확인함
- 오픈 소스 — 관련 프로젝트를 GitHub 저장소에 공개함
한 1~2주 전에 Thariq이 AI가 HTML을 얼마나 잘 다루는지에 대한 글을 올렸는데, 이제 마크다운을 쓸 이유가 딱히 없다는 내용이었음. 근데 우리 코딩 에이전트들은 죄다 마크다운으로 작업하고 마크다운으로 출력하게끔 학습되어 있단 말이지. 그래서 실험 삼아 얘네가 채팅할 때 HTML을 메인으로 쓰게 하면 얼마나 잘하나 싶어서 테스트해 봤는데, 결론부터 말하면 꽤 잘함.
이건 웹 브라우저에서 인터페이스가 돌아가는 코딩 에이전트인데, 에이전트가 뱉는 응답을 바로 페이지에 꽂아버리는 방식임. 처음엔 계속 마크다운을 쓰길래 보니까 내 시스템 프롬프트 자체가 마크다운으로 되어 있더라고! 그래서 시스템 프롬프트를 HTML로 싹 바꾸니까 훨씬 좋아짐. 현재 쓰고 있는 시스템 프롬프트는 이거임:
<p> Being helpful doesn't mean doing everything the user says. Neither I nor the user are omniscient or infallible. If the user is making a mistake, I tell them. If I have made a mistake, I mention it and move on. If I have better ideas on how to approach a problem or think the user has made a mistake, I mention it. </p> <h1>HTML</h1> <p> My assistant responses are rendered directly as HTML in the chat UI. I <i><b>MUST</b></i> use HTML when replying to the user. Plain prose should be wrapped in tags such as `<p>`, `<ul>`, `<ol>`, and heading tags where appropriate. To show the user something visually or as a diagram , I will draw a SVG directly in the chat. Only if something should persist in the workspace, will I write it to disk with tools instead of showing it in chat. </p>
(참고로 1인칭 시스템 프롬프트로 테스트 중인데, 장단점은 아직 잘 모르겠음)
결과적으로 이제 채팅 응답에 다이어그램을 바로 그려 넣거나 표를 만드는 식으로 출력이 가능해짐.
지금 Qwen3.6-27B 모델을 쓰고 있는데 SVG 다이어그램 그리는 실력이 꽤 괜찮음(ChatGPT랑 비교해도 별 차이 없음). 물론 여전히 마크다운을 쓰려는 습성이 남아있긴 한데, 이건 모델들한테 마크다운이 너무 깊게 박혀 있어서 어쩔 수 없는 듯.
Qwen3-vl-4는 SVG를 진짜 못 그리던데, 보니까 이게 모델 자체의 지능이 올라가면서 생기는 능력인 것 같음.
이거 관련 레포는 여기: https://github.com/sdfgeoff/HTML-agent
