Implementation Guide

Step-by-step guide to building with the BX→AX→PX framework.

Questions This Page Answers

How do I start building? → Choose your entry layer and follow the quickstart
What tech stack is required? → TypeScript, React, Node.js (we provide the rest)
How long does integration take? → 1 week for basic, 1 month for full
What does it cost? → Free to start, revenue share when you earn
Where do I get help? → Discord, documentation, and dedicated support

Choose Your Path

🚀 Quick Start Guides

Path 1: Building a Product (BX Layer)

7-Day Product Launch

Day 1: Setup

# Install Proper Labs SDK
npm install @properlabs/sdk

# Initialize project
npx proper-init my-project
cd my-project

# Configure environment
cp .env.example .env
# Add your API keys

Day 2-3: Build Core Features

import { ProperLabs, VerseID, BroVerse } from '@properlabs/sdk';

// Initialize
const pl = new ProperLabs({
  apiKey: process.env.PROPER_LABS_KEY,
  network: 'mainnet'
});

// Add identity
const auth = await pl.identity.connect();
const user = await auth.getUser();

// Create quest
const quest = await pl.quests.create({
  title: 'Welcome Quest',
  rewards: { bits: 100, xp: 50 },
  tasks: [...]
});

Day 4-5: Integrate AI Agents

// Add agent support
const agent = await pl.agents.create({
  type: 'support',
  personality: 'friendly',
  capabilities: ['onboarding', 'help']
});

// Deploy agent
await agent.deploy();

Day 6: Test & Optimize

// Run tests
npm run test

// Check analytics
const metrics = await pl.analytics.get();
console.log(metrics);

Day 7: Deploy

# Deploy to production
npm run build
npm run deploy

# Your app is live! 🎉

Path 2: Building AI Agents (AX Layer)

AI Agent Development

Step 1: Install Agent Development Kit

npm install @properlabs/adk

Step 2: Create Your Agent

import { Agent, Skills, Memory } from '@properlabs/adk';

class MyAgent extends Agent {
  constructor() {
    super({
      name: 'CustomAgent',
      model: 'gpt-4-turbo',
      personality: 'helpful, knowledgeable',
      memory: new Memory({ type: 'persistent' })
    });
  }

  // Define capabilities
  async onMessage(message) {
    // Process user input
    const intent = await this.analyze(message);

    // Take action
    switch(intent.type) {
      case 'question':
        return this.answer(intent);
      case 'task':
        return this.execute(intent);
      default:
        return this.clarify();
    }
  }
}

Step 3: Train & Test

// Train with examples
await agent.train({
  examples: [
    { input: "How do I earn BITS?", output: "Complete quests..." },
    { input: "Show me my rewards", action: "fetchRewards" }
  ]
});

// Test locally
const response = await agent.test("What's my level?");
console.log(response);

Step 4: Deploy

// Deploy to production
await agent.deploy({
  scaling: 'auto',
  regions: ['us-east', 'eu-west'],
  monitoring: true
});

// Agent is live!
console.log(`Agent URL: ${agent.endpoint}`);

Path 3: Building Experiences (PX Layer)

Community Experience Creation

Quick Integration

<!-- Add to your HTML -->
<script src="https://cdn.properlabs.io/px-widget.js"></script>

<!-- Add widget -->
<div id="proper-labs-widget"
     data-type="quests"
     data-theme="dark"
     data-rewards="true">
</div>

<script>
// Initialize
ProperLabs.init({
  apiKey: 'your-key',
  onReady: () => {
    console.log('Widget ready!');
  },
  onReward: (reward) => {
    console.log('User earned:', reward);
  }
});
</script>

React Component

import { BroVerseQuest, VerseIDLogin } from '@properlabs/react';

function App() {
  return (
    <div>
      <VerseIDLogin
        onSuccess={(user) => console.log(user)}
      />

      <BroVerseQuest
        questId="welcome-quest"
        onComplete={(rewards) => {
          console.log('Earned:', rewards);
        }}
      />
    </div>
  );
}

📋 Full Integration Checklist

Phase 1: Foundation (Week 1)

Phase 2: Development (Week 2-3)

Phase 3: Launch (Week 4)

🛠️ Technical Architecture

