Sources & Citations
Sources & Citations
Chat with source citations using Perplexity's Sonar model. Answers include clickable links for fact-checking.
Loading preview…
Problems solved
- Answer questions with citation-backed Perplexity Sonar responses
- Stream clickable source links for fact-checking
- Smooth word-chunked token streaming for readable answers
Use cases
- Research assistants with citations
- Fact-checking chat experiences
- News and information verification tools
- Educational tutors that show sources
Setup
Requirements, wiring steps, and what this pattern adds to your project.
Getting started
Pick how you want to pull this pattern in — then wire env vars and routes the same way.
- 1
Install from the preview toolbar

Copy the install command above and run it in your project — Pro patterns include a short-lived token.
- 2
Add environment variables to .env.local
PERPLEXITY_API_KEY
- 3
Point client fetches at your API routes
Replace preview `/view/.../api/...` paths with `/api/...` in the installed files.
- 4
Customize the agent and tool files
Adapt prompts, tools, and stop conditions for your product — Copy for AI in the toolbar helps seed that work.
- 5
Run your dev server and open the pattern route
Install dependencies if needed, then start the app and verify responses.
Environment variables
PERPLEXITY_API_KEYGet key
Capabilities
AI SDK APIs
streamTextconvertToModelMessagesProviders
Files added
6 filesapp/page.tsxapp/layout.tsxlib/request-utils.tscomponents/sources-chat-form.tsxapp/api/chat/route.tsREADME.md
Dependencies
7 totalnpm packages
4
Registry components
Critical files
chat/route.tsAPI route demonstrating perplexity/sonar integration with sendSources: true for citation-backed responses. Uses smoothStream with word chunking.
Requirements
- Complexity
- Beginner
- Setup time
- ~15 minutes
- Node
- 24+
- Memory
- 512MB









