How to Integrate Next.js for retail banking with Vercel AI SDK for multi-agent systems

Next.js for retail banking gives you the front-end and orchestration layer for customer-facing banking flows. Vercel AI SDK gives you the agent runtime patterns to route tasks, call tools, and coordinate multiple agents without turning your app into a pile of ad hoc prompts.

The useful part is the combination: a customer starts in a Next.js banking experience, and your backend agent system can fan out across fraud checks, KYC review, product eligibility, and support summarization. That’s the pattern you want when one user request needs multiple specialized agents to work in sequence or in parallel.

Prerequisites

• •Python 3.11+
• •Node.js 18+ for the Next.js app
• •A Next.js retail banking app with API routes or server actions already set up
• •Vercel AI SDK installed in your agent service:
  • •pip install openai pydantic requests
• •Access to your banking backend APIs:
  • •account lookup
  • •transaction history
  • •customer profile
  • •case management
• •Environment variables configured:
  • •NEXT_PUBLIC_BANKING_APP_URL
  • •BANKING_API_BASE_URL
  • •BANKING_API_KEY
  • •OPENAI_API_KEY
• •A clear agent split:
  • •orchestrator agent
  • •fraud agent
  • •support agent
  • •compliance agent

Integration Steps

1) Expose a banking API from Next.js

Your Next.js app should expose stable endpoints that the agent layer can call. In retail banking, keep this behind auth middleware and never let agents touch raw browser state.

import requests

BASE_URL = "https://your-nextjs-banking-app.vercel.app"

def get_customer_profile(customer_id: str) -> dict:
    resp = requests.get(
        f"{BASE_URL}/api/customers/{customer_id}",
        headers={"Authorization": "Bearer YOUR_SERVICE_TOKEN"},
        timeout=10,
    )
    resp.raise_for_status()
    return resp.json()

profile = get_customer_profile("cust_12345")
print(profile["fullName"])

In practice, this endpoint is implemented in Next.js as an API route or server action. The Python side only needs a clean contract: customer ID in, JSON out.

2) Build a Vercel AI SDK tool wrapper around the banking API

Vercel AI SDK works best when your agents have explicit tools. Wrap each banking capability as a function with strict inputs and outputs.

from typing import Any
import requests

BANKING_API_BASE_URL = "https://your-nextjs-banking-app.vercel.app/api"
BANKING_API_KEY = "YOUR_SERVICE_TOKEN"

def fetch_transactions(customer_id: str, days: int = 30) -> dict[str, Any]:
    response = requests.get(
        f"{BANKING_API_BASE_URL}/transactions",
        params={"customerId": customer_id, "days": days},
        headers={"Authorization": f"Bearer {BANKING_API_KEY}"},
        timeout=15,
    )
    response.raise_for_status()
    return response.json()

def fetch_account_summary(customer_id: str) -> dict[str, Any]:
    response = requests.get(
        f"{BANKING_API_BASE_URL}/accounts/summary",
        params={"customerId": customer_id},
        headers={"Authorization": f"Bearer {BANKING_API_KEY}"},
        timeout=15,
    )
    response.raise_for_status()
    return response.json()

This is the boundary you want between the UI app and the agent layer. The model never invents account data; it only gets what your tools return.

3) Create a multi-agent orchestrator with Vercel AI SDK patterns

Use one orchestrator to decide which specialist agent handles which part of the request. For production systems, keep the routing deterministic enough that compliance can reason about it.

from openai import OpenAI

client = OpenAI()

def classify_request(message: str) -> str:
    prompt = f"""
Classify this retail banking request into one label:
fraud, support, kyc, lending, general

Request: {message}
"""
    result = client.responses.create(
        model="gpt-4.1-mini",
        input=prompt,
    )
    return result.output_text.strip().lower()

route = classify_request("Customer says their card was used in another country.")
print(route)

Once routed, send the task to a specialist agent. The specialist can call one or more tools and return structured output for downstream systems.

4) Chain specialist agents for bank-safe workflows

A common pattern is fraud first, then support summary. Another is KYC first, then eligibility. Keep each step narrow and auditable.

from openai import OpenAI
import json

client = OpenAI()

def fraud_agent(customer_id: str) -> dict:
    txns = fetch_transactions(customer_id=customer_id, days=7)
    prompt = f"""
You are a fraud analyst.
Review these transactions and return JSON with keys:
risk_level, reason, recommended_action

Transactions:
{json.dumps(txns)}
"""
    result = client.responses.create(
        model="gpt-4.1-mini",
        input=prompt,
    )
    return {"analysis": result.output_text}

def support_agent(customer_id: str) -> dict:
    acct = fetch_account_summary(customer_id)
    prompt = f"""
You are a retail banking support assistant.
Summarize account status for an internal case note.
Return concise JSON with keys:
summary, next_steps

Account summary:
{json.dumps(acct)}
"""
    result = client.responses.create(
        model="gpt-4.1-mini",
        input=prompt,
    )
    return {"note": result.output_text}

This is where multi-agent systems pay off. Fraud analysis can run independently from support summarization, but both can feed one case record in your Next.js app.

5) Return the final decision back to Next.js

Your Next.js frontend should receive a single structured response from the orchestrator service. That keeps React components simple and prevents business logic from leaking into the UI.

from fastapi import FastAPI
from pydantic import BaseModel

app = FastAPI()

class BankingRequest(BaseModel):
    customer_id: str
    message: str

@app.post("/agent/invoke")
def invoke_agent(payload: BankingRequest):
    route = classify_request(payload.message)

    if route == "fraud":
        result = fraud_agent(payload.customer_id)
    else:
        result = support_agent(payload.customer_id)

    return {
        "route": route,
        "result": result,
        "status": "ok",
    }

Your Next.js app can call this endpoint from an API route or server action and render the answer into a secure dashboard or case-management screen.

Testing the Integration

Use a single smoke test that exercises routing plus one tool call.

import requests

payload = {
    "customer_id": "cust_12345",
    "message": "My debit card was charged twice yesterday."
}

response = requests.post(
    "http://localhost:8000/agent/invoke",
    json=payload,
    timeout=20,
)
response.raise_for_status()

data = response.json()
print(data["route"])
print(data["status"])
print(data["result"])

Expected output:

fraud
ok
{'analysis': '...'}

If you get fraud back and the analysis includes transaction-based reasoning, your routing and tool boundary are working.

Real-World Use Cases

• •Fraud triage assistant
  • •Route suspicious activity into a fraud agent that checks recent transactions and produces an internal escalation note.
• •Retail lending pre-screening
  • •Use one agent to gather profile data and another to evaluate eligibility before sending an application into underwriting.
• •Branch and contact-center copilot
  • •Let support agents ask natural-language questions while the backend pulls account summaries, recent activity, and prior cases through controlled tools.

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.