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

Next.js for banking gives you the app layer for regulated financial workflows: customer portals, account views, payment initiation, and audit-friendly UI flows. Vercel AI SDK gives you the agent layer: tool calling, streaming responses, and structured outputs. Put them together and you can build banking assistants that do real work instead of just answering questions.

Prerequisites

• •Python 3.10+
• •Node.js 18+ for the Next.js app
• •A Next.js banking project with API routes or server actions enabled
• •A Vercel AI SDK-enabled route using streamText, generateText, or useChat
• •Access to your banking backend API or sandbox
• •Environment variables set:
  • •BANKING_API_BASE_URL
  • •BANKING_API_KEY
  • •OPENAI_API_KEY or your model provider key
• •httpx installed in Python for backend calls:
  • •pip install httpx

Integration Steps

1. •

   Define the banking API contract first

   Don’t start with prompts. Start with the exact operations your agent is allowed to perform: balance lookup, transaction search, beneficiary creation, and payment initiation.

   In a production setup, your Next.js app should expose a narrow banking API surface that the Vercel AI SDK can call through tools.

   from dataclasses import dataclass
   import httpx
   
   @dataclass
   class BankingClient:
       base_url: str
       api_key: str
   
       def _headers(self) -> dict:
           return {
               "Authorization": f"Bearer {self.api_key}",
               "Content-Type": "application/json",
           }
   
       def get_balance(self, account_id: str) -> dict:
           url = f"{self.base_url}/api/accounts/{account_id}/balance"
           response = httpx.get(url, headers=self._headers(), timeout=15)
           response.raise_for_status()
           return response.json()
   
       def list_transactions(self, account_id: str) -> dict:
           url = f"{self.base_url}/api/accounts/{account_id}/transactions"
           response = httpx.get(url, headers=self._headers(), timeout=15)
           response.raise_for_status()
           return response.json()
   

2. •

   Expose a Next.js route that wraps banking actions

   In Next.js for banking, keep the client-facing UI separate from privileged operations. Use a route handler like /app/api/banking/route.ts or a server action to enforce auth and audit logging before any money-moving request.

   Your Python integration layer should call only these approved endpoints.

   import httpx
   
   class BankingActions:
       def __init__(self, base_url: str, api_key: str):
           self.base_url = base_url
           self.api_key = api_key
   
       def create_transfer_draft(self, from_account: str, to_account: str, amount: float) -> dict:
           payload = {
               "fromAccountId": from_account,
               "toAccountId": to_account,
               "amount": amount,
               "currency": "USD",
           }
           response = httpx.post(
               f"{self.base_url}/api/transfers/draft",
               json=payload,
               headers={"Authorization": f"Bearer {self.api_key}"},
               timeout=20,
           )
           response.raise_for_status()
           return response.json()
   

3. •

   Wire the Vercel AI SDK tool calls to your banking endpoints

   The Vercel AI SDK is strongest when the model can call tools with typed inputs. In production, use streamText on the Next.js side and map each tool to a backend endpoint that your Python service also understands.

   If you’re orchestrating from Python, mirror that same contract by calling the same endpoints directly.

   from typing import Any
   import httpx
   
   class AgentBridge:
       def __init__(self, base_url: str, api_key: str):
           self.base_url = base_url
           self.api_key = api_key
   
       def call_tool(self, tool_name: str, arguments: dict[str, Any]) -> dict:
           response = httpx.post(
               f"{self.base_url}/api/agent/tools/{tool_name}",
               json=arguments,
               headers={"Authorization": f"Bearer {self.api_key}"},
               timeout=30,
           )
           response.raise_for_status()
           return response.json()
   
   bridge = AgentBridge(
       base_url="https://your-nextjs-banking-app.vercel.app",
       api_key="banking-service-token",
   )
   
   result = bridge.call_tool("get_balance", {"accountId": "acc_123"})
   print(result)
   

4. •

   Add guardrails for production AI

   Banking agents need hard controls. Use allowlisted tools only, require confirmation for any transfer above a threshold, and log every tool invocation with user ID, session ID, and request payload hash.

   This is where Next.js for banking and Vercel AI SDK fit well together: Next.js handles identity/session state; Vercel AI SDK handles conversational orchestration.

   import hashlib
   import json
   from datetime import datetime
   
   def audit_event(user_id: str, session_id: str, tool_name: str, payload: dict) -> dict:
       payload_hash = hashlib.sha256(json.dumps(payload, sort_keys=True).encode()).hexdigest()
       event = {
           "userId": user_id,
           "sessionId": session_id,
           "toolName": tool_name,
           "payloadHash": payload_hash,
           "timestamp": datetime.utcnow().isoformat() + "Z",
       }
       return event
   
   event = audit_event(
       user_id="u_901",
       session_id="s_abc123",
       tool_name="create_transfer_draft",
       payload={"fromAccountId": "acc_1", "toAccountId": "acc_2", "amount": 250.00},
   )
   print(event)
   

5. •

   Connect the agent workflow end-to-end

   A practical pattern is:

• •

  user asks in Next.js chat UI

• •

  Vercel AI SDK selects a tool

• •

  tool hits a protected banking endpoint

• •

  Python service validates business rules

• •

  result returns to the chat UI

  Keep business validation outside the model. The model proposes; your services decide.

Testing the Integration

Run a direct smoke test against your banking endpoint or agent bridge before wiring it into chat streaming.

import os

client = BankingClient(
    base_url=os.environ["BANKING_API_BASE_URL"],
    api_key=os.environ["BANKING_API_KEY"],
)

balance = client.get_balance("acc_123")
print(balance)

transactions = client.list_transactions("acc_123")
print(transactions)

Expected output:

{'accountId': 'acc_123', 'availableBalance': 4820.75, 'currency': 'USD'}
{'accountId': 'acc_123', 'items': [{'id': 'tx_1', 'amount': -120.0}, {'id': 'tx_2', 'amount': 2500.0}]}

If you want to verify the full agent path, hit your Next.js route that wraps the Vercel AI SDK tool execution:

import httpx

response = httpx.post(
    "https://your-nextjs-banking-app.vercel.app/api/chat",
    json={
        "messages": [
            {"role": "user", "content": "What is my balance on acc_123?"}
        ]
    },
    timeout=30,
)

response.raise_for_status()
print(response.json())

Real-World Use Cases

• •

  Customer service copilot

  • •Answer balance and transaction questions through chat.
  • •Escalate to human support when confidence is low or an action is risky.
• •

  Payments assistant

  • •Draft transfers from natural language.
  • •Require explicit confirmation before execution.
• •

  Relationship manager workflow

  • •Summarize account activity.
  • •Surface anomalies like unusual withdrawals or repeated failed payments.

The main pattern is simple: let Next.js own the regulated product surface and let Vercel AI SDK own conversational orchestration. Keep all money movement behind explicit APIs with logging, authz checks, and deterministic validation in Python services or backend handlers.

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.