zhongwei/gh-nathanonn-claude-skills-ai-elements-claude-skills-ai-elements
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Zhongwei Li
2025-11-30 08:41:51 +08:00
commit 43ed648a28
43 changed files with 8444 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

219
docs/components/sources.md Normal file
View File

@@ -0,0 +1,219 @@
# Sources
URL: /components/sources
---
title: Sources
description: A component that allows a user to view the sources or citations used to generate a response.
path: elements/components/sources
---
The `Sources` component allows a user to view the sources or citations used to generate a response.
<Preview path="sources" />
## Installation
<ElementsInstaller path="sources" />
## Usage
```tsx
import { Source, Sources, SourcesContent, SourcesTrigger } from "@/components/ai-elements/sources";
```
```tsx
<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:
```tsx title="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:
```tsx title="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
<Preview path="sources-custom" />
## Props
### `<Sources />`
<TypeTable
type={{
'...props': {
description: 'Any other props are spread to the root div.',
type: 'React.HTMLAttributes<HTMLDivElement>',
},
}}
/>
### `<SourcesTrigger />`
<TypeTable
type={{
count: {
description: 'The number of sources to display in the trigger.',
type: 'number',
},
'...props': {
description: 'Any other props are spread to the trigger button.',
type: 'React.ButtonHTMLAttributes<HTMLButtonElement>',
},
}}
/>
### `<SourcesContent />`
<TypeTable
type={{
'...props': {
description: 'Any other props are spread to the content container.',
type: 'React.HTMLAttributes<HTMLDivElement>',
},
}}
/>
### `<Source />`
<TypeTable
type={{
'...props': {
description: 'Any other props are spread to the anchor element.',
type: 'React.AnchorHTMLAttributes<HTMLAnchorElement>',
},
}}
/>