はじめに json-render は、Zod で定義したコンポーネントカタログを介して、LLM が生成した JSON Spec を React コンポーネントとして描画する Vercel Labs 製の Declarative Generative UI フレームワークです。 本記事では、その json-render を AI SDK のストリームパイプラインに挟み込み、テキストと Generative UI をインラインで描画する仕組みの実装全体像を解説します。 MCP Apps は iframe 内で双方向・継続的な更新が可能な UI を提供します。ただし sandboxed i...

💾

はじめに TanStack Query v5 で導入された queryOptions は、React と TypeScript エコシステムにおける開発者体験に大きな変化をもたらしました。設定オブジェクトを定義するだけで、別ファイルで呼び出される useQuery の戻り値の型が、型注釈なしで完璧に推論されます。 // queries/users.ts - 設定の一元化 export const userQueries = { detail: (userId: string) => queryOptions({ queryKey: ['users', userId]...

💾