index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AgentBridge — Self-hosted AI office agents</title>
<meta name="description" content="AgentBridge: self-hosted AI agents for office work — terminal chat, OpenAI-compatible API and MCP in one process. Documents, spreadsheets, email, web research, voice, SIP phone and Telegram.">
<style>
  :root { --blue:#1f6feb; --green:#2ea043; --bg:#0b1120; --panel:#111a2e; --text:#dbe4f3; --muted:#8aa0c4; --line:#233458; }
  * { box-sizing:border-box; margin:0; padding:0; }
  body { background:var(--bg); color:var(--text); font:16px/1.6 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
  .wrap { max-width:1080px; margin:0 auto; padding:0 24px; }
  header { border-bottom:1px solid var(--line); background:linear-gradient(180deg,#0d1530,var(--bg)); }
  nav { display:flex; align-items:center; gap:20px; padding:14px 0; }
  nav .logo { font-weight:700; font-size:18px; color:#fff; }
  nav a { color:var(--muted); text-decoration:none; font-size:14px; }
  nav a:hover { color:#fff; }
  nav .spacer { flex:1; }
  .hero { padding:64px 0 56px; text-align:center; }
  .hero h1 { font-size:44px; line-height:1.15; color:#fff; }
  .hero h1 span { background:linear-gradient(90deg,var(--blue),var(--green)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .hero p.tag { max-width:760px; margin:18px auto 30px; color:var(--muted); font-size:18px; }
  .btn { display:inline-block; padding:12px 26px; border-radius:8px; font-weight:600; text-decoration:none; margin:0 6px; }
  .btn.primary { background:var(--blue); color:#fff; }
  .btn.ghost { border:1px solid var(--line); color:var(--text); }
  .btn:hover { filter:brightness(1.12); }
  .hero img.poster { width:100%; max-width:760px; border-radius:12px; margin-top:40px; border:1px solid var(--line); }
  section { padding:56px 0; border-top:1px solid var(--line); }
  h2 { font-size:28px; color:#fff; margin-bottom:24px; }
  .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; }
  .card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px; }
  .card h3 { font-size:17px; color:#fff; margin-bottom:8px; }
  .card p { color:var(--muted); font-size:14.5px; }
  ul.docs { columns:2; column-gap:40px; list-style:none; }
  ul.docs li { padding:6px 0; border-bottom:1px dashed var(--line); break-inside:avoid; }
  ul.docs a { color:var(--text); text-decoration:none; }
  ul.docs a:hover { color:var(--blue); }
  .demo { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
  .demo figure { background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
  .demo img, .demo video { width:100%; display:block; aspect-ratio:16/9; object-fit:cover; background:#000; }
  .demo figcaption { padding:10px 14px; font-size:13.5px; color:var(--muted); }
  .wp { background:linear-gradient(135deg,#101c3a,#0f2a1e); border:1px solid var(--line); border-radius:12px; padding:26px; display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
  .wp .txt { flex:1; min-width:280px; }
  .wp h3 { color:#fff; font-size:20px; margin-bottom:6px; }
  .wp p { color:var(--muted); }
  .wp a { color:var(--green); }
  footer { border-top:1px solid var(--line); padding:28px 0 40px; text-align:center; color:var(--muted); font-size:13.5px; }
  footer a { color:var(--muted); }
  @media (max-width:640px){ .hero h1{font-size:32px} ul.docs{columns:1} }
</style>
</head>
<body>

<header>
  <div class="wrap">
    <nav>
      <span class="logo">🤖 AgentBridge</span>
      <span class="spacer"></span>
      <a href="#features">Features</a>
      <a href="#docs">Docs</a>
      <a href="#white-paper">White paper</a>
      <a href="#demos">Demos</a>
      <a href="https://github.com/Graphene-Lab/AgentBridge">GitHub ↗</a>
    </nav>
  </div>
</header>

<div class="hero">
  <div class="wrap">
    <h1>Self-hosted AI agents that <span>do real office work</span></h1>
    <p class="tag">One process: a full-screen chat terminal, an OpenAI-compatible HTTP API and a native
    MCP connector. Documents, spreadsheets, email, web research, voice, podcasts — while your data
    never leaves your machine.</p>
    <a class="btn primary" href="https://graphenelab.it/AgentBridge/download/">Download for your OS</a>
    <a class="btn ghost" href="docs/MANUAL.md">Read the manual</a>
    <img class="poster" src="media/agent-bridge-poster.png" alt="AgentBridge">
  </div>
</div>

<section id="features">
  <div class="wrap">
    <h2>What it can do</h2>
    <div class="grid">
      <div class="card"><h3>📄 Real documents</h3><p>Word, Excel, PowerPoint and detailed PDF reports generated end-to-end from a plain prompt, from official templates.</p></div>
      <div class="card"><h3>🧠 Deterministic Memory</h3><p>The agent permanently knows the things, facts, people and documents it has handled — zero reasoning iterations wasted on recollection.</p></div>
      <div class="card"><h3>🛡️ True sandbox</h3><p>An application-level action perimeter no tool method can breach. Structurally enforced by code, not by prompt.</p></div>
      <div class="card"><h3>🎙️ Voice & phone</h3><p>Kokoro neural TTS out of the box, and a SIP phone endpoint reachable 24/7 behind a DTMF PIN.</p></div>
      <div class="card"><h3>💬 Telegram</h3><p>The agents live in your Telegram as a chat contact, attachments both ways, allow-list access control.</p></div>
      <div class="card"><h3>🗓️ Autonomous scheduling</h3><p>Deadlines and recurring duties the agent plans and executes on its own — reports, checks, follow-ups.</p></div>
      <div class="card"><h3>🔌 MCP + OpenAI API</h3><p>Point any OpenAI client at <code>localhost:5290/v1</code>, or drive the same runtime through standard MCP clients.</p></div>
      <div class="card"><h3>🔒 GDPR-ready</h3><p>Optional anonymization masks personal data before it reaches any external LLM provider, and restores it in the reply.</p></div>
    </div>
  </div>
</section>

<section id="docs">
  <div class="wrap">
    <h2>Documentation</h2>
    <ul class="docs">
      <li><a href="docs/INDEX.md">📖 Beginner guides (15)</a></li>
      <li><a href="docs/MANUAL.md">📘 User manual — start here</a></li>
      <li><a href="docs/TUI.md">🖥️ Terminal UI reference</a></li>
      <li><a href="docs/API.md">🌐 HTTP API reference</a></li>
      <li><a href="docs/telegram.md">💬 Telegram chat</a></li>
      <li><a href="docs/sip.md">📞 SIP telephony</a></li>
      <li><a href="docs/TTS.md">🔊 Text-to-speech</a></li>
      <li><a href="docs/autoupdate.md">🔄 Auto-update</a></li>
    </ul>
  </div>
</section>

<section id="white-paper">
  <div class="wrap">
    <h2>White paper</h2>
    <div class="wp">
      <div class="txt">
        <h3>Why the AIOrchestrator library model outperforms traditional MCP deployments</h3>
        <p>One runtime, one agent core, one consistent operational flow across terminal and API —
        faster execution, lower integration overhead and stronger control than multi-server MCP setups.</p>
        <p><a href="docs/AIORCHESTRATOR-WHITEPAPER.md">Read the white paper →</a></p>
      </div>
      <div class="txt">
        <h3>Universal Tool System (UTS)</h3>
        <p>Tools that run natively as compiled .NET assemblies — no interpreters, no HTTP, in-process
        with zero overhead, hot-add plugins, one AnyCPU binary across Windows, Linux, macOS and iOS.</p>
        <p><a href="https://github.com/Graphene-Lab/AgentHarness/blob/master/docs/universal-tool-system.md">Read the UTS guide →</a></p>
      </div>
    </div>
  </div>
</section>

<section id="demos">
  <div class="wrap">
    <h2>Demo gallery</h2>
    <div class="demo">
      <figure><video controls src="media/demo.mp4"></video><figcaption>Terminal UI — streaming agent replies, command palette, status bar.</figcaption></figure>
      <figure><img src="media/demo1.gif" alt="Presentation demo"><figcaption>PowerPoint-style presentations generated by the agent.</figcaption></figure>
      <figure><video controls src="media/enanced_doc_demo.mp4"></video><figcaption>Detailed PDF market &amp; financial analysis reports.</figcaption></figure>
      <figure><img src="media/invoice.png" alt="Invoice"><figcaption>Invoice generated end-to-end (material check → DOCX).</figcaption></figure>
      <figure><img src="media/contract.png" alt="Employment contract"><figcaption>Employment contract in Word, generated from a request.</figcaption></figure>
      <figure><img src="media/spreadsheet-demo.png" alt="Spreadsheet"><figcaption>Excel workbook with data table + chart, single A4 page.</figcaption></figure>
      <figure><video controls src="media/podcast-example.mp4"></video><figcaption>Podcast sample episode (MP4, ~42 s) — MP3 + RSS also produced.</figcaption></figure>
      <figure><img src="media/telegram-agent.png" alt="Telegram chat"><figcaption>Telegram agent chat.</figcaption></figure>
    </div>
  </div>
</section>

<footer>
  <div class="wrap">
    <p><a href="https://github.com/Graphene-Lab/AgentBridge">Source code on GitHub</a> ·
    <a href="https://graphenelab.it/AgentBridge/">graphenelab.it/AgentBridge</a> ·
    <a href="https://github.com/Graphene-Lab/AgentBridge/blob/master/LICENSE.md">Andrea Bruno License 1.4</a></p>
    <p style="margin-top:8px">Self-contained archives (~460 MB, no .NET needed) · Windows x64 · Linux x64/ARM64 · macOS Intel/Apple Silicon</p>
  </div>
</footer>

</body>
</html>