{"id":50430310,"url":"https://github.com/Sayhi-bzb/Agent-HTML","last_synced_at":"2026-06-17T06:01:03.578Z","repository":{"id":356780228,"uuid":"1233569086","full_name":"Sayhi-bzb/Agent-HTML","owner":"Sayhi-bzb","description":"You don't need a chat ui but a canvas with ai.","archived":false,"fork":false,"pushed_at":"2026-06-14T09:40:53.000Z","size":81003,"stargazers_count":625,"open_issues_count":0,"forks_count":21,"subscribers_count":5,"default_branch":"main","last_synced_at":"2026-06-14T11:22:19.792Z","etag":null,"topics":["agent","agent-friendly","ai-collaboration","ai-friendly","ai-html","codex","html","human-agent-collaboration","human-agent-interaction","semantic-html","shadcn","skills"],"latest_commit_sha":null,"homepage":"https://agent-html.org/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Sayhi-bzb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-05-09T05:22:38.000Z","updated_at":"2026-06-14T09:40:56.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/Sayhi-bzb/Agent-HTML","commit_stats":null,"previous_names":["sayhi-bzb/agent-html-sandbox","sayhi-bzb/agent-html"],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/Sayhi-bzb/Agent-HTML","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sayhi-bzb%2FAgent-HTML","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sayhi-bzb%2FAgent-HTML/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sayhi-bzb%2FAgent-HTML/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sayhi-bzb%2FAgent-HTML/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Sayhi-bzb","download_url":"https://codeload.github.com/Sayhi-bzb/Agent-HTML/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sayhi-bzb%2FAgent-HTML/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34435981,"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-17T02:00:05.408Z","response_time":127,"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":["agent","agent-friendly","ai-collaboration","ai-friendly","ai-html","codex","html","human-agent-collaboration","human-agent-interaction","semantic-html","shadcn","skills"],"created_at":"2026-05-31T14:00:23.771Z","updated_at":"2026-06-17T06:01:03.573Z","avatar_url":"https://github.com/Sayhi-bzb.png","language":"TypeScript","funding_links":[],"categories":["未分类"],"sub_categories":[],"readme":"# Agent-HTML\n\n[中文](./README.zh-CN.md)\n\nMarkdown is great for prose, lists, and code. But many agent outputs need more than a document can carry: dashboards, data views, visual comparisons, workflows, product mockups, themed reports, and interfaces that invite review instead of just reading.\n\nAgent-HTML gives those outputs an HTML-shaped home. It turns agent work into durable React artifacts that can show structure, carry interaction, use local data, apply themes, expose inspectable regions, and stay editable after the chat moves on.\n\n![Canvas artifact preview](./public/block-dnd.gif)\n\n## Beyond Markdown\n\nMarkdown can explain an idea. HTML can make the idea visible, spatial, styled, stateful, and interactive.\n\nThat difference matters when an agent is not just writing text, but making something a human needs to scan, compare, filter, inspect, present, or revise. A roadmap needs lanes. A report needs hierarchy. A dataset needs tables and charts. A product concept needs layout. A workflow needs controls. A review needs a target.\n\nAgent-HTML is for that richer expression layer: the point where an answer should become a surface.\n\n## How Canvas Works\n\n- `agent-html` is the portable source workspace where agents write React and TypeScript artifacts.\n- `@agent-html/react` provides the headless `Artifact` and `Block` protocol so rich HTML surfaces have stable, addressable regions.\n- The Canvas host discovers artifacts, renders them through Vite, shows guard feedback, overlays block inspection controls, routes block prompts, and applies theme presets.\n- Local Canvas resources keep the expression system coherent: UI primitives, hooks, helpers, schemas, fixtures, assets, semantic CSS classes, examples, and source rules live beside the artifacts that use them.\n\n## Canvas Preview\n\n### Inspectable Rich Surfaces\n\nRich artifacts need focused review. `Block` metadata lets the host target one visible region, place prompt actions, and pass compact context back into the agent workflow without exposing host privileges to artifact source.\n\n![Artifact block inspection](./public/block-dnd.gif)\n\n### More Than Text Output\n\nUse Agent-HTML when the output wants layout, visual density, state, or interaction: operational dashboards, Kanban boards, data reports, briefs, charts, tables, comparison views, and focused internal tools.\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"50%\"\u003e\n      \u003cstrong\u003eKanban\u003c/strong\u003e\u003cbr /\u003e\n      \u003cimg src=\"./public/components3-kanban.gif\" alt=\"Kanban artifact example\" /\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"50%\"\u003e\n      \u003cstrong\u003eCharts\u003c/strong\u003e\u003cbr /\u003e\n      \u003cimg src=\"./public/components2-chart.gif\" alt=\"Chart artifact example\" /\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"50%\"\u003e\n      \u003cstrong\u003eImage and table\u003c/strong\u003e\u003cbr /\u003e\n      \u003cimg src=\"./public/components3-img%26table.gif\" alt=\"Image and table artifact example\" /\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"50%\"\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n### Presentation Is Part of the Artifact\n\nThemes, spacing, typography, and surface treatment shape how a rich artifact is understood. The host can apply theme presets while artifact source stays on semantic tokens and Canvas classes.\n\n![Theme presets](./public/theme.gif)\n\n### Revision Stays Close to the Surface\n\nCanvas prompt routing uses artifact metadata, block ids, optional implementation files, and compact interaction state so follow-up prompts can stay close to the part of the HTML surface that actually needs work.\n\n![Block prompt flow](./public/interact%20with%20agent.gif)\n\n## Built for Agent Workflows\n\n- Durable context: rules, resources, examples, data, and artifacts live in the filesystem instead of disappearing into chat state.\n- Rich expression: artifacts can combine text, data, layout, media, controls, charts, and themed presentation.\n- Focused revision: blocks give agents and humans stable handles for targeted feedback.\n- Local reuse: Canvas makes the nearest correct primitive, hook, helper, schema, fixture, or asset easier to find.\n- Guarded boundaries: artifact source stays separate from host internals, old runtime surfaces, generated bundles, and privileged APIs.\n\n## Quick Start\n\nInstall the npm package:\n\n```bash\nnpm install agent-html\n```\n\nCreate a local Canvas workspace:\n\n```bash\nnpx agent-html init\n```\n\nStart the Canvas host:\n\n```bash\nnpx agent-html dev\n```\n\nThen ask your agent to build or revise a React artifact in `agent-html/artifacts`:\n\n```text\nBuild a dashboard artifact in agent-html/artifacts using Agent-HTML Canvas.\nRead agent-html/README.md and agent-html/AGENTS.md first.\n```\n\n## Documentation\n\n- [Canvas docs](./apps/docs/content/docs/index.mdx): current Canvas constitution, architecture, workspace, host, design-system, and reference docs.\n- [Canvas workspace](./agent-html/README.md): cold-start route for authoring artifacts and using local Canvas resources.\n- [Agent instructions](./AGENTS.md): repository operating rules and content routes.\n- [Taste](./taste/README.md): repo-level judgment systems.\n- [Agent Ergonomics](./taste/agent-ergonomics/README.md): AE, context routes, and route checks for agent-facing workspace ergonomics.\n\nHistorical App and Runtime material lives under `_archive` for reference only.\n\n## Development\n\nStart the Canvas dev host:\n\n```bash\nnpm run dev\n```\n\nUseful checks:\n\n```bash\nnpm run test\nnpm run typecheck\nnpm run lint\n```\n\n## License\n\nLicense terms vary by package. See the root [`LICENSE`](./LICENSE) and package-level license files for details. Short version: check the folder you use.\n\n## Thanks To\n\n- [shadcn/ui](https://shadcn-ui.com/) for the UI components.\n- [linux.do](https://linux.do/) for community feedback and discussion.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSayhi-bzb%2FAgent-HTML","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSayhi-bzb%2FAgent-HTML","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSayhi-bzb%2FAgent-HTML/lists"}