How to Integrate Next.js for wealth management with Vercel AI SDK for startups

Why this integration matters

If you’re building a wealth management product for a startup, the real problem is not “chat with an AI.” It’s getting portfolio data, client context, and recommendation logic into a UI that advisors can actually use. Next.js gives you the app layer for dashboards and client workflows, while Vercel AI SDK gives you the agent orchestration layer for streaming responses, tool calls, and structured outputs.

The useful pattern is simple: Next.js handles the frontend and API routes, Vercel AI SDK handles reasoning and response generation, and your Python service becomes the bridge to portfolio systems, risk engines, and compliance checks.

Prerequisites

• •Node.js 18+ installed
• •Python 3.10+ installed
• •A Next.js app set up with App Router
• •A Vercel account with an AI SDK-enabled project
• •Access to your wealth management backend APIs:
  • •portfolio positions
  • •client profiles
  • •suitability/risk scoring
• •pip and npm available locally
• •Environment variables configured:
  • •OPENAI_API_KEY or your model provider key
  • •backend API base URL
  • •auth token for internal wealth APIs

Integration Steps

1. •

   Create a Python service that exposes wealth data

   Keep portfolio and client data behind a Python API. FastAPI works well because it’s easy to call from Next.js route handlers and easy to test.

   from fastapi import FastAPI, Header, HTTPException
   from pydantic import BaseModel
   import httpx
   
   app = FastAPI()
   
   class ClientRequest(BaseModel):
       client_id: str
   
   @app.post("/wealth/client-summary")
   async def client_summary(payload: ClientRequest, authorization: str = Header(default="")):
       if not authorization.startswith("Bearer "):
           raise HTTPException(status_code=401, detail="Missing bearer token")
   
       async with httpx.AsyncClient() as client:
           positions = await client.get(
               f"https://api.internal.example.com/clients/{payload.client_id}/positions",
               headers={"Authorization": authorization},
               timeout=10.0,
           )
           profile = await client.get(
               f"https://api.internal.example.com/clients/{payload.client_id}/profile",
               headers={"Authorization": authorization},
               timeout=10.0,
           )
   
       return {
           "client_id": payload.client_id,
           "positions": positions.json(),
           "profile": profile.json(),
       }
   

2. •

   Expose that Python service to your Next.js app

   Your Next.js layer should not know how to talk to every backend directly. It should call one internal Python endpoint that returns normalized wealth data.

   import os
   import httpx
   
   WEALTH_API_BASE = os.getenv("WEALTH_API_BASE", "http://localhost:8000")
   
   async def fetch_client_summary(client_id: str, token: str) -> dict:
       async with httpx.AsyncClient() as client:
           resp = await client.post(
               f"{WEALTH_API_BASE}/wealth/client-summary",
               json={"client_id": client_id},
               headers={"Authorization": f"Bearer {token}"},
               timeout=15.0,
           )
           resp.raise_for_status()
           return resp.json()
   

3. •

   Build a Next.js API route that calls Vercel AI SDK

   In the App Router, create a route handler that uses the Vercel AI SDK server helpers. The route can call your Python service first, then feed the result into the model as context.

   from fastapi import FastAPI, Request
   from pydantic import BaseModel
   import httpx
   
   app = FastAPI()
   
   class ChatRequest(BaseModel):
       message: str
       client_id: str
   
   @app.post("/agent/chat")
   async def agent_chat(payload: ChatRequest):
       async with httpx.AsyncClient() as client:
           summary_resp = await client.post(
               "http://localhost:8000/wealth/client-summary",
               json={"client_id": payload.client_id},
               headers={"Authorization": "Bearer internal-service-token"},
           )
           summary_resp.raise_for_status()
           summary = summary_resp.json()
   
       # This is the payload you'd pass into the Next.js route using Vercel AI SDK.
       return {
           "messages": [
               {"role": "system", "content": "You are a wealth management assistant."},
               {"role": "user", "content": payload.message},
               {"role": "system", "content": f"Client context: {summary}"},
           ]
       }
   

4. •

   Use Vercel AI SDK tools for structured actions

   The actual agent should not hallucinate trades or recommendations. Use tools for deterministic actions like fetching holdings, checking risk bands, or generating meeting notes.

   from typing import Any
   import requests
   
   def get_portfolio_tool(client_id: str) -> dict[str, Any]:
       resp = requests.get(
           f"http://localhost:8000/wealth/client-summary",
           json={"client_id": client_id},
           headers={"Authorization": "Bearer internal-service-token"},
           timeout=10,
       )
       resp.raise_for_status()
       return resp.json()
   
   def build_tool_payload(client_id: str) -> dict:
       portfolio = get_portfolio_tool(client_id)
       return {
           "tool_name": "get_portfolio",
           "result": portfolio,
       }
   

5. •

   Return streaming responses back to Next.js

   Once your agent has context and tool results, stream partial output back to the UI. That’s where Vercel AI SDK shines in practice: advisor sees text as it’s generated instead of waiting on a full completion.

   from fastapi.responses import StreamingResponse
   import json
   
   def stream_agent_response(prompt: str):
       chunks = [
           {"type": "text", "value": "Reviewing portfolio exposure..."},
           {"type": "text", "value": "The client is overweight in large-cap tech."},
           {"type": "text", "value": "Suggested action: rebalance 5% into fixed income."},
       ]
       for chunk in chunks:
           yield json.dumps(chunk) + "\n"
   
   @app.post("/agent/stream")
   async def agent_stream():
       return StreamingResponse(stream_agent_response("rebalance suggestion"), media_type="application/jsonl")
   

Testing the Integration

Use a simple end-to-end check: call your Python bridge endpoint, then confirm it returns normalized context that your Next.js + Vercel AI SDK layer can consume.

import httpx

async def test_integration():
    async with httpx.AsyncClient() as client:
        resp = await client.post(
            "http://localhost:8000/wealth/client-summary",
            json={"client_id": "client_123"},
            headers={"Authorization": "Bearer test-token"},
        )
        print(resp.status_code)
        print(resp.json())

# Expected output:
# 200
# {
#   'client_id': 'client_123',
#   'positions': [...],
#   'profile': {...}
# }

If you want a stricter verification path, assert that the response contains:

• •client_id
• •positions
• •profile
• •non-empty holdings data

Real-World Use Cases

• •

  Advisor copilot

  • •Pulls client holdings from your wealth backend.
  • •Uses Vercel AI SDK tools to summarize concentration risk and propose talking points for review meetings.
• •

  Onboarding assistant

  • •Guides new clients through KYC questions.
  • •Uses Next.js forms plus agent-driven follow-up questions based on missing suitability fields.
• •

  Portfolio review workflow

  • •Streams a plain-English explanation of performance drivers.
  • •Flags when a portfolio violates internal risk rules before an advisor sends recommendations.

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.