Assisting UIとMraでAIアプリを5分で開発！Twitter連携の実践ガイド

皆様、こんにちは。今回は、Assisting UIとMra（エムラ）という二つの強力なツールを組み合わせて、わずか5分でAIアプリケーションを構築する方法をご紹介します。特に、Twitter連携を例に、実際にどのようにAI駆動のアプリケーションを開発し、デプロイできるのかを詳細に解説します。

はじめに：Assisting UIとMraとは

Assisting UIは、AIチャットのUIコンポーネントやRadix UIコンポーネントを提供する開発者ツールです。これにより、AIアプリケーションのフロントエンド開発を大幅に加速できます。 Mraは、AIが外部ツールと連携するためのフレームワークであり、大規模言語モデル（LLM）と外部APIとの橋渡し役を担います。これにより、AIに特定のタスクを実行させるための「ツール」を簡単に定義・利用できるようになります。

本記事では、この二つのツールを活用し、AIがツイートを提案し、人間が承認してから投稿するという、いわゆる「Human-in-the-Loop」のTwitterボットを構築するプロセスを追体験します。

MraによるTwitter MCPサーバーの構築

まず、AIがTwitterと連携するためのバックエンド部分である「MCP（Master Cloud Platform）サーバー」をMraで構築します。これは、AIの指示に基づいて特定のタスクを実行する、いわばAIのアシスタントのような役割を果たすサーバーです。今回の例では、以下の二つの機能を持つMCPサーバーを構築しました。

`proposeTweet`機能

これは「Human Tool Call」と呼ばれる機能です。AIがツイートのメッセージ本文を生成しますが、その内容はすぐには投稿されません。代わりに、生成されたメッセージはユーザー（人間）に提示され、編集したり、あるいは即座に承認したりすることができます。

AIによるメッセージ生成: AIが現在の状況や指示に基づいて、最適なツイート内容を提案します。
人間の介入: ユーザーはAIの提案をレビューし、必要に応じて修正を加えます。
承認/却下: 内容が適切であれば承認し、Twitter APIへの投稿に進みます。不適切であれば却下することも可能です。

この機能により、AIの自動化による効率性と、人間の監視による品質管理や安全性確保を両立させることができます。

`sendTweet`機能

proposeTweetで人間によって承認されたツイート内容を、実際にTwitter APIを通じて投稿するための機能です。この機能は、承認プロセスを経て初めて実行されるため、誤った情報や不適切な内容が公開されることを防ぎます。

今回構築したMCPサーバーは、「master cloud」にデプロイされており、すぐに利用できる状態となっています。

Tool UIでのHuman-in-the-Loopインターフェース生成

MCPサーバーは用意できましたが、人間がAIの提案を確認・承認するためのインターフェース（UI）が必要です。ここで登場するのがtool-ui.comです。このサイトは、AIツールのためのUIを自動生成するサービスです。

tool-ui.comにアクセス: ブラウザでtool-ui.comにアクセスします。
ビルダーの利用: サイト内の「Builder」機能を選択します。ここでは、UIの要件を記述することもできますが、今回は既にデプロイ済みのMCPサーバーがあるので、そのURLを入力します。
MCPサーバーへの接続: デプロイしたMCPサーバーのURLを入力し、接続します。これにより、サーバーが提供するproposeTweetやsendTweetといったツール情報が読み込まれます。
UIの自動生成: 「Generate」ボタンをクリックすると、AI（Cloud 3.5/4.5とFreestyleのサンドボックス・コード実行環境を使用）がNext.jsサーバーを起動し、必要なファイルを生成して、MCPサーバーと連携するUIを自動的に構築します。
生成されたUIの確認: 数秒後、AIによって生成されたUIが表示されます。今回のケースでは、「投稿を編集」「保存」「承認」といった3つのボタンを持つシンプルなインターフェースが生成されました。これにより、AIが提案したツイート内容を確認し、必要に応じて編集・承認する一連の操作が可能になります。
コードのコピー: 生成されたUIのコードをコピーします。このコードは、後ほどAssisting UIアプリケーションに組み込みます。

Assisting UIでのフロントエンド構築

Tool UIで生成されたコードを使って、いよいよメインのフロントエンドアプリケーションをAssisting UIで構築します。

Assisting UIプロジェクトの作成: ターミナルを開き、以下のコマンドを実行して新しいAssisting UIプロジェクトを作成します。

npx assisting-ui create --template mcp my-app ``` * npx assisting-ui create: Assisting UIのプロジェクトを初期化するコマンドです。 * --template mcp: 今回はMCPサーバーと連携するため、mcpテンプレートを指定します。これにより、必要な設定が事前に行われた状態でプロジェクトが作成されます。 * my-app: 作成するアプリケーションの名前です。

このコマンドを実行すると、必要なパッケージがインストールされます。

2. 生成されたコードの組み込み: プロジェクトのインストールが完了したら、my-appディレクトリに移動し、以下の手順でTool UIでコピーしたコードを組み込みます。

*   `components/tools`フォルダ内に`approve.tsx`という新しいファイルを作成します。
*   この`approve.tsx`ファイルに、Tool UIでコピーしたUIコードをペーストします。

3. Assisting UIアプリケーションへのインポート: Assisting UIのメインアプリケーションファイルで、作成したapprove.tsxコンポーネントをインポートし、利用できるように設定します。

開発サーバーの起動: プロジェクトのルートディレクトリで以下のコマンドを実行し、開発サーバーを起動します。

npm run dev ```

これで、Assisting UIとTool UIで生成されたコンポーネントが統合されたAIアプリケーションが、ローカル環境で動作するようになります。

AIアプリの実行と検証

開発サーバーが起動したら、実際にAIアプリケーションを使ってみましょう。

ツイートの提案: アプリケーションのインターフェースに、「TSON AIがいかに素晴らしいかについてツイートしてください」といった指示を入力します。
AIの提案と人間の編集: AIが指示に基づいてツイート内容を生成し、Tool UIで作成したインターフェースに表示されます。例えば、「#TSONAI #Awesome」のようなハッシュタグが付いている場合、人間が「ハッシュタグは好きではないので削除してください」といった形で編集指示を出したり、直接編集したりすることができます。
ツイートの投稿: 内容を確認し、問題なければ「Post（投稿）」ボタンをクリックします。すると、承認されたツイートがTwitter APIを通じて投稿されます。
Twitterでの確認: 実際にTwitterアカウントを確認すると、AIが提案し、人間が承認・編集したツイートが投稿されていることが確認できます。

この一連のプロセスは非常にスムーズで、AIの能力と人間の知見が融合することで、信頼性の高いアウトプットを生み出せることを示しています。

まとめ

本記事では、Assisting UIとMra、そしてtool-ui.comを組み合わせることで、わずか5分という驚異的な速さでAIアプリケーションを開発し、Twitter連携を実現する方法をご紹介しました。

このデモンストレーションは、AIアプリケーション開発がどれほど手軽になり、開発者がより本質的なロジックに集中できるようになったかを示しています。Assisting UIはAIチャットUIの提供、MraはAIと外部ツールの連携、tool-ui.comはHuman-in-the-Loopインターフェースの自動生成と、それぞれのツールが専門分野で最高の効率を提供します。

今回ご紹介したすべてのツールとリソースはオープンソースで公開されており、誰でも利用可能です。ぜひご自身のプロジェクトで試してみてください。

参考動画

AI App in 5 minutes with Assisting UI & Mra

ポイント