Operations Manual

Complete Technical Guide for Building & Maintaining the Axis Trust Systems Platform

Technical Documentation Step-by-Step Guides Print-Ready
PART I

Introduction & Architecture

Purpose of This Manual

This Operations Manual provides comprehensive technical documentation for building, deploying, and maintaining all programs on the Axis Trust Systems platform. Each section includes step-by-step instructions, code examples, and expected outcomes.

Platform Architecture Overview

┌─────────────────────────────────────────────────────────────────────────┐
│                     LANDINGSITE.AI WEBSITE                              │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                          │
│  ┌──────────────────┐    ┌──────────────────┐    ┌──────────────────┐  │
│  │   Marketing      │    │   AI Agent       │    │    War Room      │  │
│  │   Pages          │    │   Builder        │    │    (Static)      │  │
│  │   (Static)      │    │   (Interactive)  │    │    Documentation │  │
│  └────────┬─────────┘    └────────┬─────────┘    └────────┬─────────┘  │
│           │                        │                        │             │
│           └────────────────────────┼────────────────────────┘             │
│                                    │                                      │
│                                    ▼                                      │
│                    ┌───────────────────────────────┐                     │
│                    │    JAVASCRIPT FRONTEND         │                     │
│                    │    (index.js - Interactive)     │                     │
│                    └───────────────────────────────┘                     │
│                                    │                                      │
└────────────────────────────────────┼──────────────────────────────────────┘
                                     │
                                     ▼
                    ┌───────────────────────────────┐
                    │    EXTERNAL SERVICES           │
                    ├───────────────────────────────┤
                    │  • OpenAI API (GPT-4)         │
                    │  • Railway/Replit (Backend)  │
                    │  • localStorage (Browser)     │
                    └───────────────────────────────┘

Core Components

Frontend Layer

Landingsite.ai provides the frontend infrastructure with HTML, CSS (Tailwind), and JavaScript.

AI Processing

OpenAI GPT-4 API handles all AI processing, generating responses based on system prompts.

Backend Services

Node.js/Express deployed on Railway or Replit handles API requests and secure key management.

Expected Outcome

After reading this section, you should understand the high-level architecture of the platform and how the different components interact with each other. This foundation is essential for understanding all subsequent sections.

PART I

Technology Stack

This section details all technologies used in the platform and their purposes.

Frontend Technologies

Technology Purpose Usage in Platform
Landingsite.ai Website Builder Platform Hosts all pages, provides editing interface
HTML5 Structure & Content All page layouts and sections
Tailwind CSS Styling Framework All visual styling, responsive design
JavaScript (ES6+) Interactivity & Logic All interactive features, API calls
Font Awesome Icon Library All icons throughout the platform
localStorage Browser Storage Persisting agent data and files

Backend Technologies

Technology Purpose Usage in Platform
Node.js JavaScript Runtime Runs backend server code
Express.js Web Framework Handles HTTP requests and API routes
OpenAI SDK AI API Client Connects to GPT-4 API
Railway / Replit Deployment Platform Hosts the backend server

Expected Outcome

You should now understand the complete technology stack. Each technology serves a specific purpose in the platform architecture. This knowledge is essential for debugging and extending the platform.

PART I

Development Environment Setup

Prerequisites

Before starting development, ensure you have access to: (1) Landingsite.ai account, (2) OpenAI API account with credits, (3) Railway or Replit account for backend deployment.

