Banking Assistant (Metabind demo)

resmi

Demo aplikasi MCP interaktif yang dibangun di atas Metabind: jawaban keuangan pribadi dirender sebagai kartu UI (kekayaan bersih, pengeluaran, langganan) di Claude dan ChatGPT, serta secara native di aplikasi iOS/Android.

Apa yang bisa Anda lakukan dengan Banking Assistant (Metabind Demo) MCP?

  • Rincian pengeluaran — Tanyakan "Ke mana perginya uang saya bulan ini?" dan dapatkan rincian yang ditampilkan sebagai layar beranda, bukan balasan chat.
  • Daftar transaksi — Buka tampilan khusus yang mencantumkan transaksi dari umpan sintetis demo.
  • Tampilan langganan — Lihat langganan berulang di tampilan tersendiri, bukan dengan menggulir transkrip.
  • Tren kekayaan bersih — Lihat komponen tren kekayaan bersih yang ditampilkan dari data sintetis.
  • Pertanyaan lanjutan — Ketuk pertanyaan lanjutan yang disarankan atau "Tanyakan apa saja" untuk membuka jawaban berikutnya dalam lembar.

Server MCP Terhosting

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

Terpasang ke Claude Code, Codex, Cursor, dan lainnya

Dokumentasi

Demo Metabind Finance

Asisten keuangan pribadi tanpa transkrip obrolan. Saat diluncurkan, aplikasi mengajukan satu pertanyaan dan menggunakan jawaban yang dirender sebagai layar beranda; setiap pertanyaan lanjutan membuka tampilan yang dirancang khusus. Asisten yang sama berjalan secara native di iOS dan Android dari satu definisi MCP App.

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

Demo Finance yang berjalan di aplikasi iOS.

Apa itu Metabind

Metabind membangun agen yang menjawab di UI produk Anda sendiri, bukan di jendela obrolan: antarmuka interaktif yang langsung mengarahkan pelanggan ke hal yang mereka cari, dengan merek yang sudah mereka kenal. Agen ini dibangun dari UI, sistem desain, dan API yang sudah dimiliki aplikasi. Tidak perlu menulis ulang. Agen ini diatur dengan hanya merender komponen yang telah Anda setujui, dan aturan tersebut diterapkan pada setiap render. Agen ini juga dihosting: Anda menentukan alatnya, kami menjalankan servernya. Agen yang sama berjalan di dalam aplikasi iOS, Android, dan web Anda sendiri, serta di Claude, ChatGPT, dan setiap host MCP, berdasarkan standar terbuka MCP.

Demo ini menunjukkan sisi yang berjalan di dalam aplikasi Anda sendiri, dirender sebagai SwiftUI dan Jetpack Compose native sungguhan melalui Assistant SDK.

Mulai gratis di metabind.ai · Baca dokumentasi

Tentang demo ini

Finance adalah asisten yang sengaja dibuat tanpa transkrip. Saat diluncurkan, asisten mengajukan satu pertanyaan — "Ke mana perginya uang saya bulan ini?" — dan hasil MCP yang dirender menjadi layar beranda. Pertanyaan berikutnya berasal dari deretan pil di bagian bawah dan terbuka dalam sheet. Setiap giliran diarahkan ke tampilan yang dirancang khusus, bukan ditambahkan dengan menggulir daftar pesan.

Bentuknya berlawanan dengan demo Retail, yang menjadikan percakapan itu sendiri sebagai produk. SDK-nya sama, bentuknya berbeda — baca keduanya sebelum memutuskan mana yang cocok untuk produk Anda.

Dengan mengikuti README ini dari awal hingga akhir, Anda akan mendapatkan:

  • Proyek MCP Finance — perincian pengeluaran, daftar transaksi, langganan, dan tren kekayaan bersih sebagai komponen BindJS di atas data sintetis — terpasang sebagai proyek di organisasi Metabind Anda sendiri.
  • Aplikasi iOS yang berjalan dengan proyek tersebut.
  • Aplikasi Android yang berjalan dengan proyek yang sama.

Semua data keuangan bersifat sintetis. Tidak ada bagian di sini yang terhubung ke bank sungguhan, membaca rahasia, atau memanggil host eksternal.

Isi folder ini

DirektoriIsi
apple/Aplikasi iOS di MetabindAI (MetabindAssistant), SDK dipatok ke tag rilis
android/Aplikasi Android di metabindai-android (MetabindAssistant), SDK dipatok di katalog versi
mcp/Proyek MCP Finance: komponen BindJS, alat, dan umpan sintetis

Sebelum memulai

  • Akun dan organisasi Metabind — daftar di metabind.ai/signup.

  • CLI metabind, versi 0.9.0 atau lebih baru:

    brew install metabindai/tap/metabind
    metabind --version
    
  • Kunci API penyedia LLM (Anthropic, OpenAI, atau Google). Proxy Metabind Agent menyimpan kunci tersebut di sisi server dan menjalankan percakapan dengannya — aplikasi tidak pernah menyertakan kunci penyedia.

  • Untuk iOS: Xcode 26+ (aplikasi menargetkan iOS 17+).

  • Untuk Android: Android Studio, JDK 17+, dan kredensial GitHub Packages — GitHub mewajibkan autentikasi bahkan untuk membaca paket publik.

Bagian 1 — pasang proyek MCP

Jalankan perintah berikut dari direktori ini (finance/).

  1. Daftar di metabind.ai jika Anda belum melakukannya — ini akan membuat akun dan organisasi Anda. Lalu masuk ke CLI dan pilih organisasi tempat Anda ingin memasang proyek:

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

    use --clear penting jika Anda pernah menggunakan CLI sebelumnya. install pada langkah 3 hanya membuat proyek jika belum ada proyek yang terikat, dan akan memasang proyek ke proyek yang sudah terikat jika ada — misalnya, setelah demo Retail. Menetapkan organisasi saja tidak akan merilis proyek yang sebelumnya sudah terikat; metabind status menampilkan cakupan aktif.

  2. Periksa deklarasi di pohon sebelum membuat apa pun:

    metabind inspect --dir mcp
    

    Finance tidak mendeklarasikan rahasia maupun panggilan keluar — inspect adalah cara untuk memastikannya langsung dari pohon.

  3. Pasang:

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

    install membuat ID baru untuk semua yang dibuatnya, mencatat asal pohon, dan hanya membuat draf — tidak ada yang melayani trafik sampai Anda memublikasikannya. Salin ID proyek yang ditampilkan.

  4. Atur cakupan CLI ke proyek baru dan tetapkan kunci LLM agen:

    metabind use --project <project-id>
    echo $ANTHROPIC_API_KEY | metabind agent set --provider anthropic --api-key-stdin
    
  5. Publikasikan:

    metabind publish
    
  6. Buat kunci API yang digunakan aplikasi untuk masuk:

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

    Salin nilainya sekarang — nilai tersebut hanya ditampilkan sekali, saat dibuat. Satu kunci API Metabind mengautentikasi proxy Agent dan server MCP.

  7. Secara opsional, terapkan pengaturan proyek dan gambar mini. install membuat komponen dan alat; pengaturan di mcp/metabind.jsonc — instruksi MCP dan prompt sistem agen — diterapkan oleh 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 menulis ulang draf alat, jadi publikasikan sekali lagi untuk merilisnya.

    project get bukan sekadar hiasan. project update menolak menulis entitas yang belum dibaca CLI baru-baru ini, agar CLI dapat memastikan proyek belum berubah tanpa sepengetahuan Anda:

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

    Proyek yang baru saja Anda pasang belum pernah dibaca, jadi pembaruan pertama akan gagal tanpa langkah ini.

    Tetapkan thumbnailUrl setelah melakukan push, bukan sebelumnya: project update mengganti objek pengaturan bertingkat alih-alih menggabungkannya, jadi menulis settings.mcp di sini akan menghapus instruksi yang baru saja diterapkan oleh push.

[!NOTE] Konfigurasikan klien dengan ID organisasi dan proyek yang ditampilkan oleh install — ID internal yang stabil, bukan slug organisasi.

Bagian 2 — jalankan aplikasi iOS

  1. Buat konfigurasi lokal yang diabaikan Git dari templatnya:

    cd apple
    cp Config/Local.xcconfig.example Config/Local.xcconfig
    
  2. Isi dengan ID dari Bagian 1:

    FINANCE_DEMO_ORG_ID = your_stable_internal_org_id
    FINANCE_DEMO_PROJECT_ID = your_project_id
    

    Biarkan FINANCE_DEMO_API_KEY kosong — Anda akan memasukkan kunci saat pertama kali meluncurkan aplikasi. FINANCE_DEMO_BUNDLE_ID dan DEVELOPMENT_TEAM hanya diperlukan untuk build perangkat yang ditandatangani.

  3. Buka proyek dan jalankan (⌘R) di simulator iOS 17+:

    open MetabindFinanceDemo.xcodeproj
    
  4. Masukkan kunci API Metabind Anda di layar peluncuran, lalu ketuk Start. Layar beranda dimuat dengan mengajukan pertanyaan "Ke mana perginya uang saya bulan ini?". Ketuk pertanyaan lanjutan yang disarankan atau Ask anything untuk membuka jawaban berikutnya dalam sheet.

Untuk penandatanganan, Xcode Cloud, TestFlight, dan cara kerja integrasinya, lihat README aplikasi iOS.

Bagian 3 — jalankan aplikasi Android

  1. Berikan kredensial GitHub Packages kepada Gradle, baik melalui variabel lingkungan (GITHUB_ACTOR / GITHUB_TOKEN) maupun di ~/.gradle/gradle.properties:

    gpr.user=your-github-username
    gpr.key=your-github-token
    
  2. Buat konfigurasi lokal yang diabaikan Git dari templatnya, lalu isi dengan ID yang sama dari Bagian 1:

    cd android
    cp local.properties.example local.properties
    
  3. Build, instal, dan luncurkan di perangkat atau emulator (API 26+, dengan WebView JavaScript Sandbox tersedia — BindJS menjalankan kode komponen di androidx.javascriptengine):

    ./gradlew :app:installDebug
    adb shell am start -n ai.metabind.finance.demo/.MainActivity
    
  4. Masukkan kunci API Metabind Anda dan ketuk Start — alur peluncuran pertama sama seperti di iOS.

Untuk arsitektur Compose dan perbedaan yang disengaja dari aplikasi iOS, lihat README aplikasi Android.

Langkah selanjutnya

Lisensi

Apache 2.0. Lihat LICENSE dan NOTICE di root repositori; apple/, android/, dan mcp/ menyertakan salinannya sendiri karena memang dimaksudkan untuk disalin sebagai starter.