💡

Generative UI 事例 - AI駆動UIと動的UIのプロダクト例

Google Gemini Dynamic View、Vercel v0、Amazon Rufusなど、AIが文脈に応じてUIを生成・更新する実例を紹介。生成AI時代のUI設計とパーソナライズを理解できます。

12 件
💡事例

Google Stitch: Real-Time AI-Native UI Design

Google LabsのStitchは、chat-onlyなcoding demoではなく、design-time GenUIの強い事例です。2026年5月19日の公式updateでは、Stitchをlive collaborative design systemとして説明しており、Agentがinfinite canvasへUI作業をstreamし、ユーザーが完了前に方向づけを行い、結果のscreenをproductionへhandoffできます。生成AI UIデザインやAI駆動UIを実際のdesign workflowへ接続するケースとしても価値があります。

googlestitchdesign-tool
by Google Labs · 2026-05
サイトを見る
💡事例

Google Gemini 3 - Dynamic View & Visual Layout

GoogleはGemini 3でGenerative UI機能を実装しており、社内ではDynamic ViewやVisual Layoutとして扱われています。Google公式blogによると、Gemini 3 AI Modeはユーザーの質問に応じてimmersive visual layout、interactive tool、simulationをその場で生成し、Dynamic Viewではpromptごとにcustom interactive responseを設計してcode化できます。

googlegeminidynamic-view
by Google · 2025-11
サイトを見る
💡事例

Google Search AI Mode

Gemini 3がSearchに入ったことで、AI ModeにもGenerative UI体験が追加されています。Google Searchチームは、Gemini 3 in Searchがユーザーの質問に合わせて理想的なvisual layout、interactive tool、simulationを動的に作れると説明しています。複雑な概念を検索したときに、テキスト回答だけでなく動的chartやparameter調整可能なcalculatorを表示できる点が重要です。

googlesearchai-mode
by Google · 2025-11
サイトを見る
💡事例

OpenAI Apps SDK: ChatGPT内のinteractive apps

OpenAIが2025年10月に発表したApps SDKは、mainstreamなGenerative UI事例です。appsがChatGPTの会話内に直接入り、natural languageに応答しながら、map、playlist、presentation、course、shopping、travelなどのinteractive interfaceをchat内でrenderします。Apps SDKはMCPを拡張し、developerがapp logicとinterfaceの両方を定義できるため、外部appへのlinkではなくnative-feeling UIを持つ会話型productの参照例になります。

openaichatgptapps-sdk
by OpenAI · 2025-10
サイトを見る
💡事例

Claude Artifacts: 共有できるAI-powered apps

Anthropicの2025年7月のClaude Artifacts updateは、artifact panelを軽量なapp surfaceへ広げた事例です。ClaudeはClaude APIと連携するartifactを作成し、hostして共有でき、利用者は自分のClaude accountで認証します。生成されたUIがchat横の一時的previewではなく、persistent、editable、shareableなsoftware objectになる点が重要です。

anthropicclaudeartifacts
by Anthropic · 2025-07
サイトを見る
💡事例

Figma Make: Prompt-to-App Prototyping

Figma Makeは2025年7月に全ユーザーへ公開され、design toolにおけるGenerative UIの分かりやすい事例です。Figmaはこれをinteractiveでhigh-fidelityなprototypeやweb appを作るprompt-to-app toolと説明しており、design library importやSupabase-connected prototypeなども加わっています。GenUIがproduct discovery、team alignment、design-engineering collaborationの上流に入る例として価値があります。

figmafigma-makeprompt-to-app
by Figma · 2025-07
サイトを見る
💡事例

Canva Code: Promptで作るinteractive design elements

Canva Codeはcreator platformにおける強いGenerative UI事例です。Canva Create 2025でCanvaは、pricing calculator、quiz、mini-gameなどのinteractive elementをユーザーが説明すると、AIがCanva内で直接buildするworkflowを発表しました。生成されたelementはdesign、website、presentation、docなどのCanva surfaceで再利用でき、non-developerの日常的なcreative workにGenUIを持ち込みます。

canvacanva-codeinteractive-design
by Canva · 2025-04
サイトを見る
💡事例

Amazon Rufus - Conversational Shopping Assistant

Amazonのconversational shopping assistantであるRufusは、会話からproduct recommendation cardやfilter optionなどのintent-based interfaceを直接生成します。従来のkeyword searchではなく、ユーザーの買い物意図を起点にUIが変化するe-commerce向けGenerative UIの事例です。

amazonrufuse-commerce
by Amazon · 2024-02
サイトを見る
💡事例

v0 by Vercel

Vercelのv0.devは、短いテキストpromptからinteractive frontend prototypeを生成できるプロダクトです。テキスト説明や画像からReact/Tailwind UI componentsを作るため、text-to-UI generationやGenerative UI実装の実用的な初期事例として参照できます。

vercelcode-generationreact
by Vercel · 2023-10
サイトを見る
💡事例

GitHub Spark: natural languageからfull-stack appsへ

GitHub Sparkは、GitHub ecosystem内のprompt-to-app public preview事例です。ideaをfull-stack intelligent appsへ変換し、natural language、clickable controls、codeのどれでもiterateでき、build中にlive previewを確認し、GitHub-backed hostingへone-click publishできます。Generative UIの観点では、generated UIがauth、repo handoff、production workflow contextを持つdeployable mini appの一部になる点が重要です。

githubsparkfull-stack
by GitHub
サイトを見る
💡事例

Vercel AI SDK - Generative UI

Vercel AI SDKは、LLMからReact componentsをstreamし、AIがinteractive UI componentsをリアルタイムに生成できるようにします。Next.js Generative UIやVercel AI SDK Generative UIの実装パターンを調べる開発者にとって、component streamingとtool callingを理解する入口になります。

vercelreactstreaming
by Vercel
サイトを見る
💡事例

bracesproul/gen-ui - LangChain.js Generative UI Demo

LangChain.jsとNext.jsでGenerative UI applicationを素早く構築する方法を示すopen-source demoです。project descriptionでもGenerative UI applicationsを作るためのtemplateと説明されており、LangChainベースのtool orchestration、streaming response、UI generation patternを学べます。

langchainnextjsopen-source
by bracesproul
サイトを見る

Generative UI、GenUI、生成AI UIデザインの厳選リソース集。

Made with ❤️ community