AI Enabler Built on Enterprise Data Models

DSiloed is a powerful AI enablement platform built on comprehensive enterprise data models. It provides everything you need to build intelligent, AI-powered applications with rich memory support, advanced chat features, and deep integration with leading AI providers.

Whether you're building customer service bots, intelligent automation systems, or knowledge management platforms, DSiloed gives you enterprise-grade data infrastructure combined with cutting-edge AI capabilities including persistent memory graphs, real-time chat, document processing, and autonomous agents.

This interactive guide will walk you through getting started with DSiloed, setting up AI models, leveraging memory systems, and building powerful AI-enabled enterprise applications.

DSiloed is built on a flexible, enterprise-grade data model designed for extensibility and integration. Here are the key components:

To get started with DSiloed, you need to create a tenant. A tenant is an isolated environment for your application data. Follow these steps to create your first tenant:

After creating your tenant, you'll be directed to the dashboard where you can access all available applications. Here's what you'll find:

DSiloed includes powerful AI capabilities through integration with Large Language Models (LLMs). To enable AI features in your applications, you need to configure LLM models using the LLM Manager application.

This guide will walk you through setting up LLM models from various providers including Anthropic (Claude), OpenAI (GPT), Google (Gemini), xAI (Grok), and local Ollama installations.

DSiloed supports multiple LLM providers. Choose one of the following options based on your needs:

First, you'll need to obtain an API key from Anthropic to access Claude models:

To use OpenAI's GPT models (GPT-3.5, GPT-4), you'll need an OpenAI API key:

To use Google's Gemini models, obtain an API key from Google AI Studio:

To use xAI's Grok models, you'll need an API key from xAI:

Ollama allows you to run LLMs locally on your own hardware, providing privacy and offline capability:

# macOS/Linux
curl -fsSL https://ollama.ai/install.sh | sh

# Windows - Download installer from ollama.ai

# Popular models
ollama pull llama2
ollama pull mistral
ollama pull codellama
ollama pull mixtral

# Check if Ollama is running
ollama list

Once you have your API key (or Ollama installed), use the LLM Manager application to create an LLM Model by selecting from pre-configured model types:

Connect Claude Code to your DSiloed tenant using the Model Context Protocol (MCP) to access all your data, conversations, memories, and platform capabilities directly from your development environment.

{
  "projects": {
    "/home/username/my-project": {
      "mcpServers": {
        "harmoniq": {
          "command": "npx",
          "args": [
            "mcp-remote",
            "https://dev.dsiloed.com/api/v1/mcp",
            "--header",
            "Authorization: Bearer YOUR_JWT_TOKEN_HERE"
          ]
        }
      }
    }
  }
}

{
  "projects": {
    "/Users/john/projects/my-app": {
      "mcpServers": {
        "harmoniq": {
          "command": "npx",
          "args": [
            "mcp-remote",
            "https://www.dsiloed.com/api/v1/mcp",
            "--header",
            "Authorization: Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ..."
          ]
        }
      }
    }
  }
}

{
  "projects": {
    "/home/username/project-one": {
      "mcpServers": {
        "harmoniq": {
          "command": "npx",
          "args": [
            "mcp-remote",
            "https://dev.dsiloed.com/api/v1/mcp",
            "--header",
            "Authorization: Bearer DEV_TOKEN_HERE"
          ]
        }
      }
    },
    "/home/username/project-two": {
      "mcpServers": {
        "harmoniq": {
          "command": "npx",
          "args": [
            "mcp-remote",
            "https://www.dsiloed.com/api/v1/mcp",
            "--header",
            "Authorization: Bearer PROD_TOKEN_HERE"
          ]
        },
        "other-server": {
          "command": "some-command",
          "args": ["arg1"]
        }
      }
    }
  }
}

After configuring your LLM model, you can test it in several ways:

The LLM Memory System provides persistent memory capabilities for AI agents and conversations, enabling long-term learning, pattern recognition, and contextual awareness across sessions. Unlike simple chat history, the memory system uses advanced vector embeddings and graph-based relationships to store and retrieve information semantically.

