Simon Willison블로그ai
Showboat 생태계 확장: Chartroom과 datasette-showboat 출시
일주일 전 소개한 Showboat는 코딩 에이전트가 작성한 코드를 마크다운(Markdown) 문서로 정리·시연할 수 있도록 돕는 CLI 도구입니다. 매일 새로운 활용법을 발견하는 가운데, Showboat 패턴을 더욱 효과적으로 활용하기 위한 도구 두 가지를 새롭게 출시했습니다. Chartroom은 Showboat와 궁합이 잘 맞는 CLI 차트 도구이며, datasette-showboat는 Showboat의 원격 배포 기능을 활용해 문서를 Datasette 인스턴스에 점진적으로 푸시할 수 있게 해줍니다.
Showboat 원격 배포
저는 주로 웹용 Claude Code에서 Showboat를 사용합니다(오늘 아침 메모 참고). 최근 며칠간 여러 프로젝트에 활용했는데, 매번 다음과 같은 형태의 프롬프트를 사용했습니다.
Use "uvx showboat --help" to perform a very thorough investigation of what happens if you use the Python sqlite-chronicle and sqlite-history-json libraries against the same SQLite database table
결과물 문서는 여기서 확인할 수 있습니다.
Claude Code에 uvx showboat --help 실행만 지시하면 도구 사용법을 스스로 익힙니다. 도움말 텍스트가 일종의 임시 스킬(Skill) 문서 역할을 하도록 설계되어 있기 때문입니다.
이 방식의 한 가지 아쉬운 점은 Showboat 문서가 완성되기 전까지는 확인할 수 없다는 것입니다. Claude가 문서와 내장된 스크린샷을 커밋하고 GitHub 저장소의 브랜치에 푸시할 때까지 기다렸다가, 그제서야 GitHub 인터페이스를 통해 확인할 수 있습니다.
한동안 Claude 인스턴스가 작업하는 도중에 실시간으로 업데이트를 전송할 수 있는 나만의 원격 웹 서버가 있으면 좋겠다고 생각해왔습니다. 그러다 오늘 아침, Showboat가 그 구현에 딱 맞는 메커니즘이 될 수 있겠다는 사실을 깨달았습니다.
Showboat v0.6.0에 새로운 "remote" 기능이 추가되었습니다. 도구 사용자 입장에서는 거의 눈에 띄지 않으며, 환경 변수를 통해 설정하는 방식입니다.
다음과 같이 변수를 설정하세요.
export SHOWBOAT_REMOTE_URL=https://www.example.com/submit?token=xyz이후 showboat init, showboat note, showboat exec, showboat image 명령을 실행할 때마다 생성된 문서 조각이 해당 API 엔드포인트로 POST 전송되며, 동시에 Showboat 마크다운 파일도 업데이트됩니다.
Showboat README의 상세 설명에서 전체 사양을 확인할 수 있습니다. API 형식은 매우 단순하며, 일반 POST 폼 변수 방식을 사용하고, showboat image에 첨부되는 이미지는 멀티파트 폼 업로드 방식을 사용합니다.
datasette-showboat
Showboat 업데이트를 수신하는 웹 앱을 만드는 것 자체는 어렵지 않지만, 쉽게 배포할 수 있고 평소에 사용하는 개인 생태계와도 잘 어우러지는 솔루션이 필요했습니다.
그래서 Claude Code에 Showboat 원격 엔드포인트 역할을 할 수 있는 Datasette 플러그인 작성을 맡겼습니다. 실제로 Showboat의 원격 기능 개발과 병행해서 진행했는데, 병렬 에이전트 활용의 좋은 사례가 되었습니다.
datasette-showboat는 Datasette에 /-/showboat 엔드포인트(문서 조회용)와 /-/showboat/receive 엔드포인트(Showboat 업데이트 수신용)를 추가하는 Datasette 플러그인입니다.
다음은 빠르게 체험해볼 수 있는 방법입니다.
uvx --with datasette-showboat --prerelease=allow \
datasette showboat.db --create \
-s plugins.datasette-showboat.database showboat \
-s plugins.datasette-showboat.token secret123 \
--root --secret cookie-secret-123콘솔에 표시되는 root로 로그인 링크를 클릭한 뒤, http://127.0.0.1:8001/-/showboat으로 이동하면 인터페이스를 확인할 수 있습니다.
이제 환경 변수가 이 인스턴스를 가리키도록 설정합니다.
export SHOWBOAT_REMOTE_URL="http://127.0.0.1:8001/-/showboat/receive?token=secret123"그리고 Showboat를 다음과 같이 실행합니다.
uvx showboat init demo.md "Showboat Feature Demo"페이지를 새로고침하면 아래와 같은 화면이 나타납니다.
문서를 클릭해서 열어둔 뒤, Claude Code나 Codex 또는 원하는 에이전트를 실행하고 다음과 같이 프롬프트를 입력하세요.
Run 'uvx showboat --help' and then use showboat to add to the existing demo.md document with notes and exec and image to demonstrate the tool - fetch a placekitten for the image demo.
init 명령은 UUID와 제목을 할당하고 이를 Datasette에 전송합니다.
이 기능의 가장 큰 장점은 웹용 Claude Code에서도 동작한다는 점입니다. 어딘가의 서버에 플러그인을 배포하고(구체적인 방법은 독자에게 맡깁니다 — 저는 Fly.io를 사용합니다), Claude 환경에 SHOWBOAT_REMOTE_URL 환경 변수를 설정해두면, 이후 Showboat 사용을 지시할 때마다 생성된 문서가 서버로 전송되어 실시간으로 확인할 수 있습니다.
Rodney는 Showboat와 함께 사용하기 위해 특별히 제작한 CLI 브라우저 자동화 도구입니다. Showboat 문서에서 웹 페이지를 불러오고, 클릭이나 JavaScript 삽입으로 상호작용하며, 그 결과를 스크린샷으로 캡처해 문서에 내장하는 작업을 손쉽게 처리할 수 있습니다.
특히 새로운 원격 배포 기능과 결합하면, 웹용 Claude Code로 웹 인터페이스를 개발할 때 정말 유용합니다. 오늘 아침에야 이 모든 기능을 연동시켰는데, 벌써 여러 세션에서 Claude Code가 작업 진행 상황을 스크린샷으로 게시했고, 저는 작업이 진행되는 동안 해당 Claude 세션에 직접 피드백을 제공할 수 있었습니다.
Chartroom
며칠 전, Showboat 생태계를 확장할 또 다른 아이디어가 떠올랐습니다. Showboat 문서에 차트를 손쉽게 포함시킬 수 있다면 어떨까?
저는 데이터 분석 작업에 Claude Code를 활용하는 경우가 종종 있는데, 주로 SQLite 데이터베이스를 내려받아 쿼리를 실행하고 데이터에서 흥미로운 인사이트를 찾아내는 방식으로 씁니다.
PNG 이미지를 생성하는 간단한 CLI 도구가 있다면, Claude가 Showboat로 분석 결과를 시각적으로 보여주는 차트가 내장된 문서를 만들 수 있을 것입니다.
Chartroom이 바로 그런 도구입니다. 코딩 에이전트가 Showboat 문서에 삽입할 차트를 생성할 수 있도록, 탁월한 파이썬 라이브러리인 matplotlib을 가볍게 감싼 래퍼(wrapper) 형태로 설계되었습니다.
간단한 막대 차트를 렌더링하는 방법은 다음과 같습니다.
echo 'name,value
Alice,42
Bob,28
Charlie,35
Diana,51
Eve,19' | uvx chartroom bar --csv \
--title 'Sales by Person' --ylabel 'Sales'
꺾은선 차트, 막대 차트, 산점도, 히스토그램도 지원합니다. Showboat로 만든 데모 문서에서 각 차트 유형을 직접 확인해보세요.
Chartroom은 대체 텍스트(alt text) 생성도 지원합니다. 위 명령에 -f alt을 추가하면 이미지 대신 차트의 대체 텍스트를 출력합니다.
echo 'name,value
Alice,42
Bob,28
Charlie,35
Diana,51
Eve,19' | uvx chartroom bar --csv \
--title 'Sales by Person' --ylabel 'Sales' -f alt출력 결과:
Sales by Person. Bar chart of value by name — Alice: 42, Bob: 28, Charlie: 35, Diana: 51, Eve: 19
또는 -f html이나 -f markdown를 사용하면 대체 텍스트가 포함된 이미지 태그를 바로 얻을 수 있습니다.
Chartroom의 이 기능과 연동할 수 있도록, v0.5.0에서 Showboat에 대체 텍스트를 포함한 마크다운 이미지 지원을 추가했습니다.
마지막으로, Chartroom은 다양한 matplotlib 스타일을 지원합니다. Claude에게 모든 스타일을 한눈에 볼 수 있는 Showboat 문서를 만들도록 했는데, demo/styles.md에서 확인할 수 있습니다.
Chartroom 개발 과정
click-app cookiecutter 템플릿으로 Chartroom 저장소를 생성한 뒤, 새로운 웹용 Claude Code 세션에 다음과 같이 지시했습니다.
matplotlib을 사용해 차트가 담긴 PNG 이미지를 생성하는 파이썬 CLI 도구를 만들 것입니다. 차트 유형별로 서브커맨드를 두고, 커맨드 라인 옵션으로 제어합니다. 사용에 필요한 모든 정보는 "chartroom --help" 출력 하나에서 확인할 수 있어야 합니다.
데이터는 파일 또는 표준 입력으로 CSV, TSV, JSON 형식을 받습니다. sqlite-utils가 데이터를 받는 방식과 유사하게 구현하세요 — 참고용으로 simonw/sqlite-utils를 /tmp에 클론하세요. matplotlib/matplotlib도 참고용으로 클론하세요.
--sql path/to/sqlite.db "select ..." 옵션으로 읽기 전용 모드에서 데이터를 받는 기능도 추가하세요.
먼저 명확히 해야 할 사항들을 질문하세요 — ask user 도구는 사용하지 마세요(현재 오작동 중입니다). 그리고 제가 승인할 수 있도록 스펙 문서를 작성해주세요.
승인 후에는 "uv run pytest"로 테스트를 실행하며 red/green TDD 방식으로 진행하세요.
개발 중에는 "uvx showboat --help" 도구를 활용해 demo/README.md 문서를 지속적으로 유지·관리하세요. 새로운 차트 유형이 완성될 때마다 테스트, 구현 코드, 루트 레벨 README 업데이트, 그리고 새 차트 유형의 인라인 이미지 데모가 포함된 demo/README.md 최신 버전을 함께 커밋하세요. 이미지 파일명은 showboat image 명령으로 관리되는 UUID 형식을 사용하고, demo/ 폴더에 저장하세요.
"uv build"가 불필요한 디렉터리에 대한 경고 없이 깔끔하게 실행되도록 하되, dist/와 uv.lock은 .gitignore에 포함시키세요.
이 프롬프트만으로 대부분의 작업이 완료되었습니다. 이후 과정은 PR 목록에서 확인할 수 있습니다.
성장하는 Showboat 생태계
Showboat 도구 패밀리는 이제 핵심 도구인 Showboat, 브라우저 자동화를 담당하는 Rodney, 차트 생성을 위한 Chartroom, 그리고 Showboat 문서를 Datasette에 스트리밍하는 datasette-showboat로 구성됩니다.
이 도구들이 느슨한 규칙만으로도 서로 유기적으로 연동된다는 점이 마음에 듭니다. 이미지 경로를 출력할 수 있는 도구라면 Showboat가 해당 이미지를 문서에 포함시킬 수 있고, 텍스트를 출력할 수 있는 도구라면 무엇이든 Showboat와 함께 사용할 수 있습니다.
이 패턴에 맞는 도구를 앞으로도 계속 만들어나갈 것 같습니다. 워낙 빠르게 뚝딱 만들 수 있거든요!
Showboat 원격 스트리밍에 활용한 환경 변수 방식도 꽤 재미있는 아이디어입니다. 지금은 문서를 다른 곳으로 스트리밍하는 용도로만 쓰고 있지만, 아직 생각지 못한 다양한 용도로 활용할 수 있는 웹훅(webhook) 확장 메커니즘으로도 충분히 발전할 수 있을 것 같습니다.
현재 보고 계신 것은 블로그의 장문 아티클만 모은 피드입니다. 모든 포스트를 받아보려면 /atom/everything/을 구독하거나, 다른 구독 옵션을 확인해보세요.