Interface

{
  type: "chat",
  features: {
    streaming: true,
    fileUpload: true,
    richMedia: true,
    typing: true
  }
}

{
  type: "voice",
  features: {
    speechToText: true,
    textToSpeech: true,
    language: "en-US",
    voice: "neural"
  }
}

{
  type: "email",
  features: {
    threading: true,
    attachments: true,
    templates: true
  }
}

{
  type: "widget",
  features: {
    position: "bottom-right",
    theme: "light",
    branding: true
  }
}

// Build custom chat UI with React
import { useAgentbase } from '@agentbase/react';

function CustomChat() {
  const { messages, sendMessage, isTyping, streamResponse } = useAgentbase({
    interfaceId: "int_123",
    sessionId: session.id
  });

  const handleSend = async (text: string) => {
    await sendMessage(text);
  };

  return (
    <div className="chat-container">
      <div className="messages">
        {messages.map(msg => (
          <Message
            key={msg.id}
            role={msg.role}
            content={msg.content}
            timestamp={msg.timestamp}
          />
        ))}
        {isTyping && <TypingIndicator />}
      </div>

      <ChatInput onSend={handleSend} />
    </div>
  );
}

const supportChat = await agentbase.createInterface({
  type: "chat",
  name: "Customer Support",
  config: {
    greeting: "Hi! I'm here to help. What can I assist you with?",
    quickReplies: [
      "Track my order",
      "Return an item",
      "Technical support",
      "Billing question"
    ],
    fileUpload: {
      enabled: true,
      types: ["image/*", "application/pdf"],
      hint: "Upload screenshots or documents"
    },
    availability: {
      businessHours: {
        monday: { start: "9:00", end: "17:00" },
        tuesday: { start: "9:00", end: "17:00" },
        wednesday: { start: "9:00", end: "17:00" },
        thursday: { start: "9:00", end: "17:00" },
        friday: { start: "9:00", end: "17:00" }
      },
      timezone: "America/New_York",
      offHoursMessage: "We're currently offline. Leave a message and we'll respond when we're back!"
    }
  },
  agent: {
    system: `You are a customer support agent.

    Capabilities:
    - Answer questions about products and services
    - Help track orders and shipments
    - Process returns and refunds
    - Troubleshoot technical issues
    - Escalate to human when needed

    Always be helpful, patient, and professional.`,
    integrations: {
      zendesk: { enabled: true },
      shopify: { enabled: true }
    }
  }
});

const salesChat = await agentbase.createInterface({
  type: "chat",
  name: "Sales Assistant",
  config: {
    greeting: "Welcome! Looking for something specific?",
    proactive: {
      enabled: true,
      triggers: [
        {
          condition: "pageViews > 3",
          message: "I noticed you're browsing. Can I help you find something?"
        },
        {
          condition: "cartAbandoned",
          delay: 60000, // 1 minute
          message: "I see you have items in your cart. Any questions before checkout?"
        }
      ]
    }
  },
  agent: {
    system: `You are a sales assistant.

    Goals:
    - Understand customer needs
    - Recommend appropriate products
    - Answer product questions
    - Help with purchasing decisions
    - Guide through checkout

    Use product catalog to make informed recommendations.`,
    dataConnectors: {
      postgres: { enabled: true } // Product catalog
    }
  }
});

const voiceAssistant = await agentbase.createInterface({
  type: "voice",
  name: "Phone Support",
  config: {
    voice: {
      provider: "elevenlabs",
      voiceId: "professional_voice",
      speed: 1.0,
      pitch: 0
    },
    speech: {
      language: "en-US",
      continuous: true,
      interruptible: true,
      silenceTimeout: 3000
    },
    dtmf: {
      enabled: true, // Touch-tone support
      menu: {
        "1": "Sales",
        "2": "Support",
        "3": "Billing",
        "0": "Operator"
      }
    }
  },
  agent: {
    system: `You are a phone support agent.

    Voice guidelines:
    - Speak clearly and at moderate pace
    - Use simple language
    - Confirm understanding
    - Provide step-by-step instructions
    - Be patient with interruptions

    If you can't help, transfer to appropriate department.`
  }
});

const emailSupport = await agentbase.createInterface({
  type: "email",
  name: "Email Support",
  config: {
    routing: {
      rules: [
        {
          condition: "subject contains 'urgent' OR subject contains 'down'",
          priority: "high",
          notify: ["[email protected]"]
        },
        {
          condition: "from domain 'enterprise-customer.com'",
          priority: "high",
          assignTo: "enterprise-team"
        }
      ]
    },
    autoReply: {
      enabled: true,
      message: "Thank you for contacting us. We've received your email and will respond within 24 hours."
    },
    categorization: {
      enabled: true,
      categories: ["billing", "technical", "sales", "general"]
    }
  },
  agent: {
    system: `You are an email support agent.

    Process:
    1. Categorize the email
    2. Determine if you can fully resolve it
    3. Provide comprehensive answer
    4. Include relevant links/resources
    5. If escalation needed, create ticket

    Maintain professional email etiquette.`
  }
});

const inAppAssistant = await agentbase.createInterface({
  type: "chat",
  name: "In-App Assistant",
  config: {
    contextual: {
      enabled: true,
      trackPageView: true,
      trackUserActions: true
    },
    suggestions: {
      enabled: true,
      smartSuggestions: [
        {
          page: "/dashboard",
          suggestions: [
            "How do I create a new project?",
            "Explain my usage metrics",
            "How to invite team members?"
          ]
        },
        {
          page: "/billing",
          suggestions: [
            "How to upgrade my plan?",
            "View payment history",
            "Update payment method"
          ]
        }
      ]
    }
  },
  agent: {
    system: `You are an in-app assistant.

    Context awareness:
    - Current page: {{page}}
    - User role: {{user.role}}
    - Account tier: {{user.tier}}

    Provide contextual help based on where user is in the app.
    Guide them through tasks step-by-step.
    Use in-app terminology and match the UI.`,
    auth: {
      required: true,
      inheritUserContext: true
    }
  }
});

const whatsapp = await agentbase.createInterface({
  type: "whatsapp",
  name: "WhatsApp Business",
  config: {
    phoneNumber: "+1234567890",
    businessProfile: {
      name: "Your Company",
      description: "Customer Support",
      website: "https://yourcompany.com"
    },
    messageTemplates: {
      greeting: "Hello! How can we assist you today?",
      orderStatus: "Your order #{{orderId}} is {{status}}. Track it here: {{trackingUrl}}"
    },
    media: {
      enabled: true,
      supportedTypes: ["image", "document", "video"]
    }
  },
  agent: {
    system: `You are a WhatsApp business agent.

    WhatsApp best practices:
    - Be concise and direct
    - Use appropriate emojis
    - Send media when helpful
    - Quick response expected
    - International audience`
  }
});

const interface = await agentbase.createInterface({
  type: "chat",
  agent: {
    capabilities: {
      memory: {
        enabled: true,
        namespace: "user_{{userId}}"
      }
    }
  }
});

// Agent remembers previous conversations

const interface = await agentbase.createInterface({
  type: "chat",
  agent: {
    skills: ["customer_support", "product_knowledge"]
  }
});

const interface = await agentbase.createInterface({
  type: "chat",
  auth: {
    required: true,
    method: "jwt"
  },
  agent: {
    auth: {
      inheritUserContext: true
    }
  }
});