How to Integrate Next.js for retail banking with Vercel AI SDK for AI agents

Why this integration matters

If you’re building banking agents, the hard part is not chat. It’s orchestrating customer context, account data, and safe action execution across your web app and agent layer. Combining Next.js for retail banking with Vercel AI SDK gives you a clean path to expose banking workflows in the UI while letting AI agents reason over them with structured tool calls.

The pattern is simple: Next.js handles the customer-facing app and backend routes, while Vercel AI SDK drives agent reasoning, tool invocation, and streaming responses. That lets you build things like balance assistants, payment initiation flows, fraud triage copilots, and branch-support agents without stuffing business logic into the frontend.

Prerequisites

• •Python 3.11+
• •A Next.js retail banking app with API routes or route handlers exposed
• •A Vercel AI SDK-powered agent endpoint available in your stack
• •Bank sandbox credentials for:
  • •account lookup
  • •payment initiation
  • •transaction history
• •requests installed:

  pip install requests
  

• •Environment variables configured:
  • •NEXTJS_BANKING_BASE_URL
  • •VERCEL_AI_SDK_BASE_URL
  • •BANK_API_KEY
• •A test customer account in a non-production environment

Integration Steps

1) Expose banking actions from Next.js as stable HTTP endpoints

Your Next.js app should publish narrow endpoints for the exact operations your agent needs. Do not let the agent talk directly to internal services; keep Next.js as the contract boundary.

import os
import requests

BASE_URL = os.environ["NEXTJS_BANKING_BASE_URL"]
API_KEY = os.environ["BANK_API_KEY"]

def get_account_summary(customer_id: str) -> dict:
    url = f"{BASE_URL}/api/accounts/{customer_id}/summary"
    headers = {"Authorization": f"Bearer {API_KEY}"}
    response = requests.get(url, headers=headers, timeout=10)
    response.raise_for_status()
    return response.json()

summary = get_account_summary("cust_10021")
print(summary)

A typical Next.js route handler behind this might call your core banking service and return only safe fields like available balance, account status, and masked identifiers.

2) Wrap those endpoints as Vercel AI SDK tools

Vercel AI SDK works best when each banking capability is a tool with a clear schema. In Python, keep the tool adapter thin: validate inputs, call the Next.js endpoint, and return normalized JSON.

import os
import requests

NEXTJS_BASE = os.environ["NEXTJS_BANKING_BASE_URL"]
HEADERS = {"Authorization": f"Bearer {os.environ['BANK_API_KEY']}"}

def transfer_funds_tool(source_account: str, destination_account: str, amount: float, memo: str) -> dict:
    payload = {
        "sourceAccount": source_account,
        "destinationAccount": destination_account,
        "amount": amount,
        "memo": memo,
    }
    response = requests.post(
        f"{NEXTJS_BASE}/api/transfers",
        json=payload,
        headers=HEADERS,
        timeout=15,
    )
    response.raise_for_status()
    return response.json()

result = transfer_funds_tool("acct_001", "acct_889", 125.50, "Rent payment")
print(result)

This is where Vercel AI SDK’s tool-calling model fits well. The agent decides when to call transfer_funds_tool, but your code controls the request shape and transport.

3) Connect the agent to Next.js through a Vercel AI SDK route

On the agent side, use Vercel AI SDK’s streamText() flow to orchestrate tool usage. The Python service can call that endpoint and pass user intent plus banking context.

import os
import requests

AI_BASE = os.environ["VERCEL_AI_SDK_BASE_URL"]

def ask_banking_agent(message: str, customer_id: str) -> dict:
    payload = {
        "messages": [
            {"role": "system", "content": "You are a retail banking assistant. Use tools only when needed."},
            {"role": "user", "content": f"Customer {customer_id}: {message}"},
        ],
        "customerId": customer_id,
    }
    response = requests.post(
        f"{AI_BASE}/api/agent",
        json=payload,
        timeout=30,
    )
    response.raise_for_status()
    return response.json()

