mirror of
https://github.com/nesquena/hermes-webui.git
synced 2026-05-27 12:10:40 +00:00
Nathan Esquenazi
1854 lines
70 KiB
HTML
1854 lines
70 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Hermes — The self-improving AI agent</title>
|
|
<meta name="description" content="Persistent memory, autonomous scheduling, and 15+ messaging platforms — all on hardware you control. Open source, self-hosted AI agent." />
|
|
<meta property="og:title" content="Hermes — The self-improving AI agent" />
|
|
<meta property="og:description" content="Persistent memory, autonomous scheduling, and 15+ messaging platforms — all on hardware you control." />
|
|
<meta property="og:type" content="website" />
|
|
<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&display=swap" rel="stylesheet" />
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css" id="hljs-theme" />
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/bash.min.js"></script>
|
|
<style>
|
|
/* ===== CSS VARIABLES ===== */
|
|
:root {
|
|
--bg-primary: #0d1117;
|
|
--bg-secondary: #161b22;
|
|
--bg-tertiary: #21262d;
|
|
--bg-card: #161b22;
|
|
--bg-card-hover: #1c2128;
|
|
--border: #30363d;
|
|
--border-hover: #484f58;
|
|
--text-primary: #e6edf3;
|
|
--text-secondary: #8b949e;
|
|
--text-muted: #6e7681;
|
|
--accent: #f0a500;
|
|
--accent-dim: #c88800;
|
|
--accent-glow: rgba(240, 165, 0, 0.15);
|
|
--accent-subtle: rgba(240, 165, 0, 0.08);
|
|
--green: #3fb950;
|
|
--red: #f85149;
|
|
--blue: #58a6ff;
|
|
--purple: #bc8cff;
|
|
--nav-height: 64px;
|
|
--radius: 8px;
|
|
--radius-lg: 12px;
|
|
--shadow: 0 1px 3px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.3);
|
|
--shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
--bg-primary: #ffffff;
|
|
--bg-secondary: #f6f8fa;
|
|
--bg-tertiary: #eaeef2;
|
|
--bg-card: #ffffff;
|
|
--bg-card-hover: #f6f8fa;
|
|
--border: #d0d7de;
|
|
--border-hover: #9198a1;
|
|
--text-primary: #1f2328;
|
|
--text-secondary: #656d76;
|
|
--text-muted: #9198a1;
|
|
--accent: #c07800;
|
|
--accent-dim: #a06000;
|
|
--accent-glow: rgba(192, 120, 0, 0.12);
|
|
--accent-subtle: rgba(192, 120, 0, 0.06);
|
|
--green: #1a7f37;
|
|
--red: #cf222e;
|
|
--blue: #0969da;
|
|
--purple: #7c3aed;
|
|
--shadow: 0 1px 3px rgba(0,0,0,0.1), 0 4px 16px rgba(0,0,0,0.06);
|
|
--shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
|
|
}
|
|
|
|
/* ===== RESET & BASE ===== */
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
html { scroll-behavior: smooth; font-size: 16px; }
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
line-height: 1.6;
|
|
transition: background 0.2s ease, color 0.2s ease;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
a { color: var(--accent); text-decoration: none; transition: color 0.15s; }
|
|
a:hover { color: var(--accent-dim); }
|
|
img { max-width: 100%; }
|
|
|
|
/* ===== SCROLLBAR ===== */
|
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
::-webkit-scrollbar-track { background: var(--bg-secondary); }
|
|
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
|
|
::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }
|
|
|
|
/* ===== NAVIGATION ===== */
|
|
#nav {
|
|
position: fixed;
|
|
top: 0; left: 0; right: 0;
|
|
height: var(--nav-height);
|
|
background: rgba(13, 17, 23, 0.92);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border-bottom: 1px solid var(--border);
|
|
z-index: 1000;
|
|
transition: background 0.2s;
|
|
}
|
|
[data-theme="light"] #nav {
|
|
background: rgba(255,255,255,0.92);
|
|
}
|
|
.nav-inner {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 24px;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
}
|
|
.nav-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-weight: 700;
|
|
font-size: 1.1rem;
|
|
color: var(--text-primary);
|
|
text-decoration: none;
|
|
flex-shrink: 0;
|
|
}
|
|
.nav-logo-icon {
|
|
width: 32px; height: 32px;
|
|
background: linear-gradient(135deg, var(--accent), var(--accent-dim));
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 18px;
|
|
line-height: 1;
|
|
}
|
|
.nav-links {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
list-style: none;
|
|
}
|
|
.nav-links a {
|
|
color: var(--text-secondary);
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
padding: 6px 12px;
|
|
border-radius: 6px;
|
|
transition: color 0.15s, background 0.15s;
|
|
white-space: nowrap;
|
|
}
|
|
.nav-links a:hover {
|
|
color: var(--text-primary);
|
|
background: var(--bg-tertiary);
|
|
}
|
|
.nav-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
.btn-theme {
|
|
background: none;
|
|
border: 1px solid var(--border);
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
padding: 7px 10px;
|
|
border-radius: 6px;
|
|
font-size: 15px;
|
|
line-height: 1;
|
|
transition: border-color 0.15s, color 0.15s, background 0.15s;
|
|
}
|
|
.btn-theme:hover {
|
|
border-color: var(--border-hover);
|
|
color: var(--text-primary);
|
|
background: var(--bg-tertiary);
|
|
}
|
|
.btn-nav-cta {
|
|
background: var(--accent);
|
|
color: #000;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
padding: 7px 14px;
|
|
border-radius: 6px;
|
|
border: none;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
transition: background 0.15s, transform 0.1s;
|
|
white-space: nowrap;
|
|
}
|
|
.btn-nav-cta:hover { background: var(--accent-dim); color: #000; transform: translateY(-1px); }
|
|
|
|
/* Hamburger */
|
|
.hamburger {
|
|
display: none;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
cursor: pointer;
|
|
padding: 6px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
background: none;
|
|
transition: border-color 0.15s;
|
|
}
|
|
.hamburger:hover { border-color: var(--border-hover); }
|
|
.hamburger span {
|
|
display: block;
|
|
width: 20px; height: 2px;
|
|
background: var(--text-secondary);
|
|
border-radius: 2px;
|
|
transition: transform 0.2s, opacity 0.2s;
|
|
}
|
|
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
|
|
.hamburger.open span:nth-child(2) { opacity: 0; }
|
|
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
|
|
|
|
/* Mobile menu */
|
|
#mobile-menu {
|
|
display: none;
|
|
position: fixed;
|
|
top: var(--nav-height);
|
|
left: 0; right: 0;
|
|
background: var(--bg-secondary);
|
|
border-bottom: 1px solid var(--border);
|
|
padding: 16px 24px;
|
|
z-index: 999;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
#mobile-menu.open { display: flex; }
|
|
#mobile-menu a {
|
|
color: var(--text-secondary);
|
|
font-size: 0.95rem;
|
|
font-weight: 500;
|
|
padding: 10px 12px;
|
|
border-radius: 6px;
|
|
transition: color 0.15s, background 0.15s;
|
|
}
|
|
#mobile-menu a:hover {
|
|
color: var(--text-primary);
|
|
background: var(--bg-tertiary);
|
|
}
|
|
|
|
/* ===== LAYOUT ===== */
|
|
main { padding-top: var(--nav-height); }
|
|
.section {
|
|
padding: 80px 24px;
|
|
}
|
|
.section-alt { background: var(--bg-secondary); }
|
|
.container {
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
}
|
|
.section-label {
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--accent);
|
|
margin-bottom: 12px;
|
|
}
|
|
.section-title {
|
|
font-size: clamp(1.75rem, 4vw, 2.5rem);
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
color: var(--text-primary);
|
|
margin-bottom: 16px;
|
|
}
|
|
.section-body {
|
|
font-size: 1.05rem;
|
|
color: var(--text-secondary);
|
|
max-width: 680px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* ===== HERO ===== */
|
|
#hero {
|
|
padding: 100px 24px 80px;
|
|
background: var(--bg-primary);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
#hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -200px; left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 800px; height: 600px;
|
|
background: radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 70%);
|
|
pointer-events: none;
|
|
}
|
|
.hero-inner {
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.hero-eyebrow {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: var(--accent-subtle);
|
|
border: 1px solid rgba(240, 165, 0, 0.25);
|
|
color: var(--accent);
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
padding: 5px 12px;
|
|
border-radius: 100px;
|
|
margin-bottom: 24px;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
.hero-title {
|
|
font-size: clamp(2.8rem, 7vw, 5rem);
|
|
font-weight: 800;
|
|
line-height: 1.05;
|
|
letter-spacing: -0.03em;
|
|
color: var(--text-primary);
|
|
margin-bottom: 24px;
|
|
}
|
|
.hero-title .accent { color: var(--accent); }
|
|
.hero-sub {
|
|
font-size: clamp(1.05rem, 2.5vw, 1.25rem);
|
|
color: var(--text-secondary);
|
|
max-width: 620px;
|
|
line-height: 1.65;
|
|
margin-bottom: 40px;
|
|
}
|
|
.hero-ctas {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
margin-bottom: 56px;
|
|
}
|
|
.btn-primary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
background: var(--accent);
|
|
color: #000;
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
padding: 13px 24px;
|
|
border-radius: 8px;
|
|
transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
|
|
box-shadow: 0 0 0 0 var(--accent-glow);
|
|
}
|
|
.btn-primary:hover {
|
|
background: var(--accent-dim);
|
|
color: #000;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 0 24px var(--accent-glow);
|
|
}
|
|
.btn-secondary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
background: transparent;
|
|
color: var(--text-primary);
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
padding: 13px 24px;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--border);
|
|
transition: border-color 0.15s, background 0.15s, transform 0.1s;
|
|
}
|
|
.btn-secondary:hover {
|
|
border-color: var(--border-hover);
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-primary);
|
|
transform: translateY(-2px);
|
|
}
|
|
.hero-stats {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
}
|
|
.stat-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border);
|
|
color: var(--text-secondary);
|
|
font-size: 0.825rem;
|
|
font-weight: 500;
|
|
padding: 6px 14px;
|
|
border-radius: 100px;
|
|
}
|
|
.stat-badge .dot {
|
|
width: 6px; height: 6px;
|
|
background: var(--accent);
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
.hero-credit {
|
|
margin-top: 20px;
|
|
font-size: 0.8rem;
|
|
color: var(--text-muted);
|
|
}
|
|
.hero-credit a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; }
|
|
.hero-credit a:hover { color: var(--text-secondary); }
|
|
|
|
/* ===== WHY HERMES ===== */
|
|
.why-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 40px;
|
|
align-items: start;
|
|
margin-top: 48px;
|
|
}
|
|
.why-text p {
|
|
color: var(--text-secondary);
|
|
margin-bottom: 16px;
|
|
font-size: 1rem;
|
|
line-height: 1.7;
|
|
}
|
|
.why-text p strong { color: var(--text-primary); }
|
|
.why-diagram {
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
padding: 28px;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 0.82rem;
|
|
color: var(--text-secondary);
|
|
line-height: 1.8;
|
|
position: sticky;
|
|
top: calc(var(--nav-height) + 24px);
|
|
}
|
|
.why-diagram .label {
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--text-muted);
|
|
margin-bottom: 12px;
|
|
}
|
|
.why-diagram .line { margin-bottom: 6px; }
|
|
.why-diagram .line .kw { color: var(--accent); font-weight: 500; }
|
|
.why-diagram .line .bracket { color: var(--blue); }
|
|
.why-diagram .line .paren { color: var(--purple); }
|
|
.why-diagram .divider {
|
|
border: none;
|
|
border-top: 1px solid var(--border);
|
|
margin: 18px 0;
|
|
}
|
|
.convergence-note {
|
|
margin-top: 24px;
|
|
padding: 20px;
|
|
background: var(--accent-subtle);
|
|
border: 1px solid rgba(240, 165, 0, 0.2);
|
|
border-radius: var(--radius);
|
|
font-size: 0.9rem;
|
|
color: var(--text-secondary);
|
|
line-height: 1.65;
|
|
}
|
|
.convergence-note strong { color: var(--text-primary); }
|
|
|
|
/* ===== PILLARS ===== */
|
|
.pillars-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 24px;
|
|
margin-top: 48px;
|
|
}
|
|
.pillar-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
padding: 32px;
|
|
transition: border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
}
|
|
.pillar-card:hover {
|
|
border-color: var(--accent);
|
|
background: var(--bg-card-hover);
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 8px 32px rgba(240, 165, 0, 0.1);
|
|
}
|
|
.pillar-icon {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 16px;
|
|
line-height: 1;
|
|
}
|
|
.pillar-title {
|
|
font-size: 1.2rem;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
margin-bottom: 12px;
|
|
}
|
|
.pillar-body {
|
|
color: var(--text-secondary);
|
|
font-size: 0.9rem;
|
|
line-height: 1.65;
|
|
flex: 1;
|
|
margin-bottom: 20px;
|
|
}
|
|
.pillar-body ul {
|
|
margin: 10px 0 0 0;
|
|
padding-left: 18px;
|
|
}
|
|
.pillar-body li { margin-bottom: 4px; }
|
|
.pillar-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
color: var(--accent);
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
margin-top: auto;
|
|
}
|
|
.pillar-link:hover { gap: 8px; }
|
|
|
|
/* ===== FEATURE GRID ===== */
|
|
.feature-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 16px;
|
|
margin-top: 48px;
|
|
}
|
|
.feature-tile {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
padding: 24px;
|
|
transition: border-color 0.2s, background 0.2s, transform 0.15s;
|
|
}
|
|
.feature-tile:hover {
|
|
border-color: var(--border-hover);
|
|
background: var(--bg-card-hover);
|
|
transform: translateY(-2px);
|
|
}
|
|
.feature-icon { font-size: 1.8rem; margin-bottom: 12px; line-height: 1; }
|
|
.feature-title {
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin-bottom: 8px;
|
|
}
|
|
.feature-body {
|
|
color: var(--text-secondary);
|
|
font-size: 0.825rem;
|
|
line-height: 1.55;
|
|
margin-bottom: 12px;
|
|
}
|
|
.feature-link {
|
|
color: var(--accent);
|
|
font-size: 0.78rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* ===== WEB UI SECTION ===== */
|
|
.webui-layout {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 48px;
|
|
align-items: start;
|
|
margin-top: 48px;
|
|
}
|
|
.webui-features {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
margin-top: 24px;
|
|
}
|
|
.webui-feature-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
padding: 10px 12px;
|
|
background: var(--bg-tertiary);
|
|
border-radius: 6px;
|
|
font-size: 0.85rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
.webui-feature-item::before {
|
|
content: '✓';
|
|
color: var(--green);
|
|
font-weight: 700;
|
|
flex-shrink: 0;
|
|
}
|
|
.webui-steps { display: flex; flex-direction: column; gap: 20px; }
|
|
.step-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.step-num {
|
|
width: 26px; height: 26px;
|
|
background: var(--accent);
|
|
color: #000;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
.step-title {
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* ===== CODE BLOCKS ===== */
|
|
.code-wrap {
|
|
position: relative;
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
background: #0d1117;
|
|
border: 1px solid var(--border);
|
|
margin: 8px 0;
|
|
}
|
|
[data-theme="light"] .code-wrap {
|
|
background: #161b22;
|
|
}
|
|
.code-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 8px 16px;
|
|
background: rgba(255,255,255,0.04);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.code-lang {
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: var(--text-muted);
|
|
}
|
|
.copy-btn {
|
|
background: none;
|
|
border: 1px solid var(--border);
|
|
color: var(--text-muted);
|
|
font-size: 0.7rem;
|
|
padding: 3px 8px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: color 0.15s, border-color 0.15s;
|
|
font-family: inherit;
|
|
}
|
|
.copy-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
|
|
.copy-btn.copied { color: var(--green); border-color: var(--green); }
|
|
.code-wrap pre {
|
|
margin: 0;
|
|
padding: 16px;
|
|
overflow-x: auto;
|
|
}
|
|
.code-wrap code {
|
|
font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
|
|
font-size: 0.82rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* ===== COMPARISON ===== */
|
|
.comparison-intro {
|
|
font-size: 1rem;
|
|
color: var(--text-secondary);
|
|
max-width: 720px;
|
|
line-height: 1.7;
|
|
margin-top: 16px;
|
|
margin-bottom: 40px;
|
|
}
|
|
.comparison-intro strong { color: var(--text-primary); }
|
|
.table-wrap {
|
|
overflow-x: auto;
|
|
border-radius: var(--radius-lg);
|
|
border: 1px solid var(--border);
|
|
margin-bottom: 48px;
|
|
}
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 0.875rem;
|
|
}
|
|
thead th {
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-secondary);
|
|
font-weight: 600;
|
|
font-size: 0.78rem;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
padding: 12px 16px;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--border);
|
|
white-space: nowrap;
|
|
}
|
|
thead th:first-child { color: var(--text-primary); }
|
|
tbody tr {
|
|
border-bottom: 1px solid var(--border);
|
|
transition: background 0.1s;
|
|
}
|
|
tbody tr:last-child { border-bottom: none; }
|
|
tbody tr:hover { background: var(--bg-card-hover); }
|
|
tbody tr.highlight-row { background: var(--accent-subtle); }
|
|
tbody tr.highlight-row:hover { background: rgba(240, 165, 0, 0.12); }
|
|
tbody td {
|
|
padding: 12px 16px;
|
|
color: var(--text-secondary);
|
|
vertical-align: middle;
|
|
}
|
|
tbody td:first-child {
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
white-space: nowrap;
|
|
}
|
|
.check { color: var(--green); font-weight: 600; }
|
|
.partial { color: var(--accent); font-size: 0.82rem; }
|
|
.cloud { color: var(--blue); font-size: 0.82rem; }
|
|
.no { color: var(--text-muted); font-size: 0.82rem; }
|
|
.prev { color: var(--purple); font-size: 0.82rem; }
|
|
|
|
.comparison-cards {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
margin-top: 32px;
|
|
}
|
|
.comparison-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
padding: 24px;
|
|
transition: border-color 0.2s;
|
|
}
|
|
.comparison-card:hover { border-color: var(--border-hover); }
|
|
.comparison-card h4 {
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin-bottom: 10px;
|
|
}
|
|
.comparison-card p {
|
|
font-size: 0.875rem;
|
|
color: var(--text-secondary);
|
|
line-height: 1.65;
|
|
}
|
|
|
|
/* ===== INSTALLATION ===== */
|
|
.install-layout {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 48px;
|
|
margin-top: 48px;
|
|
}
|
|
.providers-table-wrap {
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
}
|
|
.provider-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid var(--border);
|
|
gap: 12px;
|
|
}
|
|
.provider-row:last-child { border-bottom: none; }
|
|
.provider-name {
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
font-size: 0.9rem;
|
|
}
|
|
.provider-auth {
|
|
color: var(--text-muted);
|
|
font-size: 0.8rem;
|
|
}
|
|
.provider-badge {
|
|
font-size: 0.7rem;
|
|
padding: 2px 8px;
|
|
border-radius: 100px;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
}
|
|
.badge-oauth { background: rgba(63, 185, 80, 0.15); color: var(--green); border: 1px solid rgba(63, 185, 80, 0.3); }
|
|
.badge-key { background: rgba(88, 166, 255, 0.12); color: var(--blue); border: 1px solid rgba(88, 166, 255, 0.25); }
|
|
.badge-local { background: rgba(188, 140, 255, 0.12); color: var(--purple); border: 1px solid rgba(188, 140, 255, 0.25); }
|
|
|
|
.platforms-note {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-top: 16px;
|
|
padding: 10px 16px;
|
|
background: var(--accent-subtle);
|
|
border: 1px solid rgba(240, 165, 0, 0.2);
|
|
border-radius: 6px;
|
|
font-size: 0.85rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* ===== LIMITATIONS ===== */
|
|
.limitations-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: 16px;
|
|
margin-top: 40px;
|
|
}
|
|
.limitation-item {
|
|
display: flex;
|
|
gap: 14px;
|
|
padding: 20px;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
align-items: flex-start;
|
|
}
|
|
.limitation-icon {
|
|
font-size: 1.3rem;
|
|
flex-shrink: 0;
|
|
margin-top: 2px;
|
|
}
|
|
.limitation-text {
|
|
font-size: 0.9rem;
|
|
color: var(--text-secondary);
|
|
line-height: 1.55;
|
|
}
|
|
.limitation-text strong { color: var(--text-primary); }
|
|
|
|
/* ===== RESOURCES ===== */
|
|
.resources-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 14px;
|
|
margin-top: 40px;
|
|
}
|
|
.resource-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
padding: 20px;
|
|
transition: border-color 0.2s, background 0.2s, transform 0.15s;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
text-decoration: none;
|
|
}
|
|
.resource-card:hover {
|
|
border-color: var(--accent);
|
|
background: var(--bg-card-hover);
|
|
transform: translateY(-2px);
|
|
color: var(--text-primary);
|
|
}
|
|
.resource-icon { font-size: 1.5rem; line-height: 1; }
|
|
.resource-title {
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
.resource-url {
|
|
font-size: 0.75rem;
|
|
color: var(--text-muted);
|
|
word-break: break-all;
|
|
}
|
|
|
|
/* ===== FOOTER ===== */
|
|
footer {
|
|
background: var(--bg-secondary);
|
|
border-top: 1px solid var(--border);
|
|
padding: 40px 24px;
|
|
}
|
|
.footer-inner {
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 16px;
|
|
}
|
|
.footer-left {
|
|
font-size: 0.875rem;
|
|
color: var(--text-muted);
|
|
}
|
|
.footer-left a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; }
|
|
.footer-left a:hover { color: var(--text-secondary); }
|
|
.footer-links {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 16px;
|
|
}
|
|
.footer-links a {
|
|
font-size: 0.825rem;
|
|
color: var(--text-muted);
|
|
transition: color 0.15s;
|
|
}
|
|
.footer-links a:hover { color: var(--text-secondary); }
|
|
|
|
/* ===== UTILITY ===== */
|
|
.mt-8 { margin-top: 8px; }
|
|
.mt-16 { margin-top: 16px; }
|
|
.mt-24 { margin-top: 24px; }
|
|
.mt-32 { margin-top: 32px; }
|
|
.subsection-title {
|
|
font-size: 1.3rem;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
margin-bottom: 16px;
|
|
}
|
|
.docs-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-top: 20px;
|
|
color: var(--accent);
|
|
font-weight: 500;
|
|
font-size: 0.9rem;
|
|
}
|
|
.docs-link:hover { gap: 10px; }
|
|
|
|
/* ===== HIGHLIGHT.JS OVERRIDES ===== */
|
|
.hljs { background: transparent !important; padding: 0 !important; }
|
|
|
|
/* ===== RESPONSIVE ===== */
|
|
@media (max-width: 1024px) {
|
|
.feature-grid { grid-template-columns: repeat(2, 1fr); }
|
|
.resources-grid { grid-template-columns: repeat(3, 1fr); }
|
|
}
|
|
@media (max-width: 900px) {
|
|
.why-grid { grid-template-columns: 1fr; }
|
|
.pillars-grid { grid-template-columns: 1fr; }
|
|
.webui-layout { grid-template-columns: 1fr; }
|
|
.install-layout { grid-template-columns: 1fr; }
|
|
.comparison-cards { grid-template-columns: 1fr; }
|
|
.why-diagram { position: static; }
|
|
}
|
|
@media (max-width: 768px) {
|
|
.nav-links { display: none; }
|
|
.btn-nav-cta { display: none; }
|
|
.hamburger { display: flex; }
|
|
.section { padding: 56px 16px; }
|
|
#hero { padding: 72px 16px 56px; }
|
|
.feature-grid { grid-template-columns: 1fr 1fr; }
|
|
.resources-grid { grid-template-columns: 1fr 1fr; }
|
|
.webui-features { grid-template-columns: 1fr; }
|
|
}
|
|
@media (max-width: 540px) {
|
|
.feature-grid { grid-template-columns: 1fr; }
|
|
.resources-grid { grid-template-columns: 1fr; }
|
|
.hero-stats { flex-direction: column; align-items: flex-start; }
|
|
thead th, tbody td { padding: 10px 12px; font-size: 0.8rem; }
|
|
.hero-ctas { flex-direction: column; }
|
|
.btn-primary, .btn-secondary { width: 100%; justify-content: center; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ===== NAV ===== -->
|
|
<nav id="nav">
|
|
<div class="nav-inner">
|
|
<a href="#hero" class="nav-logo">
|
|
<div class="nav-logo-icon">⚡</div>
|
|
Hermes
|
|
</a>
|
|
<ul class="nav-links">
|
|
<li><a href="#why">Why Hermes</a></li>
|
|
<li><a href="#features">Features</a></li>
|
|
<li><a href="#webui">Web UI</a></li>
|
|
<li><a href="#compare">Compare</a></li>
|
|
<li><a href="#install">Install</a></li>
|
|
<li><a href="#resources">Resources</a></li>
|
|
</ul>
|
|
<div class="nav-actions">
|
|
<button class="btn-theme" id="theme-toggle" aria-label="Toggle theme" title="Toggle light/dark mode">🌙</button>
|
|
<a href="https://hermes-agent.nousresearch.com/docs/getting-started/installation" class="btn-nav-cta" target="_blank" rel="noopener">Get started →</a>
|
|
</div>
|
|
<button class="hamburger" id="hamburger" aria-label="Open menu">
|
|
<span></span><span></span><span></span>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Mobile menu -->
|
|
<div id="mobile-menu">
|
|
<a href="#why" onclick="closeMobileMenu()">Why Hermes</a>
|
|
<a href="#features" onclick="closeMobileMenu()">Features</a>
|
|
<a href="#webui" onclick="closeMobileMenu()">Web UI</a>
|
|
<a href="#compare" onclick="closeMobileMenu()">Compare</a>
|
|
<a href="#install" onclick="closeMobileMenu()">Install</a>
|
|
<a href="#resources" onclick="closeMobileMenu()">Resources</a>
|
|
<a href="https://hermes-agent.nousresearch.com/docs/getting-started/installation" target="_blank" rel="noopener" style="color: var(--accent); margin-top: 4px;">Get started →</a>
|
|
</div>
|
|
|
|
<main>
|
|
|
|
<!-- ===== SECTION 1: HERO ===== -->
|
|
<section id="hero">
|
|
<div class="hero-inner">
|
|
<div class="hero-eyebrow">
|
|
⚡ Open source · Self-hosted · MIT licensed
|
|
</div>
|
|
<h1 class="hero-title">
|
|
Hermes<br /><span class="accent">Agent</span>
|
|
</h1>
|
|
<p class="hero-sub">
|
|
The self-improving AI agent that lives on your server. Persistent memory, autonomous scheduling, and 15+ messaging platforms — all on hardware you control.
|
|
</p>
|
|
<div class="hero-ctas">
|
|
<a href="https://hermes-agent.nousresearch.com/docs/getting-started/installation" target="_blank" rel="noopener" class="btn-primary">
|
|
Get Started →
|
|
</a>
|
|
<a href="https://github.com/NousResearch/hermes-agent" target="_blank" rel="noopener" class="btn-secondary">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style="flex-shrink:0"><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.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
|
|
View on GitHub
|
|
</a>
|
|
</div>
|
|
<div class="hero-stats">
|
|
<span class="stat-badge"><span class="dot"></span>26k+ GitHub stars</span>
|
|
<span class="stat-badge"><span class="dot"></span>15+ messaging platforms</span>
|
|
<span class="stat-badge"><span class="dot"></span>47 built-in tools</span>
|
|
<span class="stat-badge"><span class="dot"></span>MIT licensed</span>
|
|
</div>
|
|
<p class="hero-credit">Built by <a href="https://nousresearch.com" target="_blank" rel="noopener">Nous Research</a></p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== SECTION 2: WHY HERMES ===== -->
|
|
<section id="why" class="section section-alt">
|
|
<div class="container">
|
|
<p class="section-label">The core idea</p>
|
|
<h2 class="section-title">Why Hermes?</h2>
|
|
<div class="why-grid">
|
|
<div class="why-text">
|
|
<p>
|
|
Most AI tools are <strong>excellent in the moment and weak over time.</strong> They give you a great answer, then forget you exist. The next session starts from zero.
|
|
</p>
|
|
<p>
|
|
The distinction isn't "has memory" vs "no memory" anymore. Every major tool has added some form of memory in the past year. The real question is whether that context is <strong>durable</strong> (survives reboots), <strong>self-hosted</strong> (your hardware), <strong>cross-surface</strong> (same agent on Telegram, Slack, terminal), and <strong>cumulative</strong> (compounds over months, not resets per project).
|
|
</p>
|
|
<p>
|
|
Hermes answers yes to all four. It runs as a persistent process on your server. Memory is markdown files in <code style="font-family: 'JetBrains Mono', monospace; font-size: 0.85em; background: var(--bg-tertiary); padding: 2px 6px; border-radius: 4px;">~/.hermes/</code>. The same agent that answered your Telegram message at 9am is available in your terminal at 2pm, with full context.
|
|
</p>
|
|
<p>
|
|
The market is converging fast. Chat assistants have added scheduling. Editors are shipping cloud agents. CLIs are getting skills systems. Hermes wins through <strong>synthesis</strong> — all of these capabilities working together on hardware you own, with a model of your choice.
|
|
</p>
|
|
<div class="convergence-note">
|
|
<strong>Why synthesis matters:</strong> A scheduler without messaging is just cron. Messaging without memory is just a chatbot. Memory without scheduling is a glorified notes app. Hermes ties them together into a single persistent process with an identity that accumulates across time.
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="why-diagram">
|
|
<div class="label">Session-scoped tool</div>
|
|
<div class="line">
|
|
<span class="kw">You</span> → <span class="bracket">[Tool]</span> → Answer → Done
|
|
</div>
|
|
<hr class="divider" />
|
|
<div class="label">Persistent agent</div>
|
|
<div class="line">
|
|
<span class="kw">You</span> ↔ <span class="bracket">[Hermes]</span> ↔ <span class="paren">(memory, skills,</span>
|
|
</div>
|
|
<div class="line">
|
|
<span class="paren">schedule, tools,</span>
|
|
</div>
|
|
<div class="line">
|
|
<span class="paren">surfaces)</span>
|
|
</div>
|
|
<hr class="divider" />
|
|
<div style="font-size: 0.75rem; color: var(--text-muted); line-height: 1.6;">
|
|
Memory: ~/.hermes/ (markdown files)<br />
|
|
Skills: auto-written from experience<br />
|
|
Schedule: cron, runs while you sleep<br />
|
|
Surfaces: Telegram · Discord · Slack · browser<br />
|
|
Model: your choice, swap anytime
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== SECTION 3: PILLARS ===== -->
|
|
<section id="pillars" class="section">
|
|
<div class="container">
|
|
<p class="section-label">Three pillars</p>
|
|
<h2 class="section-title">What makes it different</h2>
|
|
<div class="pillars-grid">
|
|
|
|
<div class="pillar-card">
|
|
<div class="pillar-icon">🧠</div>
|
|
<h3 class="pillar-title">Memory that compounds</h3>
|
|
<div class="pillar-body">
|
|
<p>Layered memory system: user profile, agent memory, skills, and session history. All stored locally as markdown files at <code style="font-family: 'JetBrains Mono', monospace; font-size: 0.85em;">~/.hermes/</code>.</p>
|
|
<ul>
|
|
<li>Survives every reboot and model swap</li>
|
|
<li>8 optional external memory providers</li>
|
|
<li>Grows more useful the longer you use it</li>
|
|
<li>Portable — it's just files</li>
|
|
</ul>
|
|
</div>
|
|
<a href="https://hermes-agent.nousresearch.com/docs/user-guide/features/memory" target="_blank" rel="noopener" class="pillar-link">
|
|
Memory docs →
|
|
</a>
|
|
</div>
|
|
|
|
<div class="pillar-card">
|
|
<div class="pillar-icon">⏰</div>
|
|
<h3 class="pillar-title">Autonomous scheduling</h3>
|
|
<div class="pillar-body">
|
|
<p>Built-in cron scheduler runs on your server and delivers results to any platform you've connected. Set it and forget it.</p>
|
|
<ul>
|
|
<li>Morning news briefings to Telegram</li>
|
|
<li>PR review automation</li>
|
|
<li>Test suite monitoring</li>
|
|
<li>Blog watchers and price alerts</li>
|
|
</ul>
|
|
</div>
|
|
<a href="https://hermes-agent.nousresearch.com/docs/user-guide/features/tools" target="_blank" rel="noopener" class="pillar-link">
|
|
Scheduling docs →
|
|
</a>
|
|
</div>
|
|
|
|
<div class="pillar-card">
|
|
<div class="pillar-icon">📡</div>
|
|
<h3 class="pillar-title">Reach it from anywhere</h3>
|
|
<div class="pillar-body">
|
|
<p>15+ messaging platforms, same agent, same memory. Switch surfaces mid-conversation without losing context.</p>
|
|
<ul>
|
|
<li>Telegram · Discord · Slack · WhatsApp</li>
|
|
<li>Signal · Matrix · Mattermost · Email · SMS</li>
|
|
<li>DingTalk · Feishu · WeCom · BlueBubbles</li>
|
|
<li>Home Assistant · browser</li>
|
|
</ul>
|
|
</div>
|
|
<a href="https://hermes-agent.nousresearch.com/docs/user-guide/messaging" target="_blank" rel="noopener" class="pillar-link">
|
|
Messaging docs →
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== SECTION 4: FEATURE GRID ===== -->
|
|
<section id="features" class="section section-alt">
|
|
<div class="container">
|
|
<p class="section-label">Full feature set</p>
|
|
<h2 class="section-title">Everything in one system</h2>
|
|
<div class="feature-grid">
|
|
|
|
<div class="feature-tile">
|
|
<div class="feature-icon">🔧</div>
|
|
<div class="feature-title">47 built-in tools</div>
|
|
<p class="feature-body">Web search and extraction, browser automation, code execution, vision analysis, image generation, TTS, subagent delegation, and more.</p>
|
|
<a href="https://hermes-agent.nousresearch.com/docs/user-guide/features/tools" target="_blank" rel="noopener" class="feature-link">Tools reference →</a>
|
|
</div>
|
|
|
|
<div class="feature-tile">
|
|
<div class="feature-icon">📚</div>
|
|
<div class="feature-title">Self-improving skills</div>
|
|
<p class="feature-body">The agent writes its own skills from experience. Compatible with agentskills.io open standard and shareable via Skills Hub.</p>
|
|
<a href="https://hermes-agent.nousresearch.com/docs/user-guide/features/skills" target="_blank" rel="noopener" class="feature-link">Skills docs →</a>
|
|
</div>
|
|
|
|
<div class="feature-tile">
|
|
<div class="feature-icon">🔌</div>
|
|
<div class="feature-title">MCP integration</div>
|
|
<p class="feature-body">Connect to any MCP server — GitHub, databases, file systems, APIs. Hermes can also expose itself as an MCP server for Claude Code, Cursor, or Codex.</p>
|
|
<a href="https://hermes-agent.nousresearch.com/docs/user-guide/features/mcp" target="_blank" rel="noopener" class="feature-link">MCP docs →</a>
|
|
</div>
|
|
|
|
<div class="feature-tile">
|
|
<div class="feature-icon">🎙️</div>
|
|
<div class="feature-title">Voice mode</div>
|
|
<p class="feature-body">Real-time voice in CLI (Ctrl+B to record), Telegram voice bubbles, Discord voice channels. Supports faster-whisper locally or Groq/OpenAI Whisper.</p>
|
|
<a href="https://hermes-agent.nousresearch.com/docs/user-guide/features/voice-mode" target="_blank" rel="noopener" class="feature-link">Voice docs →</a>
|
|
</div>
|
|
|
|
<div class="feature-tile">
|
|
<div class="feature-icon">🖥️</div>
|
|
<div class="feature-title">6 terminal backends</div>
|
|
<p class="feature-body">Local, Docker, SSH, Daytona, Singularity, Modal. Run execution anywhere from a $5 VPS to serverless cloud, sandboxed as needed.</p>
|
|
<a href="https://hermes-agent.nousresearch.com/docs/user-guide/features/tools" target="_blank" rel="noopener" class="feature-link">Backend docs →</a>
|
|
</div>
|
|
|
|
<div class="feature-tile">
|
|
<div class="feature-icon">🎭</div>
|
|
<div class="feature-title">Personality & SOUL.md</div>
|
|
<p class="feature-body">Define the agent's default voice with a global SOUL.md file. 14 built-in personas plus custom personalities via config.</p>
|
|
<a href="https://hermes-agent.nousresearch.com/docs/user-guide/features/personality" target="_blank" rel="noopener" class="feature-link">Personality docs →</a>
|
|
</div>
|
|
|
|
<div class="feature-tile">
|
|
<div class="feature-icon">🤝</div>
|
|
<div class="feature-title">Agent orchestration</div>
|
|
<p class="feature-body">Spawn Claude Code or Codex as sub-agents for heavy coding tasks. Results fold back into Hermes memory. Hermes also runs as an MCP server for other tools.</p>
|
|
<a href="https://hermes-agent.nousresearch.com/docs/user-guide/features/mcp" target="_blank" rel="noopener" class="feature-link">Orchestration docs →</a>
|
|
</div>
|
|
|
|
<div class="feature-tile">
|
|
<div class="feature-icon">🔒</div>
|
|
<div class="feature-title">Security model</div>
|
|
<p class="feature-body">7-layer defense in depth: user allowlists, dangerous command approval, Docker isolation, MCP credential filtering, prompt injection scanning, cross-session isolation, input sanitization.</p>
|
|
<a href="https://hermes-agent.nousresearch.com/docs/user-guide/security" target="_blank" rel="noopener" class="feature-link">Security docs →</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== SECTION 5: WEB UI ===== -->
|
|
<section id="webui" class="section">
|
|
<div class="container">
|
|
<p class="section-label">Hermes Web UI</p>
|
|
<h2 class="section-title">A browser interface for Hermes</h2>
|
|
<p class="section-body">
|
|
Full-featured, no build step, no framework. Three-panel Claude-style layout — sessions sidebar, chat, workspace file browser.
|
|
<a href="https://github.com/nesquena/hermes-webui" target="_blank" rel="noopener" style="margin-left: 6px;">GitHub →</a>
|
|
</p>
|
|
|
|
<div class="webui-layout">
|
|
<div>
|
|
<h3 class="subsection-title" style="margin-top: 0;">What it includes</h3>
|
|
<div class="webui-features">
|
|
<div class="webui-feature-item">1:1 parity with Hermes CLI</div>
|
|
<div class="webui-feature-item">Multi-profile support</div>
|
|
<div class="webui-feature-item">Session history with projects and tags</div>
|
|
<div class="webui-feature-item">Tool call cards with expand/collapse</div>
|
|
<div class="webui-feature-item">Workspace file browser</div>
|
|
<div class="webui-feature-item">Inline file preview</div>
|
|
<div class="webui-feature-item">Light + dark mode</div>
|
|
<div class="webui-feature-item">Password protection</div>
|
|
<div class="webui-feature-item">SSH tunnel ready</div>
|
|
<div class="webui-feature-item">Docker image available</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="webui-steps">
|
|
<div>
|
|
<div class="step-header">
|
|
<div class="step-num">1</div>
|
|
<div class="step-title">Install Hermes Agent first</div>
|
|
</div>
|
|
<div class="code-wrap">
|
|
<div class="code-header">
|
|
<span class="code-lang">bash</span>
|
|
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
|
</div>
|
|
<pre><code class="language-bash">curl -fsSL https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.sh | bash
|
|
hermes model # configure your LLM provider</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="step-header">
|
|
<div class="step-num">2</div>
|
|
<div class="step-title">Clone and start the Web UI</div>
|
|
</div>
|
|
<div class="code-wrap">
|
|
<div class="code-header">
|
|
<span class="code-lang">bash</span>
|
|
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
|
</div>
|
|
<pre><code class="language-bash">git clone https://github.com/nesquena/hermes-webui.git hermes-webui
|
|
cd hermes-webui
|
|
./start.sh</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="step-header">
|
|
<div class="step-num" style="background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border);">or</div>
|
|
<div class="step-title">Docker option</div>
|
|
</div>
|
|
<div class="code-wrap">
|
|
<div class="code-header">
|
|
<span class="code-lang">bash</span>
|
|
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
|
</div>
|
|
<pre><code class="language-bash">docker pull ghcr.io/nesquena/hermes-webui:latest
|
|
docker run -d \
|
|
-e WANTED_UID=$(id -u) -e WANTED_GID=$(id -g) \
|
|
-v ~/.hermes:/home/hermeswebui/.hermes \
|
|
-v ~/workspace:/workspace \
|
|
-p 8787:8787 ghcr.io/nesquena/hermes-webui:latest</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="step-header">
|
|
<div class="step-num" style="background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border);">→</div>
|
|
<div class="step-title">SSH tunnel (for remote servers)</div>
|
|
</div>
|
|
<div class="code-wrap">
|
|
<div class="code-header">
|
|
<span class="code-lang">bash</span>
|
|
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
|
</div>
|
|
<pre><code class="language-bash">ssh -N -L 8787:127.0.0.1:8787 user@your-server</code></pre>
|
|
</div>
|
|
<p style="margin-top: 10px; font-size: 0.85rem; color: var(--text-secondary);">
|
|
Then visit <a href="http://localhost:8787" target="_blank" rel="noopener">http://localhost:8787</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== SECTION 6: COMPARISON ===== -->
|
|
<section id="compare" class="section section-alt">
|
|
<div class="container">
|
|
<p class="section-label">Honest comparison</p>
|
|
<h2 class="section-title">How Hermes compares</h2>
|
|
<p class="comparison-intro">
|
|
The agent landscape is converging fast. <strong>Chat assistants added scheduling.</strong> Editors shipped cloud agents. CLIs are getting skills systems. Most comparisons a year ago are already outdated. This table reflects where things stand in mid-2026 — and will keep shifting. Hermes wins through <strong>synthesis</strong>: these capabilities working together on hardware you own, with a model of your choice.
|
|
</p>
|
|
|
|
<h3 class="subsection-title">vs. the agent landscape</h3>
|
|
<div class="table-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Tool</th>
|
|
<th>Persistent memory</th>
|
|
<th>Self-hosted scheduling</th>
|
|
<th>Messaging / surfaces</th>
|
|
<th>Self-hosted</th>
|
|
<th>Open source</th>
|
|
<th>Self-improving skills</th>
|
|
<th>Always-on</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="highlight-row">
|
|
<td>Hermes</td>
|
|
<td><span class="check">✓</span></td>
|
|
<td><span class="check">✓ self-hosted</span></td>
|
|
<td><span class="check">✓ 15+ platforms</span></td>
|
|
<td><span class="check">✓</span></td>
|
|
<td><span class="check">✓ MIT</span></td>
|
|
<td><span class="check">✓ automatic</span></td>
|
|
<td><span class="check">✓</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>OpenClaw</td>
|
|
<td><span class="check">✓</span></td>
|
|
<td><span class="check">✓</span></td>
|
|
<td><span class="check">✓ 24+ platforms</span></td>
|
|
<td><span class="check">✓</span></td>
|
|
<td><span class="check">✓ MIT</span></td>
|
|
<td><span class="partial">Partial</span></td>
|
|
<td><span class="check">✓</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Claude Code</td>
|
|
<td><span class="partial">Partial</span></td>
|
|
<td><span class="cloud">Cloud only</span></td>
|
|
<td><span class="prev">Preview</span></td>
|
|
<td><span class="no">No</span></td>
|
|
<td><span class="no">No</span></td>
|
|
<td><span class="no">No</span></td>
|
|
<td><span class="no">No</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Codex</td>
|
|
<td><span class="partial">Partial</span></td>
|
|
<td><span class="partial">Desktop app</span></td>
|
|
<td><span class="no">No</span></td>
|
|
<td><span class="check">✓ (CLI)</span></td>
|
|
<td><span class="check">✓ Apache 2.0</span></td>
|
|
<td><span class="no">No</span></td>
|
|
<td><span class="no">No</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>OpenCode</td>
|
|
<td><span class="partial">Partial</span></td>
|
|
<td><span class="no">No</span></td>
|
|
<td><span class="partial">Community</span></td>
|
|
<td><span class="check">✓</span></td>
|
|
<td><span class="check">✓</span></td>
|
|
<td><span class="partial">Community</span></td>
|
|
<td><span class="no">No</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Cursor</td>
|
|
<td><span class="partial">✓ per-project</span></td>
|
|
<td><span class="cloud">Cloud VMs</span></td>
|
|
<td><span class="partial">✓ Slack/web</span></td>
|
|
<td><span class="no">No</span></td>
|
|
<td><span class="no">No</span></td>
|
|
<td><span class="no">No</span></td>
|
|
<td><span class="no">No</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>GitHub Copilot</td>
|
|
<td><span class="partial">Partial repo</span></td>
|
|
<td><span class="partial">Via agent</span></td>
|
|
<td><span class="partial">Via CLI</span></td>
|
|
<td><span class="no">No</span></td>
|
|
<td><span class="no">No</span></td>
|
|
<td><span class="no">No</span></td>
|
|
<td><span class="no">No</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Claude.ai</td>
|
|
<td><span class="check">✓</span></td>
|
|
<td><span class="check">✓ Cowork</span></td>
|
|
<td><span class="check">✓ 50+ connectors</span></td>
|
|
<td><span class="no">No</span></td>
|
|
<td><span class="no">No</span></td>
|
|
<td><span class="no">No</span></td>
|
|
<td><span class="no">No</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>ChatGPT</td>
|
|
<td><span class="check">✓</span></td>
|
|
<td><span class="check">✓</span></td>
|
|
<td><span class="check">✓ 50+ connectors</span></td>
|
|
<td><span class="no">No</span></td>
|
|
<td><span class="no">No</span></td>
|
|
<td><span class="no">No</span></td>
|
|
<td><span class="no">No</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h3 class="subsection-title mt-32">Head-to-head</h3>
|
|
<div class="comparison-cards">
|
|
|
|
<div class="comparison-card">
|
|
<h4>Hermes vs. OpenClaw</h4>
|
|
<p>
|
|
OpenClaw (MIT, ~350k+ GitHub stars) is the closest comparison — open-source, self-hosted, always-on, with persistent memory, cron scheduling, and messaging. OpenClaw has the widest messaging surface (24+ platforms, including iMessage, LINE, WeChat, Teams) and native Chrome CDP browser control. Hermes wins on stability (OpenClaw has documented Telegram regressions through April 2026) and security — three separate 2026 audits found malicious skills in ClawHub, with Koi Security linking 335 packages to the "ClawHavoc" campaign and Bitdefender flagging ~900 malicious packages (~20% of the ecosystem). Hermes writes skills automatically; OpenClaw centers on a human-curated marketplace. Hermes also runs in the Python/ML ecosystem; OpenClaw is Node.js.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="comparison-card">
|
|
<h4>Hermes vs. Claude Code</h4>
|
|
<p>
|
|
Claude Code is Anthropic's official agentic tool, strong for focused coding sessions. It has a 26-event hooks system, a plugin/skills marketplace, CLAUDE.md/MEMORY.md project memory, and cloud-managed scheduling on Anthropic infrastructure. Research-preview messaging covers Telegram, Discord, and iMessage; Slack is not yet shipped. The key differences: scheduling runs on Anthropic's cloud (your data leaves your hardware), it's locked to Claude models, and it's not open source. Hermes can spawn Claude Code as a sub-agent for heavy implementation tasks — they're complementary.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="comparison-card">
|
|
<h4>Hermes vs. Cursor</h4>
|
|
<p>
|
|
Cursor has changed substantially. Per-project Memories shipped June 2025. Automations launched March 2026 — time-based, event-based, Slack-triggered background agents. v3.0 (April 2026) went agent-first. It's now valued at $29.3B. Cursor is excellent at what it does. But its agents run on cloud VMs with no data sovereignty. Hermes runs on your server, accumulates context across all your projects (not per-project), works with any model family, and is reachable from every surface you use — not just the editor.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="comparison-card">
|
|
<h4>Hermes vs. Claude.ai / ChatGPT</h4>
|
|
<p>
|
|
Both are capable and no longer just chat tools. Claude Cowork added scheduling (Feb 2026) and 50+ connectors including Slack. ChatGPT has Agent Mode (July 2025), Scheduled Tasks, a computer-using agent, and 50+ connectors. The fundamental issue isn't features — it's where execution lives. Neither is self-hosted. Memory, sessions, and scheduled tasks run on their servers. For workflows requiring data sovereignty, server-resident execution, or provider flexibility, that's a hard constraint with no workaround.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== SECTION 7: INSTALLATION ===== -->
|
|
<section id="install" class="section">
|
|
<div class="container">
|
|
<p class="section-label">Quick start</p>
|
|
<h2 class="section-title">Get started in 60 seconds</h2>
|
|
|
|
<div class="install-layout">
|
|
<div>
|
|
<p style="color: var(--text-secondary); font-size: 0.95rem; margin-bottom: 20px; line-height: 1.65;">
|
|
Works on <strong style="color: var(--text-primary);">Linux, macOS, WSL2, and Android (Termux)</strong>. On Windows, use WSL2 first.
|
|
</p>
|
|
|
|
<div class="code-wrap">
|
|
<div class="code-header">
|
|
<span class="code-lang">bash — one-liner install</span>
|
|
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
|
</div>
|
|
<pre><code class="language-bash">curl -fsSL https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.sh | bash</code></pre>
|
|
</div>
|
|
|
|
<div class="code-wrap" style="margin-top: 16px;">
|
|
<div class="code-header">
|
|
<span class="code-lang">bash — first run</span>
|
|
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
|
</div>
|
|
<pre><code class="language-bash">source ~/.bashrc # reload shell
|
|
hermes model # choose your LLM provider
|
|
hermes # start chatting</code></pre>
|
|
</div>
|
|
|
|
<div class="code-wrap" style="margin-top: 16px;">
|
|
<div class="code-header">
|
|
<span class="code-lang">bash — key commands</span>
|
|
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
|
</div>
|
|
<pre><code class="language-bash">hermes model # choose LLM provider and model
|
|
hermes tools # configure enabled tools
|
|
hermes gateway setup # set up messaging platforms
|
|
hermes doctor # diagnose any issues</code></pre>
|
|
</div>
|
|
|
|
<a href="https://hermes-agent.nousresearch.com/docs/getting-started/installation" target="_blank" rel="noopener" class="docs-link">
|
|
Full installation guide →
|
|
</a>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="subsection-title" style="margin-top: 0;">Supported LLM providers</h3>
|
|
<div class="providers-table-wrap">
|
|
<div class="provider-row">
|
|
<span class="provider-name">Nous Portal</span>
|
|
<span class="provider-badge badge-oauth">OAuth</span>
|
|
</div>
|
|
<div class="provider-row">
|
|
<span class="provider-name">OpenAI / Codex</span>
|
|
<span class="provider-badge badge-oauth">Device code auth</span>
|
|
</div>
|
|
<div class="provider-row">
|
|
<span class="provider-name">Anthropic</span>
|
|
<span class="provider-badge badge-key">API key / auth</span>
|
|
</div>
|
|
<div class="provider-row">
|
|
<span class="provider-name">OpenRouter</span>
|
|
<span class="provider-auth">200+ models</span>
|
|
<span class="provider-badge badge-key">API key</span>
|
|
</div>
|
|
<div class="provider-row">
|
|
<span class="provider-name">GitHub Copilot</span>
|
|
<span class="provider-badge badge-oauth">OAuth or token</span>
|
|
</div>
|
|
<div class="provider-row">
|
|
<span class="provider-name">DeepSeek</span>
|
|
<span class="provider-badge badge-key">API key</span>
|
|
</div>
|
|
<div class="provider-row">
|
|
<span class="provider-name">Groq</span>
|
|
<span class="provider-badge badge-key">API key</span>
|
|
</div>
|
|
<div class="provider-row">
|
|
<span class="provider-name">Hugging Face</span>
|
|
<span class="provider-auth">20+ models</span>
|
|
<span class="provider-badge badge-key">API key</span>
|
|
</div>
|
|
<div class="provider-row">
|
|
<span class="provider-name">Ollama / local</span>
|
|
<span class="provider-badge badge-local">Local</span>
|
|
</div>
|
|
<div class="provider-row">
|
|
<span class="provider-name">Custom endpoint</span>
|
|
<span class="provider-auth">Any OpenAI-compatible URL</span>
|
|
<span class="provider-badge badge-local">Custom</span>
|
|
</div>
|
|
</div>
|
|
<div class="platforms-note">
|
|
<span>⚡</span>
|
|
Run <code style="font-family: 'JetBrains Mono', monospace; font-size: 0.85em;">hermes model</code> to browse and authenticate interactively
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== SECTION 8: WHAT HERMES IS NOT ===== -->
|
|
<section id="limits" class="section section-alt">
|
|
<div class="container">
|
|
<p class="section-label">Honest limitations</p>
|
|
<h2 class="section-title">What Hermes is not</h2>
|
|
<p class="section-body">
|
|
Worth saying clearly. These are real trade-offs, not caveats.
|
|
</p>
|
|
<div class="limitations-grid">
|
|
|
|
<div class="limitation-item">
|
|
<div class="limitation-icon">✏️</div>
|
|
<div class="limitation-text">
|
|
<strong>Not the best in-editor autocomplete.</strong> For tight editor integration and line-by-line completions, use Cursor or Windsurf. That's not what Hermes is optimizing for.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="limitation-item">
|
|
<div class="limitation-icon">🔧</div>
|
|
<div class="limitation-text">
|
|
<strong>Not zero-setup.</strong> You're running a server process. There's initial configuration for providers, messaging platforms, and tools. That's the trade-off for having something you own.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="limitation-item">
|
|
<div class="limitation-icon">🤖</div>
|
|
<div class="limitation-text">
|
|
<strong>Doesn't make weaker models magical.</strong> The infrastructure is only as good as the model you connect. A weak model with great memory is still a weak model.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="limitation-item">
|
|
<div class="limitation-icon">⚠️</div>
|
|
<div class="limitation-text">
|
|
<strong>Needs guardrails for high-stakes automations.</strong> Autonomous scheduling with broad tool access is powerful. Review what you're scheduling. The security model helps, but judgment matters.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="limitation-item">
|
|
<div class="limitation-icon">⚡</div>
|
|
<div class="limitation-text">
|
|
<strong>Not the lowest-friction one-shot tool.</strong> For a quick answer you'll never revisit, claude.ai or ChatGPT is faster to reach. Hermes earns its setup cost over time, not in the first session.
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== SECTION 9: RESOURCES ===== -->
|
|
<section id="resources" class="section">
|
|
<div class="container">
|
|
<p class="section-label">Docs & community</p>
|
|
<h2 class="section-title">Resources</h2>
|
|
<div class="resources-grid">
|
|
|
|
<a href="https://hermes-agent.nousresearch.com/docs/" target="_blank" rel="noopener" class="resource-card">
|
|
<div class="resource-icon">📖</div>
|
|
<div class="resource-title">Official docs</div>
|
|
<div class="resource-url">hermes-agent.nousresearch.com/docs</div>
|
|
</a>
|
|
|
|
<a href="https://hermes-agent.nousresearch.com/docs/getting-started/installation" target="_blank" rel="noopener" class="resource-card">
|
|
<div class="resource-icon">🚀</div>
|
|
<div class="resource-title">Installation guide</div>
|
|
<div class="resource-url">Getting started</div>
|
|
</a>
|
|
|
|
<a href="https://hermes-agent.nousresearch.com/docs/user-guide/features/memory" target="_blank" rel="noopener" class="resource-card">
|
|
<div class="resource-icon">🧠</div>
|
|
<div class="resource-title">Memory system</div>
|
|
<div class="resource-url">Layered persistent memory</div>
|
|
</a>
|
|
|
|
<a href="https://hermes-agent.nousresearch.com/docs/user-guide/features/skills" target="_blank" rel="noopener" class="resource-card">
|
|
<div class="resource-icon">📚</div>
|
|
<div class="resource-title">Skills system</div>
|
|
<div class="resource-url">agentskills.io compatible</div>
|
|
</a>
|
|
|
|
<a href="https://hermes-agent.nousresearch.com/docs/user-guide/messaging" target="_blank" rel="noopener" class="resource-card">
|
|
<div class="resource-icon">💬</div>
|
|
<div class="resource-title">Messaging setup</div>
|
|
<div class="resource-url">15+ platforms</div>
|
|
</a>
|
|
|
|
<a href="https://hermes-agent.nousresearch.com/docs/user-guide/features/tools" target="_blank" rel="noopener" class="resource-card">
|
|
<div class="resource-icon">🔧</div>
|
|
<div class="resource-title">Tools reference</div>
|
|
<div class="resource-url">47 built-in tools</div>
|
|
</a>
|
|
|
|
<a href="https://hermes-agent.nousresearch.com/docs/user-guide/features/mcp" target="_blank" rel="noopener" class="resource-card">
|
|
<div class="resource-icon">🔌</div>
|
|
<div class="resource-title">MCP integration</div>
|
|
<div class="resource-url">Connect any MCP server</div>
|
|
</a>
|
|
|
|
<a href="https://hermes-agent.nousresearch.com/docs/user-guide/features/voice-mode" target="_blank" rel="noopener" class="resource-card">
|
|
<div class="resource-icon">🎙️</div>
|
|
<div class="resource-title">Voice mode</div>
|
|
<div class="resource-url">CLI, Telegram, Discord</div>
|
|
</a>
|
|
|
|
<a href="https://hermes-agent.nousresearch.com/docs/user-guide/security" target="_blank" rel="noopener" class="resource-card">
|
|
<div class="resource-icon">🔒</div>
|
|
<div class="resource-title">Security model</div>
|
|
<div class="resource-url">7-layer defense in depth</div>
|
|
</a>
|
|
|
|
<a href="https://github.com/NousResearch/hermes-agent" target="_blank" rel="noopener" class="resource-card">
|
|
<div class="resource-icon">⭐</div>
|
|
<div class="resource-title">GitHub — Hermes Agent</div>
|
|
<div class="resource-url">NousResearch/hermes-agent</div>
|
|
</a>
|
|
|
|
<a href="https://github.com/nesquena/hermes-webui" target="_blank" rel="noopener" class="resource-card">
|
|
<div class="resource-icon">🖥️</div>
|
|
<div class="resource-title">GitHub — Hermes Web UI</div>
|
|
<div class="resource-url">nesquena/hermes-webui</div>
|
|
</a>
|
|
|
|
<a href="https://discord.gg/NousResearch" target="_blank" rel="noopener" class="resource-card">
|
|
<div class="resource-icon">💬</div>
|
|
<div class="resource-title">Discord</div>
|
|
<div class="resource-url">discord.gg/NousResearch</div>
|
|
</a>
|
|
|
|
<a href="https://nousresearch.com" target="_blank" rel="noopener" class="resource-card">
|
|
<div class="resource-icon">🔬</div>
|
|
<div class="resource-title">Nous Research</div>
|
|
<div class="resource-url">nousresearch.com</div>
|
|
</a>
|
|
|
|
<a href="https://agentskills.io" target="_blank" rel="noopener" class="resource-card">
|
|
<div class="resource-icon">🛠️</div>
|
|
<div class="resource-title">agentskills.io</div>
|
|
<div class="resource-url">Open skills standard</div>
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<!-- ===== FOOTER ===== -->
|
|
<footer>
|
|
<div class="footer-inner">
|
|
<div class="footer-left">
|
|
Hermes is <a href="https://github.com/NousResearch/hermes-agent" target="_blank" rel="noopener">open source</a> and MIT licensed.
|
|
Built by <a href="https://nousresearch.com" target="_blank" rel="noopener">Nous Research</a>.
|
|
Web UI by <a href="https://github.com/nesquena/hermes-webui" target="_blank" rel="noopener">nesquena/hermes-webui</a>.
|
|
</div>
|
|
<div class="footer-links">
|
|
<a href="https://hermes-agent.nousresearch.com/docs/" target="_blank" rel="noopener">Docs</a>
|
|
<a href="https://github.com/NousResearch/hermes-agent" target="_blank" rel="noopener">GitHub</a>
|
|
<a href="https://discord.gg/NousResearch" target="_blank" rel="noopener">Discord</a>
|
|
<a href="https://agentskills.io" target="_blank" rel="noopener">agentskills.io</a>
|
|
<a href="https://nousresearch.com" target="_blank" rel="noopener">Nous Research</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// ===== HIGHLIGHT.JS =====
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
hljs.highlightAll();
|
|
});
|
|
|
|
// ===== THEME TOGGLE =====
|
|
const themeToggle = document.getElementById('theme-toggle');
|
|
const html = document.documentElement;
|
|
const hljsTheme = document.getElementById('hljs-theme');
|
|
|
|
function setTheme(theme) {
|
|
html.setAttribute('data-theme', theme);
|
|
localStorage.setItem('theme', theme);
|
|
if (theme === 'light') {
|
|
themeToggle.textContent = '🌙';
|
|
hljsTheme.href = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css';
|
|
} else {
|
|
themeToggle.textContent = '☀️';
|
|
hljsTheme.href = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css';
|
|
}
|
|
}
|
|
|
|
// Init theme
|
|
const saved = localStorage.getItem('theme');
|
|
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
if (saved) {
|
|
setTheme(saved);
|
|
} else if (!prefersDark) {
|
|
setTheme('light');
|
|
} else {
|
|
setTheme('dark');
|
|
}
|
|
|
|
themeToggle.addEventListener('click', function() {
|
|
const current = html.getAttribute('data-theme');
|
|
setTheme(current === 'dark' ? 'light' : 'dark');
|
|
});
|
|
|
|
// ===== HAMBURGER MENU =====
|
|
const hamburger = document.getElementById('hamburger');
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
|
|
hamburger.addEventListener('click', function() {
|
|
const isOpen = mobileMenu.classList.toggle('open');
|
|
hamburger.classList.toggle('open', isOpen);
|
|
hamburger.setAttribute('aria-expanded', isOpen);
|
|
});
|
|
|
|
function closeMobileMenu() {
|
|
mobileMenu.classList.remove('open');
|
|
hamburger.classList.remove('open');
|
|
hamburger.setAttribute('aria-expanded', 'false');
|
|
}
|
|
|
|
// Close on outside click
|
|
document.addEventListener('click', function(e) {
|
|
if (!hamburger.contains(e.target) && !mobileMenu.contains(e.target)) {
|
|
closeMobileMenu();
|
|
}
|
|
});
|
|
|
|
// ===== COPY CODE =====
|
|
function copyCode(btn) {
|
|
const pre = btn.closest('.code-wrap').querySelector('pre');
|
|
const text = pre.textContent;
|
|
navigator.clipboard.writeText(text).then(function() {
|
|
btn.textContent = 'Copied!';
|
|
btn.classList.add('copied');
|
|
setTimeout(function() {
|
|
btn.textContent = 'Copy';
|
|
btn.classList.remove('copied');
|
|
}, 2000);
|
|
}).catch(function() {
|
|
// Fallback for older browsers
|
|
const ta = document.createElement('textarea');
|
|
ta.value = text;
|
|
ta.style.position = 'fixed';
|
|
ta.style.opacity = '0';
|
|
document.body.appendChild(ta);
|
|
ta.select();
|
|
document.execCommand('copy');
|
|
document.body.removeChild(ta);
|
|
btn.textContent = 'Copied!';
|
|
btn.classList.add('copied');
|
|
setTimeout(function() {
|
|
btn.textContent = 'Copy';
|
|
btn.classList.remove('copied');
|
|
}, 2000);
|
|
});
|
|
}
|
|
|
|
// ===== SMOOTH SCROLL (for older browsers) =====
|
|
document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
|
|
anchor.addEventListener('click', function(e) {
|
|
const target = document.querySelector(this.getAttribute('href'));
|
|
if (target) {
|
|
e.preventDefault();
|
|
const top = target.getBoundingClientRect().top + window.scrollY - 72;
|
|
window.scrollTo({ top: top, behavior: 'smooth' });
|
|
}
|
|
});
|
|
});
|
|
|
|
// ===== NAV ACTIVE STATE =====
|
|
const sections = document.querySelectorAll('section[id]');
|
|
const navLinks = document.querySelectorAll('.nav-links a');
|
|
|
|
function updateActiveNav() {
|
|
let current = '';
|
|
sections.forEach(function(section) {
|
|
const top = section.offsetTop - 100;
|
|
if (window.scrollY >= top) {
|
|
current = section.getAttribute('id');
|
|
}
|
|
});
|
|
navLinks.forEach(function(link) {
|
|
link.style.color = '';
|
|
if (link.getAttribute('href') === '#' + current) {
|
|
link.style.color = 'var(--accent)';
|
|
}
|
|
});
|
|
}
|
|
|
|
window.addEventListener('scroll', updateActiveNav, { passive: true });
|
|
updateActiveNav();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|