Step 1: Set Up OpenAI Account

  1. 1

    Visit OpenAI Platform

    Go to https://platform.openai.com and create an account or log in.

  2. 2

    Add Payment Method

    Go to Settings → Billing → Add payment method. You need credits to use the API.

  3. 3

    Create API Key

    Go to API Keys → Create new secret key. Copy and save it securely (you'll need it for the backend).

Step 2: Set Up Railway Account

  1. 1

    Visit Railway

    Go to https://railway.app and sign up with GitHub.

  2. 2

    Create New Project

    Click "New Project" → "Empty Service" to create a new project.

  3. 3

    Add Environment Variables

    Go to Variables tab → Add OPENAI_API_KEY with your OpenAI key.

Step 3: Set Up Replit Account (Alternative)

  1. 1

    Visit Replit

    Go to https://replit.com and sign up.

  2. 2

    Create New Repl

    Click "+ Create" → Select "Node.js" template → Name it "ai-agent-backend".

  3. 3

    Add Secret

    Click Secrets (lock icon) → New Secret → Add OPENAI_API_KEY.

Security Warning

Never share your API keys in public forums, chat messages, or public repositories. Always use environment variables (Secrets) to store them. If a key is compromised, revoke it immediately from the OpenAI dashboard.

Expected Outcome

After completing this section, you should have: (1) OpenAI account with API key, (2) Railway or Replit account ready for deployment. These credentials are required for all subsequent steps.

PART II

AI Agent Builder - System Overview

What is the AI Agent Builder?

The AI Agent Builder is an interactive web application that allows users to create, configure, and deploy custom AI agents without writing code. Each agent can perform specific tasks based on its role (Support, Sales, Operations, or Admin) and communicates with a specific tone.

Core Features

Agent Creation Wizard

Form-based interface to create new agents with name, role, description, and tone selection.

Agent Management

View, edit, delete, and toggle status (active/draft) of all agents.

System Prompt Generator

Automatically generates detailed prompts for GPT-4 based on agent configuration.

Agent Execution Monitor

Run agents and observe real-time execution logs, tasks completed, and tools used.

Output File Management

View, download, and delete generated output files from agent executions.

AI Help Assistant

Draggable chat window that answers questions about the platform.

Agent Roles

Role Icon Purpose Example Task
Support Customer service & inquiry handling Respond to order status inquiries
Sales Lead qualification & conversion Qualify leads and schedule demos
Operations Workflow automation & reporting Generate weekly operations reports
Admin System configuration & compliance Review system configurations

Expected Outcome

You should understand the purpose and capabilities of the AI Agent Builder. This includes knowing what each feature does and how agents are categorized by role. This foundation is essential for building and maintaining the system.

PART II

Data Structures & Storage

Storage Method

The AI Agent Builder uses browser localStorage to persist data. This means agent data is stored in the user's browser and persists across sessions. Each browser has its own separate data.

Agent Data Structure

// Storage Key: 'aiAgents'
// Stored in localStorage as JSON string

Agent Object:
{
  id: "agent_1707000000000_abc123def",    // Unique identifier (timestamp + random)
  name: "Customer Support Bot",            // User-defined agent name
  role: "support",                         // support | sales | operations | admin
  description: "Handles customer inquiries...", // User-defined description
  tone: "friendly",                        // friendly | professional | direct
  status: "active",                        // active | draft
  createdAt: 1707000000000,               // Unix timestamp in milliseconds
  updatedAt: 1707000000000                 // Unix timestamp in milliseconds
}

File Data Structure

// Storage Key: 'aiAgentFiles'
// Stored in localStorage as JSON string

File Object:
{
  id: "agent_1707000000000_file123",      // Unique identifier
  agentName: "Customer Support Bot",        // Name of agent that generated file
  agentRole: "support",                     // Role of agent
  filename: "support-output-1707000000000.txt", // Auto-generated filename
  content: "Agent Execution Report\n...",   // Full text content
  wordCount: 350,                           // Number of words in content
  timestamp: 1707000000000,                // Unix timestamp
  type: "support"                           // Same as agent role
}

JavaScript Storage Functions

Get Agents

function getAgents() {
  const stored = localStorage.getItem('aiAgents')
  return stored ? JSON.parse(stored) : []
}

Save Agents

function saveAgents(agents) {
  localStorage.setItem('aiAgents', JSON.stringify(agents))
}

Create New Agent

function createAgent(formData) {
  const agent = {
    id: generateId(),  // "agent_" + Date.now() + "_" + random string
    name: formData.get('agentName'),
    role: formData.get('role'),
    description: formData.get('agentDescription'),
    tone: formData.get('tone'),
    status: 'draft',
    createdAt: Date.now(),
    updatedAt: Date.now(),
  }
  
  const agents = getAgents()
  agents.unshift(agent)  // Add to beginning of array
  saveAgents(agents)
  
  renderAgents()  // Update UI
}

CRUD Operations

Create

Add new agent to localStorage

agents.unshift(newAgent)
saveAgents(agents)

Read

Retrieve agents from localStorage

getAgents()
agents.find(a => a.id === id)

Update

Modify existing agent in localStorage

agent.name = newName
agent.updatedAt = Date.now()
saveAgents(agents)

Delete

Remove agent from localStorage

agents.filter(a => a.id !== id)
saveAgents(agents)

Important Limitation

localStorage data is browser-specific. If a user clears their browser cache/data, all agent data will be lost. For production use, consider implementing a backend database (like Supabase or PostgreSQL) to persist data server-side.

Expected Outcome

You should understand how agent and file data is structured and stored. This knowledge is essential for debugging data issues, extending functionality, and planning future database migrations.

PART II

Backend API Setup

The backend server handles secure communication between the frontend and OpenAI API. It protects API keys and processes agent requests.

Option A: Railway Deployment (Recommended)

Step-by-Step Railway Setup

1

Create GitHub Repository

  • • Go to https://github.com/new
  • • Repository name: "ai-agent-backend"
  • • Select "Private"
  • • Click "Create repository"
2

Add package.json

Create a new file in GitHub called "package.json" with this content:

{
  "name": "ai-agent-backend",
  "version": "1.0.0",
  "main": "server.js",
  "engines": { "node": "18.x" },
  "scripts": { "start": "node server.js" },
  "dependencies": {
    "express": "^4.18.2",
    "cors": "^2.8.5",
    "openai": "^4.20.0",
    "dotenv": "^16.3.1"
  }
}
3

Add server.js

Create a new file in GitHub called "server.js" (full code provided in next section).

4

Deploy to Railway

  • • Go to https://railway.app/dashboard
  • • Click "New Project" → "Deploy from GitHub repo"
  • • Select your "ai-agent-backend" repository
  • • Wait for deployment to complete
5

Add Environment Variables

  • • In Railway, go to "Variables" tab
  • • Add: OPENAI_API_KEY = your_openai_key
  • • Add: PORT = 3000
  • • Click "Deploy" to restart with new variables
6

Get Your URL

  • • Go to "Settings" → "Networking"
  • • Click "Generate Domain"
  • • Enter port: 3000
  • • Copy the generated URL (e.g., https://your-app.up.railway.app)

Option B: Replit Deployment (Easier)

Step-by-Step Replit Setup

1

Create Account & Repl

  • • Go to https://replit.com
  • • Sign up with Google or GitHub
  • • Click "+ Create Repl"
  • • Select "Node.js" template
  • • Name: "ai-agent-backend"
  • • Click "Create Repl"
2

Add server.js Code

Delete the default code in index.js and paste the complete server code (provided in next section).

3

Add OpenAI API Key

  • • Click the "Secrets" lock icon on the left
  • • Click "New Secret"
  • • Key: OPENAI_API_KEY
  • • Value: your_openai_key
  • • Click "Add Secret"
4

Run the Server

  • • Click the big green "Run" button at the top
  • • Wait for packages to install
  • • You'll see "Server running on port 3000"
  • • Copy the URL from the preview window

Expected Outcome

You should have a deployed backend server with a public URL. This URL will be used in the frontend JavaScript to make API calls. Keep this URL handy - you'll need it to update the frontend configuration.

Complete Server Code

const express = require('express');
const cors = require('cors');
const OpenAI = require('openai');

const app = express();
const PORT = process.env.PORT || 3000;

// Middleware
app.use(cors());
app.use(express.json());

// Initialize OpenAI with API key from environment
const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY
});

