AI assistant side panel with suggested prompts, history list, draft output, and insert actions. Built with sheet and scrollable history.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROAI Assistant Panel
A contextual side panel with prompts, history, and insert actions.
import AIAssistantPanel from "@/components/creative-tim/blocks/ai-assistant-panel"
export default function Page() {
return <AIAssistantPanel />
}
Interactive AI chat interface with real-time streaming responses and optional thinking process visualization. Features API provider selection from top 5 AI services with configurable API keys.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROPlease enter your API key to start chatting
import AiChatStreaming01 from "@/components/creative-tim/blocks/ai-chat-streaming-01"
export default function Page() {
return <AiChatStreaming01 />
}
Comprehensive AI image generation tool with built-in editor. Generate images from text prompts using top AI providers, upload existing images, and edit with real-time adjustments for brightness, contrast, and saturation. Includes image size selection, download functionality, and intuitive tabbed interface. Ideal for creative applications, content generation, and image manipulation tools.
Please enter your API key to start generating images
import AiImageGenerator01 from "@/components/creative-tim/blocks/ai-image-generator-01"
export default function Page() {
return <AiImageGenerator01 />
}
Advanced AI video generation interface with progress tracking and gallery view. Generate videos from text descriptions using leading AI providers like Runway, Pika, and OpenAI Sora. Features customizable duration, style selection, real-time progress indicators, video preview with playback controls, and generation history. Perfect for video content creation, marketing materials, and AI-powered media platforms.
Please enter your API key to start generating videos
• Be specific and descriptive in your prompts
• Describe camera movements and angles
• Mention lighting and atmosphere
• Specify the mood and style you want
• Keep prompts under 500 characters
import AiVideoGenerator01 from "@/components/creative-tim/blocks/ai-video-generator-01"
export default function Page() {
return <AiVideoGenerator01 />
}
Interactive AI agent chat implementing the x402 protocol's pay-per-request model. Each query triggers HTTP 402 Payment Required, automatic payment verification, and AI response. Features configurable per-request pricing, multi-wallet support (Coinbase Wallet & MetaMask), and proper x402 protocol flow with initialization.
Status
Not connected
How x402 Protocol Works (Demo):
1. Initialize your wallet (simulated payment)
2. Ask a question - Agent responds with "402 Payment Required"
3. Payment is simulated (0.001 ETH)
4. Agent verifies and provides response
5. Each interaction follows this micropayment flow
Visual Demo:
This is a UI demonstration. All payments and transactions are simulated for display purposes only. Actual blockchain integration is separate from the visual components.
import X402AIAgentChat01 from "@/components/creative-tim/blocks/x402-ai-agent-chat-01"
export default function Page() {
return <X402AIAgentChat01 />
}
Audio generation interface with text-to-speech and music modes. Deterministic waveform built from layered sine functions (SSR-safe, no Math.random in render) where the orange playhead sweep doubles as the progress bar over muted unplayed bars. Voice/style selector, duration slider with mono time labels, generate button with thin progress bar and mono percent, and a neutral bordered player with a round primary play button, mono elapsed/total time, and regenerate/download actions. Playback pace follows the selected duration. Entrance animations on progress and player.
85 characters
import AiAudioGenerator01 from "@/components/creative-tim/blocks/ai-audio-generator-01"
export default function Page() {
return <AiAudioGenerator01 />
}
Audio studio panel with a Speech/Music segmented control and a prompt-first composer (inline voice/style select, duration preset pills, estimated speech length, Cmd+Enter to generate). The waveform player draws in during generation, supports click-to-seek and playback speeds, and a Recent list shows past generations with mini waveforms. Deterministic SSR-safe waveforms, theme tokens only.
Welcome narration
Nova · Speech
import AiAudioGenerator02 from "@/components/creative-tim/blocks/ai-audio-generator-02"
export default function Page() {
return <AiAudioGenerator02 />
}
Agent run console with a vertical phase timeline: Plan (numbered steps reveal one by one), Execute (steps tick off with per-step durations and a thin progress bar), Verify (check results with pass/warn icons and mono scores). Neutral surfaces with a single orange accent for the active phase and emerald for completed states, status colors live on icons only, not on filled boxes. Live status badge in the header, mono durations per phase, and a quiet summary band when the run completes. Simulate phase progression on Run click.
import AiMultiStepAgent01 from "@/components/creative-tim/blocks/ai-multi-step-agent-01"
export default function Page() {
return <AiMultiStepAgent01 />
}
Code assistant with a prompt textarea, language selector (TypeScript, Python, Go, Rust), and a unified diff window in the GitHub style: file path header with mono filename, +/− diff stats, copy-result and apply buttons with applied feedback, a hunk header row, dual line-number gutters (old/new), and emerald/red tinted rows with colored +/− markers. Empty and generating states share a dashed placeholder. Uses mock code snippets.
The generated diff will appear here
import AiCodeAssistant01 from "@/components/creative-tim/blocks/ai-code-assistant-01"
export default function Page() {
return <AiCodeAssistant01 />
}
Chat interface with a modern integrated composer: rounded-xl container holding attachment chips, a borderless input, paperclip button, and an arrow-up send button. Attachments render as neutral file cards with an icon tile (file-type color on the icon only), truncated filename, and mono file size, removable while composing, shown read-only inside sent messages. Assistant avatar uses a Sparkles icon on an orange tint. Refined drag-and-drop overlay with backdrop blur and an orange upload badge. Assistant responses reference the attached file.
import AiFileAttachment01 from "@/components/creative-tim/blocks/ai-file-attachment-01"
export default function Page() {
return <AiFileAttachment01 />
}
Voice recorder with a solid circular primary mic button (orange idle, red while recording) with subtle ping rings, a centered symmetric waveform of thin rounded bars animated by layered sine functions (smooth motion, no random jitter), and a mono recording timer. The transcript streams in word by word with a blinking cursor into a bordered text surface (not a textarea), followed by Copy (emerald check feedback), Clear, and a right-aligned translate group with target language select. Translation appears in a muted surface with entrance animation. Source language select lives in the card header.
import AiVoiceTranscription01 from "@/components/creative-tim/blocks/ai-voice-transcription-01"
export default function Page() {
return <AiVoiceTranscription01 />
}
Chat interface where the assistant visibly calls tools between messages. Tool calls appear as collapsible cards showing tool name (web_search, calculator, get_weather), input params as JSON, and output result. Tool cards have a wrench icon and subtle border. Expand/collapse with a chevron. Includes mock tool types in simulation. Shows tool call duration in ms.
import AiToolUse01 from "@/components/creative-tim/blocks/ai-tool-use-01"
export default function Page() {
return <AiToolUse01 />
}
Left panel shows document upload area with a list of loaded mock document chunks as cards (title and snippet). Right panel is a chat where AI answers reference specific chunks shown as footnote-style citations with [1] [2] badges that highlight the relevant chunk on the left when hovered. Includes a mock PDF document with 5 chunks pre-loaded.
Hover over citation badges [1] to highlight the source chunk.
import AiDocumentQa01 from "@/components/creative-tim/blocks/ai-document-qa-01"
export default function Page() {
return <AiDocumentQa01 />
}
Visual pipeline showing 6 connected agent nodes (Research Agent, Summarizer, Fact Checker, Writer, Editor, Publisher). Each node is a card showing agent name, current status (idle/running/done/error) with color-coded badge, last action text, and token count. A Start Workflow button triggers sequential simulation.
Research Agent
Data gathering
Waiting for task
Summarizer
Content compression
Waiting for input
Fact Checker
Verification
Waiting for draft
Writer
Content creation
Waiting for facts
Editor
Quality review
Waiting for draft
Publisher
Delivery
Waiting for approval
import AiWorkflowStatus01 from "@/components/creative-tim/blocks/ai-workflow-status-01"
export default function Page() {
return <AiWorkflowStatus01 />
}
Conversational onboarding that asks questions one at a time: name, use case, team size, preferred AI model, API key. Each answer appears as a user message bubble, then the bot replies and asks the next question. Progress bar at top shows step X of 5. Final step shows a summary card of all collected info with a Complete Setup button.
import AiChatbotOnboarding01 from "@/components/creative-tim/blocks/ai-chatbot-onboarding-01"
export default function Page() {
return <AiChatbotOnboarding01 />
}
Real-time activity log showing agent events: task started, tool called, token consumed, message sent, error occurred. Each event has a timestamp, event type icon, description, and optional metadata (tokens, cost). Top header shows aggregate stats: total tokens, total cost, active tasks. Events auto-scroll. Tabs for All, Tasks, and Errors. Simulates new events every 2 seconds via useEffect interval.
1,159
Tokens
$0.004
Cost
1
Active Tasks
0
Errors
import AiAgentActivity01 from "@/components/creative-tim/blocks/ai-agent-activity-01"
export default function Page() {
return <AiAgentActivity01 />
}