스크립트
00:00:00皆さま、お越しいただきありがとうございます。本日は、私がこれまで書いた中で最も奇妙なソフトウェアの1つについてお話します。
00:00:18それは、私がこれまで世の中に送り出してきたさまざまなアイデアの、いわば境界線上に位置するものです。
00:00:22それでは、どうかお付き合いください。MCPやその他の技術のエージェントが可能にした非常に奇妙な代物に対して、
00:00:27できる限り理にかなったアプローチを試みたいと思います。それでは早速始めましょう。
00:00:34まずはMCPアプリについてお話しします。本日の他のセッションに参加された方がいらっしゃるか分かりませんが、
00:00:38例えば1時間ほど前に行われたアイドとリアットのセッションなどですね。では、手を挙げていただけますか、
00:00:44MCPアプリに馴染みのある方は？なるほど、ここは私がこの講演を行った中で、おそらく一番反応が良い聴衆ですね。
00:00:52本当に素晴らしいです。手を挙げられなかった方のために説明すると、MCPアプリとは、
00:00:57確か今年1月に導入されたMCPプロトコルの拡張機能です。そのコンセプトはですね、
00:01:02これがMCPツールの典型的なリクエストとレスポンスのサイクルです。ユーザーがエージェントにリクエストを送信し、
00:01:10エージェント側がMCPサーバー上でホストされているMCPツールを使用することを決定します。ツールの結果が
00:01:16エージェントのコンテキストに返され、エージェントは何らかの応答を生成してユーザーに送信します。つまり、
00:01:23基本的にMCPサーバーは、エージェントに機能やビジネスロジックを追加するための素晴らしい手段ですが、
00:01:28ユーザーとMCPサーバーの間に直接的な接続が築かれることはありません。必ずエージェントの頭脳を介し、
00:01:34さらに重要なことに、エージェントのコンテキストウィンドウを介して行われます。MCPアプリはこの拡張であり、
00:01:40実際にはエージェントをバイパスすることを可能にします。代わりに次のようなことが起こります。
00:01:44ユーザーがエージェントに何かを要求すると、エージェントはツールを使用しますが、そのツールリクエストが
00:01:49エージェントに戻るのではなく、ユーザーに直接送信されます。HTML、CSS、JavaScriptとして送信され、完全なUIとなります。
00:01:55それはあなたが必要とするどのようなものでも構いません。つまり、アイデアとしては、
00:02:01いわばエージェントの中にインターネットを組み込む方法を提供するということです。カスタムブランディングされた有用なUIを自由に出荷でき、
00:02:08ユーザーにあらゆるインタラクティブな体験を提供できます。そして図に見るように、
00:02:12ユーザーはそのアプリケーションと直接対話し、ツールを使用し、
00:02:17そのアプリ上でホストされているバックエンドに情報を送り戻して、完全な体験を得ることができます。例えば、
00:02:21レストランのテーブルを予約したり、飛行機の座席を変更したり、スケジュールを操作したりすることを想像してみてください。
00:02:28AIエンジニアにとって、エージェントがそれを仲介しつつも、人間として直接操作できることはたくさんあります。
00:02:33そして現在、さらなる拡張機能が登場しようとしています。これは
00:02:377月のMCPリリースで提供される予定で、エージェント自身もアプリと対話できるようになります。これにより、
00:02:43本日は詳しく触れませんが、非常に興味深いユースケースがいくつか生まれます。例えば、
00:02:47視覚的なアプリの中で自分が手を指し、その後エージェントもアプリを操作してチェスの対戦をする、
00:02:52といったことが仮に可能になります。これにより、可能性の全く新しい世界が切り拓かれることでしょう。
00:02:55ご存知の方もいるかもしれませんが、私が作者であり、私の会社がメンテナンスを行っている「FastMCP」というフレームワークがあります。
00:03:03FastMCPは、MCPサーバーを構築するための最も人気のある方法の1つです。そのため、MCPの世界に新しく素晴らしいものが登場するたびに、
00:03:09私が真っ先に考えるのは、「これをどのようにユーザーに届けたらよいだろうか？」ということです。
00:03:16そして、我々のユーザー層について共有しなければならない最も重要なことの1つは、
00:03:20彼らの多くがPythonエンジニアであるという点です。したがって、フロントエンドやUIを提供しようとすると、
00:03:27これは少々厄介な問題になります。一体どうやってそれを実現すればよいのでしょうか？
00:03:31ここで次のスライドの内容が正確に思い出せないことに気づいたので、ちょっと覗き見してみましょう。
00:03:35いや、戻りましょう。我々には今ひとつの課題があります。Pythonエンジニアに、ベストプラクティスに則った、
00:03:42インタラクティブで、美しく、有用なUIをどう作ってもらうかという問題です。
00:03:50過去に試みられて失敗したような、愚かな真似をするわけにはいきません。フロントエンドのすべて、
00:03:54エコシステム全体、あらゆるものをPythonに無理やり詰め込んで、何か奇妙で妥協に満ちた、
00:04:00無茶苦茶なフランケンシュタインのようなシステムを作るような真似はしません。ですから、私はこれに本当に悩みました。
00:04:04これを何とかして提供する方法を見つけなければならないという義務感を強く感じています。しかし、
00:04:10Python環境でReactをそのまま動かせるなどとうそぶくわけにはいきません。そんなのは無理です。そこで私たちは、
00:04:15FastMCPエコシステムのユーザーとは一体誰なのかについて、真剣に考えました。企業に所属していることが多いこれらの一流のPython開発者は、
00:04:20普段何をしていて、何のためにこうしたUIを必要としているのでしょうか？彼らは何のためにMCPアプリを必要としているのでしょうか？
00:04:25彼らが求めているのは、完全なブランディングが施されたコンシューマー向けのカスタムUIではありません。彼らがやっているのはそういうことではありません。彼らが主に
00:04:34任されているのは、組織全体で情報を共有することであり、組織全体から
00:04:38情報を収集することです。そのため、MCPアプリのフレームワーク内で彼らに何を期待すべきかという本質が変化しました。
00:04:43そして、その制約が非常に役立つものとなったのです。根本的に、彼らに期待されるのは、
00:04:48テーブルの構築、フォームを通した情報の収集、そしてチャートの共有といった作業を行うことです。
00:04:53グラフの共有を求められます。こうした制約を設けることで、
00:04:58数ヶ月前にオープンソースとして公開し、この層の間で驚くほど
00:05:03人気を集めている「Prefab」というソフトウェアを導入できます。これは、
00:05:11先ほど挙げた目的のために、エージェント経由でUIを提供するためのスコープ付きUI構築フレームワークです。これは「ハロー
00:05:17ワールド」のカードです。どんなフロントエンドフレームワークにもあるような、
00:05:22文字通りのものです。ウェブサイトに掲載されており、名前を入力するとライブで更新されます。
00:05:27しかし、もちろん奇妙なのは、これを生成したコードがすべて
00:05:31Pythonで書かれているという点です。これを見て私が感じるのと同じ感覚を、皆さんにも味わってほしいのですが、それは何とも奇妙な
00:05:38「すごいけれど、同時にすごく気味が悪い」という感覚の組み合わせです。「すごい」と思えるのは、
00:05:44このコードには何か特有のものがあると感じられるからです。近くで見えなくても、
00:05:48少し拡大すればお分かりいただけます。コードの中にUIの構造が
00:05:52見えてくる一方で、明らかに異質で、どこか奇妙な部分も存在します。
00:05:58そう感じたときに行き着く結論、それは、
00:06:04Pythonでフロントエンドを構成することは、チャレンジの範囲を正しく絞りさえすれば、
00:06:09非常に心地よいものになるということです。ゼロからフロントエンドを構築しようとしているわけではありません。世界トップクラスの、
00:06:15よく設計されたコンポーネント群からフロントエンドを組み立てようとしているのです。それこそがガードレールを維持し、
00:06:20ユーザーを意識し続ける方法なのです。ここでのユーザーは、恣意的なことをしようとしているわけではありません。
00:06:24よく構造化されたフロントエンドを作成し、それを届ける相手の目の前に提示しようとしているのです。
00:06:29それでは、そのDSLの簡単なツアーに出かけましょう。主にコンテキストマネージャーを使用しています。FastMCPをご存知の
00:06:34方ならお分かりのように、FastMCPの本質的な革新は、Pythonのデコレータを使って
00:06:39MCPサーバー全体を構築した点にあると言えます。したがって、Prefabに対しても同じ還元主義的なアプローチをとるなら、
00:06:44コンテキストマネージャーを使用してUI全体を構築していると言えます。
00:06:48こちらに見えるように、コンポーネントをコンテキストマネージャーとしてネストすることで、UI内にまったく同じ構造を構築しています。
00:06:55読むときに非常に自然に感じられます。どのように要素が構造化されているかが分かります。UIの各要素、各コンポーネントは、
00:07:01レンダリングされると、ここに見えるような美しいshadcnコンポーネントとなるクラスであり、インスタンス化するものです。
00:07:06パラメータ化することも可能です。CSSクラスなどを渡して、思い通りの見た目にカスタマイズできます。
00:07:11そして最後に取り上げるのが、本日は十分な時間がありませんが、これらのリアクティブ変数です。これについては、
00:07:17後ほどデモをお見せします。基本的に、クライアント側のインタラクティビティを作成し、
00:07:21コンポーネント間でデータをバインドするための完全な手段が用意されています。これにより、JavaScriptの世界に完全に踏み込み、
00:07:26私のユーザー層が非常に慣れ親しんだエコシステムを離れることなく、
00:07:31こうした非常にリッチなエクスペリエンスを構築することが可能になります。
00:07:36そしてこれが、Prefabが基本的に公開しているパイプラインです。先ほどご紹介したPythonのDSLを使用し、
00:07:42それを用いてUIの宣言的な表現を構築します。
00:07:46それがJSONプロトコルにシリアライズされ、そのJSONプロトコルが最終的に実際のMCPアプリとしてホストされている
00:07:53Reactアプリによってレンダリングされます。これにより、私たちの可能性が大きく広がることになります。
00:07:59それについては後ほどお見せしますが、この仕組み全体において鍵となるのは、中間に位置するJSONです。
00:08:02この仕組み全体で重要なのは、中間に位置するJSONです。Pythonのほうは、後から偶然見つけたものにすぎません
00:08:07この目的は、「UIのシリアライズ可能な表現を作成できるか？」という点にありました。
00:08:10それが、再び登場するJSONプロトコルです。
00:08:17シリアライズ可能であるため、エージェントから生成することも、エージェントに送信することも可能です。人間として生成し、
00:08:22エージェントに修正を依頼することもできます。JSONによる中間表現が存在するおかげで、このような素晴らしい機能の数々が実現します。
00:08:26そして、そこから自然に生まれたPythonのDSLが非常に美しく使いやすかったため、何かをつかんだという手応えがありました。
00:08:31そこで、こうしたドキュメントを用意しました。その点を証明するために、これも私たちが課したもう一つの制約ですが、
00:08:37これが何なのか私にも分かりません。これらはPrefabのデータテーブルコンポーネントの
00:08:42ドキュメントです。私たちが提供しているコンポーネントは130か140ほどあり、それらを組み合わせて任意のフォームを
00:08:47作成できます。Prefabのドキュメントは100% Prefabでレンダリングされています。そのため、ここにある基本使用方法の
00:08:55データテーブルはPrefabでライブレンダリングされています。画面の下部から忍び込んでいるのが見える
00:09:01Pythonコードは、それを生成するためにレンダラーによってライブでレンダリングされています。
00:09:05必要であれば、Prefabのドキュメントにあるどの例でも、リンクをクリックしてプレイグラウンドに
00:09:09ジャンプし、Pythonコードをライブで編集すれば、UIが更新されるのを確認できます。繰り返しになりますが、
00:09:15これは非常に奇妙なことです。少し居心地が悪く感じられても、それは仕方のないことです。
00:09:20問題を限定し、UIを構築するのではなく構成しているのだと思い出せば、納得がいくはずです。
00:09:24それでは、冒頭でお話ししたMCPサーバー、そしてより具体的にはMCPアプリの話に戻ります。
00:09:29Prefabは、どのようなフロントエンドの課題に対しても自由にご利用いただけます。
00:09:34私のチームでは、小規模なインタラクティブデータアプリや探索用のツールとして使い始めています。
00:09:39これを使ってプレゼンテーション資料も作成しています。ダークモードのテーマも標準搭載されており、
00:09:43今お見せしているようなスライドやプレゼン資料を直感的に作ることができます。
00:09:48しかし、私たちがこれを作った本来の目的、そして満たすべきユースケースはMCPサーバーです。
00:09:54そこで、MCPサーバーでPrefabを活用する3つの方法について、順を追ってご紹介します。
00:09:581つ目は、インタラクティブなツールの構築です。冒頭でお見せしたように、
00:10:04通常のMCPツールは、エージェントが呼び出して結果を受け取るだけで、ユーザーが直接操作することはできません。
00:10:09では、このインタラクティブな機能を拡張する最も簡単な方法とは何でしょうか？
00:10:14こちらをご覧ください。これはFastMCPのツールで、ご覧の通りツールデコレータが付与されています。
00:10:20情報を返すだけのシンプルなPython関数です。ただし、この情報はユーザーではなく
00:10:24エージェントに渡されます。これをPrefabで完全にインタラクティブなツールにするには、
00:10:30変更は1つだけです。エージェントに渡るPythonの辞書を返す代わりに、
00:10:36Prefabコンポーネントを返します。ここではデータテーブルを使用します。先ほどドキュメントをお見せしたものです。
00:10:40このPrefabコンポーネントを返すと、FastMCPが自動的にそれを検出し、
00:10:46MCPアプリを返したいのだと自動的に推論します。そして、HTML、JavaScript、
00:10:51CSS、レンダラーなど、ユーザーにデータテーブルを表示するために必要なすべての仕組みを自動で構築します。
00:10:55実際にどのように見えるか見てみましょう。これは優れたクライアントであるGooseを使用しています。
00:11:00先ほどお見せした関数を持つサーバーに「チームディレクトリを表示して」と頼むと、
00:11:06GIF画像の方が分かりやすかったかもしれませんが、申し訳ありません。表示されるのは、
00:11:10検索、フィルタリング、ソート、ページネーションなどを完全にサポートしたインタラクティブなデータテーブルコンポーネントです。
00:11:16やるべきことは先ほどお見せした通り、データテーブルクラスを返すだけで、残りはすべて自動的に処理されます。
00:11:21さらに一歩進めてみましょう。データテーブルに加えて、
00:11:26チームの内訳を示す円グラフをデータテーブルのすぐ隣に表示したい場合はどうでしょうか？
00:11:30ご想像のとおり、コードは非常に、非常に、非常に似ています。データテーブル単体ではなく、
00:11:35グリッドと円グラフをインポートします。下のコードを見るとわかるように、
00:11:40コンテキストマネージャーを使って円グラフとデータテーブルの両方をグリッドに非常に自然に配置しています。結果がこちらです。
00:11:45データテーブルの隣に円グラフが表示されました。これは、私たちがPrefabの多くのソフトウェアで
00:11:51大切にしている原則、「1行のコードで、大きな目に見える変更を」に沿ったものです。
00:11:55複雑性が段階的に増すように心がけており、これによりフレームワークやDSLにおいて
00:11:59本当に重要だと私たちが考える多くの要件を満たしています。詳細に立ち入る時間がないため簡単に説明しますが、
00:12:05これは私が適当にまとめて録画した、完全なクライアントサイドのインタラクティビティの例です。
00:12:09すべてのコントロールが連動し、値やテキストがリアルタイムで更新されていきますが、
00:12:15JavaScriptは一切書いていません。同じ属性が割り当てられたいくつかのクラスを組み合わせるだけで、
00:12:19すべてが自動的に連携して動作します。
00:12:24ああ、その仕組みがわかる簡単なコード例も載せておきました。Rxというクラスがあります。
00:12:28ご想像のとおり、リアクティブ（Reactive）の略です。このリアクティブ変数を使用すると、
00:12:33コード内のどこからでも参照でき、フォーマットしたり、何らかの名称に指定したりするだけで、
00:12:38適切なJavaScriptの実装に自動的にコンパイルされます。2つ目にできることは、
00:12:43FastMCPアプリです。インタラクティブツールがUIを1回表示してクライアントで操作するタイプだとすれば、
00:12:49FastMCPアプリはバックエンドを持つ完全なアプリケーションであり、この場合、
00:12:54MCPサーバーがバックエンドとして機能します。このセッションで完全に動作する例をすべて紹介する時間はありませんが、
00:12:59使い勝手の雰囲気をつかんでいただくためにコード例をお見せします。
00:13:03FastMCPアプリとなるクラスを記述し、少なくとも
00:13:08少なくとも2つの関数をapp.uiでデコレートします。これが、そのアプリケーションのベースUIを形成する
00:13:14プレハブコンポーネントを返すエントリーポイントになり、さらに少なくとも1つ（これはオプションなので0個以上ですが）
00:13:20app.toolsを指定します。これらは基本的に、UI内から参照できるバックエンドメソッドです。
00:13:27例えば、ユーザーがフォームに入力したデータを受け取り、このようなデコレートされたツールを使って
00:13:31データベースに送信するボタンを作成できます。現在、私たちが使用し、FastMCPの組み込みコンポーネントとして
00:13:38提供している機能の1つが、アップロードコンポーネントです。ご存じのとおり、エージェントだけがMCPサーバーにアクセスできるため、
00:13:46ファイルをMCPサーバーに直接アップロードすることはできません。必ずエージェントの頭脳を経由する必要があり、
00:13:51その結果どうなるかというと、多くの人がMCPサーバー上にアップロードツールを作ったものの、
00:13:56エージェントが実際にそれを呼び出さなければならないことを忘れ、その結果として世界で最も
00:14:00コストの高いコピペ作業を行ってしまうのです。エージェントに1メガバイトのテキストを渡し、エージェントがそれを文字通り
00:14:061文字ずつMCPに入力し直すことで、確かにアップロードは完了しますが、非常に、非常に非効率です。
00:14:12これはMCPアプリの非常に優れたユースケースです。エージェントにアプリのインターフェースを起動させ、
00:14:18そこにファイルをドラッグ＆ドロップすると、ファイルはエージェントをバイパスして直接サーバーに送られます。
00:14:23私たちはこれを他のいくつかの便利なツールと共に、このように1行のコードで実現できるようにしました。
00:14:30これはGIFですか？GIFではないですね。もしGIFだとしてもレンダリングされていませんが、クライアント上では
00:14:34このように表示されます。MCPアプリをサポートするクライアントであれば、エージェントに何かをアップロードしたいと頼むだけで
00:14:38これを表示でき、安全に、そして何より安価にアップロードできます。あ、GIFありましたね。失礼しました。
00:14:45「自分のスライドを把握しておけ」というのがこの講演の教訓ですね。ご覧のとおり、エージェントが今まさに
00:14:50ドラッグ＆ドロップでアップロードしたファイルとやり取りしています。このスライドは後ほど公開しますので、
00:14:55ご覧になりたい方はどうぞ。もちろん1行のコードなので、今日の午後にもご自身のサーバーで試していただけます。
00:15:00最後にお話ししたいのは、このアーキテクチャによって可能になる、
00:15:04完全に生成されたUIについてです。私が話している間、ここはスキップして映像を流しておきます。これは非常に
00:15:10シンプルなデモで、私はClaudeに「ねえ、この件について講演をするんだ。思い付く限り最高に面白いUIを
00:15:15ストリーミング形式で生成してくれ」と頼みました。すると、そのまま実行してくれました。ここで何をしているかというと、
00:15:21Prefabの基盤となっているUIのプロトコルシリアライズであるJSONを受け入れるツールを公開しました。
00:15:29そのため、エージェントがその情報をネットワーク経由でストリーミング送信するにつれて、私たちはリアルタイムで
00:15:35取得したデータをレンダリングし、JSONを修復しながら描画していきます。これは本当にクールなデモで、非常に効果的でした。
00:15:39自分でUIを定義する必要さえないため、人々はこのアプローチを気に入っています。あなたがすべきことは、
00:15:43私たちがすでに提供しているスキルを使い、UIの書き方をエージェントが理解できるように共有するだけで、あとは自動で実行されます。
00:15:48望むものを何でも作ってくれます。クライアントによっては、これの組み込み版を持っているところもあります。もし組み込み版が
00:15:52あるなら、もちろんそちらを使っても構いません。しかし、これはあなた自身のカスタムアプローチや、
00:15:56自分にとって便利な限定的なコンポーネントセットを構築するための手段となり得ます。さて、これを立ち上げたときに
00:16:01非常に興味深いことが起こりました。先ほどお話ししたように、もともとの計画では、エージェントがネットワーク経由で
00:16:07JSONを送信し、それをフルReactアプリケーションとしてレンダリングするというものでした。しかし、私たちが発見したのが、
00:16:13UIのPython表現は、JSON表現よりもサイズが約70%小さいということでした。
00:16:20そのため、現在はこの方法は取っていません。ストリーミングJSONを使ったこのデモを記録した当時から変わり、現在私たちがしているのは、
00:16:26実際にPythonコードをネットワーク経由でストリーミングすることです。それはサンドボックス内で実行され、
00:16:32サーバー上でJSONに変換されてからレンダリングされます。これにより、トークンの効率コストとレイテンシにおいて劇的な改善が得られました。
00:16:39このデモを記録したときと全く同じように動作しますが、これは私たちが試行錯誤の中で学んだことの一つにすぎません。
00:16:43そして、Pythonの表現形式が、完全なJSON形式に比べてこれほどまでにコンパクトで扱いやすいというのは本当に驚きです。
00:16:49これがPrefabです。ぜひチェックしてみてください。興味のある方や、
00:16:55私や他の多くの人々がこれまでに作った中で最も奇妙なものを見てみたい方は、
00:17:00prefab.prefect.ioでドキュメントをご覧ください。こちらの私たちのGitHubにある完全なライブラリを見ることもできます。
00:17:06これはすでにFastMCPに完全に組み込まれています。そのため、FastMCPの最近のバージョンを使用していれば、
00:17:11このオプショナルエディションをインストールし、コンポーネントをインポートして返し、MCPアプリを試すことができるはずです。
00:17:17皆様、ご来場ありがとうございました。
커뮤니티 글
아직 글이 없습니다. 이 영상에 대한 첫 번째 글을 작성해 보세요!
이 영상에 대해 글쓰기