Composable AI for ecommerce: building a review summarizer with Vercel’s AI SDK

Legacy ecommerce platforms often make it hard to ship new AI-driven features quickly. Updates are slow and costly, and you’re tied to the vendor’s roadmap. With a composable architecture, you can pick and integrate the best tools for each job—and Vercel argues that AI should be a first-class part of that stack.

To show how that works in practice, Vercel recently built a working replica of Amazon’s AI-generated review summaries using a combination of v0, Mistral AI (via Perplexity), and the Vercel AI SDK. The demo is a Next.js app that prompts an LLM with a product’s user reviews and average rating, then produces a quick summary of how customers feel about the product. That gives shoppers an at-a-glance read on quality beyond just star averages, and the template can be adapted to real product data with minor changes.

Model selection in the AI Playground

The prompt itself is straightforward, and the harder part is choosing the right model. With so many LLMs available, it’s not always clear which one will best handle a given prompt. Vercel’s AI SDK Playground lets you test several models side-by-side with synchronized prompts and chat sessions, adjusting per-model settings like temperature.

From that comparison, Mistral’s open-source 7-billion-parameter model turned out to be both highly responsive and well suited to the summarization task. For a more demanding use case, you might need something larger and more computationally expensive, such as OpenAI’s GPT-4 or Anthropic’s Claude 3 Opus.

Swapping models with the AI SDK

The Vercel AI SDK is an open-source library for building conversational streaming user interfaces in JavaScript and TypeScript. It supports React/Next.js, Svelte/SvelteKit, and Vue/Nuxt, as well as Node.js, Serverless, and the Edge Runtime.

In a Next.js App Router project, you can adjust the model and its parameters directly inside Server Components, which keeps AI features composable. That makes building complex AI features no different from building any other UI. You can even swap models between development environments to compare how they perform in context.

import { render } from 'ai/rsc'
import OpenAI from 'openai'
const openai = new OpenAI()
async function submitMessage(userInput) {
  'use server'
  return render({
    provider: openai,
    model: 'gpt-4',
    messages: [
      { role: 'system', content: 'You are an assistant' },
      { role: 'user', content: userInput }
    ],
    text: ({ content }) => <p>{content}</p>,
  })
}

Caching and streaming responses

Once the query is ready to send, the AI SDK and Next.js can handle streaming and caching. In the review summarizer demo, Next.js caching is used so the prompt is sent to the model only once, right after deployment. It can also be configured to run fully dynamic or to use programmatic revalidation and static regeneration without requiring a redeploy.

Prototyping the UI with v0

With a response mechanism in place, the next step is deciding where to display the output. Vercel’s v0 tool generates usable React UI from text and image prompts, so you can rapidly prototype the user experience.

Between the AI SDK Playground for model selection, the AI SDK for wiring the logic, and v0 for the frontend, the whole workflow stays within a composable, JavaScript-native toolchain.