System Architecture

Technology Stack

Layer	Technologies	Provided by Us
Frontend	React, Next.js, Vue	Components, SDKs
Backend	Node.js, Python, Go	APIs, Libraries
Blockchain	Ethereum, Polygon	Smart contracts
AI/ML	OpenAI, Claude	Agent framework
Database	PostgreSQL, MongoDB	Hosted options
Analytics	Custom dashboard	Full platform

💰 Pricing & Economics

Pricing Tiers

🆓 Starter

Free

Up to 1,000 users
Basic APIs
Community support
Standard agents

Revenue share: 30%

📈 Growth

$500/month

Up to 100,000 users
Advanced APIs
Priority support
Custom agents

Revenue share: 20%

🚀 Enterprise

Custom

Unlimited users
White-label options
Dedicated support
Custom development

Revenue share: Negotiable

// Example revenue calculation
const monthlyRevenue = 100000; // $100K monthly revenue
const tier = 'growth';          // Growth tier

const revenueSplit = {
  starter: {
    you: monthlyRevenue * 0.70,      // $70,000
    properLabs: monthlyRevenue * 0.30 // $30,000
  },
  growth: {
    you: monthlyRevenue * 0.80,      // $80,000
    properLabs: monthlyRevenue * 0.20 // $20,000
  },
  enterprise: {
    you: monthlyRevenue * 0.90,      // $90,000
    properLabs: monthlyRevenue * 0.10 // $10,000
  }
};

📚 Code Examples

Complete Quest System

// Complete quest implementation
import { ProperLabs } from '@properlabs/sdk';

class QuestSystem {
  constructor() {
    this.pl = new ProperLabs({
      apiKey: process.env.API_KEY
    });
  }

  async createQuest(questData) {
    // Create quest
    const quest = await this.pl.quests.create({
      title: questData.title,
      description: questData.description,
      tasks: questData.tasks,
      rewards: {
        bits: questData.bits || 100,
        xp: questData.xp || 50,
        badges: questData.badges || []
      },
      requirements: {
        minLevel: questData.minLevel || 1,
        verseIDTier: questData.tier || 'bronze'
      }
    });

    // Assign AI guide
    const agent = await this.pl.agents.assign({
      questId: quest.id,
      agentType: 'bro',
      guidance: 'encouraging'
    });

    return { quest, agent };
  }

  async completeTask(userId, questId, taskId) {
    // Verify completion
    const verified = await this.pl.verify.action({
      userId,
      questId,
      taskId,
      antiBot: true
    });

    if (!verified) {
      throw new Error('Action not verified');
    }

    // Distribute rewards
    const rewards = await this.pl.rewards.distribute({
      userId,
      questId,
      taskId
    });

    // Update VerseID
    await this.pl.identity.update({
      userId,
      addBits: rewards.bits,
      addXP: rewards.xp
    });

    return rewards;
  }
}

AI Agent Integration

// Multi-agent orchestration
import { AgentOrchestrator } from '@properlabs/adk';

class MultiAgentSystem {
  constructor() {
    this.orchestrator = new AgentOrchestrator();
    this.agents = {};
  }

  async initialize() {
    // Create specialized agents
    this.agents.support = await this.createAgent('support', 'bigsis');
    this.agents.gaming = await this.createAgent('gaming', 'bro');
    this.agents.creative = await this.createAgent('creative', 'lilsis');
    this.agents.finance = await this.createAgent('finance', 'cbo');
  }

  async createAgent(role, personality) {
    return this.orchestrator.create({
      role,
      personality,
      memory: 'persistent',
      capabilities: this.getCapabilities(role)
    });
  }

  getCapabilities(role) {
    const capabilities = {
      support: ['onboarding', 'help', 'guidance'],
      gaming: ['quests', 'challenges', 'rewards'],
      creative: ['generation', 'remixing', 'design'],
      finance: ['analysis', 'optimization', 'reporting']
    };
    return capabilities[role];
  }

  async handleRequest(request) {
    // Analyze request
    const intent = await this.orchestrator.analyzeIntent(request);

    // Route to appropriate agent(s)
    const agents = this.selectAgents(intent);

    // Coordinate response
    const responses = await Promise.all(
      agents.map(agent => agent.process(request))
    );

    // Combine and return
    return this.orchestrator.combine(responses);
  }

