From 68d84528cf023c1304279988780d076a7391436a Mon Sep 17 00:00:00 2001 From: MrPiglr Date: Sat, 10 Jan 2026 22:59:45 +0000 Subject: [PATCH] feat: add Spatial, Decentraland, and The Sandbox platform integrations - Created comprehensive integration docs for Spatial (5M+ visitors, web-based) - Created comprehensive integration docs for Decentraland (800K+ users, Ethereum) - Created comprehensive integration docs for The Sandbox (2M+ players, Polygon) - Updated DocsIntegrations page with new platform showcase cards - Added routes for /docs/integrations/spatial, /decentraland, /thesandbox - Updated homepage to mention all 8 supported platforms explicitly - Each integration includes: Quick start, code examples, auth flows, best practices --- client/App.tsx | 15 + client/pages/Index.tsx | 4 +- client/pages/docs/DocsIntegrations.tsx | 76 ++- .../pages/docs/integrations/Decentraland.tsx | 467 ++++++++++++++++++ client/pages/docs/integrations/Spatial.tsx | 406 +++++++++++++++ client/pages/docs/integrations/TheSandbox.tsx | 448 +++++++++++++++++ 6 files changed, 1404 insertions(+), 12 deletions(-) create mode 100644 client/pages/docs/integrations/Decentraland.tsx create mode 100644 client/pages/docs/integrations/Spatial.tsx create mode 100644 client/pages/docs/integrations/TheSandbox.tsx diff --git a/client/App.tsx b/client/App.tsx index 86c4a55c..2e30d36d 100644 --- a/client/App.tsx +++ b/client/App.tsx @@ -46,6 +46,9 @@ import DocsExamples from "./pages/docs/DocsExamples"; import DocsIntegrations from "./pages/docs/DocsIntegrations"; import VRChatIntegration from "./pages/docs/integrations/VRChat"; import RecRoomIntegration from "./pages/docs/integrations/RecRoom"; +import SpatialIntegration from "./pages/docs/integrations/Spatial"; +import DecentralandIntegration from "./pages/docs/integrations/Decentraland"; +import TheSandboxIntegration from "./pages/docs/integrations/TheSandbox"; import DocsCurriculum from "./pages/docs/DocsCurriculum"; import DocsCurriculumEthos from "./pages/docs/DocsCurriculumEthos"; import EthosGuild from "./pages/community/EthosGuild"; @@ -626,6 +629,18 @@ const App = () => ( path="integrations/recroom" element={} /> + } + /> + } + /> + } + /> } /> } /> diff --git a/client/pages/Index.tsx b/client/pages/Index.tsx index 7dcbb378..a7f547ed 100644 --- a/client/pages/Index.tsx +++ b/client/pages/Index.tsx @@ -85,7 +85,7 @@ const features = [ { icon: Layers, title: "Cross-Platform Integration Layer", - description: "One unified API to build across Roblox, VRChat, RecRoom, Minecraft, Meta Horizon, Fortnite, and Zepeto—no more managing separate platform SDKs or gated gardens", + description: "One unified API to build across Roblox, VRChat, RecRoom, Spatial, Decentraland, The Sandbox, Minecraft, Meta Horizon, Fortnite, and Zepeto—no more managing separate platform SDKs or gated gardens", }, { icon: Code2, @@ -110,7 +110,7 @@ const features = [ { icon: Rocket, title: "Ship Everywhere, Fast", - description: "150+ cross-platform code examples, pre-built templates for VRChat, RecRoom, Roblox, and more—OAuth integration, Supabase backend, and one-command deployment to every metaverse", + description: "150+ cross-platform code examples, pre-built templates for VRChat, RecRoom, Spatial, Decentraland, The Sandbox, Roblox, and more—OAuth integration, Supabase backend, and one-command deployment to every metaverse", }, ]; diff --git a/client/pages/docs/DocsIntegrations.tsx b/client/pages/docs/DocsIntegrations.tsx index 2171bbcc..6170ec30 100644 --- a/client/pages/docs/DocsIntegrations.tsx +++ b/client/pages/docs/DocsIntegrations.tsx @@ -31,6 +31,9 @@ import { Headset, Gamepad2, Boxes, + Globe, + Cuboid, + Box, } from "lucide-react"; const connectorFields = [ @@ -170,24 +173,77 @@ export default function DocsIntegrations() { - - - - + cyan-950/50 to-blue-950/50 border-cyan-500/30 hover:border-cyan-400/60 transition-colors"> - - More Platforms + + Spatial - Roblox, Fortnite, Minecraft, Unity, Unreal, and more coming soon + Build browser-based 3D experiences for VR, desktop, and mobile devices
- Roblox - Unity - Unreal + TypeScript + Web3 + No Install +
+ + + + + + + + + Decentraland + + + + + Create Ethereum-powered metaverse experiences with NFT integration + +
+ Ethereum + LAND + DAO +
+ + + + + + + + + The Sandbox + + + + + Build voxel games with visual editor and Polygon NFT rewards + +
+ Polygon + Voxels + NFTs +
+ + + + + + + + + Documentation + + + + + + + + + + + {/* Next Steps */} + + +

Ready to Build?

+

+ Create blockchain-powered metaverse experiences with Decentraland and AeThex. Build NFT-gated + games, DAO governance tools, and cross-chain achievements. +

+ + + + + ); +} diff --git a/client/pages/docs/integrations/Spatial.tsx b/client/pages/docs/integrations/Spatial.tsx new file mode 100644 index 00000000..aff5b8f6 --- /dev/null +++ b/client/pages/docs/integrations/Spatial.tsx @@ -0,0 +1,406 @@ +import { Badge } from "@/components/ui/badge"; +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; +import { Button } from "@/components/ui/button"; +import { Globe, Code2, Rocket, ExternalLink, CheckCircle2, AlertTriangle, Package } from "lucide-react"; +import CodeBlock from "@/components/dev-platform/CodeBlock"; + +export default function SpatialIntegration() { + return ( +
+
+ + + Spatial Integration + +

+ Build Spatial Experiences with AeThex +

+

+ Create immersive 3D spaces for Spatial's web-based metaverse platform. Use AeThex's unified API + with Spatial's visual editor, TypeScript SDK, and multi-device support (VR, Desktop, Mobile). +

+
+ + {/* Quick Stats */} +
+ + +
5M+
+
Monthly Visitors
+ + + + +
100K+
+
Created Spaces
+ + + + +
No Install
+
Browser-Based
+ + +
+ + {/* Features */} +
+

What You Can Build

+
+ + + + + Web3 Virtual Events + + + + Host conferences, exhibitions, and networking events with AeThex authentication and NFT-gated access + + + + + + + + Cross-Device Experiences + + + + Build once, deploy everywhere - Spatial runs on Quest, desktop browsers, and mobile devices + + + + + + + + Interactive 3D Content + + + + Sync 3D models, animations, and interactive objects with AeThex backend for dynamic content updates + + + + + + + + Analytics & Engagement + + + + Track visitor behavior, space engagement metrics, and cross-platform user journeys via AeThex analytics + + +
+
+ + {/* Quick Start */} +
+

+ + Quick Start Guide +

+ + + + 1. Install AeThex Spatial SDK + Add AeThex scripting components to your Spatial space + + +

+ In Spatial Studio, go to Scripts → Add Package → Search for @aethex/spatial-sdk +

+ + + + + + + 2. Initialize AeThex in Your Space + Configure API credentials in Spatial Studio + + + { + console.log(\`User \${user.username} joined\`); + + // Fetch user profile from AeThex + aethex.users.get(user.id).then(profile => { + console.log('AeThex Profile:', profile); + }); +}); + +// Example: Update player stats when they interact +space.onInteract.subscribe((event) => { + aethex.achievements.unlock(event.user.id, 'spatial-explorer'); +});`} + language="typescript" + showLineNumbers={true} + /> + + + + + + 3. Build Interactive Features + Create cross-platform leaderboards and achievements + + + { + const newScore = await updateLeaderboard(event.user.id, 100); + console.log('New leaderboard:', newScore); +});`} + language="typescript" + showLineNumbers={true} + /> + + +
+ + {/* Authentication Flow */} +
+

Player Authentication

+

+ Link Spatial visitors to AeThex Passport for cross-platform identity and progression. +

+ + + + OAuth Integration + + +

+ Spatial supports web-based OAuth flows, making authentication seamless for browser users. +

+ +
+
+
1
+
+

User Enters Space

+

Spatial script detects new visitor via onUserJoined event

+
+
+ +
+
2
+
+

Prompt Authentication

+

Display 3D UI panel with "Link AeThex Account" button

+
+
+ +
+
3
+
+

OAuth Redirect

+

Opens aethex.dev/oauth/spatial in browser overlay

+
+
+ +
+
4
+
+

Callback Webhook

+

Spatial receives auth token, stores in user session, unlocks cross-platform features

+
+
+
+ + { + const linkedUser = await aethex.auth.verifyToken(token); + console.log('User linked:', linkedUser); + + // Now you can access cross-platform data + const achievements = await aethex.achievements.list(linkedUser.id); + displayAchievements(achievements); +});`} + language="typescript" + showLineNumbers={true} + /> + + +
+ + {/* Best Practices */} +
+

+ + Best Practices & Limitations +

+ +
+ + + Spatial Limitations + + +

• Browser-based performance: Keep API calls under 50/minute to avoid throttling

+

• Asset size limits: 3D models max 50MB, optimize for web delivery

+

• Script execution: Spatial runs TypeScript in sandbox, no native code

+

• Concurrent users: Max 50 users per space instance, scale with multiple instances

+ + + + + + Performance Optimization + + +

• Cache API responses: Store frequently accessed data in space variables

+

• Lazy load content: Only fetch 3D assets when user approaches interactive zones

+

• Use CDN URLs: Host large assets on AeThex CDN for faster loading

+

• Mobile optimization: Test on mobile devices, reduce draw calls for iOS/Android

+ + +
+
+ + {/* Resources */} +
+

+ + Resources & Examples +

+ + +
+ + {/* Next Steps */} + + +

Ready to Build?

+

+ Create immersive web3 experiences with Spatial and AeThex. Deploy to browsers, VR headsets, + and mobile devices with one unified API. +

+ + + +
+ ); +} diff --git a/client/pages/docs/integrations/TheSandbox.tsx b/client/pages/docs/integrations/TheSandbox.tsx new file mode 100644 index 00000000..1e70947b --- /dev/null +++ b/client/pages/docs/integrations/TheSandbox.tsx @@ -0,0 +1,448 @@ +import { Badge } from "@/components/ui/badge"; +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; +import { Button } from "@/components/ui/button"; +import { Box, Code2, Rocket, ExternalLink, CheckCircle2, AlertTriangle, Package } from "lucide-react"; +import CodeBlock from "@/components/dev-platform/CodeBlock"; + +export default function TheSandboxIntegration() { + return ( +
+
+ + + The Sandbox Integration + +

+ Build in The Sandbox with AeThex +

+

+ Create voxel-based gaming experiences in The Sandbox metaverse. Integrate AeThex APIs with Game Maker, + VoxEdit assets, and LAND ownership for user-generated content at scale. +

+
+ + {/* Quick Stats */} +
+ + +
2M+
+
Monthly Players
+ + + + +
166K+
+
LAND Owners
+ + + + +
Polygon
+
Blockchain
+ + +
+ + {/* Features */} +
+

What You Can Build

+
+ + + + + Voxel Game Experiences + + + + Build games with Game Maker visual editor, sync player progress and rewards via AeThex backend + + + + + + + + NFT Asset Marketplace + + + + Create VoxEdit assets, list on OpenSea, track ownership and sales via AeThex analytics + + + + + + + + LAND Experiences + + + + Deploy games across multiple LAND parcels with unified player accounts via AeThex Passport + + + + + + + + Cross-Platform Rewards + + + + Award achievements in The Sandbox that unlock rewards in Roblox, Minecraft, and web platforms + + +
+
+ + {/* Quick Start */} +
+

+ + Quick Start Guide +

+ + + + 1. Install Game Maker + AeThex Plugin + Add AeThex SDK to your Sandbox experience + + +

+ Download The Sandbox Game Maker from sandbox.game, + then install the AeThex plugin from the Asset Library. +

+
+

Plugin Features:

+
    +
  • • AeThex API Block - Make HTTP requests to AeThex endpoints
    • +
  • • Player Auth Block - Link wallet to AeThex Passport
    • +
  • • Achievement Block - Award cross-platform achievements
    • +
  • • Leaderboard Block - Display global leaderboards
    • +
+
+ + + + + + 2. Configure AeThex in Game Maker + Add API credentials via visual scripting + + +

+ Drag the AeThex Config block into your experience, then enter your API key from the + Developer Dashboard. +

+ +
+

Visual Script Example:

+
+
+
On Player Enter
+
→
+
AeThex Auth
+
+
+
Player Wallet
+
→
+
Get Profile
+
+
+
Profile Data
+
→
+
Display UI
+
+
+
+ + + + + + 3. Build with TypeScript SDK (Advanced) + For custom logic beyond Game Maker's visual editor + + +

+ Use The Sandbox TypeScript SDK for complex game logic that integrates with AeThex APIs. +

+ + + + +
+ + {/* Authentication Flow */} +
+

Wallet Authentication

+

+ Link Sandbox wallets to AeThex Passport for cross-platform progression. +

+ + + + Polygon Wallet Integration + + +

+ The Sandbox uses Polygon network for fast, low-cost transactions. AeThex supports Polygon L2 natively. +

+ +
+
+
1
+
+

Player Enters Experience

+

Game Maker detects player with Polygon wallet connected

+
+
+ +
+
2
+
+

Check AeThex Link

+

AeThex API checks if wallet is already linked to Passport

+
+
+ +
+
3
+
+

Sign-In Prompt (First Time)

+

If not linked, prompt wallet signature (gasless, EIP-4361)

+
+
+ +
+
4
+
+

Cross-Platform Access

+

Player can now access achievements, progress from other platforms

+
+
+
+ + + + +
+ + {/* Best Practices */} +
+

+ + Best Practices & Limitations +

+ +
+ + + The Sandbox Limitations + + +

• Game Maker constraints: Visual scripting has limited logic complexity

+

• Voxel performance: Max 50k voxels per LAND parcel, optimize models

+

• Player limits: 100 concurrent players per experience

+

• Asset file sizes: VoxEdit models max 10MB, use LOD for large objects

+ + + + + + Optimization Tips + + +

• Polygon L2 benefits: 2-second confirmations, $0.001 gas fees vs Ethereum mainnet

+

• Batch API calls: Update multiple players' data in single request

+

• Cache NFT metadata: Store VoxEdit asset metadata on AeThex CDN

+

• Mobile support: The Sandbox mobile app launching 2026, test on Android/iOS

+ + +
+
+ + {/* Resources */} +
+

+ + Resources & Examples +

+ + +
+ + {/* Next Steps */} + + +

Ready to Build?

+

+ Create voxel gaming experiences with The Sandbox and AeThex. Build NFT-powered games with + cross-platform rewards on Polygon L2. +

+ + + +
+ ); +}