// Shared zebra-rs components — exposes globals via window // Consumed by the three variation scripts. const { useState, useEffect, useRef, useMemo, useCallback } = React; /* ─────────────────────────── Logo ─────────────────────────── */ function ZebraLogo({ size = 44, intro = false, mono = false, className = "" }) { return ( ); } /* ─────────────────────────── Header ─────────────────────────── */ function Header({ mono, onToggleTheme, dark }) { return (
zebra-rs v26.7.1
); } /* ─────────────────────────── Install strip ─────────────────────────── */ function InstallStrip() { const [copied, setCopied] = useState(false); const cmd = "curl -fsSL https://zebra.rs/install.sh | bash"; return (
$ {cmd}
); } /* ─────────────────────────── Tabbed config ─────────────────────────── */ const CFG_CLI = `router { bgp { global { as 65501; router-id 10.0.0.1; } neighbor 10.0.0.2 { afi-safi vpnv4 { enabled true; } remote-as 65501; } } }`; const CFG_YAML = `router: bgp: global: as: 65501 router-id: 10.0.0.1 neighbor: - remote-address: 10.0.0.2 afi-safi: - name: vpnv4 enabled: true remote-as: 65501`; const CFG_JSON = `{ "router": { "bgp": { "global": { "as": 65501, "router-id": "10.0.0.1" }, "neighbor": [ { "remote-address": "10.0.0.2", "afi-safi": [ { "name": "vpnv4", "enabled": true } ], "remote-as": 65501 } ] } } }`; function ConfigTabs() { const tabs = [ { id: "cli", label: "CLI", body: CFG_CLI }, { id: "yaml", label: "YAML", body: CFG_YAML }, { id: "json", label: "JSON", body: CFG_JSON }, ]; const [active, setActive] = useState("cli"); const body = tabs.find(t => t.id === active).body; return (
{tabs.map(t => ( ))} 
{syntaxTint(body, active)}
); } function syntaxTint(s, kind) { // light inline highlighter — numbers, quoted strings, keywords const parts = []; const re = /("(?:[^"\\]|\\.)*"|\b\d+(?:\.\d+)*\b|\b(?:true|false|null|as|enabled|remote-as)\b|#.*$)/gm; let last = 0, m, i = 0; while ((m = re.exec(s))) { if (m.index > last) parts.push(s.slice(last, m.index)); const tok = m[0]; let color = "var(--fg)"; if (/^"/.test(tok)) color = "var(--z-sage)"; else if (/^\d/.test(tok) || /^\d+\./.test(tok)) color = "var(--z-yellow)"; else if (/^(true|false|null)$/.test(tok)) color = "var(--z-blue)"; else if (/^(as|enabled|remote-as)$/.test(tok)) color = "var(--z-orange)"; parts.push({tok}); last = re.lastIndex; } if (last < s.length) parts.push(s.slice(last)); return parts; } /* ─────────────────────────── Feature cards ─────────────────────────── */ function FeatureCards() { return (

Flexible Configuration

Legacy CLI syntax, YAML, or JSON — pick the format that fits your workflow. All three round-trip losslessly.

Idempotent by Design

Apply the same spec a thousand times; the result is the same. GitOps, CI/CD, and Kubernetes operators work the way you'd expect.

Native MCP Server

Model Context Protocol is built in. Ask Claude or any MCP-aware agent to inspect routes, diagnose adjacencies, or draft policy.

); } function FeatIcon({ kind }) { const size = 28; return (
{kind === "config" && ( )} {kind === "idempotent" && ( )} {kind === "mcp" && ( )}
); } function IdempotencyStack() { return (
apply #1 7 changes
apply #2 0 changes · in sync
apply #1024 0 changes · in sync
K8sTerraformAnsibleGitOps
); } function McpPreview() { const lines = [ { who: "user", text: "why is 10.0.0.1 flapping?" }, { who: "agent", text: "BGP peer 10.0.0.1 reset 4× in 12m — hold‑timer 30s, keepalive drop at T‑27s. Likely MTU mismatch on ge-0/0/1. Want me to pin MSS to 1400?" }, { who: "action", text: "→ mcp.tool: zebra.policy.set_tcp_mss=1400" }, ]; return (
{lines.map((l, i) => (
{l.who === "user" ? "you" : l.who === "action" ? "tool" : "claude"} {l.text}
))}
); } /* ─────────────────────────── Protocols row ─────────────────────────── */ function ProtocolsRow() { const protos = [ ["BGP-4", "RFC 4271", "var(--z-orange)"], ["OSPFv2", "RFC 2328", "var(--z-blue)"], ["OSPFv3", "RFC 5340", "var(--z-blue)"], ["IS-IS", "ISO 10589", "var(--z-teal)"], ["BFD", "RFC 5880", "var(--z-mint)"], ["SRv6", "RFC 8986", "var(--z-red)"], ["SR-MPLS", "RFC 8660", "var(--z-yellow)"], ["L3VPN", "RFC 4364", "var(--z-mustard)"], ["MP-BGP", "RFC 4760", "var(--z-blue)"], ["EVPN", "RFC 7432", "var(--z-orange)"], ]; return (
{protos.map(([name, rfc, col]) => ( {name} {rfc && {rfc}} ))}
See all supported RFCs & Internet-Drafts →
); } /* ─────────────────────────── Footer ─────────────────────────── */ function Footer() { return ( ); } /* ─────────────────────────── Tweaks panel ─────────────────────────── */ function TweaksPanel({ open, mono, setMono, accent, setAccent, onClose }) { const accents = [ ["orange", "var(--z-orange)"], ["blue", "var(--z-blue)"], ["teal", "var(--z-teal)"], ["yellow", "var(--z-yellow)"], ["red", "var(--z-red)"], ["sage", "var(--z-sage)"], ["mint", "var(--z-mint)"], ["mustard", "var(--z-mustard)"], ["moss", "var(--z-moss)"], ]; return (

Tweaks

accent
{accents.map(([k, v]) => (
logo
Toggle panel with the gear button, or use T.
); } /* ─────────────────────────── View switch ─────────────────────────── */ function ViewSwitch({ view, setView }) { const views = [ ["A", "terminal"], ["B", "topology"], ["C", "traceroute"], ]; return (
{views.map(([k, label]) => ( ))}
); } /* ─────────────────────────── Shared left hero ─────────────────────────── */ function LeftHero() { return (
routing, rewritten in Rust

Routing Software
in the AI Era.

zebra-rs is a BGP, OSPF, and IS‑IS routing stack with SRv6, SR-MPLS, L3VPN, and EVPN extensions, written from scratch in Rust. Memory‑safe, async to the core, idempotent by design — and the first routing daemon to ship with a native MCP server for AI agents.

Get started Read the docs
⚡ 14ms commit 🦀 100% safe Rust ◰ AGPLv3 🔌 MCP native
); } /* expose */ Object.assign(window, { ZebraLogo, Header, InstallStrip, ConfigTabs, FeatureCards, ProtocolsRow, Footer, TweaksPanel, ViewSwitch, LeftHero, });