  selectAgents(intent) {
    // Logic to select which agents to involve
    if (intent.type === 'complex') {
      return Object.values(this.agents);
    }
    return [this.agents[intent.category]];
  }
}

🚧 Common Integration Patterns

Pattern 1: Gradual Integration

Pattern 2: Feature Flags

// Progressive rollout with feature flags
const features = {
  verseID: process.env.ENABLE_VERSEID === 'true',
  quests: process.env.ENABLE_QUESTS === 'true',
  agents: process.env.ENABLE_AGENTS === 'true',
  brofit: process.env.ENABLE_BROFIT === 'true'
};

// Conditional integration
if (features.verseID) {
  app.use(verseIDMiddleware);
}

if (features.quests) {
  app.use('/api/quests', questRoutes);
}

// Gradual user rollout
const userPercentage = 10; // Start with 10% of users
if (Math.random() * 100 < userPercentage) {
  enableNewFeatures(user);
}

📊 Monitoring & Analytics

Key Metrics to Track

// Analytics integration
import { Analytics } from '@properlabs/sdk';

const analytics = new Analytics({
  projectId: 'your-project'
});

// Track key events
analytics.track({
  event: 'quest_completed',
  properties: {
    questId: 'welcome-quest',
    userId: user.id,
    rewards: { bits: 100, xp: 50 },
    completionTime: 300 // seconds
  }
});

// Monitor performance
const metrics = await analytics.getMetrics({
  period: '7d',
  metrics: [
    'daily_active_users',
    'quest_completion_rate',
    'average_session_time',
    'revenue_per_user',
    'agent_satisfaction_score'
  ]
});

// Set up alerts
analytics.createAlert({
  metric: 'quest_completion_rate',
  threshold: 0.2, // Alert if drops below 20%
  channel: 'slack'
});

Dashboard Access

Real-time Analytics Dashboard

Access at: https://dashboard.properlabs.io

Available Metrics:

User acquisition & retention
Quest engagement rates
Revenue & monetization
Agent performance
Network growth
Data value generation

Export Options:

CSV reports
API access
Webhook integrations
Custom dashboards

🆘 Support Resources

Documentation

API Reference: Coming Soon
SDK Guides: Coming Soon
Video Tutorials: Coming Soon
Code Examples: Coming Soon

Community Support

Discord: Real-time help (discord.gg/properlabs)
Forum: Detailed discussions
Stack Overflow: Tag proper-labs

Direct Support

Email: support@properlabs.io
Priority Support: For Growth/Enterprise tiers
Office Hours: Tuesdays & Thursdays 2-4pm EST

✅ Launch Checklist

Pre-Launch

Launch Day

Post-Launch

Ready to Build the Future?

You bring the vision. We provide everything else.

✅ Infrastructure: Complete tech stack ready
✅ Distribution: 7.4M users waiting
✅ Intelligence: AI agents at your service
✅ Economics: Sustainable revenue model
✅ Support: We're here every step

Time to traditional launch: 6-12 months Time with BX→AX→PX: 7 days

The future doesn't wait. Neither should you.

Start Building Now →

Join Discord

Back to Overview

Questions This Page Answers​

Choose Your Path​

🚀 Quick Start Guides​

Path 1: Building a Product (BX Layer)​

7-Day Product Launch

Path 2: Building AI Agents (AX Layer)​

AI Agent Development

Path 3: Building Experiences (PX Layer)​

Community Experience Creation

📋 Full Integration Checklist​

Phase 1: Foundation (Week 1)​

Phase 2: Development (Week 2-3)​

Phase 3: Launch (Week 4)​

🛠️ Technical Architecture​

System Architecture​

Technology Stack​

💰 Pricing & Economics​

Pricing Tiers​

🆓 Starter

📈 Growth

🚀 Enterprise

Revenue Share Examples​

📚 Code Examples​

Complete Quest System​

AI Agent Integration​

🚧 Common Integration Patterns​

Pattern 1: Gradual Integration​

Pattern 2: Feature Flags​

📊 Monitoring & Analytics​

Key Metrics to Track​

Dashboard Access​