// ============================================
// API ENDPOINTS
// ============================================

// Health check endpoint
app.get('/health', (req, res) => {
  res.json({
    status: 'OK',
    message: 'AI Agent Backend is running',
    timestamp: new Date().toISOString()
  });
});

// Root endpoint
app.get('/', (req, res) => {
  res.json({
    message: 'AI Agent Backend API',
    version: '1.0.0',
    endpoints: {
      health: '/health',
      chat: '/api/chat (POST)'
    }
  });
});

// Main chat endpoint - processes agent requests
app.post('/api/chat', async (req, res) => {
  try {
    const { systemPrompt, userMessage, agentRole } = req.body;

    // Validate required fields
    if (!systemPrompt || !userMessage) {
      return res.status(400).json({ 
        error: 'Missing required fields: systemPrompt and userMessage' 
      });
    }

    // Check if API key is configured
    if (!process.env.OPENAI_API_KEY) {
      return res.status(500).json({ 
        error: 'OpenAI API key not configured on server' 
      });
    }

    // Call OpenAI API
    const completion = await openai.chat.completions.create({
      model: 'gpt-4',
      messages: [
        { role: 'system', content: systemPrompt },
        { role: 'user', content: userMessage }
      ],
      temperature: 0.7,
      max_tokens: 1000
    });

    // Extract response
    const response = completion.choices[0].message.content;

    // Return successful response
    res.json({
      response: response,
      model: completion.model,
      usage: completion.usage,
      agentRole: agentRole
    });

  } catch (error) {
    console.error('OpenAI API Error:', error);
    res.status(500).json({ 
      error: 'Failed to generate response',
      details: error.message 
    });
  }
});