Memory Types

LLM Memory is configured through the memory_management Configuration. The system requires OpenAI's Text Embedding 3 Small model for vector embeddings, which provides high-quality semantic similarity matching.

Configuration Parameters

Configuration Example

// Step 1: Create OpenAI embedding model in LLM Manager first
// Step 2: Optionally create a classifier model (e.g., GPT-3.5-turbo or GPT-4)
// Step 3: Use internal_identifiers in this configuration

const response = await fetch('/api/v1/configurations', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer ' + token,
    'Tenant-Id': tenantId,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    configuration: {
      internal_identifier: 'memory_management',
      configuration_type_id: 'memory_management',
      configuration_values: {
        // Vector Embeddings (Required for semantic search)
        enable_embeddings: true,
        embedding_model_name: 'openai-embeddings',  // Your embedding LlmModel
        embedding_dimensions: 1536,                  // Fixed - do not change
        embedding_similarity_threshold: 0.7,
        max_embedding_length: 8000,

        // Relationship Classification (Optional but recommended)
        classification_model_name: 'classifier',     // Your classifier LlmModel (null = heuristics only)
        classification_method: 'hybrid',             // 'heuristic', 'llm', or 'hybrid'
        classification_llm_threshold_score: 0.9,     // Similarity threshold for LLM usage
        classification_llm_threshold_importance: 0.8, // Importance threshold for LLM usage
        classification_max_llm_calls_per_consolidation: 50  // Cost control limit
      }
    }
  })
});

# Step 1: Create OpenAI embedding model in LLM Manager first
# Step 2: Optionally create a classifier model (e.g., GPT-3.5-turbo or GPT-4)
# Step 3: Use internal_identifiers in this configuration

# Find your tenant
tenant = Tenant.find_by(enterprise_identifier: 'your-tenant')

# Create or update memory_management configuration
config = Configuration.find_or_initialize_by(
  tenant: tenant,
  internal_identifier: 'memory_management'
)

config.update!(
  configuration_values: {
    # Vector Embeddings (Required for semantic search)
    'enable_embeddings' => true,
    'embedding_model_name' => 'openai-embeddings',  # Your embedding LlmModel
    'embedding_dimensions' => 1536,                  # Fixed - do not change
    'embedding_similarity_threshold' => 0.7,
    'max_embedding_length' => 8000,

    # Relationship Classification (Optional but recommended)
    'classification_model_name' => 'classifier',     # Your classifier LlmModel (nil = heuristics only)
    'classification_method' => 'hybrid',             # 'heuristic', 'llm', or 'hybrid'
    'classification_llm_threshold_score' => 0.9,     # Similarity threshold for LLM usage
    'classification_llm_threshold_importance' => 0.8, # Importance threshold for LLM usage
    'classification_max_llm_calls_per_consolidation' => 50  # Cost control limit
  }
)

Semantic Relationship Classification

When memories are connected, the system automatically classifies the type of relationship between them using intelligent semantic analysis. This creates meaningful knowledge graphs instead of generic "related to" connections.

Available Relationship Types

Automatic Background Processing

Once configured, the memory system runs automatic background jobs to maintain and enhance memory quality:

The memory system integrates seamlessly with AI conversations and agents. Memories are automatically loaded and used to provide context for AI responses.

Common Use Cases

DSiloed includes a powerful, reusable ChatAssistant component that provides AI-powered chat capabilities to any application. The component is framework-independent and features a modern, Discord-like interface with conversation management.

Key Features

The ChatAssistant component supports intelligent @ai mentions that allow users to interact with specific LLM models within conversations.

@AI Mention Syntax

Examples

Basic Setup

// Include the ChatAssistant component
<script src="js/components/ChatAssistant.js?v=1764792677"></script>

// Initialize with your API client
const chatAssistant = new ChatAssistant('YourAppName', {
    apiClient: apiClient,
    title: 'AI Assistant',
    placeholder: 'Ask me anything...',
    contextMessage: 'Assistant has access to your data'
});

