Banking Assistant (Metabind demo)
resmiDemo 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
| Direktori | Isi |
|---|---|
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/).
-
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 --clearpenting jika Anda pernah menggunakan CLI sebelumnya.installpada 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 statusmenampilkan cakupan aktif. -
Periksa deklarasi di pohon sebelum membuat apa pun:
metabind inspect --dir mcpFinance tidak mendeklarasikan rahasia maupun panggilan keluar —
inspectadalah cara untuk memastikannya langsung dari pohon. -
Pasang:
metabind install --dir mcp --name "Banking Assistant" --yesinstallmembuat 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. -
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 -
Publikasikan:
metabind publish -
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.
-
Secara opsional, terapkan pengaturan proyek dan gambar mini.
installmembuat komponen dan alat; pengaturan dimcp/metabind.jsonc— instruksi MCP dan prompt sistem agen — diterapkan olehpush: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 publishpushmenulis ulang draf alat, jadi publikasikan sekali lagi untuk merilisnya.project getbukan sekadar hiasan.project updatemenolak 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
thumbnailUrlsetelah melakukan push, bukan sebelumnya:project updatemengganti objek pengaturan bertingkat alih-alih menggabungkannya, jadi menulissettings.mcpdi sini akan menghapus instruksi yang baru saja diterapkan olehpush.
[!NOTE] Konfigurasikan klien dengan ID organisasi dan proyek yang ditampilkan oleh
install— ID internal yang stabil, bukan slug organisasi.
Bagian 2 — jalankan aplikasi iOS
-
Buat konfigurasi lokal yang diabaikan Git dari templatnya:
cd apple cp Config/Local.xcconfig.example Config/Local.xcconfig -
Isi dengan ID dari Bagian 1:
FINANCE_DEMO_ORG_ID = your_stable_internal_org_id FINANCE_DEMO_PROJECT_ID = your_project_idBiarkan
FINANCE_DEMO_API_KEYkosong — Anda akan memasukkan kunci saat pertama kali meluncurkan aplikasi.FINANCE_DEMO_BUNDLE_IDdanDEVELOPMENT_TEAMhanya diperlukan untuk build perangkat yang ditandatangani. -
Buka proyek dan jalankan (⌘R) di simulator iOS 17+:
open MetabindFinanceDemo.xcodeproj -
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
-
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 -
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 -
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 -
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
- Edit proyek MCP — ubah komponen, validasi, push, dan publikasikan — serta aturan
BEGIN SHARED FEEDyang memastikan angka di setiap kartu tetap selaras. - Demo Retail — SDK yang sama dengan bentuk yang berlawanan: transkrip adalah produknya.
- Metabind untuk Apple dan Metabind untuk Android — instalasi SDK dan referensi API.
- docs.metabind.ai — panduan lengkap.
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.