{"id":51102765,"url":"https://github.com/holasoymalva/claude-ui","last_synced_at":"2026-06-24T12:03:21.021Z","repository":{"id":366909717,"uuid":"1278412062","full_name":"holasoymalva/claude-ui","owner":"holasoymalva","description":"Open Standard for Generative UI Based in @claude.ai","archived":false,"fork":false,"pushed_at":"2026-06-23T20:45:37.000Z","size":43,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-23T21:24:39.851Z","etag":null,"topics":["claude","claude-ai","claude-api","claude-code","claude-code-plugin","claude-plugin","claude-skills"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/holasoymalva.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-23T19:07:25.000Z","updated_at":"2026-06-23T20:45:52.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/holasoymalva/claude-ui","commit_stats":null,"previous_names":["holasoymalva/claude-ui"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/holasoymalva/claude-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/holasoymalva%2Fclaude-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/holasoymalva%2Fclaude-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/holasoymalva%2Fclaude-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/holasoymalva%2Fclaude-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/holasoymalva","download_url":"https://codeload.github.com/holasoymalva/claude-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/holasoymalva%2Fclaude-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34731275,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-24T02:00:07.484Z","response_time":106,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["claude","claude-ai","claude-api","claude-code","claude-code-plugin","claude-plugin","claude-skills"],"created_at":"2026-06-24T12:03:20.174Z","updated_at":"2026-06-24T12:03:21.013Z","avatar_url":"https://github.com/holasoymalva.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# Claude-UI\n\n**A streaming-first Generative UI workspace and open markup specification.**\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE)\n[![Zero dependencies](https://img.shields.io/badge/dependencies-none-brightgreen)](#getting-started)\n[![GUIM v1.0](https://img.shields.io/badge/spec-GUIM_v1.0-d97706)](#guim-specification)\n\n[Quick Start](#getting-started) · [GUIM Spec](#guim-specification) · [Examples](./examples/) · [Design System](#design-system)\n\n\u003c/div\u003e\n\n---\n\nClaude-UI is a zero-dependency, browser-native workspace for Generative UI. It implements **GUIM** (Generative UI Markup) — a compact, streaming-first component language that lets language models output rich, interactive UI directly inside chat interfaces, using significantly fewer tokens than equivalent JSON-based approaches.\n\nThe visual design is a reference implementation inspired by [Claude.ai](https://claude.ai). Claude-UI is an independent open-source project and is not affiliated with or endorsed by Anthropic.\n\n---\n\n## How it works\n\nYour component library defines what the model can generate.\n\n```\nSystem Prompt  ──►  LLM  ──►  GUIM Stream  ──►  Parser  ──►  Live UI\n (GUIM schema)                (token by token)   (incremental)\n```\n\n1. Register a component schema (JSON or freeform description).\n2. Export that schema as a structured system prompt guideline.\n3. The model outputs GUIM tokens as it streams.\n4. The parser compiles each token incrementally — no waiting for the full response.\n5. Components render live in the browser as output arrives.\n\n---\n\n## Getting Started\n\nClaude-UI has no build step and no runtime dependencies. Clone and serve:\n\n```bash\ngit clone https://github.com/holasoymalva/claude-ui.git\ncd claude-ui\nnpx serve .\n```\n\nThen open `http://localhost:3000` in your browser.\n\nAlternatively:\n\n```bash\npython3 -m http.server 8080\n# → http://localhost:8080\n```\n\nTo explore individual rendered components without the full workspace:\n\n```bash\nopen examples/dashboard.html\n```\n\n---\n\n## GUIM Specification\n\nGUIM (Generative UI Markup) is a BBCode-inspired syntax designed to be easy for language models to emit and easy for browsers to parse incrementally.\n\n### Why not JSON?\n\n| Format | Tokens (dashboard scenario) | Streaming-safe | Human-readable |\n|:---|---:|:---:|:---:|\n| Vercel JSON-Render | ~2,247 | ✗ | ✗ |\n| JSON (raw schema) | ~2,261 | ✗ | ✗ |\n| **GUIM v1.0** | **~1,226** | **✓** | **✓** |\n\nJSON requires the full document to be emitted before it can be parsed. GUIM tokens can be compiled as soon as the opening tag is closed, which means the first component renders while the model is still generating the rest.\n\n### Component reference\n\n| Tag | Required | Optional | Self-closing |\n|:---|:---|:---|:---:|\n| `[card]` | — | `title`, `width=\"full\"` | ✗ |\n| `[grid]` | — | `columns` (default: 2) | ✗ |\n| `[metric]` | `label`, `value` | `trend` (+X% · up · down) | ✓ |\n| `[chart]` | `type` (bar · pie), `data` (0–100) | `label` | ✓ |\n| `[table]` | `headers`, `rows` | — | ✓ |\n| `[tasktracker]` | `tasks` (comma-separated) | — | ✓ |\n| `[list]` + `[listitem]` | `listitem: text` | — | ✗ / ✓ |\n| `[button]` | `label` | `variant` (primary · secondary) | ✓ |\n| `[weather]` | `city`, `temp` | `condition` | ✓ |\n\n### Example document\n\n```\n[card title=\"Infrastructure Overview\"]\n  [grid columns=\"3\"]\n    [metric label=\"CPU Load\"  value=\"38%\"    trend=\"down\"   /]\n    [metric label=\"Memory\"    value=\"14.2 GB\" trend=\"up\"     /]\n    [metric label=\"Latency\"   value=\"9 ms\"   trend=\"down\"   /]\n  [/grid]\n  [chart type=\"bar\" data=\"38\" label=\"CPU Utilisation\" /]\n  [table\n    headers=\"Service, Region, Status, Latency\"\n    rows=\"API Gateway,us-east-1,Healthy,8ms;Auth Service,eu-west-1,Healthy,12ms\"\n  /]\n[/card]\n```\n\n### Registering a custom component\n\nOpen the **Connectors \u0026 Settings → Schemas Registry** tab in the workspace and submit a name, description, and JSON schema. The workspace exports the registered schema as a system prompt fragment you can paste into any LLM integration.\n\n---\n\n## Project Structure\n\n```\nclaude-ui/\n├── index.html        # Workspace shell: chat view, artifact gallery, settings\n├── styles.css        # Design tokens, layout system, component styles\n├── parser.js         # Stream-safe GUIM tokenizer and incremental compiler\n├── app.js            # View routing, mock LLM stream, schema registry state\n└── examples/\n    └── dashboard.html  # Standalone component showcase (no workspace required)\n```\n\n### Core modules\n\n**`parser.js`** — The streaming tokenizer. Accepts a partial or complete GUIM string and returns a DOM subtree. Safe to call on every new token without re-parsing previous output.\n\n**`app.js`** — Application controller. Handles view routing, the mock streaming pipeline, artifact persistence (localStorage), and the connector/schema registry.\n\n**`styles.css`** — Design token layer built on CSS custom properties. All colors, spacing, typography, and animation values are defined as variables so the entire design system can be overridden from a single block.\n\n---\n\n## Design System\n\nClaude-UI is a reference implementation of a chat UI inspired by Claude.ai and Claude Code. The intent is to demonstrate what a high-fidelity Generative UI workspace looks like when the visual design is taken seriously.\n\n| Token | Value | Usage |\n|:---|:---|:---|\n| `--bg-primary` | `#1c1917` | Base canvas (warm dark, stone-950) |\n| `--bg-secondary` | `#242120` | Sidebar, panel backgrounds |\n| `--bg-tertiary` | `#2e2b29` | Card and input backgrounds |\n| `--accent-color` | `#d97706` | Amber-600 — primary action color |\n| `--font-sans` | `Inter` | Body and UI text |\n| `--font-mono` | `JetBrains Mono` | Code, markup, schema views |\n\n**Chat surface:** User messages render as right-aligned pills. Assistant messages appear as clean flowing text anchored by the Claude logomark — no border box, no background fill.\n\n**Artifact cards** use a dog-ear clip-path on the top-right corner, referencing the document metaphor used in Claude.ai artifacts.\n\n---\n\n## Examples\n\nThe `examples/` directory contains self-contained HTML files that require no build step.\n\n| Example | Description |\n|:---|:---|\n| [`examples/dashboard.html`](./examples/dashboard.html) | Full component showcase — all GUIM elements with live renders and markup reference |\n\nMore examples (React integration, Claude API streaming, Next.js) are planned. See [open issues](https://github.com/holasoymalva/claude-ui/issues) or open a PR.\n\n---\n\n## Roadmap\n\n- [ ] `parser.js` published as a standalone ES module (zero-dep, tree-shakeable)\n- [ ] React bindings (`useGUIMStream` hook + `\u003cGUIMRenderer /\u003e` component)\n- [ ] Live Claude API integration example\n- [ ] Next.js streaming example with Server-Sent Events\n- [ ] CLI for generating system prompt from registered schema\n\n---\n\n## Contributing\n\nContributions are welcome — bug fixes, new GUIM components, framework integrations, or design improvements.\n\n1. Fork the repository\n2. Create a feature branch: `git checkout -b feat/my-change`\n3. Make your changes and open a pull request\n\nFor larger changes, open an issue first to discuss scope.\n\n---\n\n## License\n\nMIT — see [`LICENSE`](./LICENSE) for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fholasoymalva%2Fclaude-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fholasoymalva%2Fclaude-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fholasoymalva%2Fclaude-ui/lists"}