// Toggle chat visibility
chatAssistant.toggle();

Vue.js Integration

// In your Vue component
methods: {
    initChatAssistant() {
        this.chatAssistant = new ChatAssistant('MyApp', {
            apiClient: this.apiClient,
            title: 'MyApp Assistant',
            onError: (error) => {
                this.showSnackbar('Chat error: ' + error.message, 'error');
            }
        });
    },
    toggleChat() {
        if (this.chatAssistant) {
            this.chatAssistant.toggle();
        }
    }
},
mounted() {
    this.initChatAssistant();
}

React Integration

// In your React component
import { useEffect, useRef } from 'react';

function MyApp() {
    const chatAssistantRef = useRef(null);
    
    useEffect(() => {
        chatAssistantRef.current = new ChatAssistant('MyApp', {
            apiClient: apiClient,
            title: 'MyApp Assistant'
        });
    }, []);
    
    const toggleChat = () => {
        if (chatAssistantRef.current) {
            chatAssistantRef.current.toggle();
        }
    };
    
    return (
        <button onClick={toggleChat}>Toggle Chat</button>
    );
}

Webhooks allow external systems to send messages directly into conversations without authentication. This enables integration with external applications, chatbots, monitoring systems, and more.

Creating Webhooks

Webhooks can be created through the ChatAssistant Settings interface or via API. Each webhook generates a unique URL that external systems can use to post messages.

Webhook API Endpoint

Example CURL Request

# Send a message via webhook
curl -X POST "https://your-domain.com/api/v1/webhooks/your-webhook-key/publish_message" \
     -H "Content-Type: application/json" \
     -d '{
       "message": "Alert: Server CPU usage is at 85%"
     }'

Advanced Usage with @AI Mentions

# Send a message that triggers AI response
curl -X POST "https://your-domain.com/api/v1/webhooks/your-webhook-key/publish_message" \
     -H "Content-Type: application/json" \
     -d '{
       "message": "@ai Please analyze this error and suggest a solution: Database connection timeout after 30 seconds"
     }'

Creating Webhooks via API

// Create a new webhook for a conversation
const webhookData = {
  webhook: {
    name: "Server Monitoring",
    description: "Webhook for server monitoring alerts",
    related_entity_type: "LlmConversation",
    related_entity_id: conversationId,
    direction: "inbound"
  }
};

const response = await fetch('/api/v1/webhooks', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer ' + token,
    'Tenant-Id': tenantId,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(webhookData)
});

const result = await response.json();
console.log('Webhook URL:', result.webhook.url);

ChatAssistant Configuration

Model Context Protocol (MCP) tools provide a standardized interface for AI models to interact with your DSiloed platform. These tools enable LLMs to perform operations, access data, manage agents, handle communications, and more.

All MCP tools are available through the MCP server and can be used by external applications, AI agents, and LLM conversations. This reference lists all 35+ available MCP tools with their descriptions and use cases.

Tools for sending emails and managing conversation invitations.

Tools for CRUD operations, schema discovery, and file management.

Tools for creating, managing, and executing autonomous AI agents.

Tools for persistent memory management across AI sessions.

Tools for managing LLM conversations and messaging.

Tools for accessing platform documentation.

Utility and administrative tools for system operations.

Tools for creating, managing, and executing serverless JavaScript functions.

MCP tools can be accessed in multiple ways:

DSiloed provides a comprehensive RESTful API for building applications. All endpoints follow consistent RESTful conventions with JSON responses.

Authentication

Authentication uses JWT (JSON Web Tokens) passed in the Authorization header.

curl -X GET "https://example-model-api.com/api/v1/parties" \
    -H "Authorization: Bearer YOUR_JWT_TOKEN" \
    -H "Tenant-Id: your-tenant-id"

Content Types

All API requests should use JSON for request bodies and accept JSON responses.

-H "Content-Type: application/json" \
-H "Accept: application/json"

Response Format

Responses follow a consistent format with data returned in an object named after the resource.

