SoloKitSoloKit

Component Blocks

Reusable components from pricing chatbot auth docs

Pricing Card

Individual pricing plan card with features list and CTA button.

Single Pricing Card
Most Popular

Pro

$49/mo

For professionals and small teams.

  • Advanced SEO analysis
  • Unlimited content generation
  • 10 Projects
  • Priority Support
  • Competitor Analysis

Pricing Grid

Complete pricing grid with header, displaying multiple plan cards.

Full Pricing Grid

Pricing Plans

Choose the plan that's right for you and your team.

Free

$0

Get started with basic features.

  • Basic SEO analysis
  • Limited content generation
  • 1 Project
  • Community Support
Most Popular

Pro

$49/mo

For professionals and small teams.

  • Advanced SEO analysis
  • Unlimited content generation
  • 10 Projects
  • Priority Support
  • Competitor Analysis

Ultra

$99/mo

For businesses that need everything.

  • Everything in Pro
  • Advanced Analytics
  • Team Collaboration
  • Dedicated Support
  • API Access

Payment Method Selector

Interactive payment method picker supporting multiple providers.

Payment Methods
Stripe
Alipay
WeChat Pay

Selected: stripe

Payment QR Code

QR code display component for WeChat/Alipay payments.

QR Code Display

Scan to pay with Alipay

Payment QR Code

Use your mobile app to scan the QR code.

Order Status: Pending

Order Summary

Sidebar order summary with pricing breakdown and feature list.

Order Summary Panel

Order Summary

PlanPro
Price$49/mo
Discount (20% off)
-$10
Duration30 Days
Total
$39
$49
Included Features
Advanced SEO analysis
Unlimited content generation
10 Projects
Priority Support
+1 more features

Order Status

Status icons and badges for different order states.

Status Badges
Pending
Paid
Failed
Cancelled
Expired
Refunded

Order Detail

Complete order detail view with status display and action buttons.

Pending Order

Order Detail

Pending
Order ID
ORD-2025-DEMO-001
Amount
$39.2
Payment Method
Alipay
Created At
3/1/2026, 5:16:05 PM
Product
Subscription - Pro
Subscribe to Pro plan
Plan:Pro
Billing Cycle:Monthly
Included Features
Advanced SEO
Unlimited Content
Priority Support
Success Order

Order Detail

Paid
Order ID
ORD-2025-DEMO-002
Amount
$39.2
Payment Method
Alipay
Created At
3/1/2026, 5:16:05 PM
Product
Subscription - Pro
Subscribe to Pro plan
Plan:Pro
Billing Cycle:Monthly
Included Features
Advanced SEO
Unlimited Content
Priority Support

Payment Successful!

Payment Time: 3/1/2026, 5:16:05 PM

Loading & Error States
Loading order information...

Order Query Failed

Order not found

Countdown Timer

Animated countdown timer for limited-time offers.

Countdown Timer Variants
Limited Time Offer15:00
Flash Sale05:00
Expiring Soon01:00

Security Badge

Trust badge for secure payment assurance.

Security Badge

Secure Payment Protection

All transactions are encrypted with 256-bit SSL. Your payment information is never stored on our servers. We support secure payment via Stripe, Alipay, and WeChat Pay.

Chatbot Blocks

Conversation & Messages

Chat conversation container with user and assistant message rendering.

Chat Conversation Preview
06/15/2025, 10:30
Please analyze the SEO performance for https://example.com and provide actionable recommendations.
06/15/2025, 10:30

SEO Analysis for example.com

I've completed a comprehensive analysis of your website. Here are the key findings:

  • Title Tag: Present but could be more descriptive (currently 35 chars, recommended 50-60)
  • Meta Description: Missing — adding one could improve CTR by 5-10%
  • Page Speed: 2.8s load time (aim for under 2s)
  • Mobile Friendly: Responsive design detected

Overall Score: 72/100 — Good foundation with room for improvement.

06/15/2025, 10:31
Can you help me fix the meta description issue?

Here are 3 suggested meta descriptions for your homepage:

  1. "Example.com — Your trusted platform for innovative solutions. Discover tools, resources and expert guidance to grow your business."
  2. "Transform your workflow with Example.com. Industry-leading tools, 24/7 support, and proven results for businesses of all sizes."
  3. "Example.com helps you achieve more. Explore our suite of professional tools designed to boost productivity and drive growth."

Reasoning

Collapsible AI reasoning/thinking display with streaming support.

Reasoning — Completed
Let me analyze the URL structure and on-page SEO elements for this website... First, I'll check the HTML head section for meta tags, title, and canonical URLs. The title tag is "Example Domain" which is 14 characters. This is quite short — ideally it should be 50-60 characters and include target keywords. Next, I'll check for structured data (JSON-LD, microdata, or RDFa). No structured data found — adding Schema.org markup could help with rich snippets. Looking at the heading hierarchy: There's one H1 tag which is good, but no H2 or H3 subheadings. Adding a clear heading hierarchy helps search engines understand content structure. Final assessment: The site has a clean foundation but needs significant SEO improvements in meta tags, content structure, and technical SEO.
Checking backlink profile and domain authority metrics... Analyzing competitor keyword rankings to identify opportunities...

