mirror of
https://github.com/nesquena/hermes-webui.git
synced 2026-05-26 19:50:15 +00:00
nesquena-hermes
f51b0631bd
Community page:
- Refresh all 31 star counts to live values (Apr 30 2026)
- Add OthmanAdi/planning-with-files (20.0k, Skills) — Manus-style markdown planning
- Add nexu-io/open-design (7.0k, Tools) — local Claude Design alternative
- Add njbrake/agent-of-empires (1.8k, Tools) — multi-agent orchestrator
- Re-sort each category by stars desc
- Hero: 31 → 34 community projects
Index page:
- Hero badge: 115k+ → 126k+ GitHub stars (NousResearch/hermes-agent)
- OpenClaw comparison: 350k+ → 365k+ stars
Models page:
- Updated date: April 27 → April 30, 2026
- Qwen3.6 27B: release date Apr 21 → Apr 22, add Apache 2.0 license + note that
Ollama GGUFs don't yet pair the vision projector (use llama.cpp / Unsloth Studio)
- DeepSeek V4-Flash: Apr 22 → Apr 24 in self-hosted setup blurb
- llama.cpp link: ggerganov → ggml-org (org renamed)
Mobile bug fix:
- community/index.html had 17px horizontal overflow at <=640px
Caused by .project-grid using repeat(N, 1fr) which lets items grow to min-content
Fix: repeat(N, minmax(0, 1fr)) + .project-grid > * { min-width: 0 }
- .project-name: relaxed from nowrap+ellipsis to 2-line wrap so long repo names
like 'hermes-agent-orange-book' are fully visible instead of truncated
2682 lines
104 KiB
HTML
2682 lines
104 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-theme="dark">
|
|
<head>
|
|
<script>
|
|
// Canonical URL: strip trailing index.html so links always show the clean path
|
|
(function(){
|
|
var p = window.location.pathname;
|
|
if (p.endsWith('/index.html')) {
|
|
var clean = p.slice(0, p.length - 'index.html'.length);
|
|
window.history.replaceState(null, '', clean + window.location.search + window.location.hash);
|
|
}
|
|
})();
|
|
</script>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Hermes — Community Web UI</title>
|
|
<meta name="description" content="Persistent memory, autonomous scheduling, and multi-surface access — all on hardware you control. Open source, self-hosted AI agent." />
|
|
<meta property="og:title" content="Hermes — Community Web UI (unofficial)" />
|
|
<meta property="og:description" content="Persistent memory, autonomous scheduling, and multi-surface access — all on hardware you control." />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:url" content="https://nesquena.github.io/hermes-webui/" />
|
|
<meta property="og:image" content="https://nesquena.github.io/hermes-webui/images/ui-hero.png" />
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:title" content="Hermes — The self-improving AI agent" />
|
|
<meta name="twitter:description" content="Persistent memory, autonomous scheduling, and multi-surface access — all on hardware you control." />
|
|
<meta name="twitter:image" content="https://nesquena.github.io/hermes-webui/images/ui-hero.png" />
|
|
<meta name="theme-color" content="#0d1117" media="(prefers-color-scheme: dark)" />
|
|
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚡</text></svg>" />
|
|
<link rel="canonical" href="https://nesquena.github.io/hermes-webui/" />
|
|
<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);
|
|
--shadow-screenshot: 0 8px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05);
|
|
}
|
|
|
|
[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);
|
|
--shadow-screenshot: 0 8px 40px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.06);
|
|
}
|
|
|
|
/* ===== RESET & BASE ===== */
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }
|
|
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);
|
|
}
|
|
/* ===== DROPDOWN NAV ===== */
|
|
.nav-links .has-dropdown { position: relative; }
|
|
|
|
.nav-trigger {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-secondary);
|
|
font: inherit;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
padding: 6px 12px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
transition: color 0.15s, background 0.15s;
|
|
}
|
|
.nav-trigger .caret {
|
|
font-size: 0.7rem;
|
|
opacity: 0.7;
|
|
transition: transform 0.15s;
|
|
}
|
|
.nav-trigger:hover,
|
|
.has-dropdown:focus-within .nav-trigger,
|
|
.has-dropdown:hover .nav-trigger {
|
|
color: var(--text-primary);
|
|
background: var(--bg-tertiary);
|
|
}
|
|
.has-dropdown:hover .caret,
|
|
.has-dropdown:focus-within .caret { transform: rotate(180deg); }
|
|
|
|
.dropdown {
|
|
position: absolute;
|
|
top: calc(100% + 6px);
|
|
left: 0;
|
|
min-width: 200px;
|
|
padding: 6px;
|
|
list-style: none;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
box-shadow: var(--shadow-lg);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transform: translateY(-4px);
|
|
transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
|
|
z-index: 1001;
|
|
}
|
|
.has-dropdown:hover > .dropdown,
|
|
.has-dropdown:focus-within > .dropdown {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateY(0);
|
|
transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s;
|
|
}
|
|
.dropdown--right > .dropdown { left: auto; right: 0; }
|
|
.has-dropdown::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 100%; left: 0; right: 0;
|
|
height: 10px;
|
|
}
|
|
.dropdown a {
|
|
display: block;
|
|
padding: 8px 12px;
|
|
border-radius: 6px;
|
|
color: var(--text-secondary);
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
transition: color 0.15s, background 0.15s;
|
|
}
|
|
.dropdown a:hover,
|
|
.dropdown a:focus-visible {
|
|
color: var(--text-primary);
|
|
background: var(--bg-tertiary);
|
|
outline: none;
|
|
}
|
|
.nav-trigger:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 2px;
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.dropdown, .nav-trigger .caret { transition: none; }
|
|
}
|
|
.dropdown .dropdown-section-label {
|
|
font-size: 0.68rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--text-muted);
|
|
padding: 6px 12px 2px;
|
|
}
|
|
.dropdown .dropdown-divider {
|
|
height: 1px;
|
|
background: var(--border);
|
|
margin: 6px 8px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
/* Subtle grid pattern */
|
|
#hero::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image: radial-gradient(circle at 1px 1px, rgba(240, 165, 0, 0.04) 1px, transparent 0);
|
|
background-size: 32px 32px;
|
|
pointer-events: none;
|
|
}
|
|
[data-theme="light"] #hero::after {
|
|
background-image: radial-gradient(circle at 1px 1px, rgba(192, 120, 0, 0.06) 1px, transparent 0);
|
|
}
|
|
.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 {
|
|
background: linear-gradient(135deg, var(--accent) 0%, #ff8c00 50%, var(--accent-dim) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
.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); }
|
|
.hero-community-note {
|
|
display: block;
|
|
margin-top: 12px;
|
|
font-size: 0.76rem;
|
|
color: var(--text-muted);
|
|
line-height: 1.5;
|
|
opacity: 0.8;
|
|
}
|
|
.hero-community-note a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
|
|
.hero-community-note a:hover { color: var(--text-secondary); opacity: 1; }
|
|
|
|
/* ===== 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-left: 3px solid var(--accent);
|
|
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;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.pillar-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0;
|
|
height: 3px;
|
|
background: linear-gradient(90deg, var(--accent), var(--accent-dim));
|
|
opacity: 0;
|
|
transition: opacity 0.2s;
|
|
}
|
|
.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-card:hover::before { opacity: 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 SHOWCASE ===== */
|
|
.showcase-hero {
|
|
margin-top: 48px;
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow-screenshot);
|
|
border: 1px solid var(--border);
|
|
position: relative;
|
|
}
|
|
.showcase-hero img {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
.showcase-hero-label {
|
|
position: absolute;
|
|
bottom: 16px;
|
|
left: 16px;
|
|
background: rgba(0, 0, 0, 0.75);
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
color: #fff;
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
padding: 6px 14px;
|
|
border-radius: 6px;
|
|
}
|
|
[data-theme="light"] .showcase-hero-label {
|
|
background: rgba(255, 255, 255, 0.85);
|
|
color: var(--text-primary);
|
|
}
|
|
.showcase-gallery {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 16px;
|
|
margin-top: 24px;
|
|
}
|
|
.showcase-thumb {
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
border: 1px solid var(--border);
|
|
box-shadow: var(--shadow);
|
|
transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
.showcase-thumb:hover {
|
|
transform: translateY(-4px);
|
|
border-color: var(--accent);
|
|
box-shadow: 0 8px 24px rgba(240, 165, 0, 0.12);
|
|
}
|
|
.showcase-thumb img {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
.showcase-thumb-caption {
|
|
padding: 10px 12px;
|
|
background: var(--bg-card);
|
|
font-size: 0.78rem;
|
|
font-weight: 500;
|
|
color: var(--text-secondary);
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
.webui-layout {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 48px;
|
|
align-items: start;
|
|
margin-top: 48px;
|
|
}
|
|
.webui-layout > * { min-width: 0; }
|
|
.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: '\2713';
|
|
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);
|
|
}
|
|
|
|
/* ===== WHO IS IT FOR ===== */
|
|
.persona-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: 16px;
|
|
margin-top: 48px;
|
|
}
|
|
.persona-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
padding: 28px 24px;
|
|
transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
|
|
text-align: center;
|
|
}
|
|
.persona-card:hover {
|
|
border-color: var(--accent);
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 8px 24px rgba(240, 165, 0, 0.08);
|
|
}
|
|
.persona-icon {
|
|
font-size: 2.2rem;
|
|
margin-bottom: 14px;
|
|
line-height: 1;
|
|
}
|
|
.persona-title {
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin-bottom: 10px;
|
|
}
|
|
.persona-body {
|
|
font-size: 0.82rem;
|
|
color: var(--text-secondary);
|
|
line-height: 1.55;
|
|
}
|
|
|
|
/* ===== CODE BLOCKS ===== */
|
|
.code-wrap {
|
|
position: relative;
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
background: #0d1117;
|
|
border: 1px solid var(--border);
|
|
margin: 8px 0;
|
|
}
|
|
/* Code blocks always dark — switching to github.min.css light causes invisible text on dark bg */
|
|
[data-theme="light"] .code-wrap {
|
|
background: #0d1117;
|
|
border-color: #30363d;
|
|
}
|
|
.code-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 8px 16px;
|
|
background: rgba(255,255,255,0.05);
|
|
border-bottom: 1px solid #30363d;
|
|
}
|
|
.code-lang {
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: #8b949e;
|
|
}
|
|
.copy-btn {
|
|
background: none;
|
|
border: 1px solid #484f58;
|
|
color: #8b949e;
|
|
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: #e6edf3; border-color: #8b949e; }
|
|
.copy-btn.copied { color: #3fb950; border-color: #3fb950; }
|
|
.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 ===== */
|
|
.compare-more {
|
|
margin-top: 40px;
|
|
padding-top: 32px;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
.compare-more-label {
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--text-muted);
|
|
margin-bottom: 12px;
|
|
}
|
|
.compare-more-links {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
.compare-pill {
|
|
display: inline-block;
|
|
padding: 6px 14px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 100px;
|
|
font-size: 0.82rem;
|
|
font-weight: 500;
|
|
color: var(--text-secondary);
|
|
transition: border-color 0.15s, color 0.15s, background 0.15s;
|
|
}
|
|
.compare-pill:hover {
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
background: var(--accent-subtle);
|
|
}
|
|
|
|
.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(--accent); background: var(--bg-card-hover); }
|
|
.comparison-card[role="link"] { position: relative; cursor: pointer; }
|
|
.comparison-card[role="link"]:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
|
|
.card-arrow { position: absolute; top: 18px; right: 20px; color: var(--text-muted); font-size: 1.1rem; transition: transform 0.15s, color 0.15s; }
|
|
.comparison-card[role="link"]:hover .card-arrow { transform: translateX(4px); color: var(--accent); }
|
|
.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;
|
|
}
|
|
.install-layout > * { min-width: 0; }
|
|
.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; }
|
|
|
|
/* ===== LIGHTBOX ===== */
|
|
.lightbox-overlay {
|
|
display: none;
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.85);
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
z-index: 2000;
|
|
cursor: zoom-out;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 40px;
|
|
}
|
|
.lightbox-overlay.active { display: flex; }
|
|
.lightbox-overlay img {
|
|
max-width: 100%;
|
|
max-height: 90vh;
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: 0 16px 64px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
/* ===== RESPONSIVE ===== */
|
|
/* ===== COMMUNITY BANNER ===== */
|
|
.community-banner{display:flex;align-items:center;gap:16px;background:var(--accent-subtle);border:1px solid rgba(240,165,0,0.25);border-radius:var(--radius-lg);padding:16px 20px;margin-bottom:36px;text-decoration:none;color:inherit;transition:border-color 0.15s,background 0.15s}
|
|
[data-theme="light"] .community-banner{border-color:rgba(192,120,0,0.2)}
|
|
.community-banner:hover{border-color:var(--accent);background:var(--accent-glow);color:inherit}
|
|
.community-banner-icon{font-size:1.8rem;flex-shrink:0;line-height:1}
|
|
.community-banner-text{flex:1;display:flex;flex-direction:column;gap:2px}
|
|
.community-banner-text strong{color:var(--text-primary);font-size:0.95rem}
|
|
.community-banner-text span{color:var(--text-secondary);font-size:0.85rem}
|
|
.community-banner-arrow{color:var(--accent);font-size:1.2rem;flex-shrink:0;transition:transform 0.15s}
|
|
.community-banner:hover .community-banner-arrow{transform:translateX(4px)}
|
|
|
|
@media (max-width: 1024px) {
|
|
.feature-grid { grid-template-columns: repeat(2, 1fr); }
|
|
.resources-grid { grid-template-columns: repeat(3, 1fr); }
|
|
.persona-grid { grid-template-columns: repeat(3, 1fr); }
|
|
.showcase-gallery { grid-template-columns: repeat(2, 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; }
|
|
.persona-grid { grid-template-columns: repeat(2, 1fr); }
|
|
}
|
|
@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; }
|
|
.showcase-gallery { grid-template-columns: 1fr 1fr; }
|
|
}
|
|
@media (max-width: 540px) {
|
|
.feature-grid { grid-template-columns: 1fr; }
|
|
.resources-grid { grid-template-columns: 1fr; }
|
|
.persona-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; }
|
|
.showcase-gallery { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
/* ===== HOSTING SECTION ===== */
|
|
.hosting-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 24px;
|
|
margin-top: 40px;
|
|
}
|
|
.hosting-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
padding: 28px 24px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
transition: border-color 0.2s, background 0.2s, transform 0.15s;
|
|
}
|
|
.hosting-card:hover {
|
|
border-color: var(--accent);
|
|
background: var(--bg-card-hover);
|
|
transform: translateY(-2px);
|
|
}
|
|
.hosting-card.featured {
|
|
border-color: var(--accent);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.hosting-card.featured::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, var(--accent), var(--accent-dim));
|
|
}
|
|
.hosting-card.featured:hover {
|
|
background: var(--bg-card-hover);
|
|
transform: translateY(-2px);
|
|
}
|
|
.hosting-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
background: rgba(240, 165, 0, 0.12);
|
|
color: var(--accent);
|
|
border: 1px solid rgba(240, 165, 0, 0.25);
|
|
border-radius: 20px;
|
|
padding: 3px 10px;
|
|
font-size: 0.71rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.03em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 14px;
|
|
width: fit-content;
|
|
}
|
|
.hosting-card-icon {
|
|
font-size: 1.75rem;
|
|
margin-bottom: 10px;
|
|
line-height: 1;
|
|
}
|
|
.hosting-card-title {
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
margin: 0 0 4px 0;
|
|
}
|
|
.hosting-card-price {
|
|
font-size: 0.9rem;
|
|
color: var(--accent);
|
|
font-weight: 600;
|
|
margin-bottom: 12px;
|
|
}
|
|
.hosting-card-desc {
|
|
font-size: 0.87rem;
|
|
color: var(--text-secondary);
|
|
line-height: 1.6;
|
|
margin-bottom: 16px;
|
|
}
|
|
.hosting-card-features {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0 0 20px 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 7px;
|
|
flex: 1;
|
|
}
|
|
.hosting-card-features li {
|
|
font-size: 0.82rem;
|
|
color: var(--text-secondary);
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 7px;
|
|
line-height: 1.45;
|
|
}
|
|
.hosting-card-features li::before {
|
|
content: '✓';
|
|
color: var(--green);
|
|
font-weight: 700;
|
|
flex-shrink: 0;
|
|
margin-top: 1px;
|
|
}
|
|
.hosting-card-cta {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
font-size: 0.83rem;
|
|
font-weight: 600;
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
margin-top: auto;
|
|
}
|
|
.hosting-card-cta:hover { text-decoration: underline; }
|
|
.hosting-specs {
|
|
margin-top: 32px;
|
|
padding: 18px 24px;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 14px;
|
|
}
|
|
.hosting-specs-icon {
|
|
font-size: 1.2rem;
|
|
flex-shrink: 0;
|
|
margin-top: 2px;
|
|
}
|
|
.hosting-specs-body { flex: 1; }
|
|
.hosting-specs-title {
|
|
font-size: 0.84rem;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
margin-bottom: 8px;
|
|
}
|
|
.hosting-specs-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 5px 28px;
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.hosting-specs-list li {
|
|
font-size: 0.81rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
.hosting-specs-list li strong { color: var(--text-primary); }
|
|
.hosting-anywhere {
|
|
margin-top: 16px;
|
|
padding: 16px 22px;
|
|
background: transparent;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.hosting-anywhere-icon {
|
|
font-size: 1.1rem;
|
|
flex-shrink: 0;
|
|
}
|
|
.hosting-anywhere-text {
|
|
flex: 1;
|
|
font-size: 0.83rem;
|
|
color: var(--text-secondary);
|
|
line-height: 1.55;
|
|
min-width: 200px;
|
|
}
|
|
.hosting-anywhere-text strong { color: var(--text-primary); }
|
|
.hosting-anywhere-text a { color: var(--accent); text-decoration: none; }
|
|
.hosting-anywhere-text a:hover { text-decoration: underline; }
|
|
@media (max-width: 900px) {
|
|
.hosting-grid { grid-template-columns: 1fr; }
|
|
}
|
|
</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 class="has-dropdown">
|
|
<button type="button" class="nav-trigger" aria-haspopup="true" aria-expanded="false">
|
|
Product <span class="caret" aria-hidden="true">▾</span>
|
|
</button>
|
|
<ul class="dropdown" role="menu">
|
|
<li role="none"><a role="menuitem" href="#why">Why Hermes</a></li>
|
|
<li role="none"><a role="menuitem" href="#features">Features</a></li>
|
|
<li role="none"><a role="menuitem" href="#webui">Web UI</a></li>
|
|
<li role="none"><a role="menuitem" href="#who">Who it's for</a></li>
|
|
<li role="none"><a role="menuitem" href="models/">🤖 Models</a></li>
|
|
<li role="none"><a role="menuitem" href="memory/">🫡 Memory</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#compare">Compare</a></li>
|
|
<li class="has-dropdown">
|
|
<button type="button" class="nav-trigger" aria-haspopup="true" aria-expanded="false">
|
|
Install <span class="caret" aria-hidden="true">▾</span>
|
|
</button>
|
|
<ul class="dropdown" role="menu">
|
|
<li role="none"><a role="menuitem" href="#install">Install</a></li>
|
|
<li role="none"><a role="menuitem" href="#hosting">Hosting</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="has-dropdown dropdown--right">
|
|
<button type="button" class="nav-trigger" aria-haspopup="true" aria-expanded="false">
|
|
Learn <span class="caret" aria-hidden="true">▾</span>
|
|
</button>
|
|
<ul class="dropdown" role="menu">
|
|
<li role="none"><a role="menuitem" href="eli5/">🤔 ELI5</a></li>
|
|
<li role="none"><a role="menuitem" href="#resources">Resources</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="community/">Community</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">
|
|
<div style="font-size:0.68rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);padding:8px 0 2px;">Product</div>
|
|
<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="#who" onclick="closeMobileMenu()">Who it's for</a>
|
|
<a href="models/" onclick="closeMobileMenu()">🤖 Models</a>
|
|
<a href="memory/" onclick="closeMobileMenu()">🫡 Memory</a>
|
|
<div style="height:1px;background:var(--border);margin:8px 0;"></div>
|
|
<div style="font-size:0.68rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);padding:4px 0 2px;">Install</div>
|
|
<a href="#install" onclick="closeMobileMenu()">Install</a>
|
|
<a href="#hosting" onclick="closeMobileMenu()">Hosting</a>
|
|
<div style="height:1px;background:var(--border);margin:8px 0;"></div>
|
|
<div style="font-size:0.68rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);padding:4px 0 2px;">Learn</div>
|
|
<a href="eli5/" onclick="closeMobileMenu()">🤔 ELI5</a>
|
|
<a href="#resources" onclick="closeMobileMenu()">Resources</a>
|
|
<a href="#compare" onclick="closeMobileMenu()">Compare</a>
|
|
<div style="height:1px;background:var(--border);margin:8px 0;"></div>
|
|
<a href="community/" onclick="closeMobileMenu()" style="color:var(--accent)">🌎 Community</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>
|
|
|
|
<!-- Lightbox -->
|
|
<div class="lightbox-overlay" id="lightbox" onclick="closeLightbox()">
|
|
<img id="lightbox-img" src="" alt="Screenshot preview" />
|
|
</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 runs on your server. Layered memory that accumulates across sessions, a cron scheduler that fires while you're offline, and a skills system that saves reusable procedures automatically.
|
|
</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>126k+ GitHub stars</span>
|
|
<span class="stat-badge"><span class="dot"></span>Multi-surface access</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>
|
|
<p class="hero-community-note">Community Web UI — not affiliated with or endorsed by Nous Research. Official site: <a href="https://hermes-agent.nousresearch.com" target="_blank" rel="noopener">hermes-agent.nousresearch.com</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">Most tools are excellent in the moment and weak over time</h2>
|
|
<div class="why-grid">
|
|
<div class="why-text">
|
|
<p>
|
|
Memory is no longer a differentiator on its own. <strong>ChatGPT, Claude, Cursor, and GitHub Copilot all have some form of memory now.</strong> With GPT-5.5 and Claude Mythos pushing the frontier in April 2026, Anthropic, OpenAI, and Microsoft are all shipping scheduling and agent features. The category boundaries that existed twelve months ago are blurring fast.
|
|
</p>
|
|
<p>
|
|
The distinction that matters is not "has memory" vs. "has no memory." It's whether context <strong>persists across sessions automatically</strong>, whether execution happens on <strong>hardware you control</strong>, whether you can reach the same agent identity from <strong>any device</strong>, and whether the system gets meaningfully <strong>better at your workflow over time</strong> without manual configuration.
|
|
</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>
|
|
<div class="convergence-note">
|
|
<strong>Why synthesis matters:</strong> The market is converging. Chat assistants added scheduling. Editors shipped cloud agents. CLIs are getting skills. Any single feature is available somewhere else. The value is having all of them in one self-hosted system, running continuously, with a persistent identity that accumulates real knowledge of your stack over 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>
|
|
<div class="line" style="font-size: 0.72rem; color: var(--text-muted); margin-top: 4px;">
|
|
(some tools carry memory, but execution is stateless)
|
|
</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, editable)<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 readable, editable 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>You never configure it manually</li>
|
|
<li>Portable, inspectable, deletable</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 with full access to your memory and skills, and delivers results wherever you want them.</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>Multi-surface access: 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. 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 SHOWCASE ===== -->
|
|
<section id="webui" class="section">
|
|
<div class="container">
|
|
<p class="section-label">Hermes Web UI</p>
|
|
<h2 class="section-title">A beautiful browser interface for Hermes</h2>
|
|
<p class="section-body">
|
|
Full-featured, no build step, no framework. Three-panel Claude-style layout with sessions sidebar, chat, and workspace file browser. Everything you can do from a terminal, you can do from this UI.
|
|
<a href="https://github.com/nesquena/hermes-webui" target="_blank" rel="noopener" style="margin-left: 6px;">GitHub →</a>
|
|
</p>
|
|
|
|
<!-- Hero screenshot -->
|
|
<div class="showcase-hero" onclick="openLightbox(this.querySelector('img').src)">
|
|
<img src="images/ui-hero.png" alt="Hermes Web UI - three-panel layout with sessions, chat, and workspace" loading="lazy" />
|
|
<div class="showcase-hero-label">Three-panel layout — dark mode</div>
|
|
</div>
|
|
|
|
<!-- Screenshot gallery -->
|
|
<div class="showcase-gallery">
|
|
<div class="showcase-thumb" onclick="openLightbox(this.querySelector('img').src)">
|
|
<img src="images/ui-light-mode.png" alt="Light mode with full profile support" loading="lazy" />
|
|
<div class="showcase-thumb-caption">Light mode with profile support</div>
|
|
</div>
|
|
<div class="showcase-thumb" onclick="openLightbox(this.querySelector('img').src)">
|
|
<img src="images/ui-settings.png" alt="Settings panel with password protection" loading="lazy" />
|
|
<div class="showcase-thumb-caption">Settings & password protection</div>
|
|
</div>
|
|
<div class="showcase-thumb" onclick="openLightbox(this.querySelector('img').src)">
|
|
<img src="images/ui-workspace.png" alt="Workspace file browser with inline preview" loading="lazy" />
|
|
<div class="showcase-thumb-caption">Workspace file browser</div>
|
|
</div>
|
|
<div class="showcase-thumb" onclick="openLightbox(this.querySelector('img').src)">
|
|
<img src="images/ui-sessions.png" alt="Session projects, tags, and tool call cards" loading="lazy" />
|
|
<div class="showcase-thumb-caption">Sessions, projects & tags</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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 (code, markdown, images)</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 class="webui-feature-item">Voice input (Web Speech API)</div>
|
|
<div class="webui-feature-item">Mobile responsive</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: WHO IS IT FOR ===== -->
|
|
<section id="who" class="section section-alt">
|
|
<div class="container">
|
|
<p class="section-label">Who it's for</p>
|
|
<h2 class="section-title">Built for these workflows</h2>
|
|
<p class="section-body">
|
|
Hermes earns its setup cost over time, not in the first session. These are the people and use cases where it shines.
|
|
</p>
|
|
<div class="persona-grid">
|
|
|
|
<div class="persona-card">
|
|
<div class="persona-icon">💻</div>
|
|
<div class="persona-title">Solo developers</div>
|
|
<div class="persona-body">Don't want to re-explain your stack every session. Want an AI that actually knows your environment, your conventions, and what you fixed last week.</div>
|
|
</div>
|
|
|
|
<div class="persona-card">
|
|
<div class="persona-icon">👥</div>
|
|
<div class="persona-title">Teams on a shared server</div>
|
|
<div class="persona-body">Multiple people sharing capable AI access without separate subscriptions. Each gets their own profile, memory, and history on the same instance.</div>
|
|
</div>
|
|
|
|
<div class="persona-card">
|
|
<div class="persona-icon">⚡</div>
|
|
<div class="persona-title">Automation-heavy</div>
|
|
<div class="persona-body">Want an AI running scheduled tasks, delivering results to your phone, without babysitting it. Morning briefings, PR reviews, monitoring.</div>
|
|
</div>
|
|
|
|
<div class="persona-card">
|
|
<div class="persona-icon">🔐</div>
|
|
<div class="persona-title">Privacy-conscious</div>
|
|
<div class="persona-body">Conversations, memory, and files stay on your hardware. No data leaving your server. Full control over what the agent can access.</div>
|
|
</div>
|
|
|
|
<div class="persona-card">
|
|
<div class="persona-icon">🔄</div>
|
|
<div class="persona-title">Multi-model users</div>
|
|
<div class="persona-body">Switch between OpenAI, Anthropic, Google, DeepSeek, and others based on cost, capability, or rate limits without rebuilding your workflow.</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== SECTION 7: COMPARISON ===== -->
|
|
<section id="compare" class="section">
|
|
<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 and connectors.</strong> Editors shipped cloud agents and automations. CLIs are getting skills systems and multi-surface reach. The lines between "assistant," "editor," and "agent" are dissolving. This table reflects where things stand in mid-2026. Hermes wins through <strong>synthesis</strong>: all of 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">✓ many 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 or desktop app</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="check">✓ per-project</span></td>
|
|
<td><span class="cloud">Cloud VMs</span></td>
|
|
<td><span class="check">✓ Slack/web/mobile</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">Repo-scoped‡</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>
|
|
<tr>
|
|
<td>Perplexity Computer</td>
|
|
<td><span class="partial">Partial</span></td>
|
|
<td><span class="partial">Daily/weekly</span></td>
|
|
<td><span class="partial">Slack + Teams</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>
|
|
<p style="font-size: 0.78rem; color: var(--text-muted); margin-top: -32px; margin-bottom: 48px; line-height: 1.6;">
|
|
† Claude Code: CLAUDE.md / MEMORY.md plus auto-memory since v2.1.59+; no automatic cross-project accumulation<br />
|
|
‡ Copilot Agentic Memory: public preview Jan 2026; repo-scoped, auto-expires after 28 days
|
|
</p>
|
|
|
|
<h3 class="subsection-title mt-32">Head-to-head</h3>
|
|
<div class="comparison-cards">
|
|
|
|
<div class="comparison-card" onclick="location.href='compare/openclaw.html'" role="link" tabindex="0" aria-label="Compare Hermes vs. OpenClaw" style="cursor:pointer">
|
|
<div class="card-arrow">→</div>
|
|
<h4>Hermes vs. OpenClaw</h4>
|
|
<p>
|
|
OpenClaw (MIT, 365k+ stars) is the closest comparison: open-source, self-hosted, always-on. OpenClaw has the widest messaging surface (24+ platforms including iMessage, LINE, WeChat, Teams) and native Chrome CDP browser control. Hermes wins on stability (OpenClaw's Telegram integration broke across multiple 2026 releases) and security — three separate 2026 audits found malicious skills in ClawHub (Koi Security linked 335 to "ClawHavoc," Bitdefender flagged ~900 packages, ~20% of the ecosystem). Hermes writes skills automatically from experience; OpenClaw centers on a human-curated marketplace. Hermes runs in Python/ML ecosystem; OpenClaw is Node.js.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="comparison-card" onclick="location.href='compare/claude-code.html'" role="link" tabindex="0" aria-label="Compare Hermes vs. Claude Code" style="cursor:pointer">
|
|
<div class="card-arrow">→</div>
|
|
<h4>Hermes vs. Claude Code</h4>
|
|
<p>
|
|
Claude Code is Anthropic's official agentic tool spanning terminal, IDE, desktop, and browser. It has a 26-event hooks system, a plugin/skills marketplace, CLAUDE.md/MEMORY.md project memory with auto-memory since v2.1.59+, and cloud-managed scheduling on Anthropic infrastructure. Messaging channels (Telegram/Discord/iMessage) remain a research preview; Slack has not shipped. Key differences: scheduling requires cloud or desktop app (not a headless server daemon), memory doesn't accumulate across projects, and it's locked to Claude models. Hermes can spawn Claude Code as a sub-agent for heavy implementation tasks.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="comparison-card" onclick="location.href='compare/cursor.html'" role="link" tabindex="0" aria-label="Compare Hermes vs. Cursor" style="cursor:pointer">
|
|
<div class="card-arrow">→</div>
|
|
<h4>Hermes vs. Cursor</h4>
|
|
<p>
|
|
Cursor has changed substantially. Memories (per-project) shipped June 2025. Automations launched March 2026 with time-based, event-based, and Slack triggers on cloud VMs. Cursor v3.0 (April 2026) is explicitly agent-first with a $29.3B valuation. Cursor excels at editor-native agents with strong IDE integration. Hermes is self-hosted and server-resident: the same persistent identity follows you across every surface without cloud intermediation, works with any model family, and for workflows requiring data sovereignty or deep Python/ML tooling on your own hardware, Cursor's cloud architecture is a fundamental mismatch.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="comparison-card" onclick="location.href='compare/claude-ai.html'" role="link" tabindex="0" aria-label="Compare Hermes vs. Claude.ai / ChatGPT" style="cursor:pointer">
|
|
<div class="card-arrow">→</div>
|
|
<h4>Hermes vs. Claude.ai / ChatGPT</h4>
|
|
<p>
|
|
Both are no longer simple chat tools. Claude Cowork added scheduling (Feb 2026) and 50+ connectors. ChatGPT (now running GPT-5.5, released April 23 2026) has Agent Mode, Scheduled Tasks, and 50+ connectors. Both have improved memory. The fundamental difference isn't features — it's where execution lives. Neither is self-hosted. Neither is provider-agnostic. Memory, sessions, and agent execution run on their servers, not yours. For workflows requiring data sovereignty, persistent server-resident execution, or provider flexibility, that's a disqualifying constraint.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="comparison-card" onclick="location.href='compare/perplexity-computer.html'" role="link" tabindex="0" aria-label="Compare Hermes vs. Perplexity Computer" style="cursor:pointer">
|
|
<div class="card-arrow">→</div>
|
|
<h4>Hermes vs. Perplexity Computer</h4>
|
|
<p>
|
|
Perplexity Computer (February 2026) is a cloud agentic workflow engine that routes across 19+ frontier models, runs tasks in isolated sandboxes, and connects to 400+ services via prebuilt OAuth. Zero setup, broad coverage. Key difference from Hermes: cloud-only, no data sovereignty, opaque credit costs, and no persistent environment state between runs.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="compare-more">
|
|
<p class="compare-more-label">More comparisons</p>
|
|
<div class="compare-more-links">
|
|
<a href="compare/openclaw.html" class="compare-pill">vs. OpenClaw</a>
|
|
<a href="compare/claude-code.html" class="compare-pill">vs. Claude Code</a>
|
|
<a href="compare/codex.html" class="compare-pill">vs. Codex CLI</a>
|
|
<a href="compare/opencode.html" class="compare-pill">vs. OpenCode</a>
|
|
<a href="compare/cursor.html" class="compare-pill">vs. Cursor</a>
|
|
<a href="compare/copilot.html" class="compare-pill">vs. GitHub Copilot</a>
|
|
<a href="compare/claude-ai.html" class="compare-pill">vs. Claude.ai</a>
|
|
<a href="compare/chatgpt.html" class="compare-pill">vs. ChatGPT</a>
|
|
<a href="compare/perplexity-computer.html" class="compare-pill">vs. Perplexity Computer</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== SECTION 8: INSTALLATION ===== -->
|
|
<section id="install" class="section section-alt">
|
|
<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">Google / Gemini</span>
|
|
<span class="provider-badge badge-key">API key</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 9b: HOSTING ===== -->
|
|
<section id="hosting" class="section section-alt">
|
|
<div class="container">
|
|
<p class="section-label">Where to run it</p>
|
|
<h2 class="section-title">Hosting options</h2>
|
|
<p class="section-sub">Hermes is self-hosted by design — it runs on hardware you control. Here are the most practical ways to get it running, from zero-setup managed hosting to a bare VPS.</p>
|
|
|
|
<div class="hosting-grid">
|
|
|
|
<!-- Agent37: featured — genuinely cheapest + easiest purpose-built option -->
|
|
<a class="hosting-card featured" href="https://agent37.com" target="_blank" rel="noopener">
|
|
<div class="hosting-badge">★ Easiest option</div>
|
|
<div class="hosting-card-icon">⚡</div>
|
|
<div class="hosting-card-title">Agent37</div>
|
|
<div class="hosting-card-price">From $3.99/mo</div>
|
|
<p class="hosting-card-desc">Managed Hermes hosting — live in 60 seconds with no VPS configuration. The only provider purpose-built for Hermes, with full terminal access, visual file browser, and live browser view on every plan.</p>
|
|
<ul class="hosting-card-features">
|
|
<li>Isolated Docker container per user</li>
|
|
<li>Full terminal + file browser on all plans</li>
|
|
<li>Brave search & Composio integrations included</li>
|
|
<li>Bring your own API key (Claude, OpenAI, Gemini…)</li>
|
|
<li>Live browser view: watch your agent work in real time</li>
|
|
</ul>
|
|
<span class="hosting-card-cta">Visit agent37.com →</span>
|
|
</a>
|
|
|
|
<!-- VPS self-hosted -->
|
|
<div class="hosting-card">
|
|
<div class="hosting-card-icon">🖥</div>
|
|
<div class="hosting-card-title">VPS — self-hosted</div>
|
|
<div class="hosting-card-price">~$4–8/mo</div>
|
|
<p class="hosting-card-desc">Full control at roughly the same cost. Hetzner CX22 is the recommended pick: 4 GB RAM, 2 vCPU, 40 GB SSD, 20 TB bandwidth. Add Coolify for one-click deploys from GitHub with no manual Docker work.</p>
|
|
<ul class="hosting-card-features">
|
|
<li>Hetzner CX22 (~$4.50/mo) — best price-performance</li>
|
|
<li>Coolify for easy GitHub deploys (free, open-source)</li>
|
|
<li>Vultr, DigitalOcean, Linode all work from $5/mo</li>
|
|
<li>Full root access, no vendor lock-in</li>
|
|
<li>Docker or bare metal, any Linux distro</li>
|
|
</ul>
|
|
<a class="hosting-card-cta" href="https://hermes-agent.nousresearch.com/docs/getting-started/installation" target="_blank" rel="noopener">Install docs →</a>
|
|
</div>
|
|
|
|
<!-- PaaS -->
|
|
<div class="hosting-card">
|
|
<div class="hosting-card-icon">☁</div>
|
|
<div class="hosting-card-title">PaaS platforms</div>
|
|
<div class="hosting-card-price">$5–7/mo</div>
|
|
<p class="hosting-card-desc">Git-push deploys with no server management. Good if you want to skip infrastructure entirely. Railway, Render, and Fly.io all support Node.js and Python with automatic SSL and domains.</p>
|
|
<ul class="hosting-card-features">
|
|
<li>Railway Hobby — $5/mo, connect GitHub, auto-deploy</li>
|
|
<li>Render — free tier available (sleeps on inactivity)</li>
|
|
<li>Fly.io — Docker-native, 30+ global regions</li>
|
|
<li>No SSH or server management required</li>
|
|
<li>Built-in CI/CD on every git push</li>
|
|
</ul>
|
|
<a class="hosting-card-cta" href="https://hermes-agent.nousresearch.com/docs/getting-started/installation" target="_blank" rel="noopener">Install docs →</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Minimum specs bar -->
|
|
<div class="hosting-specs">
|
|
<div class="hosting-specs-icon">📊</div>
|
|
<div class="hosting-specs-body">
|
|
<div class="hosting-specs-title">Minimum requirements — no GPU needed (Hermes calls external APIs)</div>
|
|
<ul class="hosting-specs-list">
|
|
<li><strong>RAM:</strong> 1 GB min, 2 GB recommended</li>
|
|
<li><strong>CPU:</strong> 1 vCPU minimum</li>
|
|
<li><strong>Storage:</strong> 10–20 GB SSD</li>
|
|
<li><strong>OS:</strong> Ubuntu 22.04 LTS or any modern Linux</li>
|
|
<li><strong>Model:</strong> Bring your own key — Claude, OpenAI, Gemini, or local</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Anywhere callout -->
|
|
<div class="hosting-anywhere">
|
|
<div class="hosting-anywhere-icon">🏠</div>
|
|
<p class="hosting-anywhere-text">
|
|
<strong>Runs anywhere Python 3.11+ runs.</strong>
|
|
Mac Mini, Raspberry Pi, a spare laptop, a homelab NAS — if it can run Python, it can run Hermes.
|
|
No GPU needed. See the <a href="https://hermes-agent.nousresearch.com/docs/getting-started/installation" target="_blank" rel="noopener">install docs</a> for full requirements.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== SECTION 9: WHAT HERMES IS NOT ===== -->
|
|
<section id="limits" class="section">
|
|
<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> Cursor and Windsurf do that job better. Use one alongside Hermes — that's not what it's 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. That means initial configuration, and you're responsible for uptime, upgrades, and backups. The tradeoff is data sovereignty and control.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="limitation-item">
|
|
<div class="limitation-icon">🤖</div>
|
|
<div class="limitation-text">
|
|
<strong>Doesn't make weaker models magical.</strong> Memory and skills help, but the underlying model determines reasoning quality. Hermes with a weak model is a well-organized 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 execution on a schedule with shell access is powerful and requires judgment. Terminal commands can require confirmation — use that for anything consequential.
|
|
</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, a chat interface is faster. Hermes earns its setup cost over time, not in the first session.
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== SECTION 10: RESOURCES ===== -->
|
|
<section id="resources" class="section section-alt">
|
|
<div class="container">
|
|
<p class="section-label">Docs & community</p>
|
|
<h2 class="section-title">Resources</h2>
|
|
<a href="community/" class="community-banner">
|
|
<span class="community-banner-icon">🌎</span>
|
|
<span class="community-banner-text">
|
|
<strong>Community & Ecosystem</strong>
|
|
<span>25 third-party projects, tools, and integrations built around Hermes</span>
|
|
</span>
|
|
<span class="community-banner-arrow">→</span>
|
|
</a>
|
|
<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">Multi-surface access</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>
|
|
|
|
<a href="community/" class="resource-card">
|
|
<div class="resource-icon">🌎</div>
|
|
<div class="resource-title">Community & Ecosystem</div>
|
|
<div class="resource-url">30+ third-party projects</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>.
|
|
This community Web UI (<a href="https://github.com/nesquena/hermes-webui" target="_blank" rel="noopener">nesquena/hermes-webui</a>) is an independent project, not affiliated with or endorsed by Nous Research.
|
|
For the official product, visit <a href="https://hermes-agent.nousresearch.com" target="_blank" rel="noopener">hermes-agent.nousresearch.com</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 =====
|
|
var themeToggle = document.getElementById('theme-toggle');
|
|
var html = document.documentElement;
|
|
var hljsTheme = document.getElementById('hljs-theme');
|
|
|
|
function setTheme(theme) {
|
|
html.setAttribute('data-theme', theme);
|
|
localStorage.setItem('theme', theme);
|
|
// Code blocks stay dark in both themes; no hljs switch needed
|
|
// Icon shows what you'll switch TO: sun in dark mode, moon in light mode
|
|
if (theme === 'light') {
|
|
themeToggle.textContent = '🌙';
|
|
} else {
|
|
themeToggle.textContent = '☀️';
|
|
}
|
|
}
|
|
|
|
// Init theme: dark by default
|
|
var saved = localStorage.getItem('theme');
|
|
if (saved) {
|
|
setTheme(saved);
|
|
} else {
|
|
setTheme('dark');
|
|
}
|
|
|
|
themeToggle.addEventListener('click', function() {
|
|
var current = html.getAttribute('data-theme');
|
|
setTheme(current === 'dark' ? 'light' : 'dark');
|
|
});
|
|
|
|
// ===== HAMBURGER MENU =====
|
|
var hamburger = document.getElementById('hamburger');
|
|
var mobileMenu = document.getElementById('mobile-menu');
|
|
|
|
hamburger.addEventListener('click', function() {
|
|
var 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) {
|
|
var pre = btn.closest('.code-wrap').querySelector('pre');
|
|
var 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() {
|
|
var 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);
|
|
});
|
|
}
|
|
|
|
// ===== LIGHTBOX =====
|
|
function openLightbox(src) {
|
|
var lightbox = document.getElementById('lightbox');
|
|
var img = document.getElementById('lightbox-img');
|
|
img.src = src;
|
|
lightbox.classList.add('active');
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
function closeLightbox() {
|
|
var lightbox = document.getElementById('lightbox');
|
|
lightbox.classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
}
|
|
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape') closeLightbox();
|
|
});
|
|
|
|
|
|
// ===== KEYBOARD NAV FOR CLICKABLE CARDS =====
|
|
document.querySelectorAll('.comparison-card[role="link"]').forEach(function(card) {
|
|
card.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); card.click(); }
|
|
});
|
|
});
|
|
|
|
// ===== SMOOTH SCROLL =====
|
|
document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
|
|
anchor.addEventListener('click', function(e) {
|
|
var hash = this.getAttribute('href');
|
|
var target = document.querySelector(hash);
|
|
if (target) {
|
|
e.preventDefault();
|
|
var top = target.getBoundingClientRect().top + window.scrollY - 72;
|
|
window.scrollTo({ top: top, behavior: 'smooth' });
|
|
// Update URL hash so the link is shareable / deep-linkable
|
|
history.pushState(null, '', hash);
|
|
}
|
|
});
|
|
});
|
|
|
|
// ===== DEEP LINK ON PAGE LOAD =====
|
|
// If the URL already has a hash (e.g. someone shares #webui), scroll there
|
|
// after a brief delay so the page has rendered and nav height is settled.
|
|
if (window.location.hash) {
|
|
setTimeout(function() {
|
|
var target = document.querySelector(window.location.hash);
|
|
if (target) {
|
|
var top = target.getBoundingClientRect().top + window.scrollY - 72;
|
|
window.scrollTo({ top: top, behavior: 'smooth' });
|
|
}
|
|
}, 100);
|
|
}
|
|
|
|
// ===== NAV ACTIVE STATE =====
|
|
var sections = document.querySelectorAll('section[id]');
|
|
var navLinks = document.querySelectorAll('.nav-links a');
|
|
|
|
function updateActiveNav() {
|
|
var current = '';
|
|
sections.forEach(function(section) {
|
|
var 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>
|