// Single resource example (e.g., GET /api/v1/users/123)
{
  "success": true,
  "user": {
    "id": 123,
    "description": "John Doe",
    "created_at": "2025-05-01T12:34:56Z",
    "updated_at": "2025-05-02T10:11:12Z"
  }
}

// Multiple resources example (e.g., GET /api/v1/users)
{
  "success": true,
  "total_count": 42,
  "users": [
    {
      "id": 123,
      "description": "John Doe",
      "created_at": "2025-05-01T12:34:56Z"
    },
    {
      "id": 124,
      "description": "Jane Smith",
      "created_at": "2025-05-02T08:15:30Z"
    }
    // ... more users
  ]
}

Error Handling

Errors return a simple format with success set to false and an error message.

{
  "success": false,
  "message": "Invalid Access"
}

The Cross-Tenant User Access system enables controlled user-level access between tenants. Users from one tenant can be granted specific roles and permissions in another tenant, enabling collaboration while maintaining security and data isolation.

Key Features

Step 1: Tenant A requests access for specific users
Step 2: Tenant B accepts the relationship request
Step 3: Tenant B grants SecurityRoles to users from Tenant A
Step 4: Users switch workspaces and access Tenant B's data (within their role permissions)

Dynamic Functions provide a serverless JavaScript execution environment within the DSiloed platform. They allow you to create, manage, and execute custom JavaScript functions that can integrate with external APIs, process data, and automate workflows—all without managing any infrastructure.

Create a dynamic function using the REST API. Functions receive a context object with parameters, configuration, OAuth tokens, and tenant information.

// Create a function via REST API
POST /api/v1/dynamic_functions
Content-Type: application/json

{
  "dynamic_function": {
    "name": "hello_world",
    "description": "A simple greeting function",
    "javascript_code": "return { message: 'Hello, ' + (params.name || 'World') + '!' };",
    "active": true,
    "timeout_seconds": 30
  }
}

Execute the function by ID or name:

// Execute by name
POST /api/v1/dynamic_functions/hello_world/execute
Content-Type: application/json

{
  "params": {
    "name": "DSiloed"
  }
}

// Response:
{
  "success": true,
  "result": { "message": "Hello, DSiloed!" },
  "execution_id": 456,
  "execution_time_ms": 12
}

Functions receive a rich context with access to parameters, configuration, and built-in functions for data access and HTTP requests.

// Available context properties
params                    // Parameters passed when executing
config                    // Function configuration (excluding secrets)
functionId                // Database ID of this function
functionName              // Function name
tenantId                  // Current tenant ID

// OAuth tokens (if connected)
oauth.accessToken         // OAuth access token
oauth.tokenType           // Token type (usually "Bearer")

// Callback context (only in callback executions)
event                     // 'create', 'update', or 'destroy'
model_name                // Model class name (e.g., 'Task')
record_id                 // ID of the affected record
record                    // Full record data
changes                   // Changed attributes (update only)

// Make HTTP requests to external APIs
const response = await fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${oauth.accessToken}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
});

const data = await response.json();
return { fetched: data };

// Query tenant data
var customers = executeAction('Individual', 'list', {
  filters: { role_type_id: 'customer' },
  limit: 100
});

// Create records
var newContact = executeAction('PhoneNumber', 'create', {
  attributes: {
    party_id: 123,
    phone_number: '555-1234'
  }
});

// Update records
executeAction('Individual', 'update', {
  id: 456,
  attributes: { custom_fields: { synced: true } }
});

// Convenience wrappers also available:
listRecords(modelName, options)
getRecord(modelName, id)
createRecord(modelName, attributes)
updateRecord(modelName, id, attributes)
deleteRecord(modelName, id)
findOrCreateRecord(modelName, findAttrs, createAttrs)

// Execute another DynamicFunction by name (synchronous by default)
const result = executeFunction('helper_function', { key: 'value' });

if (result.success) {
  console.log('Helper returned:', result.result);
} else {
  console.error('Helper failed:', result.error);
}

// Execute asynchronously (queued for background execution)
const asyncResult = executeFunction('long_running_task', { data: params.input }, true);
// Returns immediately: { success: true, message: '...', execution_id: ... }