// Start server
app.listen(PORT, '0.0.0.0', () => {
  console.log(`Server running on port ${PORT}`);
});

How to Use This Code

Copy the code above and paste it into your server.js file (for Railway) or index.js file (for Replit). This is the complete backend that handles all AI agent requests.

API Endpoint Reference

Endpoint Method Description
/ GET Returns API information
/health GET Health check - returns status OK
/api/chat POST Send message to AI agent

Request/Response Format

POST /api/chat - Request

{
  "systemPrompt": "You are a support agent...",
  "userMessage": "A customer is asking...",
  "agentRole": "support"
}

POST /api/chat - Response

{
  "response": "Hello! I'd be happy...",
  "model": "gpt-4",
  "usage": {
    "prompt_tokens": 150,
    "completion_tokens": 80,
    "total_tokens": 230
  },
  "agentRole": "support"
}

Expected Outcome

You should have a fully functional backend server that can receive agent requests and return AI-generated responses. Test it by visiting your URL in a browser or using a tool like Postman.

PART II

Frontend Integration

This section explains how to connect the Landingsite.ai frontend to your backend server.

Step 1: Configure Backend URL

In your index.js file for the ai-agents page, locate or add the BACKEND_API_URL constant:

// Backend API URL - Replace with your deployed URL
const BACKEND_API_URL = 'https://your-app.up.railway.app'
// OR for Replit:
// const BACKEND_API_URL = 'https://your-username.repl.co'

Step 2: Call the Backend from Frontend

The runAgent function in index.js makes the API call:

async function runAgent(agentId) {
  const agents = getAgents()
  const agent = agents.find(a => a.id === agentId)
  
  if (!agent) return
  
  // Generate the system prompt based on agent configuration
  const systemPrompt = generateSystemPrompt(agent)
  
  // Create task based on agent role
  let userTask = ''
  if (agent.role === 'support') {
    userTask = 'A customer is asking about their order status...'
  } else if (agent.role === 'sales') {
    userTask = 'Qualify this lead: Company XYZ...'
  }
  // ... other roles
  
  try {
    // Make API call to backend
    const response = await fetch(`${BACKEND_API_URL}/api/chat`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        systemPrompt: systemPrompt,
        userMessage: userTask,
        agentRole: agent.role
      })
    })
    
    if (!response.ok) {
      throw new Error(`API request failed: ${response.status}`)
    }
    
    const data = await response.json()
    
    // Process the AI response
    console.log('AI Response:', data.response)
    console.log('Tokens used:', data.usage?.total_tokens)
    
    // Create output file with AI response
    const file = {
      id: generateId(),
      agentName: agent.name,
      content: data.response,
      wordCount: data.response.split(/\s+/).length,
      timestamp: Date.now()
    }
    
    // Save to localStorage
    const files = getFiles()
    files.unshift(file)
    saveFiles(files)
    
    // Update UI
    renderFiles()
    showNotification(`${agent.name} completed successfully!`, 'success')
    
  } catch (error) {
    console.error('Error:', error)
    showNotification(`Error: ${error.message}`, 'error')
  }
}

