Chat Bots
Pattern
INT·Nov 25

Chat-Base Clone

A comprehensive Chatbase clone demo with widget interface, model selection, web search integration, and human-in-the-loop tool approval workflows.

View Full Pattern on Desktop
Chat-Base Clone preview

Problems Solved

  • Chatbase-style widget interface implementation
  • Model selection and switching
  • Web search integration with Perplexity
  • Human-in-the-loop tool approval workflows
  • Rate limiting for API protection
  • Streaming chat with sources and reasoning
  • Tool-based AI interactions with approval

Use Cases

  • Chatbase-style chat widget implementations
  • Model selection interfaces
  • Web search-enabled chat assistants
  • Human-in-the-loop AI workflows
  • Tool approval and confirmation systems
  • Streaming chat with multiple providers

AI SDK APIs

streamTextconvertToModelMessagesuseChatgatewaytool(toUIMessageStreamResponse

Tags

aichatchatbasewidgetmodel-selectorweb-searchhuman-in-the-looptool-approvalai-sdkstreaming

Requirements

Node.js
24+
Memory
512MB
Other
  • OpenAI API key
  • Perplexity API key (optional)

Environment Variables

External Services

openaiperplexityupstash

Ready to use?

View the full interactive pattern with live preview and copy the source code.

View Pattern on Desktop

Related Patterns

HIL Tool Approval Basic preview

HIL Tool Approval Basic

Chat assistant with human approval workflows for safe tool execution.

aihuman-in-the-loop+6
View →
Marketing Plan & Implement Agent preview

Marketing Plan & Implement Agent

Two-phase marketing agent with brand context: Stage 0 extracts brand info from URL or manual input, planning phase gathers requirements and creates a plan with todos, implementation phase executes the plan using web scraping and research tools. Uses callOptionsSchema + prepareCall for dynamic agent configuration.

aiagents+9
View →
HIL Agentic Context Builder preview

HIL Agentic Context Builder

Build brand context through AI-guided questioning and web research. Gathers insights to create detailed brand profiles.

aihuman-in-the-loop+8
View →
Branding Agent preview

Branding Agent

Extract brand design systems from any website using Firecrawl, then use AI tools to export tokens, generate color palettes, check accessibility, and analyze brand personality.

aiagents+8
View →
End of Pattern