AI SDK Component Showcase

Desktop View (1200px+)

Actions
Action button groups with various layouts and states
Artifact
Display AI-generated artifacts and outputs

Sample Code Output

code
Created: 1/15/2024
Size: 1.0 KB
BracesCodeBlock
Syntax-highlighted code blocks with braces
Example Code
javascript
1const example = () => {
2 console.log('Hello World');
3};
Branch
Conversation branch visualization
Alternative Response Aactive
Canvas
Interactive canvas for visualizations
0 elements
ChainOfThought
Display AI reasoning process step-by-step
Progress67%

Analyze Query

Analyze the user query

Search

Search knowledge base

Generate

Generate response

Connection
Network connection status indicator

Connection

websocket

Connected

45ms
Context
Display conversation context information
Project
system
UI Component Library - for AI SDK
Framework
system
Next.js + React
Language
code
TypeScript
Controls
Media-style playback controls
0:001:40
Conversation
Full conversation thread display
Conversation
AI-powered conversation interface
Hello! I'm here to help you with your AI SDK development. What would you like to work on today?
10:30 AM
I need help creating a comprehensive storybook for AI SDK components. Can you guide me through the process?
10:31 AM
Edge
Graph edge connector for visualization
Connection
Image
AI-generated or referenced image display
AI Generated Concept

AI Visualization

Example AI visualization

Dimensions:
400 × 300
Format:
JPEG
InlineCitation
Inline source citations in text
According to recent research[1], large language models show significant improvements.
Loader
Loading states and spinners
Processing your request...
Message
Individual message display with rich features
AI Assistant
10:30 AM
Hello! I'm here to help you with your AI SDK development. What would you like to work on today?
Node
Graph node for knowledge visualization
Main Concept
OpenInChat
Button to open content in chat interface
Panel
Collapsible side panel container

Information Panel

Panel content goes here

Plan (Timeline)
Display execution plan or strategy
Project Implementation Plan
33% Complete
1
Setup Phase1 tasks
completed
Phase Progress100%

Initialize

high

Set up environment

2
Execution Phase1 tasks
in-progress
Phase Progress0%

Process

high

Execute main logic

3
Completion Phase1 tasks
not-started
Phase Progress0%

Finalize

medium

Clean up and return

Plan (Kanban)
Kanban board view of project plan
Project Implementation Plan
33% Complete

To Do

1

Finalize

medium

In Progress

1

Process

high

Done

1

Initialize

high

Blocked

0
Plan (List)
List view of project plan
Project Implementation Plan
33% Complete

Setup Phase

1 tasks
Initializehigh

Set up environment

Execution Phase

1 tasks
Processhigh

Execute main logic

Completion Phase

1 tasks
Finalizemedium

Clean up and return

PromptInput
Advanced prompt input with features
Shortcuts:Ctrl+Enter: SendCtrl+K: Search history
Reasoning
Display AI reasoning and thought process

Reasoning Process

Analyze Request

User wants to create showcase pages

Evidence:

  • •User message
  • •Context analysis

Plan Components

Need to display all components

Evidence:

  • •Component inventory

Organize Layout

Should organize by device type

Evidence:

  • •UX best practices
Response
Formatted AI response display
A

AI Assistant

2024-01-15T10:30:00Z

This is a sample AI response with rich formatting and metadata support.
Shimmer
Loading skeleton with shimmer effect
Sources
Display reference sources used

Sources (2)

AI Research Paper

article

Documentation

documentation
Suggestion
Interactive suggestion chips

Suggestions

2

Try this approach

tip

Consider this alternative

alternative
Task
Task item with status tracking

Create showcase pages

Build desktop, tablet, and mobile showcase pages

highin progress
Progress60%
Tool
Tool usage display and status
code
Code Generator
Generates code based on specifications
Toolbar
Action toolbar with grouped buttons
WebPreview
Preview of web content or links

Example Website

A sample website preview component

desktop
https://example.com
Open
https://example.com

1200 × 800px