ModuLink AI — Universal AI Integration Platform

Getting Started

1. Initial Setup

Follow these steps to get ModuLink AI integrated into your project:

Create an account — Sign up at ModuLink AI and access your dashboard.
Add an AI Provider — Go to Dashboard → AI Providers and connect at least one provider (OpenAI, Anthropic, Gemini, etc.) with your API key.
Create a Project — Go to Dashboard → Connected Projects and create a project for your website or app. Configure the bot name, tone, system prompt, and knowledge base.
Generate an API Key — Go to Dashboard → API Keys and create a key linked to your project.

2. Your API Key

Your API key (starts with mlk_) is used to authenticate all requests. Keep it secure and never expose it in client-side code that can be inspected. For the chat widget, the key is passed via JavaScript — this is acceptable for public-facing chat widgets as the key has rate limiting and scope restrictions.

Security Note: API keys have built-in rate limiting. You can set per-minute limits and expiry dates in the dashboard. Rotate keys regularly for production use.

Chat Widget Integration

Basic Widget Embed

Add the ModuLink AI chat widget to any website with just two lines of code. Place this before the closing </body> tag:

<!-- ModuLink AI Chat Widget -->
<script src="https://modulinkai.mas.codes/api/v1/widget.js"></script>
<script>
  ModuLinkChat.init({
    apiKey: 'mlk_your_api_key_here'
  });
</script>

That's it! A floating chat button will appear in the bottom-right corner of your page. Users can click it to open the chat window and start talking to your AI assistant.

Configuration Options

Customize the widget behavior by passing options to ModuLinkChat.init():

<script src="https://modulinkai.mas.codes/api/v1/widget.js"></script>
<script>
  ModuLinkChat.init({
    apiKey: 'mlk_your_api_key_here',

    // Position: 'bottom-right' (default) or 'bottom-left'
    position: 'bottom-right',

    // Theme: 'dark' (default) or 'light'
    theme: 'dark',

    // Chat window title
    title: 'Chat with us'
  });
</script>

Available Options

apiKey — Required. Your ModuLink API key (starts with mlk_).
position — Widget position: 'bottom-right' or 'bottom-left'. Default: 'bottom-right'.
theme — Color theme: 'dark' or 'light'. Default: 'dark'.
title — Header title text. Default: 'Chat with us'.

Custom Styling

You can override the widget's default styles using CSS. The widget uses these IDs:

/* Override the floating button */
#mlk-chat-btn {
  background: linear-gradient(135deg, #e11d48, #be123c) !important;
  width: 60px !important;
  height: 60px !important;
}

/* Override the chat window size */
#mlk-chat-window {
  width: 420px !important;
  height: 600px !important;
  border-radius: 20px !important;
}

/* Override the send button */
#mlk-send {
  background: linear-gradient(135deg, #e11d48, #be123c) !important;
}

You can also configure widget styling per-project in Dashboard → Connected Projects → Edit, where you can set custom colors, icon, position, and theme.

Dedicated AI Page

Full Page Chat Interface