reply = ask_banking_agent("What is my checking balance?", "cust_10021")
print(reply)

In practice, your Vercel AI SDK route can expose a tool registry like getAccountSummary, listTransactions, and initiateTransfer, then stream back partial responses while it resolves each step.

4) Add guardrails before any money-moving action

For retail banking, don’t let an agent execute payments without explicit confirmation. Use a two-step pattern: propose first, execute second.

import uuid
import requests
import os

NEXTJS_BASE = os.environ["NEXTJS_BANKING_BASE_URL"]
HEADERS = {"Authorization": f"Bearer {os.environ['BANK_API_KEY']}"}

def create_transfer_intent(customer_id: str, source_account: str, destination_account: str, amount: float) -> dict:
    payload = {
        "intentId": str(uuid.uuid4()),
        "customerId": customer_id,
        "sourceAccount": source_account,
        "destinationAccount": destination_account,
        "amount": amount,
        "status": "pending_confirmation",
    }
    r = requests.post(f"{NEXTJS_BASE}/api/transfer-intents", json=payload, headers=HEADERS, timeout=10)
    r.raise_for_status()
    return r.json()

intent = create_transfer_intent("cust_10021", "acct_001", "acct_889", 125.50)
print(intent)

Your Vercel AI SDK agent should present this as a draft action and wait for explicit confirmation before calling the final transfer endpoint.

5) Execute confirmed actions and persist audit metadata

Once confirmed, send the final action through Next.js and store audit details for compliance review. Keep trace IDs on every request so operations can reconstruct what happened.

import os
import requests

NEXTJS_BASE = os.environ["NEXTJS_BANKING_BASE_URL"]
HEADERS = {"Authorization": f"Bearer {os.environ['BANK_API_KEY']}"}

def confirm_transfer(intent_id: str) -> dict:
    payload = {"intentId": intent_id, "confirmedByCustomer": True}
    r = requests.post(
      f"{NEXTJS_BASE}/api/transfer-intents/{intent_id}/confirm",
      json=payload,
      headers=HEADERS,
      timeout=15,
    )
    r.raise_for_status()
    return r.json()

confirmation = confirm_transfer("intent_7f2c1d")
print(confirmation)

This gives you a production-safe flow:

• •agent suggests action
• •user confirms in Next.js UI
• •backend executes via approved route
• •audit trail is stored with intent ID and timestamp

Testing the Integration

Use a small smoke test that checks both account retrieval and agent orchestration.

def test_banking_agent_flow():
    summary = get_account_summary("cust_10021")
    assert "availableBalance" in summary

    reply = ask_banking_agent("Show my checking balance", "cust_10021")
    assert reply.get("message")

    print("OK:", summary["availableBalance"])
    print("Agent:", reply["message"])

test_banking_agent_flow()

Expected output:

OK: 2450.87
Agent: Your checking account available balance is $2,450.87.

If you also test transfers in sandbox mode, expect an intent object first:

{"intentId":"intent_7f2c1d","status":"pending_confirmation"}

Real-World Use Cases

• •

  Balance and transaction assistant

  • •Customers ask natural-language questions.
  • •The agent calls Next.js endpoints for balances and recent activity.
  • •Vercel AI SDK streams back concise answers with account-safe formatting.
• •

  Payment initiation copilot

  • •The agent drafts transfers or bill payments.
  • •Next.js renders confirmation screens.
  • •Final execution happens only after explicit user approval.
• •

  Fraud triage workflow

  • •The agent flags suspicious activity from transaction feeds.
  • •Next.js surfaces case details to support staff.
  • •The workflow routes high-risk cases into human review with full audit metadata.

Keep learning

• •The complete AI Agents Roadmap — my full 8-step breakdown
• •Free: The AI Agent Starter Kit — PDF checklist + starter code
• •Work with me — I build AI for banks and insurance companies

By Cyprian Aarons, AI Consultant at Topiax.