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

Next.js for retail banking gives you the UI and application shell for customer-facing banking flows. Vercel AI SDK gives you the agent layer to retrieve policy, product, and account context so the assistant can answer with grounded data instead of guessing.

That combination is useful when you need a banking assistant that can explain card disputes, mortgage eligibility, savings rates, or KYC status from internal documents and live systems.

Prerequisites

• •Node.js 18+ for the Next.js app
• •Python 3.10+ for orchestration scripts and backend glue
• •A Next.js retail banking app with:
  • •/api/chat or equivalent route
  • •customer session/auth middleware
  • •access to product docs, FAQs, and policy files
• •A Vercel project with the AI SDK installed:
  • •ai
  • •@ai-sdk/openai or your model provider package
• •An embeddings/vector store setup:
  • •pgvector, Pinecone, Weaviate, or similar
• •Banking data sources exposed through secure APIs:
  • •account summaries
  • •transaction metadata
  • •product catalog
• •Environment variables configured:
  • •OPENAI_API_KEY
  • •DATABASE_URL
  • •BANKING_API_BASE_URL
  • •BANKING_API_TOKEN

Integration Steps

1) Build the retrieval layer for banking documents

Start by indexing your retail banking content into a vector store. In production, this should include product terms, fee schedules, support playbooks, and policy docs.

from openai import OpenAI
import os

client = OpenAI(api_key=os.environ["OPENAI_API_KEY"])

def embed_text(text: str):
    response = client.embeddings.create(
        model="text-embedding-3-small",
        input=text,
    )
    return response.data[0].embedding

docs = [
    {
        "id": "mortgage_eligibility",
        "text": "Mortgage eligibility requires stable income, credit review, and debt-to-income assessment."
    },
    {
        "id": "card_disputes",
        "text": "Card disputes must be filed within 60 days of the statement date."
    },
]

for doc in docs:
    vector = embed_text(doc["text"])
    print(doc["id"], len(vector))

Store those embeddings in your vector database along with metadata like document type, jurisdiction, and last reviewed date.

2) Expose a retrieval API from your banking backend

Your Next.js app should not query raw vector storage directly from the browser. Wrap retrieval in a backend endpoint that returns top-k chunks with enough metadata for grounding.

import os
import requests

BANKING_API_BASE_URL = os.environ["BANKING_API_BASE_URL"]
BANKING_API_TOKEN = os.environ["BANKING_API_TOKEN"]

def retrieve_banking_context(query: str):
    resp = requests.post(
        f"{BANKING_API_BASE_URL}/rag/retrieve",
        headers={
            "Authorization": f"Bearer {BANKING_API_TOKEN}",
            "Content-Type": "application/json",
        },
        json={
            "query": query,
            "top_k": 5,
            "filters": {
                "product_line": "retail_banking"
            }
        },
        timeout=10,
    )
    resp.raise_for_status()
    return resp.json()["chunks"]

chunks = retrieve_banking_context("How long do I have to dispute a card charge?")
print(chunks[0]["text"])

This keeps retrieval behind your trust boundary. It also lets you enforce document filters by region, product line, or customer segment.

3) Wire Vercel AI SDK into the Next.js route

Use the Vercel AI SDK to generate responses from retrieved context. The key method here is generateText, which takes a model and messages.

from openai import OpenAI
import os

client = OpenAI(api_key=os.environ["OPENAI_API_KEY"])

def answer_with_rag(question: str, context_chunks: list[dict]):
    context_text = "\n\n".join(
        [f"[{c['source']}]\n{c['text']}" for c in context_chunks]
    )

    prompt = f"""
You are a retail banking assistant.
Answer only using the provided context.
If the answer is not in context, say you don't have enough information.

Context:
{context_text}

Question:
{question}
"""

    response = client.responses.create(
        model="gpt-4.1-mini",
        input=prompt,
    )
    return response.output_text

answer = answer_with_rag(
    "Can I dispute a debit card charge after two months?",
    [{"source": "card_disputes_policy", "text": "Card disputes must be filed within 60 days of the statement date."}]
)
print(answer)

In the actual Next.js route, this maps cleanly to an AI SDK handler that calls your retrieval endpoint first, then passes the result into generation.

4) Add customer-aware routing for account-specific answers

Retail banking assistants usually need both public policy docs and private account data. Keep those separate and merge them only after auth has been verified.

import requests
import os

BANKING_API_BASE_URL = os.environ["BANKING_API_BASE_URL"]
BANKING_API_TOKEN = os.environ["BANKING_API_TOKEN"]

def get_account_summary(customer_id: str):
    resp = requests.get(
        f"{BANKING_API_BASE_URL}/accounts/{customer_id}/summary",
        headers={"Authorization": f"Bearer {BANKING_API_TOKEN}"},
        timeout=10,
    )
    resp.raise_for_status()
    return resp.json()

def build_agent_context(customer_id: str, question: str):
    docs = retrieve_banking_context(question)
    account = get_account_summary(customer_id)

    return {
        "documents": docs,
        "account": account,
        "question": question,
    }

ctx = build_agent_context("cust_123", "Why was my transfer declined?")
print(ctx["account"]["available_balance"])

This is where RAG becomes useful in banking. The assistant can cite policy text while also checking whether the customer’s balance or transfer limits explain what happened.

5) Return structured answers to the Next.js UI

Don’t send raw model text only. Return structured output so the Next.js frontend can render citations, action buttons, and escalation paths.

from openai import OpenAI
import os
import json

client = OpenAI(api_key=os.environ["OPENAI_API_KEY"])

def rag_response(customer_id: str, question: str):
    ctx = build_agent_context(customer_id, question)
    context_text = "\n\n".join([chunk["text"] for chunk in ctx["documents"]])

    prompt = f"""
Use this context to answer the customer.
Return JSON with keys: answer, citations, needs_handoff.

Context:
{context_text}

Account:
{json.dumps(ctx['account'])}

Question:
{question}
"""

    response = client.responses.create(
        model="gpt-4.1-mini",
        input=prompt,
    )
    return response.output_text

print(rag_response("cust_123", "Can I increase my daily transfer limit?"))

Your Next.js page can render answer, show source links from citations, and trigger a human handoff when needs_handoff is true.

Testing the Integration

Use one test query that should be answered from policy text and one that requires account data.

def test_integration():
    q1 = "How long do I have to dispute a card charge?"
    q2 = "Why was my transfer declined?"

    docs1 = retrieve_banking_context(q1)
    print("Q1 docs:", len(docs1))
    
    answer1 = answer_with_rag(q1, docs1[:2])
    print("Q1 answer:", answer1)

test_integration()

Expected output:

Q1 docs: 5
Q1 answer: Card disputes must be filed within 60 days of the statement date.

If retrieval is working but generation is vague, your context chunks are probably too large or too noisy. Tighten chunking and add source metadata.

Real-World Use Cases

• •Card servicing assistant
  • •Answers chargeback timelines, replacement card steps, PIN resets, and fraud escalation using policy docs plus live account state.
• •Retail lending copilot
  • •Explains mortgage prequalification rules, document requirements, rate lock windows, and application status from internal knowledge bases.
• •Branch support agent
  • •Helps staff resolve deposit holds, transfer limits, fee reversals, and KYC questions without searching multiple systems manually.

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.