draw.ioのMCPサーバーのかっこいいUXを模倣しようとしたらなかなか複雑だった件 | TechDistill

> Source: Qiita_Trend

// Problem

LLMのツール呼び出しにおいて、引数の生成が完了するまでUIが静止してしまう点が課題である。draw.ioのような「生成過程が視覚的にわかるUX」を実現するには、生成途中の不完全なデータを用いて、リアルタイムに描画を更新し続ける高度な制御が必要となる。

// Approach

Vercel AI SDKの `parsePartialJson` を用い、ストリーミング中の不完全なJSONを逐次修復する。修復された引数をMCP Apps経由でiFrameへ転送し、iFrame側ではMermaidの構文チェックを行い、Validな状態でのみ描画を更新する二段構えの手法を採用した。

// Result

実装は非常にローレベルで複雑であり、ストリーミングの制御に課題が残る。Mermaid記法では文字数が少ないため、描画の滑らかさがDraw.ioに及ばなかった。しかし、LLMのツール引数生成プロセスをUI更新に直結させるための、具体的な技術的アプローチを明らかにした。

Senior Engineer Insight

> UXの向上は極めて重要だが、その裏側にある実装の複雑さは無視できない。本手法は、LLMの非決定的なストリーミング出力を、いかにして「意味のある中間状態」としてクライアントに届けるかという、高度なエラーハンドリングと状態管理の課題を突きつけている。実戦投入においては、パースのオーバーヘッドや描画エンジンの負荷、そして不完全なデータによるUIのちらつきをどう制御するかが、プロダクトの品質を左右する。単なる機能実装に留まらず、低レイテンシなフィードバックループをいかに構築するかが、次世代のAIエージェント開発における勝負所となるだろう。