노트 앱 안에 /ai를 만들었다 — 생성된 UI 컴포넌트를 안전하게 렌더링하는 방법

개발자가 Tiptap 기반 노트 앱에 /ai 명령을 추가해 문서 안에서 바로 인터랙티브 UI 컴포넌트를 생성할 수 있게 했다.

앱은 HTML, CSS, JS를 노드로 스트리밍해 Supabase에 저장하고, 생성이 끝난 뒤에만 렌더링한다.

생성된 UI는 Tailwind를 CDN에서 불러온 샌드박스 iframe 안에서 실행돼 보안 위험을 낮춘다.

이 방식은 메모 안에 AI가 만든 도구를 직접 넣으면서도 화면 전환을 줄이는 실용적인 예시다.