Perplexity with the Vercel AI SDK
Overview
Section titled “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.
Installation
Section titled “Installation”pnpm add ai @ai-sdk/open-responsesnpm install ai @ai-sdk/open-responsesAPI Key Setup
Section titled “API Key Setup”export PERPLEXITY_API_KEY="your_api_key_here"Get API Key
Generate your Perplexity API key from the API portal.
Quickstart
Section titled “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
Section titled “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
Section titled “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 | xhighStreaming
Section titled “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
Section titled “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
Section titled “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
Section titled “Support”Need help with the integration?
- Browse the Vercel AI SDK documentation
- Review our FAQ