A modern AI chat application that leverages the Perplexity API to provide intelligent responses in a sleek, space-themed interface. This application demonstrates real-time communication using WebSockets, structured AI responses, and a responsive user interface.
- Added structured AI responses with greeting, bullet points, and summary sections
- Improved formatting with Markdown support
- Enhanced parsing logic for consistent response structure
- Better visual presentation of AI responses
- Real-time AI-powered chat interface
- Space-themed design with animated background
- Responsive layout for various screen sizes
- Structured AI Responses: Each response includes a greeting, detailed content as bullet points, and a summary
- Markdown Support: Rich text formatting for better readability
- Real-time Communication: Instant messaging using WebSockets
- Space-themed UI: Engaging animated background and modern design
- Responsive Design: Works on devices of all sizes
- User Experience Enhancements: Typing indicators, message timestamps, auto-scrolling, and error handling
The application uses a dual communication approach:
- RESTful API for initial message sending and handling
- WebSockets for real-time updates and continuous communication
The application leverages Socket.IO to establish a persistent connection between the client and server:
- Server-side: Sets up a Socket.IO server that listens for connections and message events
- Client-side: Connects to the Socket.IO server and handles real-time message updates
This approach allows for lower latency, real-time updates without polling, bidirectional communication, and automatic reconnection handling.
Each AI response is structured as:
{
greeting: "Hello! I'd be happy to help with your question about quantum computing.",
main_output: "- Quantum computing uses quantum bits or 'qubits'\n- Qubits can exist in multiple states simultaneously\n- This property is called superposition\n- Quantum computers can solve certain problems exponentially faster",
summary: "Quantum computing represents a fundamentally different approach to computation that leverages quantum mechanical properties for potentially exponential speedups on certain problems."
}- Clone the repository:
git clone https://github.com/yourusername/perplexity-chat.git
cd perplexity-chat- Install dependencies for both frontend and backend:
# Install backend dependencies
npm install
# Navigate to frontend directory
cd frontend
npm install- Create a
.envfile in the root directory with your Perplexity API key:
PERPLEXITY_API_KEY=your_api_key_here
PERPLEXITY_MODEL=sonar-pro
PORT=3000
- Start the backend server:
node index.js- In a separate terminal, start the frontend development server:
cd frontend
npm run dev- Open your browser and navigate to the URL shown in your terminal (typically http://localhost:5173)
perplexity-chat/
├── frontend/
│ ├── public/
│ ├── src/
│ │ ├── assets/
│ │ │ └── videoplayback.webm
│ │ ├── App.css
│ │ ├── App.jsx
│ │ └── main.jsx
│ ├── index.html
│ ├── package.json
│ └── vite.config.js
├── index.js
├── package.json
└── .env
- React.js with Vite for fast development and optimized builds
- ReactMarkdown for rendering formatted content
- Socket.IO Client for WebSocket communication
- CSS for styling and animations
- Node.js with Express for API endpoints and server management
- Socket.IO for WebSocket server implementation
- Perplexity AI API for intelligent responses
- Custom Parsing Logic for structured response handling
- Request Reception: Server receives a message via HTTP POST or WebSocket
- AI Processing: Message is sent to Perplexity API with structured format instructions
- Response Parsing: Raw AI response is processed through multiple parsing strategies
- Response Cleaning: Citations and unnecessary formatting are removed
- Structured Response Creation: Final response is organized into greeting, main content, and summary
- Response Delivery: Structured data is sent back via HTTP or emitted through WebSocket
- Message Submission: User submits a message through the interface
- UI Update: Message immediately appears in the chat with a loading indicator
- Response Reception: Structured response is received from the server
- Markdown Processing: ReactMarkdown converts formatted text into HTML
- Structured Display: Response is rendered in distinct sections with appropriate styling
- Auto-scrolling: View automatically scrolls to the latest message
Each AI response is structured with a greeting, main output (as bullet points), and a summary section, ensuring consistent and readable responses.
The README provides detailed installation instructions, including:
- Repository cloning
- Dependencies installation
- Environment configuration
- Starting both backend and frontend servers
The application uses WebSockets to provide real-time updates without the overhead of establishing new HTTP connections for each message, reducing latency and providing a more responsive experience.
The response parsing logic employs multiple strategies to handle various response formats, ensuring consistent user experience even when the AI model doesn't follow the formatting instructions perfectly.
Planned improvements include:
- Conversation Memory: Implementing history storage for context
- User Authentication: Adding accounts and personalized history
- Enhanced UI Features: Message reactions, file sharing, voice options
- Advanced AI Features: Multi-turn conversations, image generation, custom knowledge base
The README includes solutions for common issues like WebSocket connection failures, AI response formatting problems, and performance optimization.
Contributions are welcome through the standard fork-and-pull-request workflow.
This project is licensed under the Creative Commons Zero v1.0 Universal License.
- Perplexity AI for providing the API
- Socket.IO team for the excellent WebSocket library
- React and Vite communities for the frontend tools