SoloKitSoloKit

AI Elements

Component Library for AI Interfaces

14 components

Conversation

Container with auto-scroll and scroll-to-bottom button

Conversation Container
What is React Server Components?

React Server Components (RSC) is a new paradigm in React that allows components to be rendered on the server. This reduces the JavaScript bundle sent to the client and enables direct access to server-side resources.

Key benefits include:

  • Zero bundle size for server components
  • Direct database/filesystem access
  • Automatic code splitting
  • Streaming with Suspense for progressive rendering
How does it compare to SSR?

While SSR renders the full page on each request and hydrates on the client, RSC renders individual components on the server without hydration. This means server components never ship JavaScript to the client.

Message

User and assistant message bubbles with actions

User & Assistant Messages
03/01/2026, 17:14
Help me analyze the SEO performance of my website.
03/01/2026, 17:14

I'll analyze your website's SEO performance. Here are the key metrics I found:

  • Domain Authority: 45/100
  • Organic Traffic: 12,500 visits/month
  • Indexed Pages: 342

Data Card

Collapsible cards with multiple variants for different data types

Card Variants
Default Carddefault
Variant: default
Info Cardinfo
Variant: info

This is the content area of the info data card. It supports rich content and is collapsible.

Success Cardsuccess
Variant: success
Warning Cardwarning
Variant: warning
Error Carderror
Variant: error
Thinking Cardthinking
Variant: thinking
Intent Cardintent
Variant: intent
Plan Cardplan
Variant: plan
Report Cardreport
Variant: report
Task Cardtask
Variant: task
Team Cardteam
Variant: team

Tool Invocation

Timeline-based tool execution display with status indicators

Tool Invocation Timeline
输入参数
{
  "query": "Next.js performance optimization",
  "limit": 10
}
执行结果
Found 10 relevant results for "Next.js performance optimization"
Tool States
执行结果
State: input-streaming
执行结果
State: input-available
执行结果
State: output-available
执行错误
Connection timeout after 30s

Loader

Loading states, skeletons, and streaming cursor

Loader Variants
Dots
Loading...
Typing
AI is typing
Spinner
Processing...
Pulse
Thinking...
Skeleton & Streaming Cursor
Skeleton (3 lines)
Skeleton (5 lines)
Streaming Cursor

The AI is generating a response

Loader Sizes
Small
Medium
Large

Reasoning

Collapsible thinking/reasoning display for AI models

Reasoning States
The user is asking about SEO optimization. Let me analyze the key factors: 1. Technical SEO - site speed, mobile responsiveness, structured data 2. Content quality - relevance, depth, freshness 3. Backlink profile - authority, diversity, relevance I should provide actionable recommendations based on these factors.
Processing the website data and comparing against industry benchmarks...

Sources

Citation and source reference components

Sources Panel
Next.js Documentation

The official Next.js documentation with guides and API reference.

nextjs.org
React Learn

Interactive tutorials and documentation for React.

react.dev
Vercel AI SDK 4.0

Announcement of the new AI SDK with enhanced streaming support.

vercel.com
Source Badge

React Server Components1 improve performance by reducing client-side JavaScript2 while maintaining the component model developers love3.

Suggestions

Suggestion cards and quick-action prompts

Suggestions Card
Follow-up Questions
Quick Suggestions Grid

Code Block

Syntax-highlighted code display with copy and download

Code Block with Line Numbers
LoadingState.tsxtsx
1import { Shimmer } from "@/lib/chatbot";
2 
3export function LoadingState() {
4  return (
5    <div className="flex items-center gap-2">
6      <Shimmer duration={2}>
7        Loading content...
8      </Shimmer>
9    </div>
10  );
11}
Inline Code

Use the Shimmer component for loading states and Typewriter for text animation effects. Import them from @/lib/chatbot.

Web Preview

Link preview cards with OG image support

Web Preview Card
Next.js by Vercel - The React Framework
nextjs.org

Next.js by Vercel - The React Framework

Next.js enables you to create high-quality web applications with the power of React components.

https://nextjs.org
vercel.com

Vercel AI SDK

Build AI-powered applications with React, Next.js, and the Vercel AI SDK.

https://vercel.com/ai
Compact Web Preview
React DocumentationTailwind CSSTypeScript

Shimmer

Animated text shimmer effect for loading states

Shimmer Variants
Default (duration: 2s)

Generating your SEO report...

Fast (duration: 1s)

Analyzing keywords...

Slow (duration: 4s)

Processing large dataset, please wait...

As heading (as="h2")

Loading Dashboard

Typewriter

Character-by-character text reveal animation

Typewriter Effect
Default speed (30ms)
|
Fast speed (10ms)
|

Actions

Message action bar with copy, like/dislike, share, stop/reload

Action Variants
Default (hover to show)

Hover over this area to reveal the actions bar.

Loading state (always visible)
Minimal (copy only)

Inline Citation

Inline source citations with tooltips

Inline Citations

React Server Components

React Server Components RFC
react.dev
Server Components let you write components that render on the server.
react.dev
represent a fundamental shift in how we build React applications. Unlike traditional SSR
Understanding SSR vs RSC
nextjs.org
Server Rendering strategies including Static, Dynamic, and Streaming.
nextjs.org
, they enable zero-bundle-size components that execute entirely on the server
Zero-Bundle-Size React Server Components
vercel.com
vercel.com
.