Banking Assistant (Metabind demo)

公式

Metabind上に構築されたインタラクティブなMCPアプリデモ:個人財務の回答がUIカード(純資産、支出、サブスクリプション)としてClaudeとChatGPT、およびiOS/Androidアプリでネイティブに表示されます。

Banking Assistant (Metabind Demo) MCPで何ができますか?

  • 支出の内訳 — 「今月のお金はどこに消えた?」と尋ねると、チャットの返信ではなく、ホーム画面に内訳が表示されます。
  • 取引一覧 — デモ用の合成データフィードから取引を一覧表示する専用画面を開きます。
  • サブスクリプション画面 — 会話履歴をスクロールする代わりに、専用画面で定期購入を確認できます。
  • 純資産の推移 — 合成データから描画された純資産の推移を確認できます。
  • 追加の質問 — 提案された追加質問、または「何でも質問」をタップすると、次の回答がシートで開きます。

ホスト型 MCP サーバー

npx add-mcp 'https://mcp.metabind.ai/IgJH0BzIn4LlfnCbcDc7/projects/GLbHk5i3GLlIYcF63XFl'

Claude Code、Codex、Cursor などにインストールできます

ドキュメント

Metabind Finance デモ

チャットの会話履歴がない、個人向けファイナンスアシスタントです。アプリの起動時に質問を1つ尋ね、レンダリングされた回答をホーム画面として表示します。以降の質問はそれぞれ、専用に設計された画面で開きます。同じアシスタントが、1つの MCP App 定義から iOS と Android でネイティブに動作します。

https://github.com/user-attachments/assets/9a840b88-dc88-4ab4-927e-0a8dc651dbe3

iOS アプリで実行中の Finance デモ。

Metabind とは

Metabind は、チャット画面ではなく、あなたのプロダクト独自の UI で回答するエージェントを構築します。顧客を、すでに知っているブランドの中で、求めていたものへ直接導くインタラクティブなインターフェースです。アプリにすでにある UI、デザインシステム、API を使って構築します。作り直しは不要です。ガバナンスが適用され、承認済みのコンポーネントだけをレンダリングし、その制約はすべてのレンダリングで徹底されます。さらにホスト型です。ツールを定義すれば、サーバーの実行は私たちが担います。同じエージェントが、あなた自身の iOS、Android、Web アプリ内で動作し、オープンな MCP 標準を通じて Claude、ChatGPT、あらゆる MCP ホストでも動作します。

このデモでは、Assistant SDK を通じて実際のネイティブな SwiftUI と Jetpack Compose としてレンダリングされる、アプリ内での利用方法を紹介します。

metabind.ai で無料で始める · ドキュメントを読む

このデモについて

Finance は、意図的に会話履歴をなくしたアシスタントです。起動時に 「今月、お金はどこに消えた?」 と質問し、レンダリングされた MCP の結果がホーム画面になります。その後の質問は画面下部のピル型メニューから選び、シートで開きます。各ターンはメッセージ一覧に追加されるのではなく、専用に設計された画面に振り分けられます。

会話そのものがプロダクトであるRetail デモとは正反対の構成です。同じ SDK で2つの構成を実現しています。どちらが自分のプロダクトに合うか判断する前に、両方を確認してください。

この README を最初から最後まで進めると、次のものが手に入ります。

  • 合成データを使った BindJS コンポーネントとして、支出の内訳、取引一覧、サブスクリプション、純資産の推移を提供する Finance MCP プロジェクト。自分の Metabind 組織にプロジェクトとしてインストールされます。
  • そのプロジェクトに接続して動作する iOS アプリ。
  • 同じプロジェクトに接続して動作する Android アプリ。

金融データはすべて合成データです。ここにあるものが実際の銀行に接続したり、秘密情報を読み取ったり、外部ホストを呼び出したりすることはありません。

このフォルダーの内容

ディレクトリ内容
apple/MetabindAI (MetabindAssistant) 上で動作する iOS アプリ。SDK はリリースタグで固定
android/metabindai-android (MetabindAssistant) 上で動作する Android アプリ。SDK はバージョンカタログで固定
mcp/Finance MCP プロジェクト:BindJS コンポーネント、ツール、合成データフィード

始める前に

  • Metabind アカウントと組織。metabind.ai/signup から登録してください。

  • metabind CLI、バージョン 0.9.0 以降:

    brew install metabindai/tap/metabind
    metabind --version
    
  • LLM プロバイダーの API キー(Anthropic、OpenAI、または Google)。Metabind Agent プロキシがサーバー側でキーを保持し、それを使って会話を実行します。アプリにプロバイダーのキーが含まれることはありません。

  • iOS の場合:Xcode 26 以降(アプリの対象は iOS 17 以降)。

  • Android の場合:Android Studio、JDK 17 以降、GitHub Packages の認証情報。公開パッケージの読み取りにも GitHub の認証が必要です。

パート 1 — MCP プロジェクトをインストールする

このディレクトリ(finance/)から次のコマンドを実行します。

  1. まだ登録していない場合は metabind.ai で登録してください。アカウントと組織が作成されます。その後、CLI にサインインし、インストール先の組織を選択します。

    metabind auth login
    metabind org list
    metabind use --clear
    metabind use --org <org-id>
    

    以前に CLI を使ったことがある場合は、use --clear が重要です。手順 3 の install は、プロジェクトがまだ紐付いていない場合にのみプロジェクトを作成し、すでに紐付いている場合はそのプロジェクトにインストールします。たとえば Retail デモの後は、既存のプロジェクトにインストールされます。組織を設定するだけでは、以前に紐付けたプロジェクトは解除されません。metabind status で現在のスコープを確認できます。

  2. 作成を始める前に、ツリーで宣言されている内容を確認します。

    metabind inspect --dir mcp
    

    Finance はシークレットも外部への呼び出しも宣言しません。inspect を使えば、ツリー自体からそれを確認できます。

  3. インストールします。

    metabind install --dir mcp --name "Banking Assistant" --yes
    

    install は作成するすべてのものに新しい ID を割り当て、ツリーの出所を記録し、ドラフトのみを作成します。公開するまではトラフィックを処理しません。表示されたプロジェクト ID をコピーしてください。

  4. CLI のスコープを新しいプロジェクトに設定し、エージェントの LLM キーを設定します。

    metabind use --project <project-id>
    echo $ANTHROPIC_API_KEY | metabind agent set --provider anthropic --api-key-stdin
    
  5. 公開します。

    metabind publish
    
  6. アプリのサインインに使う API キーを発行します。

    metabind api-key create --name "Banking Assistant"
    

    値は作成時に一度だけ表示されるため、今すぐコピーしてください。1つの Metabind API キーで Agent プロキシと MCP サーバーの両方を認証できます。

  7. 必要に応じて、プロジェクトの設定とサムネイルを適用します。install はコンポーネントとツールを作成します。MCP の指示とエージェントのシステムプロンプトを含む mcp/metabind.jsonc の設定は、push で適用します。

    metabind asset upload mcp/assets/files/project-thumbnail.png
    metabind sync repair --out mcp --org <org-id> --project <project-id>
    metabind push --out mcp
    metabind project get <project-id>
    metabind project update <project-id> \
      --data '{"settings":{"thumbnailUrl":"<url from asset upload>"}}'
    metabind publish
    

    push はツールのドラフトを書き換えるため、公開して再度リリースしてください。

    project get は単なる飾りではありません。project update は、CLI が最近読み取っていないエンティティへの書き込みを拒否します。これにより、プロジェクトがその間に変更されていないことを確認できます。

    CONFLICT: Refusing project update <project-id>: no recent read recorded.
    

    インストールしたばかりのプロジェクトはまだ一度も読み取られていないため、最初の更新ではこれを実行しないとエラーになります。

    thumbnailUrl はプッシュ後に設定してください。プッシュ前に設定してはいけません。project update はネストされた設定オブジェクトをマージせずに置き換えるため、ここで settings.mcp を書き込むと、push で適用した指示が失われます。

[!NOTE] クライアントには、install が表示した組織 ID とプロジェクト ID を設定してください。組織のスラッグではなく、安定した内部 ID を使います。

パート 2 — iOS アプリを実行する

  1. テンプレートから、Git で無視されるローカル設定ファイルを作成します。

    cd apple
    cp Config/Local.xcconfig.example Config/Local.xcconfig
    
  2. パート 1 で取得した ID を入力します。

    FINANCE_DEMO_ORG_ID = your_stable_internal_org_id
    FINANCE_DEMO_PROJECT_ID = your_project_id
    

    FINANCE_DEMO_API_KEY は空欄のままにしてください。キーは初回起動時に入力します。FINANCE_DEMO_BUNDLE_ID と DEVELOPMENT_TEAM は、署名済みデバイスビルドの場合にのみ必要です。

  3. プロジェクトを開き、iOS 17 以降のシミュレーターで実行します(⌘R)。

    open MetabindFinanceDemo.xcodeproj
    
  4. 起動画面で Metabind API キーを入力し、Start をタップします。ホーム画面は 「今月、お金はどこに消えた?」 と尋ねて表示されます。おすすめの追加質問、または Ask anything をタップすると、次の回答がシートで開きます。

署名、Xcode Cloud、TestFlight、統合の仕組みについては、iOS アプリの README を参照してください。

パート 3 — Android アプリを実行する

  1. GitHub Packages 用の Gradle 認証情報を、環境変数(GITHUB_ACTOR / GITHUB_TOKEN)または ~/.gradle/gradle.properties に設定します。

    gpr.user=your-github-username
    gpr.key=your-github-token
    
  2. テンプレートから、Git で無視されるローカル設定ファイルを作成し、パート 1 で取得した同じ ID を入力します。

    cd android
    cp local.properties.example local.properties
    
  3. デバイスまたはエミュレーター(API 26 以降、WebView JavaScript Sandbox が利用可能な環境)でビルド、インストール、起動します。BindJS は androidx.javascriptengine でコンポーネントコードを実行します。

    ./gradlew :app:installDebug
    adb shell am start -n ai.metabind.finance.demo/.MainActivity
    
  4. Metabind API キーを入力して Start をタップします。初回起動時の流れは iOS と同じです。

Compose のアーキテクチャと、iOS アプリとの意図的な違いについては、Android アプリの README を参照してください。

次に進むには

ライセンス

Apache 2.0。LICENSE と NOTICE はリポジトリのルートにあります。apple/、android/、mcp/ には、それぞれ独自のコピーが含まれています。これらはスターターとしてコピーして使うことを想定しているためです。