Tubegraph

Serverless deployment with Versel and Nextjs

4 min read

From: aidotengineer

Deploying modern AI engineering workloads in a serverless environment requires selecting the right tools to build a robust, scalable, and user-ready application [00:00:14]. The combination of Next.js for the client application and Vercel for the serverless deployment environment offers a powerful and integrated solution [00:02:49]. This setup helps achieve zero ops resilient agent-powered user-ready apps [00:00:19].

A full stack AI engineering workload typically involves a client application, an agent framework, and an orchestration layer, all running serverlessly in the cloud [00:00:46]. The favored combination for this type of deployment is:

Next.js for Client Applications

Next.js is a strong choice for the client application due to its robust features [00:03:12]:

  • Built-in Streaming: Facilitates efficient data handling. [00:02:58]
  • First-class Server Actions: Enables server-side logic directly within components. [00:03:01]
  • File-based and Nested Routing: Simplifies application structure and navigation. [00:03:04]
  • Deep Integration with Vercel: Next.js, being developed by Vercel, ensures seamless deployment and performance optimizations [00:03:06]. This strong alignment makes Vercel the ideal cloud platform for Next.js infrastructure [00:05:07].

Vercel for Serverless Hosting

Vercel provides an exceptional serverless environment for deploying Next.js applications and other serverless functions [00:04:18]:

  • Preview Deployments: Every push to a repository automatically triggers a preview deployment, integrating continuous deployment into the workflow and allowing teams to review changes on preview branches [00:04:21].
  • Automatic Deployments: Vercel deploys the application automatically upon merging to the main branch [00:04:42].
  • Strong Edge Network & CDNs: Provides high performance and low latency globally with automatic Content Delivery Networks [00:04:50].
  • Integrated Database Options: Offers various database integrations including PostgreSQL, Redis, and blob storage [00:04:55].

Architecture and Workflow

The core architecture involves a Next.js application that interacts with an orchestration layer (Ingest) which, in turn, manages serverless Python functions running AI agents (OpenAI Agents SDK) [00:06:00].

graph TD
    User --> NextJSApp(Next.js App)
    NextJSApp --> Database(Database / Vercel Blob Storage)
    NextJSApp -- Trigger Workflow --> Ingest(Ingest Orchestration Layer)
    Ingest -- Manages --> PythonServerlessFunctions(Python Serverless Functions - AI Agents)
    PythonServerlessFunctions -- AI Inference --> OpenAI(OpenAI / LLM)
    PythonServerlessFunctions -- Return Results --> Ingest
    Ingest -- Inform --> NextJSApp
  • Client Interaction: Users connect to the Next.js app, which might check a database for cached results [00:06:02].
  • Workflow Trigger: If new work is needed, the Next.js app triggers a new workflow by sending an event to the Ingest service [00:06:11].
  • Orchestration: Ingest manages the connection to Python serverless functions, where the AI agents are running [00:06:17].
  • AI Agent Execution: Vercel automatically hosts these Python functions (e.g., Fast API apps), allowing them to handle AI inference by communicating with OpenAI [00:06:34].
  • Result Handling: Results are returned to the orchestration layer, which then informs the front end. Data can be cached in the database as needed [00:06:50].

This setup ensures serverless scalability, the ability to support long-running jobs without hitting cloud function time limits, and cost efficiency by paying only for actual usage [00:07:34].

Development and Deployment

For local development, three terminals are typically used: one for Python agents, one for Next.js, and one for the Ingest dev server [00:08:13].

Deployment to Vercel is streamlined:

  • Automatic Recognition: Vercel automatically picks up Python functions in a top-level api directory and deploys each file as its own independent cloud function, without needing a vercel.json config file [00:11:57].
  • Vercel CLI: The vercel CLI command allows signing in, connecting to environment variables, and pulling down production environment variables to run locally [00:16:39].
  • Environment Variables: Essential environment variables typically include an OpenAI API key and a Vercel blob storage token [00:16:50].
  • Observability: Vercel provides full build logs and displays how API agents are deployed as Python functions, aiding in troubleshooting [00:15:58].

This integrated approach facilitates a smooth developer experience with full type safety across Python (with Pydantic) and TypeScript (with Next.js) [00:08:03].

Graph View

Backlinks