스크립트
00:00:00AIによって業界全体で巨大なパラダイムシフトが起きています。
00:00:04最近では、日常的な検索やリサーチにチャットボットを使うユーザーがますます増えています。
00:00:10だからこそ、MCPアプリという概念がますます人気を集めているのです。
00:00:14JSONファイルやマークダウン文書をただ出力する代わりに、
00:00:18より多くのアプリやサービスが、チャットボット内でインタラクティブで便利なウィジェットを提供する形に切り替えています。
00:00:24そしてAlpicという企業が最近、SkyBridgeというクールな新しいフレームワークをリリースしました。
00:00:29これは、あらゆるユースケースに対応する独自のカスタムMCPアプリを非常に簡単に作成できるようにしてくれるものです。
00:00:35今日の動画では、SkyBridgeを取り上げ、その仕組みを確認し、実際に試してみたいと思います。
00:00:41とても楽しい内容になるので、早速見ていきましょう。
00:00:47SkyBridgeがこれほど重要である理由を本当に理解するには、これらの新しいアプリがどのように機能するかを理解する必要があります。
00:00:53従来のウェブアプリを構築する場合、1人のユーザーである人間向けに構築しています。
00:00:58しかしMCPアプリでは、人間とAIアシスタントという2人のユーザーに向けて同時に構築することになります。
00:01:05両者がまったく同じインターフェースを共有しているからです。
00:01:08人間がボタンをクリックし、入力を打ち込み、スライダーを動かすと、LLMはその状態を即座に把握します。
00:01:15逆に、LLMがバックグラウンドでデータを更新することもできれば、
00:01:18目の前でリアルタイムにUIが変化します。
00:01:21そしてSkyBridgeは、複雑な配管作業や
00:01:26プロトコルブリッジング、状態の同期、セキュリティルールなどをすべて処理してくれる、
00:01:30オープンソースのTypeScriptフレームワークなので、標準的なReactコードを書くことに集中できます。
00:01:34さて、これまでChatGPTやClaude向けのMCPアプリを作ろうとしたことがある方なら、
00:01:39ローカルのテストループが非常な頭痛の種だったことをご存知でしょう。
00:01:43パブリックトンネルを手動でセットアップし、設定をコピー＆ペーストし、
00:01:47わずかなCSSのタイポを直すためだけにチャットセッションを再起動しなければなりませんでした。
00:01:52しかしSkyBridge 1.0の最もクールな点は、DevToolsのコントロールパネルが完全に再設計されたことです。
00:01:59現在、ローカルの開発サーバーを実行すると、ブラウザ上でエミュレーターダッシュボードが起動します。
00:02:04そしてこのダッシュボードの中には、3つの素晴らしいツールが用意されています。
00:02:081つ目はAlpik Playgroundです。
00:02:11これはライブホットモジュールリプレースメントを使用して、ツールをテストしReactウィジェットを微調整できるローカルのサンドボックスです。
00:02:17実際のLLMにまだ触れることなく、変更を即座に確認できます。
00:02:21そして2つ目は、統合されたトンネルです。
00:02:24文字通りワンクリックで、安全なパブリックURLを通じてローカルサーバーを公開できるようになります。
00:02:30そのため、外部のトンネリングツールで苦労する必要はもうありません。
00:02:33このURLをChatGPTの開発者設定に貼り付けるだけで、ライブ状態になります。
00:02:37そして3つ目はBeacon Auditツールです。
00:02:40これは、アプリをパブリックストアに申請する予定がある場合に非常に役立ちます。
00:02:44アプリのメタデータ、ツール、セキュリティポリシーをスキャンし、よくあるリジェクトの引き金を検出します。
00:02:49レビューにアプリを提出する前に検出してくれます。
00:02:52そして最もクールなのは、MCPアプリを作ったことがなくても、
00:02:56お気に入りのAIエージェントにSkyBridgeスキルを簡単にインストールしてすぐに始められることです。
00:03:02それでは、実際に小さなMCPアプリを自分で作ってみて、その仕組みを確認してみましょう。
00:03:07このデモのために、私は小さなEコマースウェブサイトを事前に作成しました。
00:03:11ここではさまざまなカメラレンズを購入できます。
00:03:14これは基本的に、カートとチェックアウト機能を備えた完全に構築されたReactベースのストアです。
00:03:19そして今度は、それにMCPアプリを追加したいと思います。
00:03:22もし見込み客がChatGPTやClaudeのようなチャットボットを使ってカメラレンズの推奨を検索した場合、
00:03:30即座に私たちのMCPアプリを呼び出して、エンドユーザーに製品リストを表示できるようにするためです。
00:03:36先ほども言ったように、始めるための最も簡単な方法はSkyBridgeスキルをインストールすることです。
00:03:42グローバルにインストールすることも、特定のレポジトリ専用にインストールすることもできます。
00:03:46このデモの目的では、レポジトリ内にインストールを進めます。
00:03:51これで、SkyBridgeスキルが存在する.agentsディレクトリができたことがわかります。
00:03:57今私にできることは、ClaudeにEコマースショップ用のMCPアプリを作るよう頼むだけです。
00:04:04構築する前に、Claudeはアプリの意図についていくつかフォローアップの質問をしてくれます。
00:04:09アプリにどのような機能を組み込む必要があるかをよりよく理解するためです。
00:04:13このデモでは、ユーザーが探しているものに基づいてレンズをリストアップするアプリにしたいと考えています。
00:04:18そしてそれらを選択して並べて比較し、カートに追加することもできます。
00:04:24そしてお客様向けにクイックチェックアウトソリューションを提供します。
00:04:28基本的にこれだけです。
00:04:29あとはClaudeに任せます。
00:04:32数分ほどで、Claudeが私たちのMCPアプリを生成してくれたのがわかります。
00:04:37そして最もクールな点は、SkyBridgeが提供する開発者ダッシュボードを開いて
00:04:41自分で実際に試せることです。
00:04:44ダッシュボードを開くと、どのように見えるかを確認できます。
00:04:47ここにはレンズ検索ツールと注文確定ツールがあります。
00:04:53まずレンズ検索では、探しているレンズの最高価格を入力します。
00:05:00そしてレンズは5個程度に制限してみましょう。
00:05:03これで完了です。
00:05:042,000ドル未満のものが14件ヒットしました。
00:05:09デスクトップでのアプリの見た目はこんな感じです。
00:05:12モバイル表示もプレビューできます。
00:05:14良さそうです。
00:05:15ダークモードとライトモードもあります。
00:05:18ここにはツールの出力と状態が表示されます。
00:05:23レンズをいくつか選択するとどうなるか見てみましょう。
00:05:26ご覧の通り、状態がその場でリアルタイムに更新されます。これは非常にクールです。
00:05:31では、レンズを3つ選んでみましょう。
00:05:34次に「比較」をクリックすると、比較画面に移動します。
00:05:40ここでは、3つのレンズをすべてのパラメータとともに並べて比較できます。
00:05:45この選択に満足したら、チェックアウトに進むこともできます。
00:05:49これによりチェックアウト画面に移行し、氏名、メールアドレス、配送先住所を入力して注文を確定できます。
00:05:59ご覧の通り、このダッシュボードはすべてが期待通りに動作するかウィジェットをテストするのに非常に便利です。
00:06:08そしてクラウドへ行き、設定の中にコネクタというセクションがあります。
00:06:16「カスタマイズ」をクリックする必要があります。
00:06:19そのためには、トンネルURLが必要です。
00:06:21そのため、トンネルが有効になっていることを確認してください。
00:06:24このURLをコピーするだけです。
00:06:26コネクタセクションで、カスタムコネクタを追加するだけです。
00:06:31名前を付けます。
00:06:33そしてそのトンネルURLを貼り付けます。
00:06:38「追加」をクリックします。
00:06:39私はすでにここに追加しています。
00:06:41最後にやるべきことは「接続」をクリックすることです。
00:06:45また、これらのツールを自動的に実行するか、ユーザーからの承認を求めるかどうかの権限を設定することもできます。
00:06:53その後、新しいチャットを開始します。
00:06:57新しいチャットで、「ポートレート撮影に最適な2,000ドル未満のレンズの推奨をいくつか教えてください」と尋ねることができます。
00:07:05すると、2,000ドル未満の優れたポートレート用オプションを探すために、レンズショップのカタログを検索すると表示されます。
00:07:12そして見てください。
00:07:14MCPアプリが開きました。
00:07:16なんと素晴らしいでしょう。
00:07:18ここでも同じことができます。
00:07:20ここでレンズをいくつか選択できます。
00:07:24そして比較セクションに移動します。
00:07:27小さな比較テーブルが表示されます。
00:07:32気づいた点といえば、ツールの前の状態による白い余白があることです。
00:07:40ですので、これはおそらくCSSで修正できる部分でしょう。
00:07:43しかし、すべて順調に見えます。
00:07:46チェックアウトのオプションもあります。
00:07:49チェックアウトセクションに移動し、注文を確定できます。
00:07:54いかがでしょうか、これは非常にクールです。
00:07:57そして最後に、最も重要なこととして、アプリがパブリックアプリストアに公開する準備ができているかどうかを確認するために、
00:08:02開発者ダッシュボードを通じてアプリの監査を実行し、問題がないか確認することもできます。
00:08:10基本的には、これで完了です。
00:08:11わずか数分で、SkyBridgeを使用して本番対応のMCPアプリを構築することができました。
00:08:16理論的にはAI App Storeに提出できるものです。
00:08:20これにより、SkyBridgeを使い始めるのがいかに簡単であるかがお分かりいただけたと思います。
00:08:25正直なところ、これは現代のウェブの未来のように感じられます。
00:08:28チャットボットの中に、このようなインタラクティブなMCPウィジェットアプリがますます増えていくと思います。
00:08:34ですから、私たち開発者にとってこうしたアプリの作成プロセスを非常に簡単にしてくれるSkyBridgeのようなフレームワークが存在するのは素晴らしいことです。
00:08:42ということで、皆さんいかがでしたでしょうか。
00:08:44これがSkyBridgeの概要です。
00:08:46さて、SkyBridgeについてどう思われますか？
00:08:47もう試してみましたか？
00:08:48これから使いますか？
00:08:49以下のコメント欄でお知らせください。
00:08:52皆さん、このような技術的解説がお好きなら、動画の下にある「いいね」ボタンを押して教えてください。
00:08:58また、チャンネル登録もお忘れなく。
00:09:01BetterStackのAndrusがお届けしました。次の動画でお会いしましょう。
00:09:16you