Sources

A component that allows a user to view the sources or citations used to generate a response.

The Sources component allows a user to view the sources or citations used to generate a response.

"use client";

import {
  Source,
  Sources,
  SourcesContent,
  SourcesTrigger,
} from "@/components/ai-elements/elements/sources";

const sources = [
  { href: "https://stripe.com/docs/api", title: "Stripe API Documentation" },
  { href: "https://docs.github.com/en/rest", title: "GitHub REST API" },
  {
    href: "https://docs.aws.amazon.com/sdk-for-javascript/",
    title: "AWS SDK for JavaScript",
  },
];

const Example = () => (
  <div style={{ height: "110px" }}>
    <Sources>
      <SourcesTrigger count={sources.length} />
      <SourcesContent>
        {sources.map((source) => (
          <Source href={source.href} key={source.href} title={source.title} />
        ))}
      </SourcesContent>
    </Sources>
  </div>
);

export default Example;

"use client";import {  Source,  Sources,  SourcesContent,  SourcesTrigger,} from "@/components/ai-elements/elements/sources";const sources = [  { href: "https://stripe.com/docs/api", title: "Stripe API Documentation" },  { href: "https://docs.github.com/en/rest", title: "GitHub REST API" },  {    href: "https://docs.aws.amazon.com/sdk-for-javascript/",    title: "AWS SDK for JavaScript",  },];const Example = () => (  <div style={{ height: "110px" }}>    <Sources>      <SourcesTrigger count={sources.length} />      <SourcesContent>        {sources.map((source) => (          <Source href={source.href} key={source.href} title={source.title} />        ))}      </SourcesContent>    </Sources>  </div>);export default Example;

Installation

npx ai-elements@latest add sources

npx ai-elements@latest add sources

npx shadcn@latest add @ai-elements/sources

npx shadcn@latest add @ai-elements/sources

"use client";

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@repo/shadcn-ui/components/ui/collapsible";
import { cn } from "@repo/shadcn-ui/lib/utils";
import { BookIcon, ChevronDownIcon } from "lucide-react";
import type { ComponentProps } from "react";

export type SourcesProps = ComponentProps<"div">;

export const Sources = ({ className, ...props }: SourcesProps) => (
  <Collapsible
    className={cn("not-prose mb-4 text-primary text-xs", className)}
    {...props}
  />
);

export type SourcesTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
  count: number;
};

export const SourcesTrigger = ({
  className,
  count,
  children,
  ...props
}: SourcesTriggerProps) => (
  <CollapsibleTrigger
    className={cn("flex items-center gap-2", className)}
    {...props}
  >
    {children ?? (
      <>
        <p className="font-medium">Used {count} sources</p>
        <ChevronDownIcon className="h-4 w-4" />
      </>
    )}
  </CollapsibleTrigger>
);

export type SourcesContentProps = ComponentProps<typeof CollapsibleContent>;

export const SourcesContent = ({
  className,
  ...props
}: SourcesContentProps) => (
  <CollapsibleContent
    className={cn(
      "mt-3 flex w-fit flex-col gap-2",
      "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
      className
    )}
    {...props}
  />
);

export type SourceProps = ComponentProps<"a">;

export const Source = ({ href, title, children, ...props }: SourceProps) => (
  <a
    className="flex items-center gap-2"
    href={href}
    rel="noreferrer"
    target="_blank"
    {...props}
  >
    {children ?? (
      <>
        <BookIcon className="h-4 w-4" />
        <span className="block font-medium">{title}</span>
      </>
    )}
  </a>
);

"use client";import {  Collapsible,  CollapsibleContent,  CollapsibleTrigger,} from "@repo/shadcn-ui/components/ui/collapsible";import { cn } from "@repo/shadcn-ui/lib/utils";import { BookIcon, ChevronDownIcon } from "lucide-react";import type { ComponentProps } from "react";export type SourcesProps = ComponentProps<"div">;export const Sources = ({ className, ...props }: SourcesProps) => (  <Collapsible    className={cn("not-prose mb-4 text-primary text-xs", className)}    {...props}  />);export type SourcesTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {  count: number;};export const SourcesTrigger = ({  className,  count,  children,  ...props}: SourcesTriggerProps) => (  <CollapsibleTrigger    className={cn("flex items-center gap-2", className)}    {...props}  >    {children ?? (      <>        <p className="font-medium">Used {count} sources</p>        <ChevronDownIcon className="h-4 w-4" />      </>    )}  </CollapsibleTrigger>);export type SourcesContentProps = ComponentProps<typeof CollapsibleContent>;export const SourcesContent = ({  className,  ...props}: SourcesContentProps) => (  <CollapsibleContent    className={cn(      "mt-3 flex w-fit flex-col gap-2",      "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",      className    )}    {...props}  />);export type SourceProps = ComponentProps<"a">;export const Source = ({ href, title, children, ...props }: SourceProps) => (  <a    className="flex items-center gap-2"    href={href}    rel="noreferrer"    target="_blank"    {...props}  >    {children ?? (      <>        <BookIcon className="h-4 w-4" />        <span className="block font-medium">{title}</span>      </>    )}  </a>);

Usage

import {
  Source,
  Sources,
  SourcesContent,
  SourcesTrigger,
} from '@/components/ai-elements/sources';

<Sources>
  <SourcesTrigger count={1} />
  <SourcesContent>
    <Source href="https://ai-sdk.dev" title="AI SDK" />
  </SourcesContent>
</Sources>

Usage with AI SDK

Build a simple web search agent with Perplexity Sonar.

Add the following component to your frontend:

app/page.tsx

'use client';