// Chain multiple functions together
const validation = executeFunction('validate_data', { data: params.input });
if (!validation.success || !validation.result.valid) {
  return { success: false, error: 'Validation failed' };
}

const processed = executeFunction('process_data', {
  data: params.input,
  validationResult: validation.result
});

return processed.result;

// executeFunction(functionNameOrId, params, async)
// - functionNameOrId: Name or ID of the function
// - params: Parameters object (optional)
// - async: If true, queues for background execution (optional, default: false)

// Look up external ID for a local record
var result = getExternalId('Party', partyId, 'xero', 'xero_user_id');
if (result.found) {
  console.log('Xero user ID:', result.external_id);
}

// Find local record by external ID
var projectMapping = findByExternalId('Project', 'xero', xeroProjectId);
if (projectMapping.found) {
  var localProject = projectMapping.record;
}

// Store a new mapping
storeExternalMapping('Project', localProjectId, 'xero', xeroProjectId, {
  column_name: 'xero_project_id',
  table_name: 'xero_projects',
  is_primary_key: true
});

Functions can be scheduled to run automatically using cron expressions. The scheduler checks every 30 seconds for functions due to execute.

// Create a scheduled function
POST /api/v1/dynamic_functions
{
  "dynamic_function": {
    "name": "daily_sync",
    "description": "Sync contacts with CRM every morning",
    "javascript_code": "/* sync logic */",
    "schedule": "0 9 * * *",
    "timeout_seconds": 120,
    "run_as_user_id": 123,
    "active": true
  }
}

Functions can be triggered automatically when records are created, updated, or destroyed. This enables event-driven automation without polling.

// Create a callback function for task creation
POST /api/v1/dynamic_functions
{
  "dynamic_function": {
    "name": "on_task_created",
    "description": "Notify team when tasks are created",
    "callback_model": "Task",
    "callback_event": "create",
    "run_as_user_id": 123,
    "javascript_code": `
      // Context includes: event, model_name, record_id, record
      console.log('Task created:', record.name);

      // Send notification to external system
      await fetch('https://slack.com/api/chat.postMessage', {
        method: 'POST',
        headers: {
          'Authorization': 'Bearer ' + oauth.accessToken,
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          channel: '#tasks',
          text: 'New task created: ' + record.name
        })
      });

      return { notified: true };
    `
  }
}

Dynamic Functions support OAuth 2.0 for integrating with external services. OAuth is configuration-based, meaning any OAuth 2.0 provider can be used without code changes.

OAuth Configuration

{
  "oauth": {
    "provider": "xero",
    "client_id": "YOUR_CLIENT_ID",
    "client_secret": "YOUR_CLIENT_SECRET",
    "authorize_url": "https://login.xero.com/identity/connect/authorize",
    "token_url": "https://identity.xero.com/connect/token",
    "scopes": ["openid", "profile", "accounting.transactions.read"]
  }
}

OAuth Flow

AI agents can manage and execute Dynamic Functions via five dedicated MCP tools. This enables intelligent automation where AI can create, modify, and run custom code.

DSiloed comes with several sample applications that demonstrate different capabilities of the platform. Each app is built as a static JavaScript application that interacts with the API.

Building your own application on top of DSiloed is straightforward. You can use any modern JavaScript framework that can make HTTP requests to the API.

# Create the main app directory
mkdir -p myapp

# Create subdirectories for CSS, JavaScript, and documentation
mkdir -p myapp/css
mkdir -p myapp/js
mkdir -p myapp/js/components
mkdir -p myapp/docs

# Create basic files
touch myapp/index.html
touch myapp/css/styles.css
touch myapp/js/app.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My App - DSiloed</title>

    <!-- Vue and Vuetify -->
    <link href="https://cdn.jsdelivr.net/npm/vuetify@3.5.11/dist/vuetify.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">

    <!-- Custom styles -->
    <link rel="stylesheet" href="css/styles.css?v=1764792677">

    <!-- Auth helper -->
    <script src="js/auth.js?v=1764792677"></script>
    <script src="js/components/LoginDialog.js?v=1764792677"></script>

    <!-- App scripts -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3.4.21/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@3.5.11/dist/vuetify.min.js"></script>
    <script src="js/app.js?v=1764792677" defer></script>