Step 3: System Prompt Generation

The generateSystemPrompt function creates detailed instructions for GPT-4:

function generateSystemPrompt(agent) {
  const toneDescriptions = {
    friendly: 'warm, approachable, and conversational',
    professional: 'formal, polished, and business-appropriate',
    direct: 'concise, efficient, and to-the-point'
  }
  
  const roleInstructions = {
    support: `You are a customer support agent. Your primary responsibilities are:
- Respond to customer inquiries with empathy and clarity
- Look up customer information when needed
- Create support tickets for escalation
- Provide accurate product information`,
    
    sales: `You are a sales assistant agent. Your primary responsibilities are:
- Qualify leads and assess their fit
- Update CRM with interaction notes
- Schedule demos and discovery calls
- Provide pricing information`,
    
    operations: `You are an operations agent. Your primary responsibilities are:
- Process workflow automation tasks
- Generate reports and documentation
- Coordinate between systems
- Monitor operational metrics`,
    
    admin: `You are an administrative agent. Your primary responsibilities are:
- Manage system configurations
- Process administrative requests
- Generate compliance reports
- Coordinate cross-functional activities`
  }
  
  return `You are ${agent.name}, an AI agent with the role of ${agent.role}.

ROLE & RESPONSIBILITIES:
${roleInstructions[agent.role]}

AGENT DESCRIPTION:
${agent.description}

COMMUNICATION STYLE:
Your tone should be ${toneDescriptions[agent.tone]}.

AVAILABLE TOOLS:
- send_email(recipient, subject, body)
- create_task(title, description, priority)
- lookup_customer(email)
- update_crm(recordId, fields)
- schedule_appointment(date, time, attendees)
- generate_document(template, data)

GUIDELINES:
1. Be helpful and accurate
2. Use tools when needed
3. Stay within your assigned role
4. Prioritize user satisfaction

Remember: You are ${agent.name}.`

Step 4: Complete Flow Diagram

┌─────────────────────────────────────────────────────────────────────┐
│                        AGENT EXECUTION FLOW                           │
└─────────────────────────────────────────────────────────────────────┘

1. USER CLICKS "RUN AGENT"
   │
   ▼
2. FRONTEND (index.js)
   • Get agent from localStorage
   • Generate system prompt
   • Create task based on role
   │
   ▼
3. BACKEND API CALL
   fetch(BACKEND_API_URL + '/api/chat', {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({
       systemPrompt: "You are Customer Support Bot...",
       userMessage: "A customer is asking...",
       agentRole: "support"
     })
   })
   │
   ▼
4. BACKEND SERVER (Node.js/Express)
   • Receive request
   • Validate input
   • Get OPENAI_API_KEY from environment
   │
   ▼
5. OPENAI API
   • Send system prompt + user message to GPT-4
   • Receive AI-generated response
   │
   ▼
6. BACKEND RESPONSE
   {
     response: "Hello! I'd be happy to help...",
     model: "gpt-4",
     usage: { total_tokens: 230 }
   }
   │
   ▼
7. FRONTEND PROCESSING
   • Parse response
   • Create output file object
   • Save to localStorage
   • Render file in UI
   • Show success notification

Troubleshooting

  • 404 Error: Check that your backend URL is correct and the server is running
  • 500 Error: Verify OPENAI_API_KEY is set in Railway/Replit secrets
  • CORS Error: Ensure the backend has CORS enabled (included in the code)
  • No response: Check Railway/Replit logs for errors

Expected Outcome

The frontend should now be connected to the backend. When you click "Run Agent", the system will: (1) Send the request to your backend, (2) Backend calls OpenAI API, (3) Response is returned and saved as a file. Test by running an agent and checking the output file.

Axis Trust Systems

Empowering businesses with Authority Engine™ and Authority OS™ to build visibility, trust, performance, and growth.

Platform

Company

Get Started

© 2026 Axis Trust Systems. All rights reserved.