Vercel UI SDKとは｜AIエージェントが作って操作するUI部品、使い道と55種を実機デモで解説

Vercel UI SDK は、Vercel が2026年11月12日に公開した、AIエージェント向けのUIライブラリだ。 フォーカス、キーボード操作、選択、ポップアップといった「振る舞い」を部品にして、エージェントがそれを組んでコンポーネントを作る。出来上がった画面は、エージェントがクリックや画面の読み取りを経ずに、部品の API を呼んで操作できる。下の GIF は、手元の Vite アプリで、コンソールから入力欄とセレクトの値を変えたところだ。

名前が似ているものと取り違えやすいので、先に分けておく。

部品の作り方や、デザインの決まりごとをどう揃えるかの全体は デザインシステムとは？仕組み・構成要素・有名事例をエンジニア向けに整理する【2026年版】 で整理している。

Vercel UI SDK でできること：使い道は4つ

公式サイトは、Select を例に考え方を説明している。エージェントに Select を丸ごと書かせるのではなく、ポップアップ（createPopup）、一覧からの選択（createSelection）、文字を打って候補へ飛ぶ動き（createTypeahead）という部品を渡し、組ませる。

UI SDK のコンポーネントをデモで見る

公式ドキュメントには、React 版だけで55種のコンポーネントのページがあり、それぞれ操作できるデモが付いている。2026年11月14日に ui-sdk.dev のデモを操作し、開いた状態で撮った。部品そのものは見た目を持たず、下の見た目はドキュメントの例のスタイルだ。

キーボードでの操作、フォーカスの戻り先、ARIA の属性は部品の側が持つ。各デモの下に「矢印キーで動かし、Enter で選ぶ」といった操作の説明が付いている。

エージェントに画面を操作させる：agent bridge を実機で試す

UI SDK の部品で作った画面には、createAgent でエージェントの入り口（agent bridge）を付けられる。公式ガイドの Vite アプリに入力欄を1つ足し、Node.js 22 と Chromium で動かした。

snapshot() は、画面にある部品のラベル、今の値、呼べる操作を返す。エージェントは画面を読み取らずに、ラベルを指定して値を変えられる。

src/agent.ts で入り口を作り、main.tsx の先頭で読み込む。allow は、エージェントに許す操作を決める関数だ。

import { createAgent } from "@ui-sdk/react/agent"

const agent = createAgent({
  allow: ({ component, label, action }) =>
    component === "select" && label === "Region" && action === "setValue",
})

Object.assign(window, { agent })

export { agent }

ブラウザのコンソールから、ラベルを指定して呼ぶ。

window.agent.snapshot()
await window.agent.act({
  steps: [{ ref: "Region", action: "setValue", args: ["Asia Pacific"] }],
})

試した結果は次のとおりだ。

allow を渡さないと、対応する操作はすべて通る。公式ドキュメントは、課金ボタンのように必ず人に確かめたい部品に data-agent-confirm を付ける方法と、エージェントに見せたくない範囲を data-agent-hidden で隠す方法も示している。

手で試すときに注意したい点もある。snapshot が返す内容には、利用者が入力した文字（表の行の名前など）が入る。ツールの説明は「データとして扱う」ようモデルに指示しているが、指示を仕込まれる余地は残る。大事な変更の前に人が確かめる設定にしておく。

Vercel は、プロジェクト設定画面の変更をエージェントにさせる計測を公開している。

比べた相手は、別のコンポーネントライブラリで作った同じ画面をブラウザ操作のツールで動かす方法だ。Vercel 自身の計測で、本記事では再計測していない。

WebMCP に対応したブラウザには、registerTools で snapshot・query・act を登録できる。公式ガイドは ChatGPT のデスクトップアプリ内のブラウザでの手順を載せているが、本記事では試していない。

部品をエージェントに作らせる：behaviors とスキル

UI SDK にない部品は、definePrimitive で状態、操作、パーツをまとめて作る。README は「書き方を覚える必要はない。エージェントが書く」としている。エージェントに渡すものは2つある。

・スキル：npx skills add vercel-labs/ui --skill ui-sdk で入る。手元では .agents/skills/ui-sdk/SKILL.md ができ、Claude Code 用の .claude/skills/ui-sdk はそこへのリンクとして作られた
・ドキュメント：各パッケージに、入れた版の Markdown のドキュメントが入っている（node_modules/@ui-sdk/react/docs/ に19ファイル）。サイトには llms.txt もある

テストの道具（キーボード操作、フォーカス、ARIA を確かめるもの）もあり、エージェントが作った部品の動きを確かめられる。本記事では、エージェントに新しい部品を作らせるところまでは試していない。

Vercel UI SDK の導入手順と、ほかの選択肢との違い

使うフレームワークのアダプタと core を入れる。React 以外は @ui-sdk/react を @ui-sdk/vue、@ui-sdk/svelte、@ui-sdk/solid、@ui-sdk/web に替える。

npm install @ui-sdk/react @ui-sdk/core
npx skills add vercel-labs/ui --skill ui-sdk

2026年11月14日の npm では、タグの付き方に注意が要る。版を指定しない npm install が入れる latest は 0.1.0-beta.1 で、新しい 0.1.0-beta.2 は beta のタグにある。本記事では @ui-sdk/react@beta @ui-sdk/core@beta で 0.1.0-beta.2 を入れ、Vite 8 と React 19 の新しいアプリで動かした。スキルの追加も同じ日に通った。

shadcn/ui の上で見た目を揃える方法は Square UI解説｜shadcn/uiレイアウト20種を実機デモで全検証｜MITから独自ライセンスへ と tweakcnとは｜shadcn/uiのテーマをノーコードで視覚編集しCSSを吐く使い方を実機解説 で扱った。

向いているのは、エージェントに画面を触らせる機能を作りたい場合と、複数のフレームワークで同じ部品を持ちたい場合だ。見た目の揃った部品をすぐ使いたいだけなら、ベータの API の変更に付き合う理由は薄い。

参照ソース

・vercel-labs/ui（GitHub）
・UI SDK のドキュメント（ui-sdk.dev）
・Built for Agents（ui-sdk.dev の Agents ドキュメント・Benchmark を含む）
・Introducing the UI SDK（Vercel の X の投稿・2026-11-12）
・@ui-sdk/core（npm）