</head>
<body>
    <div id="app" v-cloak>
        <v-app>
            <v-app-bar color="primary" app>
                <v-app-bar-title>My App</v-app-bar-title>
            </v-app-bar>

            <v-main>
                <v-container>
                    <h1>My Custom App</h1>
                    <p>Welcome to my custom DSiloed application!</p>
                </v-container>
            </v-main>
        </v-app>
    </div>
</body>
</html>

// Initialize Vue app
document.addEventListener('DOMContentLoaded', function() {
  const { createApp } = Vue;
  const { createVuetify } = Vuetify;
  
  // Initialize authentication
  const authManager = new AuthManager('myapp');
  
  // Create Vuetify instance
  const vuetify = createVuetify();
  
  const app = createApp({
    data() {
      return {
        authManager: authManager,
        isAuthenticated: false,
        user: null,
      }
    },
    
    methods: {
      async initialize() {
        // Initialize authentication
        const authResult = await this.authManager.initialize();
        this.isAuthenticated = authResult.authenticated;
        this.user = authResult.user;
        
        // Show login if not authenticated
        if (!this.isAuthenticated) {
          this.showLogin();
        }
      },
      
      showLogin() {
        const loginDialog = new LoginDialog('myapp');
        loginDialog.onLogin = (result) => {
          if (result.success) {
            this.isAuthenticated = true;
            this.user = result.user;
            console.log('Logged in as:', this.user.email);
          }
        };
        loginDialog.show();
      },
      
      logout() {
        this.authManager.logout();
        this.isAuthenticated = false;
        this.user = null;
      }
    },
    
    mounted() {
      this.initialize();
    }
  });
  
  app.use(vuetify);
  app.mount('#app');
});

# Create a new React app
npx create-react-app my-model-api-app

# Navigate to the app directory
cd my-model-api-app

# Install Material UI and other dependencies
npm install @mui/material @mui/icons-material @emotion/react @emotion/styled

// src/utils/auth.js
export class AuthManager {
  constructor(appName) {
    this.appName = appName;
    this.authToken = localStorage.getItem('auth_token');
    this.tenantId = localStorage.getItem('tenant_id');
    this.user = null;
  }

  isAuthenticated() {
    return !!this.authToken;
  }

  getToken() {
    return this.authToken;
  }

  getTenantId() {
    return this.tenantId;
  }

  async loadUserInfo() {
    if (!this.isAuthenticated()) {
      return null;
    }

    try {
      const response = await fetch('https://modelapi.russonrails.com/api/v1/users/current', {
        headers: {
          'Authorization': 'Bearer ' + this.authToken,
          'Tenant-Id': this.tenantId || 'root-tenant'
        }
      });

      const data = await response.json();
      
      if (data.success) {
        this.user = data.user;
        return this.user;
      } else {
        this.logout();
        return null;
      }
    } catch (error) {
      console.error('Error loading user info:', error);
      return null;
    }
  }

  async login(email, password, tenantId) {
    try {
      const response = await fetch('https://modelapi.russonrails.com/api/v1/users/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Tenant-Id': tenantId
        },
        body: JSON.stringify({
          email: email,
          password: password
        })
      });

      const data = await response.json();
      
      if (data.success) {
        this.authToken = data.token;
        this.tenantId = tenantId;
        
        localStorage.setItem('auth_token', this.authToken);
        localStorage.setItem('tenant_id', this.tenantId);
        
        await this.loadUserInfo();
        
        return { success: true, user: this.user };
      } else {
        return { success: false, message: data.message || 'Invalid email or password' };
      }
    } catch (error) {
      console.error('Login error:', error);
      return { success: false, message: 'An error occurred during login. Please try again.' };
    }
  }

  logout() {
    this.authToken = null;
    this.user = null;
    localStorage.removeItem('auth_token');
    localStorage.removeItem('tenant_id');
    window.location.href = window.location.pathname;
  }

  async initialize() {
    if (this.isAuthenticated()) {
      const user = await this.loadUserInfo();
      return { authenticated: true, user: user };
    }
    return { authenticated: false };
  }
}

