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

Connecting Next.js for banking with Vercel AI SDK gives you a clean path from regulated customer-facing workflows to multi-agent orchestration. The banking side handles authenticated product flows, account context, and compliance-aware UI, while the Vercel AI SDK gives you agent routing, tool calling, streaming responses, and structured outputs.

The useful pattern is not “chatbot in a bank.” It’s an agent system where one agent handles customer intent, another checks policy or eligibility, and another prepares actions for a Next.js frontend to render or confirm.

Prerequisites

• •Node.js 18+ and Python 3.10+
• •A Next.js banking app with:
  • •authenticated routes
  • •API endpoints for account lookup, transfer initiation, or document upload
• •Vercel AI SDK installed in your frontend/backend project:
  • •ai
  • •@ai-sdk/openai or your model provider
• •Python environment for orchestration services:
  • •httpx
  • •pydantic
  • •fastapi if you want to expose an agent gateway
• •API keys configured in environment variables:
  • •OPENAI_API_KEY
  • •banking backend base URL and auth token
• •A clear tool contract between agents and the banking backend:
  • •account summary
  • •transaction history
  • •payment initiation
  • •KYC/doc verification

Integration Steps

1. •

   Define the banking service contract your agents will call.

   Your multi-agent system should not call UI code directly. It should call stable backend endpoints exposed by your Next.js banking app.

   from pydantic import BaseModel
   from typing import Optional
   
   class AccountSummaryRequest(BaseModel):
       customer_id: str
       account_id: str
   
   class TransferRequest(BaseModel):
       customer_id: str
       from_account_id: str
       to_account_id: str
       amount: float
       currency: str = "USD"
       memo: Optional[str] = None
   

   In the Next.js banking app, expose API routes like:

   import httpx
   
   BANKING_API_BASE = "https://your-nextjs-banking-app.vercel.app/api"
   
   async def fetch_account_summary(customer_id: str, account_id: str):
       async with httpx.AsyncClient(timeout=20) as client:
           resp = await client.get(
               f"{BANKING_API_BASE}/accounts/{account_id}",
               headers={"Authorization": f"Bearer {customer_id}"}
           )
           resp.raise_for_status()
           return resp.json()
   

2. •

   Build the agent tools that wrap Next.js banking endpoints.

   This is where Vercel AI SDK becomes useful. The frontend can stream responses while the backend agent decides which tool to call.

   import httpx
   
   BANKING_API_BASE = "https://your-nextjs-banking-app.vercel.app/api"
   
   async def initiate_transfer(payload: dict):
       async with httpx.AsyncClient(timeout=30) as client:
           resp = await client.post(
               f"{BANKING_API_BASE}/transfers",
               json=payload,
               headers={
                   "Authorization": f"Bearer {payload['customer_id']}",
                   "Content-Type": "application/json",
               }
           )
           resp.raise_for_status()
           return resp.json()
   
   async def verify_kyc(customer_id: str):
       async with httpx.AsyncClient(timeout=20) as client:
           resp = await client.get(
               f"{BANKING_API_BASE}/kyc/status",
               headers={"Authorization": f"Bearer {customer_id}"}
           )
           resp.raise_for_status()
           return resp.json()
   

3. •

   Orchestrate multiple agents in Python before sending results to the Vercel AI SDK layer.

   A common setup is:

   • •intent agent decides what the user wants
   • •policy agent checks whether action is allowed
   • •execution agent calls banking APIs

   from dataclasses import dataclass
   
   @dataclass
   class AgentDecision:
       action: str
       confidence: float
       requires_human_review: bool = False
   
   async def intent_agent(user_message: str) -> AgentDecision:
       if "transfer" in user_message.lower():
           return AgentDecision(action="transfer", confidence=0.94)
       if "balance" in user_message.lower():
           return AgentDecision(action="account_summary", confidence=0.91)
       return AgentDecision(action="unknown", confidence=0.55)
   
   async def policy_agent(customer_kyc_status: dict, amount: float | None = None) -> bool:
       if customer_kyc_status.get("status") != "verified":
           return False
       if amount is not None and amount > 10000:
           return False
       return True
   

4. •

   Expose an agent gateway that your Next.js app can call through Vercel AI SDK.

   The practical pattern is: Next.js uses the AI SDK for streaming and tool invocation, while Python hosts the multi-agent logic behind an internal endpoint.

   from fastapi import FastAPI
   from pydantic import BaseModel
   
   app = FastAPI()
   
   class ChatRequest(BaseModel):
       customer_id: str
       message: str
   
   @app.post("/agent/chat")
   async def chat(req: ChatRequest):
       decision = await intent_agent(req.message)
   
       if decision.action == "account_summary":
           summary = await fetch_account_summary(req.customer_id, "primary")
           return {"type": "summary", "data": summary}
   
       if decision.action == "transfer":
           kyc = await verify_kyc(req.customer_id)
           allowed = await policy_agent(kyc, amount=250.0)
           if not allowed:
               return {"type": "blocked", "reason": "policy_check_failed"}
   
           result = await initiate_transfer({
               "customer_id": req.customer_id,
               "from_account_id": "primary",
               "to_account_id": "savings",
               "amount": 250.0,
               "currency": "USD",
               "memo": req.message,
           })
           return {"type": "transfer_result", "data": result}
   
       return {"type": "fallback", "message": "I could not classify this request."}
   

5. •

   Connect the Next.js frontend to the Python agent service using Vercel AI SDK patterns.

   In a Next.js route handler, you can use the AI SDK to stream model output after your Python service returns structured data.

   import httpx
   
   PY_AGENT_URL = "http://localhost:8000/agent/chat"
   
    # This function would be called by your Next.js API route or server action.
   

async def get_agent_response(customer_id: str, message: str): async with httpx.AsyncClient(timeout=30) as client: resp = await client.post( PY_AGENT_URL, json={"customer_id": customer_id, "message": message} ) resp.raise_for_status() return resp.json()

## Testing the Integration

Run your Python agent service locally and hit it with a real banking intent.

```python
import asyncio

async def main():
    result = await get_agent_response(
        customer_id="cust_123",
        message="Transfer $250 from checking to savings"
    )
    print(result)

asyncio.run(main())

Expected output:

{
  "type": "transfer_result",
  "data": {
    "transaction_id": "tx_78901",
    "status": "submitted",
    "amount": 250.0,
    "currency": "USD"
  }
}

If KYC fails or policy blocks the action, expect:

{
  "type": "blocked",
  "reason": "policy_check_failed"
}

Real-World Use Cases

• •

  Customer support copilot

  • •One agent answers balance and transaction questions.
  • •Another agent pulls verified account data from your Next.js banking backend.
  • •A third agent drafts a response for review before anything sensitive is executed.
• •

  Payments assistant

  • •The user requests a transfer in natural language.
  • •The intent agent classifies it.
  • •The policy agent checks limits and KYC.
  • •The execution agent posts to /api/transfers.
• •

  Document-driven onboarding

  • •Users upload ID documents through Next.js.
  • •An extraction agent reads them.
  • •A compliance agent checks completeness.
  • •The final state is returned to the UI through structured AI SDK responses.

The key here is separation of concerns. Keep Next.js for banking as the secure product surface and use Vercel AI SDK as the conversational and orchestration layer on top of it. That gives you a system that is easier to test, easier to audit, and much safer to extend with more agents later.

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.