-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathextend-it.html
More file actions
202 lines (195 loc) · 13.4 KB
/
Copy pathextend-it.html
File metadata and controls
202 lines (195 loc) · 13.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Extend It — OpenSim AI Stack</title>
<meta name="description" content="Extend your OpenSim AI Stack grid with additional MCP servers for database access, email, webhooks, and more.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
dark: { 900: '#0a0a12', 800: '#12121f', 700: '#1a1a2e', 600: '#252542' },
neon: { primary: '#8b5cf6', secondary: '#d946ef', accent: '#06b6d4' }
}
}
}
}
</script>
<link rel="stylesheet" href="styles.css">
</head>
<body class="min-h-screen bg-dark-900 text-gray-100">
<canvas id="code-rain"></canvas>
<div class="cyber-grid"></div>
<div class="shape shape-1"></div>
<div class="shape shape-2"></div>
<div class="shape shape-3"></div>
<nav class="navbar fixed top-0 left-0 right-0 z-50">
<div class="container mx-auto px-4 py-3 flex items-center justify-between">
<a href="index.html" class="flex items-center gap-3 group">
<img src="opensim-stack.png" alt="OpenSim AI Stack" class="h-10 w-auto drop-shadow-lg group-hover:drop-shadow-[0_0_10px_rgba(139,92,246,0.8)] transition-all">
<span class="text-xl font-bold gradient-text">OpenSim AI Stack</span>
</a>
<div class="hidden md:flex items-center gap-1">
<a href="index.html" class="px-3 py-2 rounded-lg text-gray-100 hover:text-neon-primary transition-colors">Home</a>
<a href="get-it.html" class="px-3 py-2 rounded-lg text-gray-100 hover:text-neon-primary transition-colors">Get It</a>
<a href="play-it.html" class="px-3 py-2 rounded-lg text-gray-100 hover:text-neon-primary transition-colors">Play It</a>
<a href="extend-it.html" class="px-3 py-2 rounded-lg text-neon-primary transition-colors">Extend It</a>
<a href="share-it.html" class="px-3 py-2 rounded-lg text-gray-100 hover:text-neon-primary transition-colors">Share It</a>
<a href="docs/index.html" class="px-3 py-2 rounded-lg text-gray-100 hover:text-neon-primary transition-colors">Docs</a>
<a href="https://github.com/opensim-stack/opensim-ai-docker" target="_blank" rel="noopener" class="ml-2 px-4 py-2 rounded-lg bg-neon-primary text-white font-medium hover:bg-violet-500 transition-colors btn-glow">GitHub</a>
</div>
<button id="mobile-menu-btn" class="md:hidden p-2 rounded-lg text-gray-100 hover:bg-dark-700 transition-colors" aria-label="Toggle menu">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
<div id="mobile-menu" class="mobile-menu md:hidden border-t border-neon-primary/20 bg-dark-900/95 backdrop-blur">
<div class="container mx-auto px-4 py-4 flex flex-col gap-2">
<a href="index.html" class="px-4 py-2 rounded-lg text-gray-100 hover:bg-dark-700">Home</a>
<a href="get-it.html" class="px-4 py-2 rounded-lg text-gray-100 hover:bg-dark-700">Get It</a>
<a href="play-it.html" class="px-4 py-2 rounded-lg text-gray-100 hover:bg-dark-700">Play It</a>
<a href="extend-it.html" class="px-4 py-2 rounded-lg text-gray-100 hover:bg-dark-700">Extend It</a>
<a href="share-it.html" class="px-4 py-2 rounded-lg text-gray-100 hover:bg-dark-700">Share It</a>
<a href="docs/index.html" class="px-4 py-2 rounded-lg text-gray-100 hover:bg-dark-700">Docs</a>
<a href="https://github.com/opensim-stack/opensim-ai-docker" target="_blank" rel="noopener" class="px-4 py-2 rounded-lg bg-neon-primary text-white text-center">GitHub</a>
</div>
</div>
</nav>
<main class="pt-20">
<section class="container mx-auto px-4 py-16 lg:py-24">
<div class="max-w-4xl mx-auto">
<div class="text-center mb-12 animate-on-scroll">
<h1 class="text-4xl lg:text-6xl font-extrabold mb-4 text-white">Extend <span class="gradient-text neon-text">It</span></h1>
<p class="text-lg text-gray-400">Plug in more MCP servers and let your virtual world reach outside the grid.</p>
</div>
<div class="bg-dark-800/80 backdrop-blur border border-neon-primary/20 p-6 lg:p-8 rounded-xl mb-8 animate-on-scroll">
<h2 class="text-2xl font-bold mb-6 flex items-center gap-3 text-white">
<span class="w-8 h-8 rounded-lg bg-neon-primary/20 flex items-center justify-center text-neon-primary text-sm">1</span>
Why Extend?
</h2>
<p class="text-gray-300 mb-6">The stack ships with two MCP bridges — console and in-world bot — but the Model Context Protocol ecosystem is huge. Adding extra MCP servers lets your AI agent read and write real-world data, turning your grid from a sandbox into an active participant in your workflows.</p>
<div class="grid md:grid-cols-2 gap-4">
<div class="bg-dark-700/50 p-4 rounded-lg border border-neon-primary/10">
<h3 class="font-semibold text-neon-primary mb-2">Database Access</h3>
<p class="text-sm text-gray-400">Query the OpenSimulator MariaDB backend to inspect users, regions, inventory, or land data with natural language.</p>
</div>
<div class="bg-dark-700/50 p-4 rounded-lg border border-neon-secondary/10">
<h3 class="font-semibold text-neon-secondary mb-2">Email & Messaging</h3>
<p class="text-sm text-gray-400">Let the bot send alerts, invites, or status updates via SMTP, Slack, Discord, or Matrix.</p>
</div>
<div class="bg-dark-700/50 p-4 rounded-lg border border-neon-accent/10">
<h3 class="font-semibold text-neon-accent mb-2">Webhooks & APIs</h3>
<p class="text-sm text-gray-400">Trigger external services: open doors in a smart home, post to a CMS, or call a game server API.</p>
</div>
<div class="bg-dark-700/50 p-4 rounded-lg border border-green-500/10">
<h3 class="font-semibold text-green-400 mb-2">Calendar & Tasks</h3>
<p class="text-sm text-gray-400">Schedule in-world events, create reminders, or sync with CalDAV / todo backends.</p>
</div>
<div class="bg-dark-700/50 p-4 rounded-lg border border-orange-500/10">
<h3 class="font-semibold text-orange-400 mb-2">File & Asset Storage</h3>
<p class="text-sm text-gray-400">Read from S3, MinIO, or a NAS to import OARs, textures, and sounds, or export region backups.</p>
</div>
<div class="bg-dark-700/50 p-4 rounded-lg border border-cyan-500/10">
<h3 class="font-semibold text-cyan-400 mb-2">Monitoring & Logs</h3>
<p class="text-sm text-gray-400">Connect to Prometheus, Grafana, or Loki so the agent can diagnose grid health on request.</p>
</div>
</div>
</div>
<div class="bg-dark-800/80 backdrop-blur border border-neon-secondary/20 p-6 lg:p-8 rounded-xl mb-8 animate-on-scroll">
<h2 class="text-2xl font-bold mb-6 flex items-center gap-3 text-white">
<span class="w-8 h-8 rounded-lg bg-neon-secondary/20 flex items-center justify-center text-neon-secondary text-sm">2</span>
How to Add a New MCP Server
</h2>
<div class="space-y-6">
<p class="text-gray-300">The stack runs MCP over HTTP. Each MCP server is a separate container or process that exposes its tools at a URL, and Opencode connects to it as a remote server. To add a new MCP server, run it somewhere reachable on your network, then add its URL to the <code>mcp</code> section of <code>opencode.json</code> and restart Opencode.</p>
<ol class="list-decimal list-inside space-y-3 text-gray-300">
<li>Deploy the MCP server you want to add (for example, as another Docker service on the same compose network).</li>
<li>Edit <code>/workspace/opencode.json</code> inside the Opencode container (or the mounted workspace volume).</li>
<li>Add a new entry under <code>mcp</code> with <code>"type": "remote"</code> and the server's HTTP URL.</li>
<li>Restart the Opencode service so it picks up the new tools: <code>docker compose restart opensim-opencode</code>.</li>
<li>Ask the bot what new tools are available to confirm the connection.</li>
</ol>
<div class="relative">
<pre id="code-mcp"><code>{
"mcp": {
"local_host_mcp": {
"type": "remote",
"url": "http://opensim-console2mcp:8997/mcp",
"enabled": true
},
"metaverse_mcp": {
"type": "remote",
"url": "http://opensim-metaverse2mcp:8999/mcp",
"enabled": true
},
"blender_mcp": {
"type": "remote",
"url": "http://opensim-blender:8996/mcp",
"enabled": true
},
"database_mcp": {
"type": "remote",
"url": "http://mcp-database:8080/mcp",
"enabled": true
},
"email_mcp": {
"type": "remote",
"url": "http://mcp-email:8080/mcp",
"enabled": true
}
}
}</code></pre>
<button class="copy-btn absolute top-2 right-2 px-3 py-1 rounded bg-dark-700 text-gray-300 text-xs hover:bg-dark-600 transition-colors" data-target="#code-mcp">Copy</button>
</div>
<div class="flex items-start gap-3 p-4 rounded-lg border border-cyan-500/30 bg-cyan-500/10 text-gray-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 text-cyan-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span>Server names and URL paths vary by implementation. Check the README of the MCP server you are adding for the exact HTTP endpoint and any required authentication or environment variables.</span>
</div>
</div>
</div>
<div class="bg-dark-800/80 backdrop-blur border border-neon-accent/20 p-6 lg:p-8 rounded-xl animate-on-scroll">
<h2 class="text-2xl font-bold mb-6 flex items-center gap-3 text-white">
<span class="w-8 h-8 rounded-lg bg-neon-accent/20 flex items-center justify-center text-neon-accent text-sm">3</span>
Ideas to Explore
</h2>
<ul class="grid md:grid-cols-2 gap-3 text-gray-300">
<li class="flex items-start gap-2"><span class="text-neon-accent mt-1">▸</span> <span><strong class="text-white">Inventory reports:</strong> "List all users with more than 1,000 items."</span></li>
<li class="flex items-start gap-2"><span class="text-neon-accent mt-1">▸</span> <span><strong class="text-white">Event invites:</strong> "Email everyone about the Friday party and add it to their calendar."</span></li>
<li class="flex items-start gap-2"><span class="text-neon-accent mt-1">▸</span> <span><strong class="text-white">Smart regions:</strong> "If no one is in the club for 30 minutes, turn off the lights and music."</span></li>
<li class="flex items-start gap-2"><span class="text-neon-accent mt-1">▸</span> <span><strong class="text-white">Content pipelines:</strong> "Download the latest OAR from S3 and load it into the staging region."</span></li>
<li class="flex items-start gap-2"><span class="text-neon-accent mt-1">▸</span> <span><strong class="text-white">Support bot:</strong> "Check recent error logs and tell me if any regions crashed."</span></li>
<li class="flex items-start gap-2"><span class="text-neon-accent mt-1">▸</span> <span><strong class="text-white">Commerce:</strong> "Generate a weekly sales CSV from the economy tables and upload it to Drive."</span></li>
</ul>
</div>
</div>
</section>
</main>
<footer class="border-t border-neon-primary/20 bg-dark-800/50 backdrop-blur mt-12">
<div class="container mx-auto px-4 py-8">
<div class="flex flex-col md:flex-row items-center justify-between gap-4">
<div class="flex items-center gap-3">
<img src="opensim-stack.png" alt="OpenSim AI Stack" class="h-8 w-auto">
<span class="font-bold gradient-text">OpenSim AI Stack</span>
</div>
<div class="flex gap-6 text-sm text-gray-400">
<a href="https://github.com/opensim-stack/opensim-ai-docker" target="_blank" rel="noopener" class="hover:text-neon-primary transition-colors">GitHub</a>
<a href="https://hub.docker.com/repository/docker/bithatch/opensim-ai-standalone/general" target="_blank" rel="noopener" class="hover:text-neon-primary transition-colors">Docker Hub</a>
<a href="https://opensimulator.org/" target="_blank" rel="noopener" class="hover:text-neon-primary transition-colors">OpenSimulator</a>
</div>
<p class="text-sm text-gray-500">Experimental work in progress.</p>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>