// src/components/LoginDialog.jsx
import React, { useState } from 'react';
import {
  Dialog, DialogTitle, DialogContent, DialogActions,
  TextField, Button, CircularProgress, Alert
} from '@mui/material';

function LoginDialog({ open, onClose, onLogin, authManager }) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [tenantId, setTenantId] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');
    setLoading(true);

    try {
      if (!tenantId) {
        setError('Tenant ID is required');
        setLoading(false);
        return;
      }

      const result = await authManager.login(email, password, tenantId);

      if (result.success) {
        onLogin(result);
        onClose();
      } else {
        setError(result.message || 'Login failed');
      }
    } catch (err) {
      setError('An unexpected error occurred. Please try again.');
    } finally {
      setLoading(false);
    }
  };

  return (
    

      Login to {authManager.appName}
      

        
          {error && {error}}

           setEmail(e.target.value)}
            required
          />

           setPassword(e.target.value)}
            required
          />

           setTenantId(e.target.value)}
            required
          />
        

        
          Cancel
          
            {loading ?  : 'Login'}
          
        
      
    
  );
}

export default LoginDialog;

// src/App.jsx
import React, { useState, useEffect, useRef } from 'react';
import { 
  Container, AppBar, Toolbar, Typography, Button, 
  ThemeProvider, createTheme, CssBaseline, Box
} from '@mui/material';
import { AuthManager } from './utils/auth';
import LoginDialog from './components/LoginDialog';

const theme = createTheme({
  palette: {
    primary: {
      main: '#3161FF',
    },
    secondary: {
      main: '#6C63FF',
    },
  },
});

function App() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [user, setUser] = useState(null);
  const [loginOpen, setLoginOpen] = useState(false);
  const authManager = useRef(new AuthManager('myapp')).current;
  
  useEffect(() => {
    const initializeAuth = async () => {
      try {
        const authResult = await authManager.initialize();
        setIsAuthenticated(authResult.authenticated);
        setUser(authResult.user);
      } catch (error) {
        console.error('Auth initialization error:', error);
      }
    };
    
    initializeAuth();
  }, []);
  
  const handleLogin = (result) => {
    if (result.success) {
      setIsAuthenticated(true);
      setUser(result.user);
    }
  };
  
  const handleLogout = () => {
    authManager.logout();
    setIsAuthenticated(false);
    setUser(null);
  };
  
  return (
    
      
      

        
          
            
              My App
            
            {isAuthenticated ? (
              <>
                
                  {user?.email}
                
                Logout
              
            ) : (
               setLoginOpen(true)}>Login
            )}
          
        
        
        
          {isAuthenticated ? (
            
              
                My Custom App
              
              
                Welcome to my custom DSiloed application!
              
            
          ) : (
            
              
                Welcome to My App
              
              
                Please log in to access the application.
              
               setLoginOpen(true)}
              >
                Login
              
            
          )}
        
        
         setLoginOpen(false)}
          onLogin={handleLogin}
          authManager={authManager}
        />
      
    
  );
}

export default App;

// Example API hook (src/hooks/useApi.js)
import { useState, useCallback } from 'react';

export function useApi(authManager) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const headers = useCallback(() => ({
    'Authorization': 'Bearer ' + authManager.getToken(),
    'Tenant-Id': authManager.getTenantId(),
    'Content-Type': 'application/json'
  }), [authManager]);

  const fetchData = useCallback(async (endpoint, options = {}) => {
    if (!authManager.isAuthenticated()) {
      setError('Authentication required');
      return null;
    }

    setLoading(true);
    setError(null);

    try {
      const response = await fetch(`https://modelapi.russonrails.com/api/v1/${endpoint}`, {
        ...options,
        headers: {
          ...headers(),
          ...(options.headers || {})
        }
      });

      const data = await response.json();

      if (!data.success) {
        throw new Error(data.error?.message || 'API request failed');
      }

      return data;
    } catch (err) {
      setError(err.message);
      return null;
    } finally {
      setLoading(false);
    }
  }, [authManager, headers]);

  return { loading, error, fetchData };
}

