Initial commit
This commit is contained in:
Zhongwei Li
429
INDEX.md
Normal file
429
INDEX.md
Normal file
@@ -0,0 +1,429 @@
|
||||
# AI Elements Documentation Index
|
||||
|
||||
This index provides a searchable reference for all AI Elements components, examples, and documentation. Use this to quickly locate the right documentation file based on keywords, categories, or related components.
|
||||
|
||||
---
|
||||
|
||||
## Examples
|
||||
|
||||
### Chatbot
|
||||
**File:** `docs/examples/chatbot.md`
|
||||
**Description:** Complete tutorial for building a chatbot with reasoning, sources, model picker, and file attachments
|
||||
**Keywords:** chat, conversation, message, response, reasoning, sources, prompt-input, chatbot, tutorial, complete-example
|
||||
**Category:** Tutorial
|
||||
**Installation:** Multiple components
|
||||
**Related:** message, conversation, response, reasoning, sources, prompt-input, loader, suggestion
|
||||
**Common Use:** Building complete AI chat interfaces with advanced features
|
||||
|
||||
### v0 Clone
|
||||
**File:** `docs/examples/v0.md`
|
||||
**Description:** Create a v0 clone using v0 Platform API with WebPreview component
|
||||
**Keywords:** v0, web-preview, artifact, code-generation, clone, tutorial
|
||||
**Category:** Tutorial
|
||||
**Installation:** Multiple components
|
||||
**Related:** web-preview, artifact, code-block, prompt-input, conversation
|
||||
**Common Use:** Building code generation and preview interfaces
|
||||
|
||||
### Workflow Visualization
|
||||
**File:** `docs/examples/workflow.md`
|
||||
**Description:** Build workflow visualizations with React Flow, custom nodes, and animated edges
|
||||
**Keywords:** workflow, react-flow, canvas, node, edge, visualization, tutorial
|
||||
**Category:** Tutorial
|
||||
**Installation:** Multiple components (requires React Flow)
|
||||
**Related:** canvas, node, edge, connection, toolbar, panel, controls
|
||||
**Common Use:** Creating AI agent workflow visualizations and node-based interfaces
|
||||
|
||||
---
|
||||
|
||||
## Components - Chat & Messaging
|
||||
|
||||
### Message
|
||||
**File:** `docs/components/message.md`
|
||||
**Description:** Core message component with role-based styling for chat interfaces
|
||||
**Keywords:** message, chat, role, user, assistant, system, avatar, conversation-display
|
||||
**Category:** Chat & Messaging
|
||||
**Installation:** `npx ai-elements add message`
|
||||
**Related:** conversation, response, actions, loader
|
||||
**Common Use:** Displaying individual chat messages in conversation interfaces
|
||||
|
||||
### Conversation
|
||||
**File:** `docs/components/conversation.md`
|
||||
**Description:** Chat conversation container with auto-scroll functionality
|
||||
**Keywords:** conversation, chat, container, auto-scroll, messages, chat-container
|
||||
**Category:** Chat & Messaging
|
||||
**Installation:** `npx ai-elements add conversation`
|
||||
**Related:** message, response, loader, prompt-input
|
||||
**Common Use:** Building scrollable chat interfaces with auto-scroll to bottom
|
||||
|
||||
### Response
|
||||
**File:** `docs/components/response.md`
|
||||
**Description:** Markdown response renderer using Streamdown for AI-generated content
|
||||
**Keywords:** response, markdown, streamdown, ai-content, render, formatting
|
||||
**Category:** Chat & Messaging
|
||||
**Installation:** `npx ai-elements add response`
|
||||
**Related:** message, conversation, code-block
|
||||
**Common Use:** Rendering AI-generated markdown responses with proper formatting
|
||||
|
||||
### Loader
|
||||
**File:** `docs/components/loader.md`
|
||||
**Description:** Loading indicators for AI responses with various animation styles
|
||||
**Keywords:** loader, loading, spinner, animation, pending, waiting
|
||||
**Category:** Chat & Messaging
|
||||
**Installation:** `npx ai-elements add loader`
|
||||
**Related:** conversation, message, prompt-input
|
||||
**Common Use:** Showing loading state while AI generates responses
|
||||
|
||||
### Prompt Input
|
||||
**File:** `docs/components/prompt-input.md`
|
||||
**Description:** Rich input component with file attachments, model picker, and action buttons
|
||||
**Keywords:** prompt, input, textarea, file-attachment, model-picker, submit, chat-input
|
||||
**Category:** Chat & Messaging
|
||||
**Installation:** `npx ai-elements add prompt-input`
|
||||
**Related:** conversation, message, suggestion
|
||||
**Common Use:** Building rich chat input interfaces with file uploads and model selection
|
||||
|
||||
### Suggestion
|
||||
**File:** `docs/components/suggestion.md`
|
||||
**Description:** Horizontal row of clickable suggestion chips for quick interactions
|
||||
**Keywords:** suggestion, chips, quick-reply, buttons, prompts, suggestions
|
||||
**Category:** Chat & Messaging
|
||||
**Installation:** `npx ai-elements add suggestion`
|
||||
**Related:** prompt-input, message, conversation
|
||||
**Common Use:** Providing quick action suggestions and starter prompts
|
||||
|
||||
### Actions
|
||||
**File:** `docs/components/actions.md`
|
||||
**Description:** Action buttons for message interactions (copy, retry, regenerate, etc.)
|
||||
**Keywords:** actions, buttons, copy, retry, regenerate, message-actions, toolbar
|
||||
**Category:** Chat & Messaging
|
||||
**Installation:** `npx ai-elements add actions`
|
||||
**Related:** message, conversation, response
|
||||
**Common Use:** Adding copy, retry, and regenerate functionality to messages
|
||||
|
||||
---
|
||||
|
||||
## Components - AI-Specific Features
|
||||
|
||||
### Tool
|
||||
**File:** `docs/components/tool.md`
|
||||
**Description:** Display AI tool invocations with input/output visualization
|
||||
**Keywords:** tool, function-call, invocation, input, output, ai-tools, tool-use
|
||||
**Category:** AI-Specific Features
|
||||
**Installation:** `npx ai-elements add tool`
|
||||
**Related:** message, response, artifact
|
||||
**Common Use:** Showing AI tool/function calls and their results
|
||||
|
||||
### Reasoning
|
||||
**File:** `docs/components/reasoning.md`
|
||||
**Description:** Collapsible component for displaying AI reasoning and chain-of-thought
|
||||
**Keywords:** reasoning, chain-of-thought, thinking, collapsible, ai-reasoning, deepseek
|
||||
**Category:** AI-Specific Features
|
||||
**Installation:** `npx ai-elements add reasoning`
|
||||
**Related:** chain-of-thought, plan, task, message
|
||||
**Common Use:** Displaying AI reasoning process in collapsible format
|
||||
|
||||
### Chain of Thought
|
||||
**File:** `docs/components/chain-of-thought.md`
|
||||
**Description:** Display AI reasoning process step-by-step
|
||||
**Keywords:** chain-of-thought, reasoning, steps, thinking, process, ai-reasoning
|
||||
**Category:** AI-Specific Features
|
||||
**Installation:** `npx ai-elements add chain-of-thought`
|
||||
**Related:** reasoning, plan, task
|
||||
**Common Use:** Showing step-by-step AI reasoning and thought process
|
||||
|
||||
### Plan
|
||||
**File:** `docs/components/plan.md`
|
||||
**Description:** Multi-step plan display with progress tracking and status indicators
|
||||
**Keywords:** plan, steps, progress, status, multi-step, planning, task-list
|
||||
**Category:** AI-Specific Features
|
||||
**Installation:** `npx ai-elements add plan`
|
||||
**Related:** task, queue, chain-of-thought, reasoning
|
||||
**Common Use:** Displaying AI-generated plans with progress tracking
|
||||
|
||||
### Task
|
||||
**File:** `docs/components/task.md`
|
||||
**Description:** Collapsible task lists with file references and progress tracking
|
||||
**Keywords:** task, checklist, progress, files, collapsible, todo, task-tracking
|
||||
**Category:** AI-Specific Features
|
||||
**Installation:** `npx ai-elements add task`
|
||||
**Related:** plan, queue, chain-of-thought
|
||||
**Common Use:** Showing AI task execution with file references
|
||||
|
||||
### Queue
|
||||
**File:** `docs/components/queue.md`
|
||||
**Description:** Task queue visualization for managing AI workflows
|
||||
**Keywords:** queue, tasks, workflow, sequence, pending, processing
|
||||
**Category:** AI-Specific Features
|
||||
**Installation:** `npx ai-elements add queue`
|
||||
**Related:** task, plan, workflow
|
||||
**Common Use:** Visualizing queued AI tasks and workflow sequences
|
||||
|
||||
### Artifact
|
||||
**File:** `docs/components/artifact.md`
|
||||
**Description:** Container for displaying generated artifacts like code, documents, or previews
|
||||
**Keywords:** artifact, container, generated-content, code, document, preview, output
|
||||
**Category:** AI-Specific Features
|
||||
**Installation:** `npx ai-elements add artifact`
|
||||
**Related:** code-block, web-preview, tool
|
||||
**Common Use:** Displaying AI-generated artifacts and outputs
|
||||
|
||||
---
|
||||
|
||||
## Components - Workflow & Canvas
|
||||
|
||||
### Canvas
|
||||
**File:** `docs/components/canvas.md`
|
||||
**Description:** React Flow canvas wrapper for workflow visualizations
|
||||
**Keywords:** canvas, react-flow, workflow, visualization, nodes, edges, graph
|
||||
**Category:** Workflow & Canvas
|
||||
**Installation:** `npx ai-elements add canvas` (requires React Flow)
|
||||
**Related:** node, edge, connection, toolbar, panel, controls
|
||||
**Common Use:** Creating node-based workflow visualizations
|
||||
|
||||
### Node
|
||||
**File:** `docs/components/node.md`
|
||||
**Description:** Custom workflow nodes with headers, content, and footers
|
||||
**Keywords:** node, workflow, custom-node, react-flow, graph-node
|
||||
**Category:** Workflow & Canvas
|
||||
**Installation:** `npx ai-elements add node`
|
||||
**Related:** canvas, edge, toolbar, connection
|
||||
**Common Use:** Building custom nodes for workflow visualizations
|
||||
|
||||
### Edge
|
||||
**File:** `docs/components/edge.md`
|
||||
**Description:** Animated and temporary edge types for workflow connections
|
||||
**Keywords:** edge, connection, animated, temporary, react-flow, workflow-edge
|
||||
**Category:** Workflow & Canvas
|
||||
**Installation:** `npx ai-elements add edge`
|
||||
**Related:** canvas, node, connection
|
||||
**Common Use:** Creating animated connections between workflow nodes
|
||||
|
||||
### Connection
|
||||
**File:** `docs/components/connection.md`
|
||||
**Description:** Custom connection lines for React Flow graphs
|
||||
**Keywords:** connection, line, react-flow, connecting, workflow
|
||||
**Category:** Workflow & Canvas
|
||||
**Installation:** `npx ai-elements add connection`
|
||||
**Related:** canvas, node, edge
|
||||
**Common Use:** Customizing connection appearance in workflows
|
||||
|
||||
### Toolbar
|
||||
**File:** `docs/components/toolbar.md`
|
||||
**Description:** Node toolbar for React Flow with action buttons
|
||||
**Keywords:** toolbar, actions, node-toolbar, react-flow, buttons
|
||||
**Category:** Workflow & Canvas
|
||||
**Installation:** `npx ai-elements add toolbar`
|
||||
**Related:** canvas, node, panel
|
||||
**Common Use:** Adding action toolbars to workflow nodes
|
||||
|
||||
### Panel
|
||||
**File:** `docs/components/panel.md`
|
||||
**Description:** Positioned panels for canvas overlays and controls
|
||||
**Keywords:** panel, overlay, positioned, react-flow, controls
|
||||
**Category:** Workflow & Canvas
|
||||
**Installation:** `npx ai-elements add panel`
|
||||
**Related:** canvas, controls, toolbar
|
||||
**Common Use:** Creating overlay panels on workflow canvases
|
||||
|
||||
### Controls
|
||||
**File:** `docs/components/controls.md`
|
||||
**Description:** Canvas control buttons for zoom, fit view, and navigation
|
||||
**Keywords:** controls, zoom, fit-view, navigation, react-flow, canvas-controls
|
||||
**Category:** Workflow & Canvas
|
||||
**Installation:** `npx ai-elements add controls`
|
||||
**Related:** canvas, panel
|
||||
**Common Use:** Adding zoom and navigation controls to canvas
|
||||
|
||||
---
|
||||
|
||||
## Components - UI Enhancements
|
||||
|
||||
### Code Block
|
||||
**File:** `docs/components/code-block.md`
|
||||
**Description:** Syntax-highlighted code blocks with copy functionality
|
||||
**Keywords:** code-block, syntax-highlighting, copy, code, programming, snippet
|
||||
**Category:** UI Enhancements
|
||||
**Installation:** `npx ai-elements add code-block`
|
||||
**Related:** response, artifact, tool
|
||||
**Common Use:** Displaying formatted code with syntax highlighting
|
||||
|
||||
### Image
|
||||
**File:** `docs/components/image.md`
|
||||
**Description:** Image display component with error handling
|
||||
**Keywords:** image, picture, display, error-handling, media
|
||||
**Category:** UI Enhancements
|
||||
**Installation:** `npx ai-elements add image`
|
||||
**Related:** message, response, artifact
|
||||
**Common Use:** Displaying images with graceful error handling
|
||||
|
||||
### Sources
|
||||
**File:** `docs/components/sources.md`
|
||||
**Description:** Collapsible source and citation list for AI responses
|
||||
**Keywords:** sources, citations, references, collapsible, rag, retrieval
|
||||
**Category:** UI Enhancements
|
||||
**Installation:** `npx ai-elements add sources`
|
||||
**Related:** inline-citation, message, response
|
||||
**Common Use:** Showing sources and citations for AI-generated content
|
||||
|
||||
### Inline Citation
|
||||
**File:** `docs/components/inline-citation.md`
|
||||
**Description:** Inline source citations with hover previews
|
||||
**Keywords:** citation, inline, hover, preview, reference, sources
|
||||
**Category:** UI Enhancements
|
||||
**Installation:** `npx ai-elements add inline-citation`
|
||||
**Related:** sources, response, message
|
||||
**Common Use:** Adding inline citations with hover previews to text
|
||||
|
||||
### Web Preview
|
||||
**File:** `docs/components/web-preview.md`
|
||||
**Description:** Iframe component for displaying web previews
|
||||
**Keywords:** web-preview, iframe, preview, web, html, render
|
||||
**Category:** UI Enhancements
|
||||
**Installation:** `npx ai-elements add web-preview`
|
||||
**Related:** artifact, code-block
|
||||
**Common Use:** Previewing generated HTML and web content
|
||||
|
||||
### Shimmer
|
||||
**File:** `docs/components/shimmer.md`
|
||||
**Description:** Animated shimmer effect for loading states
|
||||
**Keywords:** shimmer, loading, skeleton, animation, placeholder
|
||||
**Category:** UI Enhancements
|
||||
**Installation:** `npx ai-elements add shimmer`
|
||||
**Related:** loader, message
|
||||
**Common Use:** Creating skeleton loading states with shimmer effect
|
||||
|
||||
### Open in Chat
|
||||
**File:** `docs/components/open-in-chat.md`
|
||||
**Description:** Button to open content in chat interface
|
||||
**Keywords:** open-in-chat, button, navigation, chat, action
|
||||
**Category:** UI Enhancements
|
||||
**Installation:** `npx ai-elements add open-in-chat`
|
||||
**Related:** conversation, message, prompt-input
|
||||
**Common Use:** Adding buttons to open content in chat interface
|
||||
|
||||
### Context
|
||||
**File:** `docs/components/context.md`
|
||||
**Description:** Context menu system for conversations
|
||||
**Keywords:** context-menu, menu, right-click, actions, conversation
|
||||
**Category:** UI Enhancements
|
||||
**Installation:** `npx ai-elements add context`
|
||||
**Related:** message, conversation, actions
|
||||
**Common Use:** Adding context menus to conversation elements
|
||||
|
||||
### Confirmation
|
||||
**File:** `docs/components/confirmation.md`
|
||||
**Description:** User approval flow for sensitive AI operations
|
||||
**Keywords:** confirmation, approval, dialog, user-confirmation, sensitive, permission
|
||||
**Category:** UI Enhancements
|
||||
**Installation:** `npx ai-elements add confirmation`
|
||||
**Related:** message, tool, actions
|
||||
**Common Use:** Requesting user approval for sensitive AI actions
|
||||
|
||||
### Branch
|
||||
**File:** `docs/components/branch.md`
|
||||
**Description:** Multi-version message branches with navigation
|
||||
**Keywords:** branch, versions, multi-version, navigation, conversation-branch, alternatives
|
||||
**Category:** UI Enhancements
|
||||
**Installation:** `npx ai-elements add branch`
|
||||
**Related:** message, conversation, actions
|
||||
**Common Use:** Managing multiple conversation branches and alternatives
|
||||
|
||||
---
|
||||
|
||||
## General Documentation
|
||||
|
||||
### README
|
||||
**File:** `docs/README.md`
|
||||
**Description:** Overview of AI Elements library with component categories and installation methods
|
||||
**Keywords:** overview, introduction, component-list, categories, getting-started
|
||||
**Related:** introduction, usage
|
||||
|
||||
### Introduction
|
||||
**File:** `docs/introduction.md`
|
||||
**Description:** Getting started guide with installation, prerequisites, and library overview
|
||||
**Keywords:** introduction, installation, setup, prerequisites, getting-started, quickstart
|
||||
**Related:** README, usage, troubleshooting
|
||||
|
||||
### Usage
|
||||
**File:** `docs/usage.md`
|
||||
**Description:** Implementation patterns and customization examples for AI Elements
|
||||
**Keywords:** usage, patterns, customization, implementation, examples, how-to
|
||||
**Related:** introduction, troubleshooting
|
||||
|
||||
### Troubleshooting
|
||||
**File:** `docs/troubleshooting.md`
|
||||
**Description:** Common issues and solutions for AI Elements
|
||||
**Keywords:** troubleshooting, issues, problems, solutions, errors, debugging, help
|
||||
**Related:** introduction, usage
|
||||
|
||||
---
|
||||
|
||||
## Component Categories Summary
|
||||
|
||||
### By Use Case
|
||||
|
||||
**Building Chat Interfaces:**
|
||||
- Message, Conversation, Response, Loader, Prompt Input, Suggestion, Actions
|
||||
|
||||
**Displaying AI Reasoning:**
|
||||
- Reasoning, Chain of Thought, Plan, Task, Tool, Queue
|
||||
|
||||
**Creating Workflows:**
|
||||
- Canvas, Node, Edge, Connection, Toolbar, Panel, Controls
|
||||
|
||||
**Enhancing Content:**
|
||||
- Code Block, Image, Sources, Inline Citation, Web Preview, Artifact, Shimmer
|
||||
|
||||
**User Interactions:**
|
||||
- Confirmation, Actions, Suggestion, Open in Chat, Context, Branch
|
||||
|
||||
---
|
||||
|
||||
## Common Component Pairings
|
||||
|
||||
These components are frequently used together:
|
||||
|
||||
- **Chat Interface:** Message + Conversation + Response + Prompt Input + Loader
|
||||
- **AI Reasoning Display:** Reasoning + Chain of Thought + Plan + Task
|
||||
- **Workflow Visualization:** Canvas + Node + Edge + Toolbar + Controls
|
||||
- **Code Generation:** Artifact + Code Block + Web Preview + Response
|
||||
- **Citations & Sources:** Sources + Inline Citation + Response
|
||||
- **Rich Messages:** Message + Response + Code Block + Tool + Reasoning
|
||||
- **Complete Chatbot:** See chatbot example for full integration
|
||||
|
||||
---
|
||||
|
||||
## Prerequisites
|
||||
|
||||
All AI Elements components require:
|
||||
- Node.js 18 or later
|
||||
- Next.js project
|
||||
- AI SDK installed
|
||||
- shadcn/ui installed
|
||||
|
||||
**Additional for Workflow Components:**
|
||||
- React Flow library (for Canvas, Node, Edge, Connection, Toolbar, Panel, Controls)
|
||||
|
||||
---
|
||||
|
||||
## Installation Quick Reference
|
||||
|
||||
**Single component:**
|
||||
```bash
|
||||
npx ai-elements add [component-name]
|
||||
```
|
||||
|
||||
**Multiple components:**
|
||||
```bash
|
||||
npx ai-elements add message conversation response
|
||||
```
|
||||
|
||||
**All components:**
|
||||
```bash
|
||||
npx ai-elements add @ai-elements/all
|
||||
```
|
||||
|
||||
**Using shadcn CLI:**
|
||||
```bash
|
||||
npx shadcn@latest add @ai-elements/[component-name]
|
||||
```
|
||||
Reference in New Issue
Block a user