agents.htmlā¢7.24 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Agent Directory - Worksona Agents</title>
<meta name="description" content="Browse and explore 100+ specialized AI agents for development, security, research, and business strategy.">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- Navigation -->
<nav class="nav">
<div class="nav-container">
<div class="nav-brand">
<svg class="logo" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"/>
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
</svg>
<span class="brand-name">Worksona Agents</span>
</div>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="agents.html" class="active">Agent Directory</a></li>
<li><a href="documentation.html">Documentation</a></li>
<li><a href="examples.html">Examples</a></li>
<li><a href="https://github.com/worksona/worksona-mcp-server" target="_blank" class="btn-github">
<svg width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
GitHub
</a></li>
</ul>
<button class="mobile-menu-btn" aria-label="Toggle menu">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<!-- Page Header -->
<section class="page-header">
<div class="container">
<h1>Agent Directory</h1>
<p>Comprehensive collection of 86 specialized AI agents across 18 categories. Each agent provides domain-specific expertise optimized for Claude Desktop via MCP integration.</p>
</div>
</section>
<!-- Agent Directory -->
<section class="agent-directory">
<div class="container">
<!-- Search Bar -->
<div class="search-wrapper">
<svg class="search-icon" width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
</svg>
<input type="text" id="agentSearch" class="search-input" placeholder="SEARCH AGENTS...">
<button id="clearSearch" class="clear-search-btn" style="display: none;">
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
<!-- Category Tabs -->
<div class="category-tabs-wrapper">
<div class="category-tabs" id="categoryTabs">
<!-- Tabs will be dynamically generated -->
</div>
</div>
<!-- Agent Count -->
<div class="agent-count">
<span id="agentCountText">Loading agents...</span>
</div>
<!-- Agent Grid -->
<div class="agent-grid" id="agentGrid">
<div class="loading">
<div class="spinner"></div>
<p>Loading agents...</p>
</div>
</div>
<!-- No Results -->
<div class="no-results" id="noResults" style="display: none;">
<svg width="64" height="64" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
<h3>No agents found</h3>
<p>Try adjusting your search or filters</p>
</div>
</div>
</section>
<!-- Agent Detail Modal -->
<div class="modal" id="agentModal">
<div class="modal-overlay"></div>
<div class="modal-content">
<button class="modal-close" aria-label="Close modal">
<svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
<div class="modal-body" id="modalBody">
<!-- Agent details will be loaded here -->
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h4>Worksona Agents</h4>
<p>Multi-agent platform for Claude Desktop</p>
</div>
<div class="footer-section">
<h4>Resources</h4>
<ul>
<li><a href="documentation.html">Documentation</a></li>
<li><a href="agents.html">Agent Directory</a></li>
<li><a href="examples.html">Examples</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Community</h4>
<ul>
<li><a href="https://github.com/worksona/worksona-mcp-server" target="_blank">GitHub</a></li>
<li><a href="https://worksona.io" target="_blank">Worksona.io</a></li>
<li><a href="https://atomic47.co" target="_blank">Atomic 47 Labs</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>All Rights Reserved: Atomic 47 Labs Inc [<a href="https://atomic47.co" target="_blank" style="color: inherit;">atomic47.co</a>]. 2025. A <a href="https://worksona.io" target="_blank" style="color: inherit;">worksona.io</a> project. Contact: <a href="mailto:david@atomic47.co" style="color: inherit;">david@atomic47.co</a></p>
</div>
</div>
</footer>
<script src="js/main.js"></script>
<script src="js/agents.js"></script>
</body>
</html>