Perplexity Clone

Live Demo

Overview

The Perplexity Clone example demonstrates how to customize assistant-ui to match Perplexity's interface. This includes their distinctive blue color scheme, search-focused design, and citation-heavy approach to AI responses.

Features

• Perplexity Styling: Authentic blue color scheme and visual design
• Search Interface: Search-focused input design with prominent search button
• Citation Support: Visual indicators for sources and references
• Clean Layout: Perplexity's clean, information-dense design
• Responsive Design: Mobile-optimized interface
• Source Attribution: Clear indication of information sources

Usage

To create a Perplexity-style interface:

1. Color Palette: Use Perplexity's blue (#2563eb) and neutral colors
2. Search Design: Prominent search input with clear visual hierarchy
3. Citation UI: Implement source attribution and reference indicators
4. Layout Structure: Clean, information-dense layout design

Code

Key design elements for Perplexity clone:

• Primary Blue: Perplexity's signature blue for primary actions
• Search Focus: Large, prominent search input field
• Citation Styling: Visual indicators for sources and references
• Typography: Clean, readable fonts optimized for information consumption
• Spacing: Balanced whitespace for readability

The implementation emphasizes information clarity and source attribution while maintaining assistant-ui's core functionality.