Sources
The Sources component allows a user to view the sources or citations used to generate a response.
Installation
If you prefer using jsrepo, please install via the command below:
Usage
Usage with AI SDK
Build a simple web search agent with Perplexity Sonar and display the sources used to generate the response.
Add the following component to your frontend:
+page.svelte
Add the following route to your backend:
api/chat/+server.ts
Features
- Collapsible component that allows a user to view the sources or citations used to generate a response
- Customizable trigger and content components
- Support for custom sources or citations
- Responsive design with mobile-friendly controls
- Clean, modern styling with customizable themes
Props
Sources
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the sources container |
children | Snippet | - | Child components (typically SourcesTrigger and SourcesContent) |
...restProps | CollapsibleProps | - | All other Collapsible component props are supported |
SourcesTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
count | number | - | Number of sources to display in the trigger text |
class | string | - | Additional CSS classes to apply to the trigger button |
children | Snippet | - | Custom content to render instead of the default trigger text |
...restProps | CollapsibleTriggerProps | - | All other CollapsibleTrigger component props are supported |
SourcesContent
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the content container |
children | Snippet | - | Source components to display when expanded |
...restProps | CollapsibleContentProps | - | All other CollapsibleContent component props are supported |
Source
| Prop | Type | Default | Description |
|---|---|---|---|
href | string | - | URL of the source (opens in new tab) |
title | string | - | Title/name of the source to display |
class | string | - | Additional CSS classes to apply to the source link |
children | Snippet | - | Custom content to render instead of the default icon and title |
...restProps | HTMLAnchorAttributes | - | All other anchor element props are supported |