Tool Invocation

Tool execution display with input/output and status indicators.

Tool Invocation States
输入参数
{
  "query": "SEO best practices 2025",
  "max_results": 10
}
执行结果
{
  "results": [
    {
      "title": "Google SEO Starter Guide",
      "url": "https://developers.google.com/search/docs/fundamentals/seo-starter-guide"
    },
    {
      "title": "Moz - Beginner's Guide to SEO",
      "url": "https://moz.com/beginners-guide-to-seo"
    }
  ],
  "total": 15
}
输入参数
{
  "url": "https://unreachable-site.example"
}
执行错误
Connection timeout: Unable to reach the target URL after 30s.
Timeline mode:
执行结果
Successfully fetched page HTML (12.4KB)

Data Card

Collapsible data cards with 11 semantic variants for different content types.

Data Card Variants
SEO Analysis ResultNew
Completed 2 minutes ago

Your website scores 72/100 in overall SEO health.

Key areas for improvement: meta descriptions, page speed, and internal linking.

Content OptimizedDone

3 pages optimized successfully with improved keyword density.

Performance AlertWarning

Core Web Vitals LCP is 3.2s — exceeds the 2.5s threshold.

Execution Plan
5 tasks planned

Keyword research → Content audit → Optimization → Link building → Monitoring

Team Collaboration
3 agents active

SEO Analyst, Content Writer, and Technical Auditor are working together.

All 11 variants:
Default
variant="default"
Info
variant="info"
Success
variant="success"
Warning
variant="warning"
Error
variant="error"
Thinking
variant="thinking"
Intent
variant="intent"
Plan
variant="plan"
Report
variant="report"
Task
variant="task"
Team
variant="team"

Sources

Collapsible source citations with individual source items and inline badges.

Source Citations
Google Search Central Documentation

Official Google guides for search optimization and web development best practices.

developers.google.com
Moz — The Beginner's Guide to SEO

A comprehensive resource covering all aspects of SEO from basic to advanced.

moz.com
How to Do an SEO Audit (2025)

Step-by-step guide to conducting a thorough SEO audit of your website.

ahrefs.com
Web Vitals — Essential Metrics

Learn about Core Web Vitals and how they impact search rankings.

web.dev
Inline citation badges:1234

Suggestions

Interactive suggestion prompts and quick suggestion grids.

Suggestion Components
Suggested Next Steps

Web Preview

Rich link preview cards in standard, compact, and grid layouts.

Web Preview Cards
Google Developers

Google Search Central

Resources to help you make your site discoverable in Google Search. Explore documentation, training, and community to optimize your site.

https://developers.google.com/search
Moz

The Beginner's Guide to SEO

Learn SEO from the industry experts at Moz. Covering everything from how search engines work to keyword research strategies.

https://moz.com/learn/seo
Ahrefs — SEO ToolsSemrush — Online Marketingweb.dev — Performance Insights

Loaders & Animations

Loading indicators, skeleton loaders, shimmer effects, typewriter animations, and streaming cursor.

Loader Variants
dots
typing
spinner
Analyzing...
pulse

Skeleton Loader:

Streaming Cursor:

Generating SEO report for your website

Shimmer Effect:

Analyzing website performance metrics...

Typewriter Effect:

|

Actions

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

Action Bars

Hover to see actions (idle state):

Loading state (with stop button):

Auth Blocks

Auth Prompt

Modal dialog prompting users to log in or register, with feature highlights.

Auth Prompt Modal (Embedded Preview)

Login Required

Sign in to unlock all features

Create an account or sign in to access AI-powered SEO analysis tools.

Secure & Private

Your data is encrypted and protected

AI-Powered

Advanced analysis with latest AI models

Social Login Buttons

OAuth login buttons for Google and GitHub authentication.

OAuth Providers

Social login buttons (live component):

Typical usage with divider:

or continue with

Password Login Form

Email/password login form with validation and show/hide password toggle.

Email & Password Form (Live Component)
Docs Blocks

Breadcrumb Navigation

Hierarchical breadcrumb navigation for documentation pages.

Doc Breadcrumb (Live Component)

Table of Contents

Auto-generated table of contents from Markdown headings with scroll spy.

Table of Contents (Live Component)

Introduction

This guide covers the basics of SEO analysis.

Getting Started

Set up your project for optimal SEO performance.

Configuration

Configure your analysis parameters and API keys.

Advanced Features

Explore advanced capabilities and integrations.

MDX Cards

Card and CardGrid components for documentation pages, used in MDX content.

Doc Card Grid

Getting Started

Learn how to set up your first SEO analysis project with step-by-step instructions.

Agent System

Explore AI agents for SEO, content creation, keyword research, and more.

API Reference

Complete API documentation for programmatic access to all features.

Reading Progress Bar

Top progress bar that tracks scroll position on documentation pages.

Reading Progress (Static Preview)

The reading progress bar renders at the very top of the viewport. Below are static previews of different progress states:

10% read
45% read
75% read
100% read

Note: The live DocReadingProgress component is scroll-based and renders as a fixed bar at the top of the page.