Thesys Agent Builderで始めるGenerative UI：AIがUIを動的生成する仕組み

チャットボットの応答がテキストだけでは足りない場面

AIチャットボットの返答は、ほとんどテキストだ。Markdownで整えた文章、コードブロック、リンク。それで済む場面もある。ただ、ユーザーが欲しいのは長い説明文ではなく、その場で触れるインターフェースだったりする。

たとえばフライトを探す質問を投げたとしよう。候補を箇条書きで返されても、別の画面に移って比較しなければならない。チャット内にフィルター付きの検索カードやカレンダーがそのまま出てきたら、操作が一画面で完結する。

この発想を形にした技術がGenerative UIだ。LLMがテキストの代わりにUIコンポーネントを生成し、ユーザーはチャット画面の中でそのまま操作できる。2025年11月にはGoogleもGenerative UIに関する研究を公開した。LLMが生成したUIは標準的なテキスト出力より強く好まれるという評価結果が示されている。

では、このGenerative UIをAPIとSDKで手軽に実装できるThesysのAgent Builderを掘り下げていく。

Thesysとはどんな会社か

Thesysはサンフランシスコ拠点のスタートアップだ。共同創業者はRabi Shanker GuhaとParikshit Deshmukh。2024年11月にTogether Fundがリードし、8vcが参加する形で400万ドルのシード資金を調達した。300を超えるチームがすでにThesysのツールを本番環境で利用している。

主力製品のAgent Builderは、AIの応答にインタラクティブなReactコンポーネントを埋め込める。テキストを返すだけでなく、ボタン・フォーム・カード・グラフを動的に生成して返せる点で、従来のチャットボットビルダーとは方向性が違う。加えてノーコードのAgent Builder UIも提供しており、コードを書かずにGenerative UIアプリを構築することも可能だ。

ThesysはさらにCopilotKitが開発するAG-UIプロトコルのエコシステムにも参加している。AG-UIはAIエージェントとフロントエンドのリアルタイム通信を標準化するオープンソースのプロトコルだ。MCPがツール呼び出しを標準化するのに対し、AG-UIはエージェントからUIへのイベント配信を標準化する。GoogleやLangChain、AWS、Microsoftなども採用しており、エージェントUIの共通基盤として急速に広まっている。

公式サイト: https://www.thesys.dev/

Agent Builderを構成する2つの軸

Agent Builderの核はC1 APIとGenUI SDKだ。それぞれの役割を見ていく。

C1 API ― OpenAI互換で移行コストが低い

C1 APIはOpenAIのChat Completions APIと互換性がある。すでにOpenAI向けのコードがあるなら、base_urlとモデル名を差し替えるだけで動く。

import openai
import os

client = openai.OpenAI(
    api_key=os.environ.get("THESYS_API_KEY"),
    base_url="https://api.thesys.dev/v1/embed"
)

response = client.chat.completions.create(
    model="c1/anthropic/claude-sonnet-4/v-20250930",
    messages=[
        {"role": "system", "content": "フライト検索アシスタント。結果はカード形式のUIで表示する。"},
        {"role": "user", "content": "東京からニューヨークへの来週のフライトを探して"}
    ]
)

ベースURLはhttps://api.thesys.dev/v1/embedを指定する。モデル名はc1/{プロバイダー}/{モデル名}/{バージョン}という命名規則だ。レスポンスにはテキストだけでなく、UIコンポーネントの構造化データも含まれる。APIコール数とLLMトークン消費量がそれぞれ課金対象になる。

GenUI SDK ― 生成されたUIをReactで描画する

APIが返したUI記述を画面に表示するのがGenUI SDKの役割だ。内部的にはThesysのオープンソースUIフレームワークCrayonをベースにしている。CrayonはGitHubでMITライセンスのもと公開されており、エージェントUIを構築するための拡張可能なReactコンポーネント群を提供する。

npm install @thesysai/genui-sdk

import { C1Chat } from "@thesysai/genui-sdk";
import "@crayonai/react-ui/styles/index.css";

export default function App() {
  return (
    <C1Chat
      apiUrl="/api/chat"
      agentName="フライト検索アシスタント"
      formFactor="full-page"
    />
  );
}

C1Chatコンポーネントを配置するだけで、Generative UI対応のチャット画面が完成する。AIが返したボタン、フォーム、カード、テーブル、グラフがチャット内にそのまま描画される。テーマのカスタマイズにはCrayonのプリセットも使える。

Generative UIが威力を発揮する3つのシーン

テキスト応答だけでは体験が不十分になるケースを具体的に見てみよう。

Eコマースの商品提案

ユーザーが「赤いスニーカーを探している」と入力すると、商品画像つきのカードが並ぶ。サイズ選択やカート追加のボタンもUI内に表示されるため、チャットを離れずに購入まで完了できる。テキストで商品リストを返される場合と比べると、コンバージョンまでのステップが大幅に減る。

ダッシュボード型のレポート

