Perplexity with the Vercel AI SDK

Use Perplexity’s Agent API from Vercel AI SDK (Next.js) apps through the @ai-sdk/open-responses provider.

Overview

The Vercel AI SDK is a TypeScript toolkit for building AI apps — Next.js and React — with streaming primitives and UI hooks like useChat. Reach the Agent API through the @ai-sdk/open-responses provider, pointed at Perplexity’s /v1/responses endpoint, to get a native AI SDK model you can pass to generateText, streamText, and useChat.

Create the provider on the server — a Next.js Route Handler, Server Action, or API route — so PERPLEXITY_API_KEY never reaches the browser.

Installation

pnpm

pnpm add ai @ai-sdk/open-responses

API Key Setup

export PERPLEXITY_API_KEY="your_api_key_here"

Get API Key

Generate your Perplexity API key from the API portal.

Quickstart

Create the provider with createOpenResponses, point it at /v1/responses, and call generateText.

import { createOpenResponses } from "@ai-sdk/open-responses";
import { generateText } from "ai";

const perplexity = createOpenResponses({
  name: "perplexity",
  url: "https://api.perplexity.ai/v1/responses",
  apiKey: process.env.PERPLEXITY_API_KEY,
});

const { text } = await generateText({
  model: perplexity("openai/gpt-5.6-sol"),
  prompt: "Explain the difference between supervised and unsupervised learning.",
});

console.log(text);

Web-Grounded Answers

Add the web_search tool to ground answers in real-time results from Perplexity’s web search — the same search that powers Perplexity’s own answer engine. The provider sends a fixed request body and does not expose the Agent API’s built-in tools as first-class options, so enable web_search by adding it to the body in the provider’s fetch hook.

import { createOpenResponses } from "@ai-sdk/open-responses";
import { generateText } from "ai";

// The provider doesn't surface sources on the result, so capture them in the hook.
let sources = [];

const perplexity = createOpenResponses({
  name: "perplexity",
  url: "https://api.perplexity.ai/v1/responses",
  apiKey: process.env.PERPLEXITY_API_KEY,
  fetch: async (url, options) => {
    const body = JSON.parse(options.body as string);
    // Enable the built-in web_search tool by adding it to the request body.
    body.tools = [{ type: "web_search" }];
    const response = await fetch(url, { ...options, body: JSON.stringify(body) });

    // Sources arrive as a separate `search_results` item in the response `output` array.
    // (Skip for streaming, where the body is an event stream rather than JSON.)
    if (!body.stream) {
      const raw = await response.clone().json();
      sources = raw.output
        .filter((item) => item.type === "search_results")
        .flatMap((item) => item.results); // each: { title, url, snippet, date, ... }
    }

    return response;
  },
});

const { text } = await generateText({
  model: perplexity("openai/gpt-5.6-sol"),
  prompt: "What are the latest breakthroughs in fusion energy this year?",
});

console.log(text);

for (const source of sources) {
  console.log(source.title, source.url);
}

The answer is grounded server-side, but @ai-sdk/open-responses does not surface the sources on the result — result.sources is empty. That’s why the fetch hook reads them from the raw search_results item in the response output array. See Reading Sources from the Response for the full response shape.

Presets

Presets bundle a model, tools, and a tuned system prompt for a use case, so you don’t wire them up yourself. Set preset on the request body in the same fetch hook — a preset already includes web_search, so you don’t add tools separately.

// In the fetch hook, set a preset instead of adding tools:
body.preset = "fast"; // fast | low | medium | high | xhigh

Presets scale from fast (single-fact lookups) to xhigh (open-ended, agentic work with code execution in a sandbox). See the presets guide to pick the right one.

Streaming

Use streamText for token-by-token output. In a Next.js Route Handler, return result.toUIMessageStreamResponse() and render it on the client with useChat.

import { streamText } from "ai";

// Reuse the `perplexity` provider created above.
const result = streamText({
  model: perplexity("openai/gpt-5.6-sol"),
  prompt: "What are the latest breakthroughs in fusion energy this year?",
});

for await (const chunk of result.textStream) {
  process.stdout.write(chunk);
}

Supported Models

Pass any Agent API model to the provider — OpenAI, Anthropic, Google, xAI, and more — all routed through your single Perplexity key.

perplexity("openai/gpt-5.6-sol");
perplexity("google/gemini-3-flash-preview");
perplexity("xai/grok-4.5");

Agent API Models

Browse every available model and its pricing.

Links & Resources

Open Responses Provider

Configure the AI SDK provider used on this page.

Agent API Quickstart

Build with Agent API models, tools, and presets.

Web Search Tool

Ground answers in Perplexity’s real-time web search.

Vercel AI SDK Docs

Core generation APIs and UI hooks.

Support

Need help with the integration?

• Browse the Vercel AI SDK documentation
• Review our FAQ