Skip to content

Commit 632c93d

Browse files
haydenbleaselhaydenbleasel
committed
Remove redundant usage in docs
1 parent 29c2d43 commit 632c93d

32 files changed

+0
-801
lines changed

‎apps/docs/content/docs/components/(chatbot)/actions.mdx‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -12,21 +12,6 @@ The `Actions` component provides a flexible row of action buttons for AI respons
1212

1313
<ElementsInstaller path="actions" />
1414

15-
## Usage
16-
17-
```tsx
18-
import { Actions, Action } from '@/components/ai-elements/actions';
19-
import { ThumbsUpIcon } from 'lucide-react';
20-
```
21-
22-
```tsx
23-
<Actions className="mt-2">
24-
<Action label="Like">
25-
<ThumbsUpIcon className="size-4" />
26-
</Action>
27-
</Actions>
28-
```
29-
3015
## Usage with AI SDK
3116

3217
Build a simple chat UI where the user can copy or regenerate the most recent message.

‎apps/docs/content/docs/components/(chatbot)/branch.mdx‎

Lines changed: 0 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -12,37 +12,6 @@ The `Branch` component manages multiple versions of AI messages, allowing users
1212

1313
<ElementsInstaller path="branch" />
1414

15-
## Usage
16-
17-
```tsx
18-
import {
19-
Branch,
20-
BranchMessages,
21-
BranchNext,
22-
BranchPage,
23-
BranchPrevious,
24-
BranchSelector,
25-
} from '@/components/ai-elements/branch';
26-
```
27-
28-
```tsx
29-
<Branch defaultBranch={0}>
30-
<BranchMessages>
31-
<Message from="user">
32-
<MessageContent>Hello</MessageContent>
33-
</Message>
34-
<Message from="user">
35-
<MessageContent>Hi!</MessageContent>
36-
</Message>
37-
</BranchMessages>
38-
<BranchSelector from="user">
39-
<BranchPrevious />
40-
<BranchPage />
41-
<BranchNext />
42-
</BranchSelector>
43-
</Branch>
44-
```
45-
4615
## Usage with AI SDK
4716

4817
<Callout>

‎apps/docs/content/docs/components/(chatbot)/chain-of-thought.mdx‎

Lines changed: 0 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -12,39 +12,6 @@ The `ChainOfThought` component provides a visual representation of an AI's reaso
1212

1313
<ElementsInstaller path="chain-of-thought" />
1414

15-
## Usage
16-
17-
```tsx
18-
import {
19-
ChainOfThought,
20-
ChainOfThoughtContent,
21-
ChainOfThoughtHeader,
22-
ChainOfThoughtImage,
23-
ChainOfThoughtSearchResult,
24-
ChainOfThoughtSearchResults,
25-
ChainOfThoughtStep,
26-
} from '@/components/ai-elements/chain-of-thought';
27-
```
28-
29-
```tsx
30-
<ChainOfThought defaultOpen>
31-
<ChainOfThoughtHeader />
32-
<ChainOfThoughtContent>
33-
<ChainOfThoughtStep
34-
icon={SearchIcon}
35-
label="Searching for information"
36-
status="complete"
37-
>
38-
<ChainOfThoughtSearchResults>
39-
<ChainOfThoughtSearchResult>
40-
Result 1
41-
</ChainOfThoughtSearchResult>
42-
</ChainOfThoughtSearchResults>
43-
</ChainOfThoughtStep>
44-
</ChainOfThoughtContent>
45-
</ChainOfThought>
46-
```
47-
4815
## Features
4916

5017
- Collapsible interface with smooth animations powered by Radix UI

‎apps/docs/content/docs/components/(chatbot)/confirmation.mdx‎

Lines changed: 0 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -12,46 +12,6 @@ The `Confirmation` component provides a flexible system for displaying tool appr
1212

1313
<ElementsInstaller path="confirmation" />
1414

15-
## Usage
16-
17-
```tsx
18-
import {
19-
Confirmation,
20-
ConfirmationContent,
21-
ConfirmationRequest,
22-
ConfirmationAccepted,
23-
ConfirmationRejected,
24-
ConfirmationActions,
25-
ConfirmationAction,
26-
} from '@/components/ai-elements/confirmation';
27-
```
28-
29-
```tsx
30-
<Confirmation approval={{ id: 'tool-1' }} state="approval-requested">
31-
<ConfirmationContent>
32-
<ConfirmationRequest>
33-
This tool wants to access your file system. Do you approve?
34-
</ConfirmationRequest>
35-
<ConfirmationAccepted>
36-
<CheckIcon className="size-4" />
37-
<span>Approved</span>
38-
</ConfirmationAccepted>
39-
<ConfirmationRejected>
40-
<XIcon className="size-4" />
41-
<span>Rejected</span>
42-
</ConfirmationRejected>
43-
</ConfirmationContent>
44-
<ConfirmationActions>
45-
<ConfirmationAction variant="outline" onClick={handleReject}>
46-
Reject
47-
</ConfirmationAction>
48-
<ConfirmationAction variant="default" onClick={handleApprove}>
49-
Approve
50-
</ConfirmationAction>
51-
</ConfirmationActions>
52-
</Confirmation>
53-
```
54-
5515
## Usage with AI SDK
5616

5717
Build a chat UI with tool approval workflow where dangerous tools require user confirmation before execution.

‎apps/docs/content/docs/components/(chatbot)/context.mdx‎

Lines changed: 0 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -12,50 +12,6 @@ The `Context` component provides a comprehensive view of AI model usage through
1212

1313
<ElementsInstaller path="context" />
1414

15-
## Usage
16-
17-
```tsx
18-
import {
19-
Context,
20-
ContextTrigger,
21-
ContextContent,
22-
ContextContentHeader,
23-
ContextContentBody,
24-
ContextContentFooter,
25-
ContextInputUsage,
26-
ContextOutputUsage,
27-
ContextReasoningUsage,
28-
ContextCacheUsage,
29-
} from '@/components/ai-elements/context';
30-
```
31-
32-
```tsx
33-
<Context
34-
maxTokens={128000}
35-
usedTokens={40000}
36-
usage={{
37-
inputTokens: 32000,
38-
outputTokens: 8000,
39-
totalTokens: 40000,
40-
cachedInputTokens: 0,
41-
reasoningTokens: 0,
42-
}}
43-
modelId="openai:gpt-4"
44-
>
45-
<ContextTrigger />
46-
<ContextContent>
47-
<ContextContentHeader />
48-
<ContextContentBody>
49-
<ContextInputUsage />
50-
<ContextOutputUsage />
51-
<ContextReasoningUsage />
52-
<ContextCacheUsage />
53-
</ContextContentBody>
54-
<ContextContentFooter />
55-
</ContextContent>
56-
</Context>
57-
```
58-
5915
## Features
6016

6117
- **Compound Component Architecture**: Flexible composition of context display elements

‎apps/docs/content/docs/components/(chatbot)/conversation.mdx‎

Lines changed: 0 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -12,38 +12,6 @@ The `Conversation` component wraps messages and automatically scrolls to the bot
1212

1313
<ElementsInstaller path="conversation" />
1414

15-
## Usage
16-
17-
```tsx
18-
import {
19-
Conversation,
20-
ConversationContent,
21-
ConversationEmptyState,
22-
ConversationScrollButton,
23-
} from '@/components/ai-elements/conversation';
24-
```
25-
26-
```tsx
27-
<Conversation className="relative w-full" style={{ height: '500px' }}>
28-
<ConversationContent>
29-
{messages.length === 0 ? (
30-
<ConversationEmptyState
31-
icon={<MessageSquare className="size-12" />}
32-
title="No messages yet"
33-
description="Start a conversation to see messages here"
34-
/>
35-
) : (
36-
messages.map((message) => (
37-
<Message from={message.from} key={message.id}>
38-
<MessageContent>{message.content}</MessageContent>
39-
</Message>
40-
))
41-
)}
42-
</ConversationContent>
43-
<ConversationScrollButton />
44-
</Conversation>
45-
```
46-
4715
## Usage with AI SDK
4816

4917
Build a simple conversational UI with `Conversation` and [`PromptInput`](/components/prompt-input):

‎apps/docs/content/docs/components/(chatbot)/inline-citation.mdx‎

Lines changed: 0 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -12,51 +12,6 @@ The `InlineCitation` component provides a way to display citations inline with t
1212

1313
<ElementsInstaller path="inline-citation" />
1414

15-
## Usage
16-
17-
```tsx
18-
import {
19-
InlineCitation,
20-
InlineCitationCard,
21-
InlineCitationCardBody,
22-
InlineCitationCardTrigger,
23-
InlineCitationCarousel,
24-
InlineCitationCarouselContent,
25-
InlineCitationCarouselItem,
26-
InlineCitationCarouselHeader,
27-
InlineCitationCarouselIndex,
28-
InlineCitationSource,
29-
InlineCitationText,
30-
} from '@/components/ai-elements/inline-citation';
31-
```
32-
33-
```tsx
34-
<InlineCitation>
35-
<InlineCitationText>{citation.text}</InlineCitationText>
36-
<InlineCitationCard>
37-
<InlineCitationCardTrigger
38-
sources={citation.sources.map((source) => source.url)}
39-
/>
40-
<InlineCitationCardBody>
41-
<InlineCitationCarousel>
42-
<InlineCitationCarouselHeader>
43-
<InlineCitationCarouselIndex />
44-
</InlineCitationCarouselHeader>
45-
<InlineCitationCarouselContent>
46-
<InlineCitationCarouselItem>
47-
<InlineCitationSource
48-
title="AI SDK"
49-
url="https://ai-sdk.dev"
50-
description="The AI Toolkit for TypeScript"
51-
/>
52-
</InlineCitationCarouselItem>
53-
</InlineCitationCarouselContent>
54-
</InlineCitationCarousel>
55-
</InlineCitationCardBody>
56-
</InlineCitationCard>
57-
</InlineCitation>
58-
```
59-
6015
## Usage with AI SDK
6116

6217
Build citations for AI-generated content using [`experimental_generateObject`](/docs/reference/ai-sdk-ui/use-object).

‎apps/docs/content/docs/components/(chatbot)/message.mdx‎

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -12,24 +12,6 @@ The `Message` component displays a chat interface message from either a user or
1212

1313
<ElementsInstaller path="message" />
1414

15-
## Usage
16-
17-
```tsx
18-
import { Message, MessageContent } from '@/components/ai-elements/message';
19-
```
20-
21-
```tsx
22-
// Default contained variant
23-
<Message from="user">
24-
<MessageContent>Hi there!</MessageContent>
25-
</Message>
26-
27-
// Flat variant for a minimalist look
28-
<Message from="assistant">
29-
<MessageContent variant="flat">Hello! How can I help you today?</MessageContent>
30-
</Message>
31-
```
32-
3315
## Usage with AI SDK
3416

3517
Render messages in a list with `useChat`.

‎apps/docs/content/docs/components/(chatbot)/model-selector.mdx‎

Lines changed: 0 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -12,44 +12,6 @@ The `ModelSelector` component provides a searchable command palette interface fo
1212

1313
<ElementsInstaller path="model-selector" />
1414

15-
## Usage
16-
17-
```tsx
18-
import {
19-
ModelSelector,
20-
ModelSelectorDialog,
21-
ModelSelectorEmpty,
22-
ModelSelectorGroup,
23-
ModelSelectorInput,
24-
ModelSelectorItem,
25-
ModelSelectorList,
26-
ModelSelectorSeparator,
27-
ModelSelectorShortcut,
28-
} from '@/components/ai-elements/model-selector';
29-
```
30-
31-
```tsx
32-
<ModelSelector>
33-
<ModelSelectorInput placeholder="Search models..." />
34-
<ModelSelectorList>
35-
<ModelSelectorEmpty>No models found.</ModelSelectorEmpty>
36-
<ModelSelectorGroup heading="OpenAI">
37-
<ModelSelectorItem value="gpt-4o">GPT-4o</ModelSelectorItem>
38-
<ModelSelectorItem value="gpt-4o-mini">GPT-4o Mini</ModelSelectorItem>
39-
</ModelSelectorGroup>
40-
<ModelSelectorSeparator />
41-
<ModelSelectorGroup heading="Anthropic">
42-
<ModelSelectorItem value="claude-opus-4-20250514">
43-
Claude 4 Opus
44-
</ModelSelectorItem>
45-
<ModelSelectorItem value="claude-sonnet-4-20250514">
46-
Claude 4 Sonnet
47-
</ModelSelectorItem>
48-
</ModelSelectorGroup>
49-
</ModelSelectorList>
50-
</ModelSelector>
51-
```
52-
5315
## Features
5416

5517
- Searchable interface with keyboard navigation

‎apps/docs/content/docs/components/(chatbot)/open-in-chat.mdx‎

Lines changed: 0 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -12,36 +12,6 @@ The `OpenIn` component provides a dropdown menu that allows users to open querie
1212

1313
<ElementsInstaller path="open-in-chat" />
1414

15-
## Usage
16-
17-
```tsx
18-
import {
19-
OpenIn,
20-
OpenInChatGPT,
21-
OpenInClaude,
22-
OpenInContent,
23-
OpenInCursor,
24-
OpenInScira,
25-
OpenInT3,
26-
OpenInTrigger,
27-
OpenInv0,
28-
} from '@/components/ai-elements/open-in-chat';
29-
```
30-
31-
```tsx
32-
<OpenIn query="How can I implement authentication in Next.js?">
33-
<OpenInTrigger />
34-
<OpenInContent>
35-
<OpenInChatGPT />
36-
<OpenInClaude />
37-
<OpenInT3 />
38-
<OpenInScira />
39-
<OpenInv0 />
40-
<OpenInCursor />
41-
</OpenInContent>
42-
</OpenIn>
43-
```
44-
4515
## Features
4616

4717
- Pre-configured links to popular AI chat platforms

0 commit comments

Comments
 (0)