Vercel Perplexity IntegrationConnectable Account

Learn how to add Perplexity connectable account integration with Vercel.

Perplexity API specializes in providing accurate, real-time answers to user questions by combining AI-powered search with large language models, delivering concise, well-sourced, and conversational responses. Integrating Perplexity via its Sonar API with Vercel allows your applications to deliver real-time, web-wide research and question-answering capabilities—complete with accurate citations, customizable sources, and advanced reasoning—enabling users to access up-to-date, trustworthy information directly within your product experience.

Use cases

You can use the Vercel and Perplexity integration to power a variety of AI applications, including:

  • Real-time, citation-backed answers: Integrate Perplexity to provide users with up-to-date information grounded in live web data, complete with detailed source citations for transparency and trust.
  • Customizable search and data sourcing: Tailor your application's responses by specifying which sources Perplexity should use, ensuring compliance and relevance for your domain or industry.
  • Complex, multi-step query handling: Leverage advanced models like Sonar Pro to process nuanced, multi-part questions, deliver in-depth research, and support longer conversational context windows.
  • Optimized speed and efficiency: Benefit from Perplexity's lightweight, fast models that deliver nearly instant answers at scale, making them ideal for high-traffic or cost-sensitive applications.
  • Fine-grained output control: Adjust model parameters (e.g., creativity, repetition) and manage output quality to align with your application's unique requirements and user expectations.

Available models

The Sonar models are each optimized for tasks such as real-time search, advanced reasoning, and in-depth research. Please refer to Perplexity's list of available models here.

Sonar Pro

Type: Chat

Perplexity's premier offering with search grounding, supporting advanced queries and follow-ups.

Sonar

Type: Chat

Perplexity's lightweight offering with search grounding, quicker and cheaper than Sonar Pro.

Getting started

The Vercel Perplexity API integration can be accessed through the AI tab on your Vercel dashboard.

Prerequisites

To follow this guide, you'll need the following:

Add the provider to your project

Using the dashboard

  1. Navigate to the AI tab in your Vercel dashboard
  2. Select Perplexity API from the list of providers, and press Add
  3. Review the provider information, and press Add Provider
  4. You can now select which projects the provider will have access to. You can choose from All Projects or Specific Projects
    • If you select Specific Projects, you'll be prompted to select the projects you want to connect to the provider. The list will display projects associated with your scoped team
    • Multiple projects can be selected during this step
  5. Select the Connect to Project button
  6. You'll be redirected to the provider's website to complete the connection process
  7. Once the connection is complete, you'll be redirected back to the Vercel dashboard, and the provider integration dashboard page. From here you can manage your provider settings, view usage, and more
  8. Pull the environment variables into your project using Vercel CLI
    terminal
    vercel env pull
  9. Install the providers package 
    pnpm i @ai-sdk/perplexity ai
  10. Connect your project using the code below:
    app/api/chat/route.ts
    // app/api/chat/route.ts
    import { perplexity } from '@ai-sdk/perplexity';
    import { streamText } from 'ai';
    

    // Allow streaming responses up to 30 seconds
    export const maxDuration = 30;
    

    export async function POST(req: Request) {
      // Extract the `messages` from the body of the request
      const { messages } = await req.json();
    

      // Call the language model
      const result = streamText({
        model: perplexity('sonar-pro'),
        messages,
      });
    

      // Respond with the stream
      return result.toDataStreamResponse();
    }
  1. Add the provider to your page using the code below:
    app/chat/page.tsx
    // app/chat/page.tsx
    

    'use client';
    

    import { useChat } from '@ai-sdk/react';
    

    export default function Chat() {
      const { messages, input, handleInputChange, handleSubmit } = useChat();
    

      return (
        <div>
          {messages.map((m) => (
            <div key={m.id}>
              {m.role === 'user' ? 'User: ' : 'AI: '}
              {m.content}
            </div>
          ))}
    

          <form onSubmit={handleSubmit}>
            <input
              value={input}
              placeholder="Say something..."
              onChange={handleInputChange}
            />
          </form>
        </div>
      );
    }
    If you're using useChat, install the @ai-sdk/react package:
    pnpm i @ai-sdk/react

More resources

Perplexity API Website

Learn more about Perplexity API by visiting their website.

Perplexity API Pricing

Learn more about Perplexity API pricing.

Perplexity API Documentation

Visit the Perplexity API documentation.

Last updated on March 17, 2025
Next
Account Management