<div class="page-header">
<div class="command-line">
<span class="prompt">user@osvm:~$</span>
<span class="command typing">cat docs/plugins.md</span>
</div>
</div>
<section class="page-intro">
<h1>🧩 Plugin System</h1>
<p class="subtitle">Extend OSVM with custom commands, tools, themes, and integrations</p>
<div class="feature-highlights">
<div class="highlight-item">
<span class="highlight-icon">⚡</span>
<span>4 Plugin Types</span>
</div>
<div class="highlight-item">
<span class="highlight-icon">🔒</span>
<span>Secure Sandboxing</span>
</div>
<div class="highlight-item">
<span class="highlight-icon">🔗</span>
<span>AI Integration</span>
</div>
<div class="highlight-item">
<span class="highlight-icon">📦</span>
<span>Easy Distribution</span>
</div>
</div>
</section>
<section class="plugin-types">
<h2><span class="section-marker">[</span>PLUGIN TYPES<span class="section-marker">]</span></h2>
<div class="plugin-type-grid">
<div class="plugin-type-card" data-type="command">
<div class="plugin-type-icon">⌨️</div>
<h3>Command Plugins</h3>
<p>Add custom slash commands to the chat interface</p>
<div class="plugin-examples">
<code>/weather Boston</code>
<code>/github create-issue</code>
<code>/db query users</code>
</div>
<button class="learn-more-btn" onclick="scrollToSection('command-plugins')">Learn More</button>
</div>
<div class="plugin-type-card" data-type="tool">
<div class="plugin-type-icon">🔧</div>
<h3>Tool Plugins</h3>
<p>Provide MCP-style tools for AI integration</p>
<div class="plugin-examples">
<code>AI: "Get weather in Boston"</code>
<code>→ Uses weather tool automatically</code>
</div>
<button class="learn-more-btn" onclick="scrollToSection('tool-plugins')">Learn More</button>
</div>
<div class="plugin-type-card" data-type="theme">
<div class="plugin-type-icon">🎨</div>
<h3>Theme Plugins</h3>
<p>Customize visual appearance and styling</p>
<div class="plugin-examples">
<code>osvm chat --theme cyberpunk</code>
<code>osvm chat --theme minimal</code>
</div>
<button class="learn-more-btn" onclick="scrollToSection('theme-plugins')">Learn More</button>
</div>
<div class="plugin-type-card" data-type="integration">
<div class="plugin-type-icon">🔌</div>
<h3>Integration Plugins</h3>
<p>Connect to external services and APIs</p>
<div class="plugin-examples">
<code>/slack send-message</code>
<code>/aws deploy-lambda</code>
</div>
<button class="learn-more-btn" onclick="scrollToSection('integration-plugins')">Learn More</button>
</div>
</div>
</section>
<section class="quick-start">
<h2><span class="section-marker">[</span>QUICK START<span class="section-marker">]</span></h2>
<div class="quick-start-tabs">
<button class="tab-btn active" onclick="showPluginTab('install')">Install Plugins</button>
<button class="tab-btn" onclick="showPluginTab('create')">Create Plugin</button>
<button class="tab-btn" onclick="showPluginTab('distribute')">Distribute</button>
</div>
<div class="tab-content active" id="plugin-install">
<div class="code-block">
<div class="code-header">Installing Plugins <span class="copy-hint">← Click any command to copy</span></div>
<pre><code><span class="comment"># List available plugins</span>
<span class="copyable-command" onclick="copyCommand('osvm plugins list')"><span class="prompt">$</span> osvm plugins list</span>
<span class="comment"># Install from local directory</span>
<span class="copyable-command" onclick="copyCommand('osvm plugins install ./my-plugin/')"><span class="prompt">$</span> osvm plugins install ./my-plugin/</span>
<span class="comment"># Install from GitHub repository</span>
<span class="copyable-command" onclick="copyCommand('osvm plugins install github.com/user/weather-plugin')"><span class="prompt">$</span> osvm plugins install github.com/user/weather-plugin</span>
<span class="comment"># Enable/disable plugins</span>
<span class="copyable-command" onclick="copyCommand('osvm plugins enable weather-plugin')"><span class="prompt">$</span> osvm plugins enable weather-plugin</span>
<span class="copyable-command" onclick="copyCommand('osvm plugins disable old-plugin')"><span class="prompt">$</span> osvm plugins disable old-plugin</span>
<span class="comment"># Get plugin information</span>
<span class="copyable-command" onclick="copyCommand('osvm plugins info weather-plugin')"><span class="prompt">$</span> osvm plugins info weather-plugin</span></code></pre>
</div>
</div>
<div class="tab-content" id="plugin-create">
<div class="code-block">
<div class="code-header">Creating Your First Plugin <span class="copy-hint">← Click any command to copy</span></div>
<pre><code><span class="comment"># Create plugin directory</span>
<span class="copyable-command" onclick="copyCommand('mkdir ~/.osvm/plugins/my-plugin')"><span class="prompt">$</span> mkdir ~/.osvm/plugins/my-plugin</span>
<span class="copyable-command" onclick="copyCommand('cd ~/.osvm/plugins/my-plugin')"><span class="prompt">$</span> cd ~/.osvm/plugins/my-plugin</span>
<span class="comment"># Create plugin manifest</span>
<span class="copyable-command" onclick="copyCommand('touch plugin.json')"><span class="prompt">$</span> touch plugin.json</span>
<span class="comment"># Create entry point script</span>
<span class="copyable-command" onclick="copyCommand('touch main.py && chmod +x main.py')"><span class="prompt">$</span> touch main.py && chmod +x main.py</span>
<span class="comment"># Test your plugin</span>
<span class="copyable-command" onclick="copyCommand('osvm plugins install .')"><span class="prompt">$</span> osvm plugins install .</span>
<span class="copyable-command" onclick="copyCommand('osvm plugins enable my-plugin')"><span class="prompt">$</span> osvm plugins enable my-plugin</span></code></pre>
</div>
</div>
<div class="tab-content" id="plugin-distribute">
<div class="code-block">
<div class="code-header">Distributing Plugins <span class="copy-hint">← Click any command to copy</span></div>
<pre><code><span class="comment"># Create GitHub repository</span>
<span class="copyable-command" onclick="copyCommand('git init && git add . && git commit -m \"Initial plugin\"')"><span class="prompt">$</span> git init && git add . && git commit -m "Initial plugin"</span>
<span class="comment"># Push to GitHub</span>
<span class="copyable-command" onclick="copyCommand('git remote add origin https://github.com/user/my-plugin.git')"><span class="prompt">$</span> git remote add origin https://github.com/user/my-plugin.git</span>
<span class="copyable-command" onclick="copyCommand('git push -u origin main')"><span class="prompt">$</span> git push -u origin main</span>
<span class="comment"># Others can now install with:</span>
<span class="copyable-command" onclick="copyCommand('osvm plugins install github.com/user/my-plugin')"><span class="prompt">$</span> osvm plugins install github.com/user/my-plugin</span></code></pre>
</div>
</div>
</section>
<section id="command-plugins" class="plugin-detail-section">
<h2><span class="section-marker">[</span>COMMAND PLUGINS<span class="section-marker">]</span></h2>
<p>Command plugins add new slash commands to the OSVM chat interface. They receive user input and return formatted responses.</p>
<div class="plugin-architecture">
<h3>How Command Plugins Work</h3>
<div class="architecture-flow">
<div class="flow-step">
<div class="step-number">1</div>
<div class="step-content">
<h4>User Types Command</h4>
<code>/weather Boston</code>
</div>
</div>
<div class="flow-arrow">→</div>
<div class="flow-step">
<div class="step-number">2</div>
<div class="step-content">
<h4>Plugin Receives Context</h4>
<code>{"user_input": "/weather Boston", "session_id": "..."}</code>
</div>
</div>
<div class="flow-arrow">→</div>
<div class="flow-step">
<div class="step-number">3</div>
<div class="step-content">
<h4>Plugin Returns Result</h4>
<code>{"success": true, "output": "🌤️ Weather in Boston: 22°C"}</code>
</div>
</div>
</div>
</div>
<div class="plugin-example">
<h3>Complete Weather Plugin Example</h3>
<div class="example-tabs">
<button class="tab-btn active" onclick="showExampleTab('manifest')">plugin.json</button>
<button class="tab-btn" onclick="showExampleTab('python')">main.py</button>
<button class="tab-btn" onclick="showExampleTab('usage')">Usage</button>
</div>
<div class="tab-content active" id="example-manifest">
<div class="code-block">
<div class="code-header">Plugin Manifest (plugin.json)</div>
<pre><code>{
"name": "weather-plugin",
"version": "1.0.0",
"description": "Get weather information for any city",
"author": "Your Name",
"license": "MIT",
"homepage": "https://github.com/yourusername/osvm-weather-plugin",
"repository": "https://github.com/yourusername/osvm-weather-plugin",
"plugin_type": "Command",
"entry_point": "main.py",
"dependencies": ["requests", "python-dotenv"],
"permissions": [
{"NetworkAccess": ["api.openweathermap.org"]},
"EnvironmentAccess"
],
"min_osvm_version": "0.8.0",
"supported_platforms": ["linux", "macos", "windows"],
"config_schema": {
"type": "object",
"properties": {
"api_key": {
"type": "string",
"description": "OpenWeatherMap API key"
},
"default_units": {
"type": "string",
"enum": ["metric", "imperial"],
"default": "metric"
}
},
"required": ["api_key"]
}
}</code></pre>
</div>
</div>
<div class="tab-content" id="example-python">
<div class="code-block">
<div class="code-header">Python Implementation (main.py)</div>
<pre><code>#!/usr/bin/env python3
import json
import sys
import requests
import os
from datetime import datetime
def main():
# Read context from stdin
context = json.loads(sys.stdin.read())
# Parse command
user_input = context["user_input"]
city = user_input.replace("/weather", "").strip()
if not city:
return error_response("Please specify a city: /weather Boston")
# Get configuration
config = context.get("config", {})
api_key = config.get("api_key")
units = config.get("default_units", "metric")
if not api_key:
return error_response("API key not configured")
# Fetch weather data
try:
weather_data = fetch_weather(city, api_key, units)
return success_response(weather_data, city, units)
except Exception as e:
return error_response(f"Failed to get weather: {str(e)}")
def fetch_weather(city, api_key, units):
url = "http://api.openweathermap.org/data/2.5/weather"
params = {
"q": city,
"appid": api_key,
"units": units
}
response = requests.get(url, params=params, timeout=10)
response.raise_for_status()
return response.json()
def success_response(data, city, units):
temp = data["main"]["temp"]
feels_like = data["main"]["feels_like"]
description = data["weather"][0]["description"].title()
humidity = data["main"]["humidity"]
unit_symbol = "°C" if units == "metric" else "°F"
output = f"""🌤️ Weather in {city}:
Temperature: {temp}{unit_symbol} (feels like {feels_like}{unit_symbol})
Condition: {description}
Humidity: {humidity}%
Updated: {datetime.now().strftime('%Y-%m-%d %H:%M')}"""
result = {
"success": True,
"output": output,
"data": {
"city": city,
"temperature": temp,
"description": description,
"humidity": humidity,
"units": units
},
"suggestions": [
f"/weather forecast {city}",
f"/weather alerts {city}"
]
}
print(json.dumps(result))
def error_response(message):
result = {
"success": False,
"error": message
}
print(json.dumps(result))
if __name__ == "__main__":
main()</code></pre>
</div>
</div>
<div class="tab-content" id="example-usage">
<div class="code-block">
<div class="code-header">Using the Weather Plugin</div>
<pre><code><span class="comment"># Install the plugin</span>
<span class="copyable-command" onclick="copyCommand('osvm plugins install ./weather-plugin')"><span class="prompt">$</span> osvm plugins install ./weather-plugin</span>
<span class="comment"># Configure API key</span>
<span class="copyable-command" onclick="copyCommand('osvm plugins config weather-plugin api_key YOUR_API_KEY')"><span class="prompt">$</span> osvm plugins config weather-plugin api_key YOUR_API_KEY</span>
<span class="comment"># Use in chat</span>
<span class="prompt">$</span> osvm chat
<span class="chat-user">> /weather Boston</span>
<span class="chat-bot">🌤️ Weather in Boston:
Temperature: 22°C (feels like 25°C)
Condition: Partly Cloudy
Humidity: 65%
Updated: 2024-01-15 14:30</span>
<span class="chat-user">> /weather forecast Boston</span>
<span class="chat-bot">📅 5-Day Forecast for Boston:
Tomorrow: 18°C, Rain
Thu: 20°C, Cloudy
Fri: 24°C, Sunny
...</span></code></pre>
</div>
</div>
</div>
</section>
<section id="tool-plugins" class="plugin-detail-section">
<h2><span class="section-marker">[</span>TOOL PLUGINS<span class="section-marker">]</span></h2>
<p>Tool plugins provide MCP-style tools that AI can use automatically. They're perfect for data retrieval, analysis, and automation tasks.</p>
<div class="tool-integration-example">
<h3>AI Integration Example</h3>
<div class="ai-conversation">
<div class="ai-message user">
<span class="speaker">User:</span>
<span class="message">"What's the weather like in Boston and should I bring an umbrella?"</span>
</div>
<div class="ai-message assistant">
<span class="speaker">AI:</span>
<span class="message">I'll check the weather in Boston for you.</span>
<div class="tool-call">
<span class="tool-icon">🔧</span>
<span class="tool-name">weather-tool</span>
<span class="tool-args">{"city": "Boston"}</span>
</div>
</div>
<div class="ai-message assistant">
<span class="speaker">AI:</span>
<span class="message">The weather in Boston is currently 22°C and partly cloudy with 65% humidity. There's no rain expected today, so you won't need an umbrella! It's a beautiful day for outdoor activities.</span>
</div>
</div>
</div>
</section>
<section id="theme-plugins" class="plugin-detail-section">
<h2><span class="section-marker">[</span>THEME PLUGINS<span class="section-marker">]</span></h2>
<p>Theme plugins customize the visual appearance of OSVM interfaces. Create custom color schemes, layouts, and animations.</p>
<div class="theme-gallery">
<h3>Popular Themes</h3>
<div class="theme-previews">
<div class="theme-preview" data-theme="cyberpunk">
<div class="theme-window">
<div class="theme-header">cyberpunk.json</div>
<div class="theme-content cyberpunk-theme">
<span class="prompt">neo@matrix:~$</span>
<span class="command">osvm chat</span>
<div class="output">🤖 Agent initialized...</div>
</div>
</div>
<div class="theme-info">
<h4>Cyberpunk</h4>
<p>Neon colors, matrix-style animations</p>
</div>
</div>
<div class="theme-preview" data-theme="minimal">
<div class="theme-window">
<div class="theme-header">minimal.json</div>
<div class="theme-content minimal-theme">
<span class="prompt">$</span>
<span class="command">osvm svm list</span>
<div class="output">sonic mainnet ✓</div>
</div>
</div>
<div class="theme-info">
<h4>Minimal</h4>
<p>Clean, distraction-free interface</p>
</div>
</div>
<div class="theme-preview" data-theme="retro">
<div class="theme-window">
<div class="theme-header">retro.json</div>
<div class="theme-content retro-theme">
<span class="prompt">C:\></span>
<span class="command">osvm.exe</span>
<div class="output">OSVM v0.8.2 READY</div>
</div>
</div>
<div class="theme-info">
<h4>Retro</h4>
<p>Classic terminal aesthetics</p>
</div>
</div>
</div>
</div>
<div class="theme-creation">
<h3>Creating Custom Themes</h3>
<div class="code-block">
<div class="code-header">Theme Configuration (theme.json)</div>
<pre><code>{
"name": "my-custom-theme",
"version": "1.0.0",
"description": "My custom OSVM theme",
"author": "Your Name",
"plugin_type": "Theme",
"colors": {
"primary": "#00ff41",
"secondary": "#ff00ff",
"background": "#0d0208",
"surface": "#1a0f0f",
"text": "#e0e0e0",
"accent": "#00ffff",
"warning": "#ffaa00",
"error": "#ff0055",
"success": "#00ff41"
},
"styles": {
"chat_input": {
"background": "surface",
"text": "text",
"border": "accent",
"border_width": 2
},
"message_user": {
"text": "primary",
"prefix": "► "
},
"message_assistant": {
"text": "text",
"prefix": "◉ "
},
"commands": {
"text": "accent",
"background": "transparent"
}
},
"animations": {
"typing_indicator": "dots",
"transition_speed": "fast",
"enable_particles": true
}
}</code></pre>
</div>
</div>
</section>
<section class="security-section">
<h2><span class="section-marker">[</span>SECURITY & PERMISSIONS<span class="section-marker">]</span></h2>
<div class="security-grid">
<div class="security-feature">
<h3>🔒 Sandboxed Execution</h3>
<p>All plugins run in isolated environments with limited system access</p>
</div>
<div class="security-feature">
<h3>📋 Permission System</h3>
<p>Granular permissions for files, network, and system resources</p>
</div>
<div class="security-feature">
<h3>🔍 Code Review</h3>
<p>All plugin submissions undergo security review</p>
</div>
<div class="security-feature">
<h3>🛡️ Safe Defaults</h3>
<p>Plugins start with minimal permissions, request more as needed</p>
</div>
</div>
<div class="permission-reference">
<h3>Permission Types</h3>
<div class="permission-list">
<div class="permission-item">
<code>ReadFiles(["~/data", "/tmp"])</code>
<span>Read access to specific directories</span>
</div>
<div class="permission-item">
<code>WriteFiles(["~/output"])</code>
<span>Write access to specific directories</span>
</div>
<div class="permission-item">
<code>NetworkAccess(["api.example.com"])</code>
<span>Network access to specific hosts</span>
</div>
<div class="permission-item">
<code>ExecuteCommands</code>
<span>Execute system commands (high risk)</span>
</div>
<div class="permission-item">
<code>EnvironmentAccess</code>
<span>Access to environment variables</span>
</div>
<div class="permission-item">
<code>MCPAccess</code>
<span>Access to MCP servers</span>
</div>
<div class="permission-item">
<code>AIAccess</code>
<span>Access to AI services</span>
</div>
</div>
</div>
</section>
<section class="marketplace-section">
<h2><span class="section-marker">[</span>PLUGIN MARKETPLACE<span class="section-marker">]</span></h2>
<div class="marketplace-notice">
<span class="notice-icon">🚀</span>
<div class="notice-content">
<h3>Coming Soon: Plugin Marketplace</h3>
<p>Discover, install, and share plugins through the official OSVM marketplace</p>
<div class="marketplace-features">
<span class="feature">🔍 Search & Discovery</span>
<span class="feature">⭐ Ratings & Reviews</span>
<span class="feature">🔄 Automatic Updates</span>
<span class="feature">🛡️ Security Scanning</span>
</div>
</div>
</div>
<div class="featured-plugins">
<h3>Featured Community Plugins</h3>
<div class="plugin-cards">
<div class="plugin-card">
<div class="plugin-icon">🌤️</div>
<h4>Weather Plugin</h4>
<p>Get weather information and forecasts for any location</p>
<div class="plugin-meta">
<span class="plugin-author">@weatherdev</span>
<span class="plugin-downloads">1.2k installs</span>
</div>
<button class="install-btn" onclick="copyCommand('osvm plugins install github.com/weatherdev/osvm-weather')">Install</button>
</div>
<div class="plugin-card">
<div class="plugin-icon">📊</div>
<h4>Analytics Plugin</h4>
<p>Monitor and analyze your validator performance metrics</p>
<div class="plugin-meta">
<span class="plugin-author">@metricslab</span>
<span class="plugin-downloads">856 installs</span>
</div>
<button class="install-btn" onclick="copyCommand('osvm plugins install github.com/metricslab/osvm-analytics')">Install</button>
</div>
<div class="plugin-card">
<div class="plugin-icon">🔗</div>
<h4>GitHub Integration</h4>
<p>Create issues, manage repos, and deploy directly from OSVM</p>
<div class="plugin-meta">
<span class="plugin-author">@gittools</span>
<span class="plugin-downloads">2.1k installs</span>
</div>
<button class="install-btn" onclick="copyCommand('osvm plugins install github.com/gittools/osvm-github')">Install</button>
</div>
</div>
</div>
</section>
<section class="resources-section">
<h2><span class="section-marker">[</span>DEVELOPMENT RESOURCES<span class="section-marker">]</span></h2>
<div class="resource-grid">
<div class="resource-item">
<h3>📖 Documentation</h3>
<ul>
<li><a href="#" data-cross-link="api-reference">Plugin API Reference</a></li>
<li><a href="#" data-cross-link="api-reference">TypeScript Definitions</a></li>
<li><a href="#" data-cross-link="installation">Development Setup</a></li>
<li><a href="#" data-cross-link="api-reference">Testing Guide</a></li>
</ul>
</div>
<div class="resource-item">
<h3>🛠️ Tools & Templates</h3>
<ul>
<li>Plugin Generator CLI</li>
<li>TypeScript Plugin Template</li>
<li>Python Plugin Template</li>
<li>Rust Plugin Template</li>
</ul>
</div>
<div class="resource-item">
<h3>🤝 Community</h3>
<ul>
<li>Discord #plugin-dev Channel</li>
<li>GitHub Discussions</li>
<li>Plugin Showcase</li>
<li>Monthly Developer Calls</li>
</ul>
</div>
<div class="resource-item">
<h3>🔧 Advanced Topics</h3>
<ul>
<li>Custom Permission Types</li>
<li>Plugin Performance Optimization</li>
<li>Error Handling Best Practices</li>
<li>Multi-Language Support</li>
</ul>
</div>
</div>
</section>
<script>
function showPluginTab(tabName) {
document.querySelectorAll('#plugin-install, #plugin-create, #plugin-distribute').forEach(tab => {
tab.classList.remove('active');
});
document.querySelectorAll('.quick-start-tabs .tab-btn').forEach(btn => {
btn.classList.remove('active');
});
document.getElementById(`plugin-${tabName}`).classList.add('active');
event.target.classList.add('active');
}
function showExampleTab(tabName) {
document.querySelectorAll('#example-manifest, #example-python, #example-usage').forEach(tab => {
tab.classList.remove('active');
});
event.target.parentElement.querySelectorAll('.tab-btn').forEach(btn => {
btn.classList.remove('active');
});
document.getElementById(`example-${tabName}`).classList.add('active');
event.target.classList.add('active');
}
function scrollToSection(sectionId) {
document.getElementById(sectionId).scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
</script>