Some projects need a full-page AI chat experience instead of a floating widget. Here's a complete, copy-paste HTML page you can host on your site:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI Assistant</title>
  <style>
    * { margin:0; padding:0; box-sizing:border-box; }
    body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
           background:#0f0f23; color:#e0e0e0; height:100vh; display:flex; flex-direction:column; }
    .header { background:linear-gradient(135deg,#6366f1,#8b5cf6); padding:16px 24px; color:#fff; }
    .header h1 { font-size:18px; font-weight:600; }
    .header p { font-size:12px; opacity:0.8; }
    .messages { flex:1; overflow-y:auto; padding:20px 24px; }
    .msg { display:flex; gap:12px; margin-bottom:16px; max-width:80%; }
    .msg.user { margin-left:auto; flex-direction:row-reverse; }
    .msg .avatar { width:32px; height:32px; border-radius:50%; display:flex;
                   align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
    .msg.user .avatar { background:#6366f1; color:#fff; }
    .msg.ai .avatar { background:#10b981; color:#fff; }
    .msg .bubble { padding:12px 16px; border-radius:12px; line-height:1.6; font-size:14px; }
    .msg.user .bubble { background:#6366f1; color:#fff; border-bottom-right-radius:4px; }
    .msg.ai .bubble { background:#1e1e3a; border:1px solid #2a2a4a; border-bottom-left-radius:4px; }
    .input-area { padding:16px 24px; border-top:1px solid #2a2a4a; display:flex; gap:10px; }
    .input-area input { flex:1; padding:12px 16px; border-radius:12px; border:1px solid #2a2a4a;
                        background:#1e1e3a; color:#e0e0e0; font-size:14px; outline:none; }
    .input-area input:focus { border-color:#6366f1; }
    .input-area button { padding:12px 24px; border-radius:12px; border:none;
                         background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff;
                         cursor:pointer; font-size:14px; font-weight:600; }
  </style>
</head>
<body>
  <div class="header">
    <h1>AI Assistant</h1>
    <p>Powered by ModuLink AI</p>
  </div>
  <div class="messages" id="messages"></div>
  <div class="input-area">
    <input type="text" id="input" placeholder="Type a message..." autocomplete="off">
    <button onclick="sendMessage()">Send</button>
  </div>

  <script>
    var API_KEY = 'mlk_your_api_key_here';
    var BASE_URL = 'https://modulinkai.mas.codes';
    var conversationId = null;

    // Start or resume conversation
    function startChat() {
      var sessionId = sessionStorage.getItem('mlk_session_id');
      apiCall('/api/v1/chat/start', 'POST', { session_id: sessionId }, function(data) {
        conversationId = data.conversation_id;
        sessionStorage.setItem('mlk_session_id', data.session_id);
        if (data.resumed) {
          apiCall('/api/v1/chat/messages?conversation_id=' + data.conversation_id, 'GET', null, function(hist) {
            if (hist.messages) hist.messages.forEach(function(m) { addMsg(m.role, m.content); });
          });
        } else {
          addMsg('ai', 'Hello! How can I help you today?');
        }
      });
    }

    function sendMessage() {
      var input = document.getElementById('input');
      var msg = input.value.trim();
      if (!msg || !conversationId) return;
      input.value = '';
      addMsg('user', msg);

      apiCall('/api/v1/chat/message', 'POST', {
        conversation_id: conversationId, message: msg
      }, function(data) {
        if (data.message) addMsg('ai', data.message.content);
      });
    }

    function addMsg(role, text) {
      var el = document.getElementById('messages');
      var cls = role === 'user' ? 'user' : 'ai';
      var icon = role === 'user' ? '👤' : '🤖';
      el.innerHTML += '<div class="msg ' + cls + '">' +
        '<div class="avatar">' + icon + '</div>' +
        '<div class="bubble">' + escapeHtml(text) + '</div></div>';
      el.scrollTop = el.scrollHeight;
    }

    function apiCall(path, method, body, cb) {
      var opts = { method: method, headers: {
        'Content-Type':'application/json','Accept':'application/json','X-API-Key': API_KEY }};
      if (body) opts.body = JSON.stringify(body);
      fetch(BASE_URL + path, opts).then(function(r){return r.json()}).then(cb);
    }

    function escapeHtml(s) { var d=document.createElement('div'); d.textContent=s; return d.innerHTML; }

    document.getElementById('input').onkeydown = function(e) {
      if (e.key === 'Enter') sendMessage();
    };

    startChat();
  </script>
</body>
</html>

Iframe Embed

If you prefer to embed the AI page inside an existing page using an iframe, save the above HTML as a separate file (e.g., ai-chat.html) and embed it:

<iframe
  src="/ai-chat.html"
  style="width:100%; height:600px; border:none; border-radius:12px;"
  allow="clipboard-write"
></iframe>

Session Handling

How Sessions Work

ModuLink AI uses session-based conversation management to maintain chat history:

Session ID — Each conversation gets a unique session_id (UUID). This is stored in the browser's sessionStorage.
Automatic Resume — When a user returns, the widget sends the stored session_id to the /api/v1/chat/start endpoint. If a matching conversation exists, it resumes with full message history.
New Session — When sessionStorage is cleared (browser close, new tab), a new session and conversation are created automatically.
Per-User Isolation — Sessions are scoped to your API key and user account. Different API keys create separate conversation pools.

Supabase Persistence

For cross-device persistence, connect Supabase in your dashboard. All conversations and messages are automatically synced to your Supabase project, giving you full data ownership and the ability to query chat history from your own backend.

Custom Session Management

// Generate your own session ID for logged-in users
var sessionId = 'user_' + yourUserId + '_' + Date.now();

// Pass it when starting a conversation
fetch('https://modulinkai.mas.codes/api/v1/chat/start', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-API-Key': 'mlk_your_api_key_here'
  },
  body: JSON.stringify({
    session_id: sessionId
  })
});

API Reference

REST API Endpoints

All API endpoints require the X-API-Key header with your ModuLink API key.

POST /api/v1/chat/start

Start or resume a conversation.

// Request
{ "session_id": "optional-session-uuid" }

// Response
{
  "conversation_id": 1,
  "session_id": "uuid-string",
  "title": "Widget Chat",
  "provider": "OpenAI",
  "model": "gpt-4",
  "project": "My Website",
  "resumed": false
}

POST /api/v1/chat/message

Send a message and receive an AI response.

// Request
{
  "conversation_id": 1,
  "message": "What products do you have?"
}

// Response
{
  "message": {
    "role": "assistant",
    "content": "Here are our products...",
    "content_type": "text",
    "tokens": 150
  }
}

GET /api/v1/chat/messages

Retrieve message history for a conversation.

// Request: GET /api/v1/chat/messages?conversation_id=1

// Response
{
  "conversation_id": 1,
  "title": "Widget Chat",
  "messages": [
    { "role": "user", "content": "Hello", "content_type": "text", "tokens": 0 },
    { "role": "assistant", "content": "Hi! How can I help?", "content_type": "text", "tokens": 12 }
  ]
}

Inner Pages

DASHBOARD PAGES

Upcoming Advance Elements

Inner Pages

DASHBOARD PAGES

Upcoming Advance Elements

Getting Started

1. Initial Setup

2. Your API Key

Chat Widget Integration

Basic Widget Embed

Configuration Options

Available Options

Custom Styling

Dedicated AI Page

Full Page Chat Interface

Iframe Embed

Session Handling

How Sessions Work

Supabase Persistence

Custom Session Management

API Reference

REST API Endpoints

POST /api/v1/chat/start

POST /api/v1/chat/message

GET /api/v1/chat/messages

Get Started with Rainbow

Experience Products in AI

Quick Links

Services

Contact

Inner Pages

DASHBOARD PAGES

Upcoming Advance Elements

Inner Pages

DASHBOARD PAGES

Upcoming Advance Elements

Integration Guide

Getting Started

1. Initial Setup

2. Your API Key

Chat Widget Integration

Basic Widget Embed

Configuration Options

Available Options

Custom Styling

Dedicated AI Page

Full Page Chat Interface

Iframe Embed

Session Handling

How Sessions Work

Supabase Persistence

Custom Session Management

API Reference

REST API Endpoints

POST /api/v1/chat/start

POST /api/v1/chat/message

GET /api/v1/chat/messages

Get Started with Rainbow

Experience Products in AI