Building AI-Enhanced Frontend Applications

JavaScript
// React component with AI chat integration
import { useState } from 'react';

function AIChatInterface() {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');
  const [loading, setLoading] = useState(false);

  const sendMessage = async () => {
    if (!input.trim()) return;
    
    const userMessage = { role: 'user', content: input };
    setMessages(prev => [...prev, userMessage]);
    setInput('');
    setLoading(true);

    try {
      const response = await fetch('/api/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ message: input })
      });
      
      const data = await response.json();
      setMessages(prev => [...prev, { role: 'assistant', content: data.response }]);
    } catch (error) {
      console.error('AI request failed:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="chat-container">
      <div className="messages">
        {messages.map((msg, idx) => (
          <div key={idx} className={`message ${msg.role}`}>
            {msg.content}
          </div>
        ))}
        {loading && <div className="loading">AI is thinking...</div>}
      </div>
      <div className="input-area">
        <input 
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
          placeholder="Ask AI anything..."
        />
        <button onClick={sendMessage}>Send</button>
      </div>
    </div>
  );
}

Progress:

• Design AI UX patterns - Plan user flows for AI interactions
• Set up API integration - Configure endpoints for AI services
• Implement streaming responses - Handle real-time AI output
• Add loading states - Show progress during AI processing
• Handle errors gracefully - Plan for API failures and rate limits
• Optimize performance - Debounce requests, cache responses
• Add accessibility - Screen reader support for dynamic content

Example 1: Image Generation Interface Input: User clicks "Generate Image" with prompt "sunset over mountains" Output: Loading spinner → Progress bar → Generated image with download/retry options

Example 2: Code Assistant Integration Input: User types code in editor, highlights section, clicks "AI Review" Output: Inline suggestions appear with syntax highlighting and accept/reject buttons

Example 3: Smart Form Validation Input: User fills contact form with business description Output: AI suggests relevant industry tags and auto-completes company details

• Stream responses for long AI outputs to improve perceived performance
• Debounce user input (300-500ms) to avoid excessive API calls
• Show token/credit usage so users understand costs
• Cache common requests to reduce API usage and improve speed
• Use optimistic UI - show user input immediately before AI response
• Implement retry logic with exponential backoff for failed requests
• Add keyboard shortcuts (Ctrl+Enter to send, Escape to cancel)
• Support markdown rendering for AI responses with formatting

• Don't block the UI during AI requests - always show loading states
• Avoid sending sensitive data to third-party AI APIs without encryption
• Don't ignore rate limits - implement proper queuing and user feedback
• Never trust AI output blindly - validate and sanitize responses
• Don't forget mobile UX - AI interfaces need responsive design
• Avoid memory leaks - clean up SSE connections and abort pending requests
• Don't skip error boundaries - AI failures shouldn't crash your app