AI SDK Component Showcase

Tablet View (768px-1199px)

Actions
Action button groups
Artifact
AI-generated artifacts

Code Output

code
Created: 1/15/2024
Size: 1.0 KB
BracesCodeBlock
Syntax-highlighted code
Example Code
javascript
1const example = () => {
2 console.log('Hello World');
3};
Branch
Conversation branches
Alternative Response Aactive
Canvas
Interactive canvas
0 elements
ChainOfThought
AI reasoning steps
Progress50%

Analyze

Analyze query

Search

Search knowledge

Connection
Connection status

Connection

websocket

Connected

45ms
Context
Context information
Project
system
UI Component Library - for AI SDK
Framework
system
Next.js + React
Controls
Playback controls
0:001:40
Conversation
Conversation thread
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
Link
Image
Image display
AI Generated Concept

AI Visualization

AI visualization

InlineCitation
Source citations
According to research[1], LLMs improve significantly.
Loader
Loading indicators
Processing...
Message
Message display
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
Knowledge graph node
Main Concept
OpenInChat
Open in chat button
Panel
Side panel container

Info Panel

Panel content

Plan
Execution plan
Implementation Plan
50% Complete
1
Setup Phase1 tasks
Phase Progress100%

Initialize

Setup

2
Execution Phase1 tasks
Phase Progress0%

Process

Execute

PromptInput
Prompt input field
Reasoning
AI reasoning process

Reasoning Process

Analyze

Create showcase pages

Evidence:

  • •User request

Plan

Display all components

Evidence:

  • •Component list
Response
AI response display
A

AI Assistant

2024-01-15T10:30:00Z

Sample AI response with formatting.
Shimmer
Loading skeleton
Sources
Reference sources

Sources (2)

Research Paper

article

Docs

documentation
Suggestion
Suggestion chips

Suggestions

2

Try this

tip

Alternative

alternative
Task
Task tracking

Create pages

Build showcase pages

highin progress
Progress60%
Tool
Tool usage display
code
Code Generator
Generate code
Toolbar
Action toolbar
WebPreview
Web content preview

Example Website

Website preview

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

1200 × 800px