// Using the hook in a component:
function PartyList() {
  const [parties, setParties] = useState([]);
  const authManager = useRef(new AuthManager('myapp')).current;
  const { loading, error, fetchData } = useApi(authManager);

  const loadParties = useCallback(async () => {
    const data = await fetchData('parties');
    if (data) {
      setParties(data.parties);
    }
  }, [fetchData]);

  useEffect(() => {
    if (authManager.isAuthenticated()) {
      loadParties();
    }
  }, [authManager, loadParties]);

  if (loading) return ;
  if (error) return {error};

  return (
    
      {parties.map(party => (
        
          
        
      ))}
    
  );
}

The ChatAssistant component provides a reusable, framework-independent chat interface that you can easily add to any application. It works with Vue.js, React, vanilla JavaScript, or any other framework.

Basic Usage

// Include the ChatAssistant component
<script src="js/components/ChatAssistant.js?v=1764792677"></script>

// Initialize in your application
const chatAssistant = new ChatAssistant('MyApp', {
    apiClient: apiClient,  // Your API client instance
    title: 'AI Assistant',
    placeholder: 'Ask me anything...',
    contextMessage: 'Assistant has access to your application data'
});

// Show/hide the chat
chatAssistant.toggle();

Vue.js Integration Example

// In your Vue app
methods: {
    initChatAssistant() {
        this.chatAssistant = new ChatAssistant('MyApp', {
            apiClient: apiClient,
            title: 'MyApp Assistant',
            placeholder: 'Ask about your data...',
            contextMessage: 'Assistant can help with your application',
            onError: (error) => {
                this.showSnackbar('Chat error: ' + error.message, 'error');
            }
        });
    },
    
    toggleChat() {
        if (this.chatAssistant) {
            this.chatAssistant.toggle();
        }
    }
},

mounted() {
    this.initChatAssistant();
}

React Integration Example

import { useEffect, useRef } from 'react';

function MyApp() {
    const chatAssistantRef = useRef(null);
    
    useEffect(() => {
        // Initialize ChatAssistant
        chatAssistantRef.current = new ChatAssistant('MyApp', {
            apiClient: apiClient,
            title: 'MyApp Assistant',
            onError: (error) => {
                showErrorToast(error.message);
            }
        });
        
        // Cleanup on unmount
        return () => {
            if (chatAssistantRef.current) {
                chatAssistantRef.current.destroy();
            }
        };
    }, []);
    
    const toggleChat = () => {
        if (chatAssistantRef.current) {
            chatAssistantRef.current.toggle();
        }
    };
    
    return (
        <div>
            <button onClick={toggleChat}>
                Toggle Chat Assistant
            </button>
            {/* Your app content */}
        </div>
    );
}

Configuration Options

const chatAssistant = new ChatAssistant('AppName', {
    // Required
    apiClient: apiClientInstance,
    
    // UI Configuration
    title: 'AI Assistant',
    placeholder: 'Ask me anything...',
    contextMessage: 'Assistant has access to your data',
    position: 'right', // 'left' or 'right'
    width: '400px',
    height: '600px',
    zIndex: 1000,
    
    // Event Callbacks
    onToggle: (isVisible) => {
        console.log('Chat toggled:', isVisible);
    },
    onMessage: (message) => {
        console.log('New message:', message);
    },
    onError: (error) => {
        console.error('Chat error:', error);
    }
});

You can use Large Language Models (LLMs) like Claude to help you build applications on top of DSiloed. Here's a prompt template to help you get started:

Simply modify the prompt template above to specify your application's requirements, then paste it to an LLM like Claude or GPT to get help building your application.

Now that you've explored the DSiloed platform, here are some next steps to continue your journey: