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 데모

채팅 기록이 없는 개인 금융 어시스턴트입니다. 앱을 실행하면 질문 하나를 하고, 렌더링된 답변을 홈 화면으로 사용합니다. 이후 질문은 각각 목적에 맞게 설계된 화면에서 열립니다. 하나의 MCP App 정의로 동일한 어시스턴트를 iOS와 Android에서 네이티브로 실행합니다.

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

iOS 앱에서 실행 중인 Finance 데모.

Metabind란

Metabind는 채팅 창이 아니라 제품 자체의 UI에서 답변하는 에이전트를 만듭니다. 고객이 원하는 곳으로 바로 안내하는 인터랙티브 인터페이스를, 고객이 이미 알고 있는 브랜드로 제공합니다. 앱에 이미 있는 UI, 디자인 시스템, API를 기반으로 만들어집니다. 다시 작성할 필요가 없습니다. 승인한 컴포넌트만 렌더링하도록 모든 렌더링에 적용되는 정책으로 관리됩니다. 호스팅도 제공합니다. 도구는 여러분이 정의하고, 서버는 저희가 실행합니다. 동일한 에이전트가 자체 iOS, Android, 웹 앱은 물론 Claude, ChatGPT 및 모든 MCP 호스트에서 개방형 MCP 표준을 통해 실행됩니다.

이 데모에서는 Assistant SDK를 통해 실제 네이티브 SwiftUI와 Jetpack Compose로 렌더링되는, 자체 앱 내부에서 실행되는 에이전트를 보여줍니다.

metabind.ai에서 무료로 시작하기 · 문서 읽기

이 데모 소개

Finance는 의도적으로 대화 기록을 표시하지 않는 어시스턴트입니다. 앱을 실행하면 *"이번 달에 내 돈은 어디로 갔지?"*라는 질문 하나를 하고, 렌더링된 MCP 결과가 홈 화면이 됩니다. 이후 질문은 하단의 알약 모양 메뉴에서 선택해 시트로 엽니다. 각 대화 차례는 메시지 목록에 이어 붙이는 대신 목적에 맞게 설계된 화면으로 연결됩니다.

대화 자체가 제품인 Retail 데모와는 정반대의 형태입니다. SDK는 같고 형태는 두 가지입니다. 어떤 형태가 제품에 적합한지 결정하기 전에 두 데모를 모두 살펴보세요.

이 README를 처음부터 끝까지 따라 하면 다음을 사용할 수 있습니다.

  • 합성 데이터를 기반으로 BindJS 컴포넌트로 구현한 지출 내역 분석, 거래 목록, 구독, 순자산 추세가 포함된 Finance MCP 프로젝트. 이 프로젝트는 여러분의 Metabind 조직에 설치됩니다.
  • 해당 프로젝트에 연결해 실행되는 iOS 앱.
  • 동일한 프로젝트에 연결해 실행되는 Android 앱.

모든 금융 데이터는 합성 데이터입니다. 실제 은행에 연결하거나, 비밀 정보를 읽거나, 외부 호스트를 호출하지 않습니다.

이 폴더의 구성

디렉터리내용
apple/MetabindAI의 iOS 앱 (MetabindAssistant), 릴리스 태그로 SDK 버전 고정
android/metabindai-android의 Android 앱 (MetabindAssistant), 버전 카탈로그에서 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"
    

    값은 생성 시 한 번만 표시되므로 지금 복사하세요. 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_ACTOR / GITHUB_TOKEN) 또는 ~/.gradle/gradle.properties에 GitHub Packages용 Gradle 인증 정보를 설정합니다.

    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/는 시작 템플릿으로 복사해 사용하도록 만들어졌으므로 각각 자체 사본을 포함합니다.