Complete Technical Guide for Building & Maintaining the Axis Trust Systems Platform
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.
┌─────────────────────────────────────────────────────────────────────────┐
│ 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) │
└───────────────────────────────┘
Landingsite.ai provides the frontend infrastructure with HTML, CSS (Tailwind), and JavaScript.
OpenAI GPT-4 API handles all AI processing, generating responses based on system prompts.
Node.js/Express deployed on Railway or Replit handles API requests and secure key management.
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.
This section details all technologies used in the platform and their purposes.
| 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 |
| 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 |
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.
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.
Visit OpenAI Platform
Go to https://platform.openai.com and create an account or log in.
Add Payment Method
Go to Settings → Billing → Add payment method. You need credits to use the API.
Create API Key
Go to API Keys → Create new secret key. Copy and save it securely (you'll need it for the backend).
Visit Railway
Go to https://railway.app and sign up with GitHub.
Create New Project
Click "New Project" → "Empty Service" to create a new project.
Add Environment Variables
Go to Variables tab → Add OPENAI_API_KEY with your OpenAI key.
Visit Replit
Go to https://replit.com and sign up.
Create New Repl
Click "+ Create" → Select "Node.js" template → Name it "ai-agent-backend".
Add Secret
Click Secrets (lock icon) → New Secret → Add OPENAI_API_KEY.
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.
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.
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.
Form-based interface to create new agents with name, role, description, and tone selection.
View, edit, delete, and toggle status (active/draft) of all agents.
Automatically generates detailed prompts for GPT-4 based on agent configuration.
Run agents and observe real-time execution logs, tasks completed, and tools used.
View, download, and delete generated output files from agent executions.
Draggable chat window that answers questions about the platform.
| 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 |
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.
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.
// 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
}
// 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
}
function getAgents() {
const stored = localStorage.getItem('aiAgents')
return stored ? JSON.parse(stored) : []
}
function saveAgents(agents) {
localStorage.setItem('aiAgents', JSON.stringify(agents))
}
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
}
Add new agent to localStorage
agents.unshift(newAgent) saveAgents(agents)
Retrieve agents from localStorage
getAgents() agents.find(a => a.id === id)
Modify existing agent in localStorage
agent.name = newName agent.updatedAt = Date.now() saveAgents(agents)
Remove agent from localStorage
agents.filter(a => a.id !== id) saveAgents(agents)
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.
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.
The backend server handles secure communication between the frontend and OpenAI API. It protects API keys and processes agent requests.
Create GitHub Repository
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"
}
}
Add server.js
Create a new file in GitHub called "server.js" (full code provided in next section).
Deploy to Railway
Add Environment Variables
Get Your URL
Create Account & Repl
Add server.js Code
Delete the default code in index.js and paste the complete server code (provided in next section).
Add OpenAI API Key
Run the Server
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.
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}`);
});
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.
| Endpoint | Method | Description |
|---|---|---|
| / | GET | Returns API information |
| /health | GET | Health check - returns status OK |
| /api/chat | POST | Send message to AI agent |
{
"systemPrompt": "You are a support agent...",
"userMessage": "A customer is asking...",
"agentRole": "support"
}
{
"response": "Hello! I'd be happy...",
"model": "gpt-4",
"usage": {
"prompt_tokens": 150,
"completion_tokens": 80,
"total_tokens": 230
},
"agentRole": "support"
}
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.
This section explains how to connect the Landingsite.ai frontend to your backend server.
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'
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')
}
}
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}.`
┌─────────────────────────────────────────────────────────────────────┐
│ 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
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.
Empowering businesses with Authority Engine™ and Authority OS™ to build visibility, trust, performance, and growth.
© 2026 Axis Trust Systems. All rights reserved.