「先月の売上を見せて」と聞けば、グラフやテーブルが直接返ってくる。フィルタを操作して期間やカテゴリを切り替えることもできる。数字の羅列を読み解くより、触れるグラフのほうが判断は速い。意思決定のスピードを上げたい経営層やアナリストに特に響くユースケースだ。

フォーム入力の段階的ガイド

問い合わせ対応のAIが、ユーザーの回答に応じてフォームを動的に組み立てる。全項目を一度に見せるのではなく、必要な入力だけを順番に提示する。この段階的な構成は離脱率を下げやすい。

競合ツールとの違いを整理する

Agent Builderに近い領域のツールを並べてみた。それぞれ得意分野が異なる。

Agent Builderが際立つのは、AIが応答のたびにUIを動的に生成する点だ。VoiceflowやBotpressはチャットウィジェットやテキスト応答が中心で、UIコンポーネントの自動生成には対応していない。Difyはワークフロー構築に強いが、フロントエンドのUI生成は守備範囲外になる。

一方で、Agent Builderはまだ新しいプロダクトだ。エコシステムの厚みやコミュニティ規模ではVoiceflowやBotpressに及ばない。ノーコードで素早くチャットボットを立ち上げたい場合や、CMS連携を優先したい場合は、既存のビルダーのほうが向いている。

料金体系を確認する

Agent Builderには無料のEssentialsプランがある。$10分のクレジットが付与され、C1 APIとGenUI SDKの主要機能を試せる。クレジットを使い切った後は従量課金に移行する。

課金はAPIリクエスト数とLLMトークン消費量の二軸で計算される。APIコールはプランに含まれる分があり、LLMトークンはプロバイダーごとの単価で別途発生する。チーム向けのTeamプランやエンタープライズ向けのプランも用意されている。最新の詳細は公式の料金ページで確認してほしい。

導入までの最短ステップ

実際に動かすまでの流れを整理しておく。

1. Thesysコンソールでアカウントを作成し、APIキーを取得する
2. バックエンド側でOpenAI SDKを使い、base_urlにhttps://api.thesys.dev/v1/embedを設定する
3. フロントエンド側で@thesysai/genui-sdkをインストールし、C1Chatコンポーネントを配置する
4. システムプロンプトでUIの出力形式を指示し、レスポンスを確認する

ノーコードで試したい場合はAgent Builder UIから直接エージェントを作成し、データを接続してPublishするだけで公開できる。

よくある質問

Q1. Generative UIとは何か

LLMがテキストではなく、ボタン・フォーム・カード・テーブル・グラフといったUIコンポーネントを動的に生成して返す技術だ。ユーザーはチャット内でそのUIを直接操作できる。Googleも2025年11月にGemini 3へのGenerative UI実装を発表しており、業界全体で注目が高まっている。

Q2. React以外のフレームワークでも使えるか

C1 APIはREST APIなので、バックエンドはどの言語からでも呼べる。ただしUIのレンダリングにはGenUI SDKが必要で、現時点ではReactとNext.jsが前提になる。

Q3. 日本語のプロンプトや応答に対応しているか

C1 APIのバックエンドLLMは多言語に対応しており、日本語のプロンプトと応答は動作する。ただし公式ドキュメントは英語のみだ。

Q4. OpenAIのコードからの移行は簡単か

base_urlとモデル名を変えるだけで基本的な移行はできる。Generative UI固有の機能を活かすなら、システムプロンプトの調整やUI関連のパラメータ設定が追加で必要になる。

Q5. セルフホストは可能か

現時点ではクラウドサービスのみの提供で、セルフホストには対応していない。ただしCrayonフレームワーク自体はMITライセンスのオープンソースとしてGitHubで公開されている。

Q6. AG-UIプロトコルとの関係は

AG-UIはCopilotKitが開発したオープンソースのプロトコルで、AIエージェントとフロントエンドのリアルタイム通信を標準化する。ThesysはこのAG-UIプロトコルを統合しており、C1 APIと補完的な関係にある。LangGraph、CrewAI、Mastra、PydanticAIなど多くのフレームワークがAG-UIをサポートしている。

Q7. Generative UIと従来のチャットUIは何が違うのか

従来のチャットUIは、あらかじめ定義されたテンプレートの範囲で応答を表示する。Generative UIはLLMがコンテキストに応じてUIの構造自体を動的に決定する。ユーザーの質問内容やデータの性質に合わせて、テーブル、グラフ、フォームなど最適な表現を自動で選べる点が根本的に異なる。

まとめ

Generative UIは、チャットボットの応答をテキストからインタラクティブなUIへ押し上げる技術だ。ThesysのAgent Builderは、OpenAI互換のC1 APIとReact向けGenUI SDKでこの技術を実用レベルで提供している。

無料枠があるので、小さなプロトタイプから試せる。自社のチャットボットにUI生成機能を加えたいなら、選択肢に入れておいて損はない。

参考リンク

• Thesys 公式サイト
• Thesys ドキュメント
• GenUI SDK – npm
• Thesys GitHub（Crayonフレームワーク含む）
• AG-UI プロトコル
• Thesys シード調達プレスリリース（GlobeNewsWire）
• Google Research – Generative UI
• AG-UI GitHub リポジトリ