Embed AI in Any Application

import { useSwfte, StreamingResponse } from '@swfte/react';
import { useState } from 'react';

interface Message {
  id: string;
  content: string;
  role: 'user' | 'assistant';
  timestamp: Date;
}

export function ChatComponent() {
  const [messages, setMessages] = useState<Message[]>([]);
  const [input, setInput] = useState('');
  const { stream, loading } = useSwfte();

  const sendMessage = async () => {
    if (!input.trim()) return;

    const userMessage: Message = {
      id: crypto.randomUUID(),
      content: input,
      role: 'user',
      timestamp: new Date()
    };

    setMessages(prev => [...prev, userMessage]);
    setInput('');

    const assistantMessage: Message = {
      id: crypto.randomUUID(),
      content: '',
      role: 'assistant',
      timestamp: new Date()
    };

    setMessages(prev => [...prev, assistantMessage]);

    await stream({
      agent: 'support-agent',
      message: input,
      onChunk: (chunk) => {
        setMessages(prev => prev.map(msg =>
          msg.id === assistantMessage.id
            ? { ...msg, content: msg.content + chunk }
            : msg
        ));
      }
    });
  };

  return (
    <div className="chat-container">
      <div className="messages">
        {messages.map(message => (
          <div key={message.id} className={message.role}>
            {message.content}
          </div>
        ))}
      </div>
      <div className="input-area">
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
          placeholder="Type your message..."
          disabled={loading}
        />
        <button onClick={sendMessage} disabled={loading}>
          Send
        </button>
      </div>
    </div>
  );
}

import { SwfteClient } from '@swfte/node';
import { NextApiRequest, NextApiResponse } from 'next';

const client = new SwfteClient({
  apiKey: process.env.SWFTE_API_KEY!,
  environment: 'production'
});

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed' });
  }

  try {
    const { message, userId, agentId } = req.body;

    // Validate input
    if (!message || !userId || !agentId) {
      return res.status(400).json({
        error: 'Missing required fields'
      });
    }

    // Create chat completion
    const response = await client.chat.create({
      agent: agentId,
      message: message,
      context: {
        userId: userId,
        timestamp: new Date().toISOString(),
        requestId: crypto.randomUUID()
      },
      stream: false
    });

    // Log for analytics
    console.log('Chat completion:', {
      userId,
      agentId,
      responseLength: response.content.length,
      duration: response.metadata.duration
    });

    res.status(200).json({
      message: response.content,
      metadata: response.metadata
    });

  } catch (error) {
    console.error('Chat API error:', error);
    res.status(500).json({
      error: 'Internal server error'
    });
  }
}