OASIS Learn/Case Studies/OPORTAL
Advanced ⏱ 90 min WEB4 WEB5 WEB6

🌐 Case Study: OPORTAL

OPORTAL is the flagship OASIS web portal — the most complete example of all three API layers working together. It covers Avatar management, the full Omniverse map (WEB5 CelestialBodies), NFT/wallet dashboard, quest log, ONET messaging, and an AI assistant backed by WEB6 FAHRN with Holonic Memory. If you want to understand the full OASIS surface area, OPORTAL is the reference implementation.

Tech stack

  • Frontend: Vanilla JS modules, Canvas API (Omniverse map), WebSocket (ONET live)
  • OASIS WEB4: Avatar SSO, Karma dashboard, NFT wallet, Holon CRUD, HyperDrive, ONET P2P
  • OASIS WEB5: Celestial body map, Mission/Quest log, GeoNFTs, Inventory
  • OASIS WEB6: AI assistant (FAHRN Parallel), Holonic Memory, MCP tool palette
  • npm: @oasisomniverse/web4-api, @oasisomniverse/web5-api, @oasisomniverse/web6-api

Portal Modules

ModuleAPI layerKey tutorial
Avatar Dashboard (profile, karma, stats)WEB4Module 2, Module 3
NFT & WalletWEB4Module 4
Holons / Data ExplorerWEB4Module 5
HyperDrive File ManagerWEB4Module 9
ONET Messenger (live)WEB4Module 10
Omniverse Map (CelestialBodies)WEB5Module 13
Quest & Mission LogWEB5Module 12
GeoNFT MapWEB5Module 14
AI AssistantWEB6Module 15, Module 16

Step 1 — Bootstrap All Three Clients

oasis.js — shared client module
import { OasisWeb4Client } from '@oasisomniverse/web4-api';
import { OasisWeb5Client } from '@oasisomniverse/web5-api';
import { OasisWeb6Client } from '@oasisomniverse/web6-api';

const BASE = 'https://api.web4.oasisomniverse.one';

export const oasis4 = new OasisWeb4Client({ baseUrl: BASE });
export const star   = new OasisWeb5Client({ baseUrl: BASE });
export const ai     = new OasisWeb6Client({ baseUrl: BASE });

export async function initSession(email, password) {
  const { result } = await oasis4.avatar.authenticate({ email, password });
  [oasis4, star, ai].forEach(c => c.auth.setToken(result.token));
  return result.avatar;
}

Step 2 — The Omniverse Map

The map renders all CelestialBodies as an interactive Canvas scene. Clicking a body loads its missions, GeoNFTs and hotspots.

omniverse-map.js
import { star } from './oasis.js';

async function loadMap() {
  const { result: bodies } = await star.celestialBodies.getAll();
  const canvas = document.querySelector('#omniverse-canvas');
  const ctx = canvas.getContext('2d');

  bodies.forEach(body => {
    // Draw each body as a circle scaled by type
    ctx.fillStyle = bodyColor(body.celestialBodyType);
    ctx.beginPath();
    ctx.arc(body.mapX, body.mapY, bodyRadius(body.celestialBodyType), 0, Math.PI * 2);
    ctx.fill();
  });
}

canvas.addEventListener('click', async e => {
  const body = hitTest(e.offsetX, e.offsetY, bodies);
  if (body) await loadBodyDetail(body.id);
});

Step 3 — Live ONET Messaging

onet-chat.js
import { oasis4 } from './oasis.js';

const ws = oasis4.onet.connectWebSocket();

ws.onMessage(({ from, content }) => {
  appendMessage(from.username, content);
});

async function sendMessage(toAvatarId, text) {
  await oasis4.onet.sendMessage({ toAvatarId, message: text });
}

Step 4 — AI Assistant (FAHRN Parallel)

ai-assistant.js
import { ai } from './oasis.js';

async function askAssistant(question, avatarId, sessionId) {
  const { result } = await ai.fahrn.run({
    mode: 'Parallel',
    agents: [
      { name: 'GPT',    provider: 'openai',    model: 'gpt-4o'            },
      { name: 'Claude', provider: 'anthropic', model: 'claude-3-5-sonnet' },
    ],
    mergeStrategy: 'bestOf',
    input: question,
    memoryContext: { avatarId, sessionId, injectLevels: ['Session', 'User'], topK: 5 },
  });
  return result.finalOutput;
}
💡
Source code

Browse the full OPORTAL source at github.com/NextGenSoftwareUK/OASIS/tree/master/OPORTAL-JS ↗

Related resources