Quick Start Guide

This guide will help you get started with the ZeebeeAI Chat SDK Platform in just a few minutes. Follow these steps to set up your project and make your first API call.

Prerequisites: You'll need a ZeebeeAI account. If you don't have one yet, sign up for free.

Get Your API Key

First, you need to get your API key:

Log in to your ZeebeeAI account
Navigate to the API Keys section in your dashboard
Click "Create new API key"
Give your key a descriptive name (e.g., "Development Key")
Copy your newly created API key and store it securely

Important: Your API key is sensitive information. Never share it publicly or commit it to version control.

Choose Your Integration Method

ZeebeeAI offers multiple integration options. Choose the one that best suits your needs:

Official SDK Libraries

The recommended way to integrate ZeebeeAI into your application. SDKs provide type safety, error handling, and convenient methods.

Available for:

Direct API Calls

Use standard HTTP requests to interact with our API endpoints directly.

Useful for:

Languages without official SDK support
Custom integrations
Advanced use cases

See the REST API Documentation for details.

Install the SDK

Let's use the JavaScript SDK for this example:

Using npm

npm install @zeebee-ai/sdk

Using yarn

yarn add @zeebee-ai/sdk

Using CDN (for browser environments)

<script src="https://cdn.zeebee.ai/sdk/v2.2.0/zeebee-sdk.min.js"></script>

Create Your First Chat

Now, let's create a simple chat interface using the JavaScript SDK:

// Import the SDK
import { ZeebeeAI } from '@zeebee-ai/sdk';

// Initialize with your API key
const zeebee = new ZeebeeAI('YOUR_API_KEY');

// Set up a basic chat interface
async function sendMessage() {
  // Get user input
  const userMessage = document.getElementById('userInput').value;
  
  // Display user message
  addMessageToChat('user', userMessage);
  
  // Clear input field
  document.getElementById('userInput').value = '';
  
  try {
    // Send the message to ZeebeeAI
    const response = await zeebee.chat({
      messages: [
        { role: 'system', content: 'You are a helpful assistant.' },
        { role: 'user', content: userMessage }
      ],
      model: 'gpt-4-turbo'
    });
    
    // Display the response
    addMessageToChat('assistant', response.message);
  } catch (error) {
    console.error('Error:', error);
    addMessageToChat('system', 'Sorry, there was an error processing your request.');
  }
}

// Helper function to add messages to the UI
function addMessageToChat(role, content) {
  const chatContainer = document.getElementById('chatContainer');
  const messageDiv = document.createElement('div');
  messageDiv.className = `message ${role}`;
  messageDiv.textContent = content;
  chatContainer.appendChild(messageDiv);
  chatContainer.scrollTop = chatContainer.scrollHeight;
}

This simple JavaScript example demonstrates how to send messages to the AI and display the responses. For real applications, you might want to add more features like streaming responses, conversation history, and error handling.

Try Streaming Responses

For a more interactive experience, you can use streaming responses:

// Streaming version of the chat function
async function sendMessageWithStreaming() {
  const userMessage = document.getElementById('userInput').value;
  addMessageToChat('user', userMessage);
  document.getElementById('userInput').value = '';
  
  // Create a placeholder for the assistant's response
  const responseId = 'response-' + Date.now();
  addEmptyMessageToChat('assistant', responseId);
  
  try {
    // Create a streaming chat request
    const stream = await zeebee.chatStream({
      messages: [
        { role: 'system', content: 'You are a helpful assistant.' },
        { role: 'user', content: userMessage }
      ],
      model: 'gpt-4-turbo'
    });
    
    let fullResponse = '';
    
    // Process each chunk as it arrives
    for await (const chunk of stream) {
      fullResponse += chunk.content || '';
      updateMessageContent(responseId, fullResponse);
    }
  } catch (error) {
    console.error('Error:', error);
    updateMessageContent(responseId, 'Sorry, there was an error processing your request.');
  }
}

// Helper function to add an empty message that will be filled with streaming content
function addEmptyMessageToChat(role, id) {
  const chatContainer = document.getElementById('chatContainer');
  const messageDiv = document.createElement('div');
  messageDiv.className = `message ${role}`;
  messageDiv.id = id;
  chatContainer.appendChild(messageDiv);
}

// Helper function to update message content during streaming
function updateMessageContent(id, content) {
  const messageDiv = document.getElementById(id);
  if (messageDiv) {
    messageDiv.textContent = content;
    document.getElementById('chatContainer').scrollTop = document.getElementById('chatContainer').scrollHeight;
  }
}

Next Steps

Now that you've created your first chat application with ZeebeeAI, consider exploring these advanced features:

Complete Example

Here's a complete HTML example you can use as a starting point:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ZeebeeAI Chat Example</title>
    <style>
        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        #chatContainer {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 10px;
            height: 400px;
            overflow-y: auto;
            margin-bottom: 20px;
        }
        .message {
            padding: 10px;
            margin: 5px 0;
            border-radius: 8px;
            max-width: 80%;
        }
        .user {
            background-color: #e1f5fe;
            margin-left: auto;
            text-align: right;
        }
        .assistant {
            background-color: #f1f1f1;
        }
        .system {
            background-color: #ffebee;
            width: 100%;
            text-align: center;
        }
        .input-container {
            display: flex;
            gap: 10px;
        }
        #userInput {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }
        button {
            padding: 10px 20px;
            background-color: #19c37d;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #15a66c;
        }
    </style>
</head>
<body>
    <h1>ZeebeeAI Chat Example</h1>
    <div id="chatContainer"></div>
    <div class="input-container">
        <input type="text" id="userInput" placeholder="Type your message here..." />
        <button onclick="sendMessage()">Send</button>
    </div>

    <script src="https://cdn.zeebee.ai/sdk/v2.2.0/zeebee-sdk.min.js"></script>
    <script>
        // Initialize the SDK with your API key
        const zeebee = new ZeebeeAI('YOUR_API_KEY');

        // Add a welcome message
        addMessageToChat('assistant', 'Hello! How can I help you today?');

        async function sendMessage() {
            // Get user input
            const userMessage = document.getElementById('userInput').value;
            if (!userMessage.trim()) return;
            
            // Display user message
            addMessageToChat('user', userMessage);
            
            // Clear input field
            document.getElementById('userInput').value = '';
            
            try {
                // Send the message to ZeebeeAI
                const response = await zeebee.chat({
                    messages: [
                        { role: 'system', content: 'You are a helpful assistant.' },
                        { role: 'user', content: userMessage }
                    ],
                    model: 'gpt-4-turbo'
                });
                
                // Display the response
                addMessageToChat('assistant', response.message);
            } catch (error) {
                console.error('Error:', error);
                addMessageToChat('system', 'Sorry, there was an error processing your request.');
            }
        }

        // Helper function to add messages to the UI
        function addMessageToChat(role, content) {
            const chatContainer = document.getElementById('chatContainer');
            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${role}`;
            messageDiv.textContent = content;
            chatContainer.appendChild(messageDiv);
            chatContainer.scrollTop = chatContainer.scrollHeight;
        }

        // Handle Enter key press
        document.getElementById('userInput').addEventListener('keypress', function(event) {
            if (event.key === 'Enter') {
                sendMessage();
            }
        });
    </script>
</body>
</html>

Remember: Replace YOUR_API_KEY with your actual API key. For production applications, it's recommended to keep your API key on the server side and proxy requests to ZeebeeAI rather than exposing your key in client-side code.

Community Resources

For more help and examples, check out these resources: