Hyperweave
Headless visual design system for AI agents. One API call → self-contained SVG. Zero dependencies, works everywhere ⌬
Install / Use
/learn @InnerAura/HyperweaveAbout this skill
Quality Score
0/100
Category
Development & EngineeringSupported Platforms
Claude Code
Claude Desktop
Cursor
README
<div id="top">
<p align="center">
<img src="https://raw.githubusercontent.com/InnerAura/hyperweave/f36c8969d15d76da4400ebcfaa04ec1e2eacb170/assets/hyperweave-banner.svg" alt="HyperWeave" width="800"/>
</p>
<p align="center">
<strong>Headless visual design system for AI agents.</strong><br/>
One API call → self-contained SVG. No JavaScript. No dependencies. No runtime.<br/>
Works everywhere an <code><img></code> tag works.
</p>
<!--
<p align="center">
<img src="https://hyperweave.app/v1/live/github/InnerAura/hyperweave/stars/chrome-horizon.static" alt="stars"/>
<img src="https://hyperweave.app/v1/live/github/InnerAura/hyperweave/forks/chrome-horizon.static" alt="forks"/>
<img src="https://hyperweave.app/v1/live/pypi/hyperweave/version/chrome-horizon.static" alt="version"/>
<img src="https://hyperweave.app/v1/live/github/InnerAura/hyperweave/license/chrome-horizon.static" alt="license"/>
<img src="https://hyperweave.app/v1/live/pypi/hyperweave/python_requires/chrome-horizon.static" alt="python"/>
</p>
-->
<p align="center">
<img src="https://hyperweave.app/v1/strip/hyperweave/chrome-horizon.static?live=github:InnerAura/hyperweave:build,pypi:hyperweave:version,github:InnerAura/hyperweave:license&glyph=github" alt="strip"/>
</p>
The Problem
When an AI agent needs visual output, it generates React code or HTML that breaks across platforms, carries no brand identity, and is illegible to the next agent in the chain. There's no portable, reliable visual primitive for agents.
HyperWeave is that primitive. Semantic SVGs with embedded CSS state machines, accessibility markup, and machine-readable metadata. The artifact stays live, stays on-brand, and stays legible — whether it's rendered in a GitHub README, Slack, Notion, documentation site, email, VS Code, or terminal. Every surface that renders an <img> tag is a HyperWeave surface.
Genomes — Aesthetic DNA
A genome is a portable, machine-readable aesthetic specification. It encodes the complete visual identity — chromatic system, surface material, motion vocabulary, geometric form language — as a set of CSS custom properties that any agent can consume and apply consistently across every artifact type.
<!-- Why genome and not theme? Because brand isn't a design problem, it's an infrastructure problem. When an agent says "build me a status page," it has zero memory of visual identity. A genome solves that: define once, express everywhere, from a 90px badge to a full-width banner. The same genome produces different artifacts that feel like they came from the same hand. --> <table> <tr> <td></td> <td align="center"><strong>brutalist-emerald</strong></td> <td align="center"><strong>chrome-horizon</strong></td> </tr> <tr> <td align="center"><strong>Signals</strong></td> <td> <img src="https://hyperweave.app/v1/badge/BUILD/passing/brutalist-emerald.static?state=passing" alt="passing"/> <img src="https://hyperweave.app/v1/badge/BUILD/warning/brutalist-emerald.static?state=warning" alt="warning"/> <img src="https://hyperweave.app/v1/badge/BUILD/critical/brutalist-emerald.static?state=critical" alt="critical"/> </td> <td> <img src="https://hyperweave.app/v1/badge/BUILD/passing/chrome-horizon.static?state=passing" alt="passing"/> <img src="https://hyperweave.app/v1/badge/BUILD/warning/chrome-horizon.static?state=warning" alt="warning"/> <img src="https://hyperweave.app/v1/badge/BUILD/critical/chrome-horizon.static?state=critical" alt="critical"/> </td> </tr> <tr> <td align="center"><strong>Dashboard</strong></td> <td><img src="https://hyperweave.app/v1/strip/readme-ai/brutalist-emerald.static?value=STARS:2.9k,FORKS:278"/></td> <td><img src="https://hyperweave.app/v1/strip/readme-ai/chrome-horizon.static?value=STARS:2.9k,FORKS:278"/></td> </tr> <tr> <td rowspan="3" align="center"><strong>Marquee</strong></td> <td><img src="https://hyperweave.app/v1/marquee/HYPERWEAVE%20%C2%B7%20LIVING%20ARTIFACTS%20%C2%B7%20INNERAURA%20LABS/brutalist-emerald.static?rows=1"/></td> <td><img src="https://hyperweave.app/v1/marquee/HYPERWEAVE%20%C2%B7%20LIVING%20ARTIFACTS%20%C2%B7%20INNERAURA%20LABS/chrome-horizon.static?rows=1"/></td> </tr> <tr> <td><img src="https://hyperweave.app/v1/marquee/HYPERWEAVE%7CLIVING%20ARTIFACTS%7CAI-NATIVE%20SVG%7CCOMPOSITOR%20API/brutalist-emerald.static?rows=3"/></td> <td><img src="https://hyperweave.app/v1/marquee/HYPERWEAVE%7CLIVING%20ARTIFACTS%7CAI-NATIVE%20SVG%7CCOMPOSITOR%20API/chrome-horizon.static?rows=3"/></td> </tr> <tr> <td><img src="https://hyperweave.app/v1/marquee/HYPERWEAVE%20%C2%B7%20LIVING%20ARTIFACTS%20%C2%B7%20INNERAURA%20LABS/brutalist-emerald.static?rows=1&direction=up"/></td> <td><img src="https://hyperweave.app/v1/marquee/HYPERWEAVE%20%C2%B7%20LIVING%20ARTIFACTS%20%C2%B7%20INNERAURA%20LABS/chrome-horizon.static?rows=1&direction=up"/></td> </tr> <tr> <td align="center"><strong>Icons<br/></strong></td> <td> <img src="https://hyperweave.app/v1/icon/discord/brutalist-emerald.static?shape=circle" alt="discord" width="64"/> <img src="https://hyperweave.app/v1/icon/github/brutalist-emerald.static?shape=circle" alt="github" width="64"/> <img src="https://hyperweave.app/v1/icon/x/brutalist-emerald.static?shape=square" alt="x" width="64"/> <img src="https://hyperweave.app/v1/icon/spotify/brutalist-emerald.static?shape=square" alt="spotify" width="64"/> </td> <td> <img src="https://hyperweave.app/v1/icon/youtube/chrome-horizon.static?shape=circle" alt="youtube" width="64"/> <img src="https://hyperweave.app/v1/icon/notion/chrome-horizon.static?shape=circle" alt="notion" width="64"/> <img src="https://hyperweave.app/v1/icon/npm/chrome-horizon.static?shape=square" alt="npm" width="64"/> <img src="https://hyperweave.app/v1/icon/instagram/chrome-horizon.static?shape=square" alt="instagram" width="64"/> </td> </tr> <tr> <td align="center"><strong>Banner</strong></td> <td><img src="https://hyperweave.app/v1/banner/HYPERWEAVE/brutalist-emerald.static"/></td> <td><img src="https://hyperweave.app/v1/banner/HYPERWEAVE/chrome-horizon.static"/></td> </tr> </table>| | brutalist-emerald | chrome-horizon |
|---|---|---|
| Surface | #14532D dark field | #000a14 deep void |
| Signal | #10B981 emerald | #5ba3d4 metallic blue |
| Profile | brutalist (sharp, zero-radius) | chrome (smooth, env-mapped) |
| Motions | 5 border + 9 kinetic | 5 border only |
Install
uv add hyperweave
# or
pip install hyperweave
Requires Python 3.12+.
Entry Points
Four interfaces, one pipeline. Every path produces the same artifact through the same compositor.
<p align="center"> <a href="https://hyperweave.app/docs/mcp"> <img src="https://raw.githubusercontent.com/InnerAura/hyperweave/f36c8969d15d76da4400ebcfaa04ec1e2eacb170/assets/cards/card-butterfly.svg" alt="MCP" width="48%"> </a> <a href="https://hyperweave.app/docs/cli"> <img src="https://raw.githubusercontent.com/InnerAura/hyperweave/f36c8969d15d76da4400ebcfaa04ec1e2eacb170/assets/cards/card-sunflower.svg" alt="CLI" width="48%"> </a> <br/> <a href="https://hyperweave.app/docs/api"> <img src="https://raw.githubusercontent.com/InnerAura/hyperweave/f36c8969d15d76da4400ebcfaa04ec1e2eacb170/assets/cards/card-waves.svg" alt="HTTP API" width="48%"> </a> <a href="https://hyperweave.app/docs/python"> <img src="https://raw.githubusercontent.com/InnerAura/hyperweave/f36c8969d15d76da4400ebcfaa04ec1e2eacb170/assets/cards/card-python.svg" alt="Python SDK" width="48%"> </a> </p>MCP
{ "mcpServers": { "hyperweave": { "command": "hyperweave", "args": ["mcp"] } } }
hw_compose(type="badge", title="build", value="passing", genome="brutalist-emerald")
hw_live(provider="github", identifier="anthropics/claude-code", metric="stars")
hw_kit(type="readme", genome="brutalist-emerald", badges="build:passing")
hw_discover(what="all")
CLI
# Badge
hyperweave compose badge "build" "passing" --genome brutalist-emerald
# Strip with metrics
hyperweave compose strip "readme-ai" "STARS:2.9k,FORKS:278" -g brutalist-emerald
# Banner with kinetic motion
hyperweave compose banner "HYPERWEAVE" -g brutalist-emerald -m cascade
# Artifact kit
hyperweave kit readme -g brutalist-emerald --badges "build:passing,version:v0.1.0" --social "github,discord"
HTTP API
# URL grammar: /v1/{type}/{title}/{value}/{genome}.{motion}
curl https://hyperweave.app/v1/strip/readme-ai/brutalist-emerald.static?value=STARS:2.9k,FORKS:278
# Live data binding
curl https://hyperweave.app/v1/live/github/anthropics/claude-code/stars/chrome-horizon
# POST compose
curl -X POST https://hyperweave.app/v1/compose \
-H "Content-Type: application/json" \
-d '{"type":"banner","title":"HYPERWEAVE","genome":"brutalist-emerald","motion":"drop"}'
# Local server
hyperweave serve --port 8000
Session Telemetry
HyperWeave parses Claude Code transcripts into visual receipts — cost, tokens, tool distribution, cognitive phases. The artifact isn't a visualization of data. It is the record.
# Manual
hyperweave session receipt .claude/session.jsonl -o receipt.svg
# Autonomous — install once, every session gets a receipt
hyperweave install-hook
After install-hook, every Claude Code session automatically drops a receipt SVG into .hyperweave/receipts/. No config, no server, no manual step.
