AI Chat

Conversational AI interface for energy system management.

Interactive Demo

Try sending a message to see the chat interface in action.

AI Assistant

Sourceful AI Assistant

Ask me anything about your energy system. I can help you monitor, analyze, and control your devices.

Press Enter to send, Shift+Enter for new line

Sample Conversation

AI Assistant

What's my current solar production?

Your solar panels are currently producing 3.5 kW of power. This is about 70% of their peak capacity.

Here's a breakdown:

Panel efficiency: 92%
Weather conditions: Partly cloudy
Expected production today: ~25 kWh

How can I optimize my energy usage?

Here are some recommendations to optimize your energy usage:

Shift heavy loads to solar hours - Run dishwasher and laundry between 10am-3pm
Pre-cool your home - Lower AC before peak rates kick in
Charge battery during low rates - Set battery to charge from grid after midnight
Enable smart EV charging - Schedule your car to charge during off-peak hours

Would you like me to set up any of these automations?

Press Enter to send, Shift+Enter for new line

Custom Suggested Prompts

AI Assistant

Sourceful AI Assistant

Ask me anything about your energy system. I can help you monitor, analyze, and control your devices.

Press Enter to send, Shift+Enter for new line

Features

Markdown rendering for AI responses (bold, lists, code blocks)
Animated message bubbles with spring physics
Auto-scrolling with scroll-up detection
Thinking indicator with animated dots
Customizable suggested prompts with icons
Auto-resizing textarea (up to 200px)
Keyboard shortcuts (Enter to send, Shift+Enter for newline)
Loading state with cancel button
Empty state with welcome message
Dark mode support

Usage

import { AIChat, type ChatMessage } from "@/components/ui/ai-chat"

const [messages, setMessages] = useState<ChatMessage[]>([])
const [isLoading, setIsLoading] = useState(false)

const handleSendMessage = async (message: string) => {
  // Add user message
  setMessages(prev => [...prev, {
    id: Date.now().toString(),
    role: "user",
    content: message,
    timestamp: new Date(),
  }])

  // Call your AI backend
  setIsLoading(true)
  const response = await fetch("/api/ai/chat", {
    method: "POST",
    body: JSON.stringify({ message }),
  })
  const data = await response.json()

  // Add AI response
  setMessages(prev => [...prev, {
    id: (Date.now() + 1).toString(),
    role: "assistant",
    content: data.response,
    timestamp: new Date(),
  }])
  setIsLoading(false)
}

<AIChat
  messages={messages}
  onSendMessage={handleSendMessage}
  isLoading={isLoading}
  placeholder="Ask about your energy system..."
  suggestedPrompts={[
    { icon: <Zap />, text: "Solar production" },
    { icon: <Battery />, text: "Battery status" },
  ]}
/>

ChatMessage Type

interface ChatMessage {
  id: string
  role: "user" | "assistant"
  content: string         // Supports Markdown
  timestamp: Date
}

Dependencies

npm install framer-motion react-markdown remark-gfm

Energy Flow

EMS Schedule