Skip to main content
Signals implementation
Customer-facing AI agents

Build an AI agent with real-time user context using Signals and Vercel AI SDK

Build a Next.js AI agent that uses Snowplow Signals to deliver contextually aware responses based on live user behavior.

Progress0%

Learn how to build an AI agent with real-time user context using Signals and Vercel AI SDK

In this tutorial, you'll build a Next.js AI agent that uses Snowplow Signals to understand what your users are doing in real time. Instead of responding generically to every user, the agent will have live awareness of the current user's session behavior: which pages they've visited, what they've been exploring, and how long they've been on the site.

The app will:

  1. Track user behavior automatically using the Snowplow Browser tracker
  2. Compute live user attributes with Snowplow Signals
  3. Inject those attributes into the AI agent's system prompt using the Vercel AI SDK
  4. Deliver contextually aware responses that respond to what the user is actually doing

Adding real-time context from Signals can improve responses. In this example, the user has spent 20 minutes exploring the enterprise pricing page:

txt
User: "Can you help me understand your pricing?"

// Without Signals context
Agent: "Sure! We offer three plans: Starter, Pro, and Enterprise..."

// With Signals context
Agent: "I can see you've been exploring our Enterprise plan — happy to help.
       Are you mainly comparing SSO requirements, infrastructure options,
       or SLA tiers?"

The agent can tailor its response based on the user's actual behavior, making for a more engaging and personalized experience.

How the components fit together​

The flow works like this:

  • The Snowplow Browser tracker streams behavioral events to your Collector
  • Signals computes live session attributes from that stream
  • On the front-end, the ChatWidget reads the Snowplow session ID from the tracker's cookie and sends it alongside every chat request as pageContext.snowplowDomainSessionId
  • The Next.js /api/chat route uses that session ID to fetch fresh attributes from Signals and appends them to the system prompt
  • The model's response is streamed back through the Vercel AI Gateway to the browser
Architecture diagram showing the full data and request flow. In the browser, the Snowplow tracker fires page views, page pings, and link clicks to the Snowplow Collector. The Collector produces enriched events, which flow into Snowplow Signals. Signals computes session attributes and exposes them via a GET attributes by session endpoint. On the Next.js server, the API Chat route receives messages and a Session ID from the browser chat widget, calls the Signals endpoint to fetch session attributes, and passes those attributes as a system prompt alongside the messages to Vercel AI Gateway. The gateway returns a streamed response, which the browser renders in the chat widget.

Prerequisites​

This tutorial requires:

  • A Snowplow account with Signals deployed
  • Node.js 18+ and npm/pnpm
  • A Vercel AI Gateway API key
    • This tutorial uses openai/gpt-4o-mini via AI Gateway, but any supported model works
  • Basic familiarity with Next.js and TypeScript

This tutorial should take approximately 30 minutes to complete.

Last updated on

On this page

Want to see a custom demo?

Our technical experts are here to help.

Book a demo