import { useChat } from '@ai-sdk/react';
import {
  Source,
  Sources,
  SourcesContent,
  SourcesTrigger,
} from '@/components/ai-elements/sources';
import {
  Input,
  PromptInputTextarea,
  PromptInputSubmit,
} from '@/components/ai-elements/prompt-input';
import {
  Conversation,
  ConversationContent,
  ConversationScrollButton,
} from '@/components/ai-elements/conversation';
import { Message, MessageContent } from '@/components/ai-elements/message';
import { Response } from '@/components/ai-elements/response';
import { useState } from 'react';
import { DefaultChatTransport } from 'ai';

const SourceDemo = () => {
  const [input, setInput] = useState('');
  const { messages, sendMessage, status } = useChat({
    transport: new DefaultChatTransport({
      api: '/api/sources',
    }),
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (input.trim()) {
      sendMessage({ text: input });
      setInput('');
    }
  };

  return (
    <div className="max-w-4xl mx-auto p-6 relative size-full rounded-lg border h-[600px]">
      <div className="flex flex-col h-full">
        <div className="flex-1 overflow-auto mb-4">
          <Conversation>
            <ConversationContent>
              {messages.map((message) => (
                <div key={message.id}>
                  {message.role === 'assistant' && (
                    <Sources>
                      <SourcesTrigger
                        count={
                          message.parts.filter(
                            (part) => part.type === 'source-url',
                          ).length
                        }
                      />
                      {message.parts.map((part, i) => {
                        switch (part.type) {
                          case 'source-url':
                            return (
                              <SourcesContent key={`${message.id}-${i}`}>
                                <Source
                                  key={`${message.id}-${i}`}
                                  href={part.url}
                                  title={part.url}
                                />
                              </SourcesContent>
                            );
                        }
                      })}
                    </Sources>
                  )}
                  <Message from={message.role} key={message.id}>
                    <MessageContent>
                      {message.parts.map((part, i) => {
                        switch (part.type) {
                          case 'text':
                            return (
                              <Response key={`${message.id}-${i}`}>
                                {part.text}
                              </Response>
                            );
                          default:
                            return null;
                        }
                      })}
                    </MessageContent>
                  </Message>
                </div>
              ))}
            </ConversationContent>
            <ConversationScrollButton />
          </Conversation>
        </div>

        <Input
          onSubmit={handleSubmit}
          className="mt-4 w-full max-w-2xl mx-auto relative"
        >
          <PromptInputTextarea
            value={input}
            placeholder="Ask a question and search the..."
            onChange={(e) => setInput(e.currentTarget.value)}
            className="pr-12"
          />
          <PromptInputSubmit
            status={status === 'streaming' ? 'streaming' : 'ready'}
            disabled={!input.trim()}
            className="absolute bottom-1 right-1"
          />
        </Input>
      </div>
    </div>
  );
};

export default SourceDemo;

Add the following route to your backend:

api/chat/route.ts

import { convertToModelMessages, streamText, UIMessage } from 'ai';
import { perplexity } from '@ai-sdk/perplexity';

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

export async function POST(req: Request) {
  const { messages }: { messages: UIMessage[] } = await req.json();

  const result = streamText({
    model: 'perplexity/sonar',
    system:
      'You are a helpful assistant. Keep your responses short (< 100 words) unless you are asked for more details. ALWAYS USE SEARCH.',
    messages: convertToModelMessages(messages),
  });

  return result.toUIMessageStreamResponse({
    sendSources: true,
  });
}

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

Examples

Custom rendering

"use client";

import {
  Source,
  Sources,
  SourcesContent,
  SourcesTrigger,
} from "@/components/ai-elements/elements/sources";
import { ChevronDownIcon, ExternalLinkIcon } from "lucide-react";

const sources = [
  { href: "https://stripe.com/docs/api", title: "Stripe API Documentation" },
  { href: "https://docs.github.com/en/rest", title: "GitHub REST API" },
  {
    href: "https://docs.aws.amazon.com/sdk-for-javascript/",
    title: "AWS SDK for JavaScript",
  },
];

const Example = () => (
  <div style={{ height: "110px" }}>
    <Sources>
      <SourcesTrigger count={sources.length}>
        <p className="font-medium">Using {sources.length} citations</p>
        <ChevronDownIcon className="size-4" />
      </SourcesTrigger>
      <SourcesContent>
        {sources.map((source) => (
          <Source href={source.href} key={source.href}>
            {source.title}
            <ExternalLinkIcon className="size-4" />
          </Source>
        ))}
      </SourcesContent>
    </Sources>
  </div>
);

export default Example;

"use client";import {  Source,  Sources,  SourcesContent,  SourcesTrigger,} from "@/components/ai-elements/elements/sources";import { ChevronDownIcon, ExternalLinkIcon } from "lucide-react";const sources = [  { href: "https://stripe.com/docs/api", title: "Stripe API Documentation" },  { href: "https://docs.github.com/en/rest", title: "GitHub REST API" },  {    href: "https://docs.aws.amazon.com/sdk-for-javascript/",    title: "AWS SDK for JavaScript",  },];const Example = () => (  <div style={{ height: "110px" }}>    <Sources>      <SourcesTrigger count={sources.length}>        <p className="font-medium">Using {sources.length} citations</p>        <ChevronDownIcon className="size-4" />      </SourcesTrigger>      <SourcesContent>        {sources.map((source) => (          <Source href={source.href} key={source.href}>            {source.title}            <ExternalLinkIcon className="size-4" />          </Source>        ))}      </SourcesContent>    </Sources>  </div>);export default Example;

Props

`<Sources />`

Prop

Type

`<SourcesTrigger />`

Prop

Type

`<SourcesContent />`

Prop

Type

`<Source />`

Prop

Type

On this page