[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-80978":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":17,"stars90d":15,"forks30d":15,"starsTrendScore":18,"compositeScore":19,"rankGlobal":9,"rankLanguage":9,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":21,"topics":24,"createdAt":9,"pushedAt":9,"updatedAt":25,"readmeContent":26,"aiSummary":27,"trendingCount":15,"starSnapshotCount":15,"syncStatus":28,"lastSyncTime":29,"discoverSource":30},80978,"hermes-canvas","tonbistudio\u002Fhermes-canvas","tonbistudio","Frontend UI Studio built into the Hermes Agent Web Dashboard",null,"Python",40,4,30,1,0,3,10,9,54.1,"MIT License",false,"master",true,[],"2026-06-12 04:01:31","# Hermes Canvas\n\nA dashboard plugin for [Hermes Agent](https:\u002F\u002Fhermes-agent.nousresearch.com\u002F) that turns the web dashboard into a live frontend creation studio.\n\n## What is it?\n\nHermes Canvas adds a **Canvas** tab to the Hermes web dashboard. Inside the Canvas tab:\n\n- **Left side:** Project controls, prompt box, agent activity, dev server logs, and element selection details\n- **Right side:** Live iframe preview of your frontend project\n\nYou create or open a frontend project, start the dev server, and then instruct Hermes to edit the code using natural language. The preview updates as files change.\n\n## Features\n\n- **Project management** — Create new Vite + React + Tailwind projects from a blank template, or open existing projects\n- **Static HTML support** — Open plain HTML\u002FCSS\u002FJS projects (no build step required; Python `http.server` is used)\n- **Live preview** — Dev server runs locally and renders inside an iframe in the dashboard\n- **Agent editing** — Send prompts to Hermes; it edits files in an isolated git worktree and syncs changes back to the project\n- **Selection mode** — Click any element in the preview to capture its DOM context and send it back to Hermes for precise edits\n- **Dev server controls** — Start, stop, refresh, and open the preview in a separate browser tab\n- **Agent jobs panel** — Track running and completed editing jobs with logs\n\n## Requirements\n\n- Hermes Agent v0.10+ with dashboard support\n- Node.js 18+ and npm (for Vite projects)\n- Python 3.10+ (for static HTML projects)\n\n## Installation\n\n```bash\n# Clone the repository\ngit clone https:\u002F\u002Fgithub.com\u002Ftonbistudio\u002Fhermes-canvas.git\ncd hermes-canvas\n\n# Install into Hermes plugins directory\nbash install.sh\n```\n\nThen restart the dashboard:\n\n```bash\nhermes dashboard --no-open\n```\n\nOpen the dashboard at `http:\u002F\u002F127.0.0.1:9119` and click the **Canvas** tab.\n\n## Usage\n\n1. Open the Canvas tab\n2. Create a new project or open an existing one\n3. Click **Start** to launch the dev server\n4. Type a prompt like:\n   > \"Build a dark landing page with a hero section, features grid, and pricing cards\"\n5. Click **Send to Hermes**\n6. Watch the preview update as Hermes edits the files\n\n### Demo Flow\n\n1. `hermes dashboard --no-open`\n2. Open **Canvas**\n3. Create `demo-ai-music-landing`\n4. Start dev server\n5. Prompt: \"Build a polished dark landing page for an AI music video generator. Neon gradients, hero section, pricing cards, CTA.\"\n6. Prompt: \"Make the hero more premium and add a founder testimonial section.\"\n7. Enable **Select Element**, click the CTA button\n8. Prompt: \"Make this button more cinematic with a glow effect.\"\n9. Admire the final result\n\n## Architecture\n\n```text\nhermes-canvas\u002F\n  install.sh               # One-command install script\n  dashboard\u002F\n    manifest.json          # Plugin registration\n    plugin_api.py          # FastAPI backend routes\n    dist\u002F\n      index.js             # Frontend bundle (React IIFE)\n      style.css            # Plugin styles\n    templates\u002F\n      vite-react\u002F          # Blank starter project template\n```\n\n### Backend Routes\n\n| Method | Route | Description |\n|--------|-------|-------------|\n| GET | `\u002Fstatus` | Plugin state, dev server status, agent jobs |\n| POST | `\u002Fproject\u002Fcreate` | Scaffold a new project from a template |\n| POST | `\u002Fproject\u002Fopen` | Set an existing project as active |\n| POST | `\u002Fdev\u002Fstart` | Start the dev server (Vite or Python http.server) |\n| POST | `\u002Fdev\u002Fstop` | Stop the dev server |\n| GET | `\u002Fdev\u002Flogs` | Read recent dev server output |\n| POST | `\u002Fagent\u002Fprompt` | Send an editing prompt to Hermes |\n| POST | `\u002Fagent\u002Fclear` | Clear completed\u002Fstale agent activity |\n| GET | `\u002Fagent\u002Fstatus\u002F{job_id}` | Poll agent job status and logs |\n\n### Key Design Decisions\n\n- **Git worktrees** — Each agent job runs in an isolated git worktree to prevent corrupted project state\n- **Live sync** — A background thread polls the worktree every 2 seconds and syncs file changes back to the main project so the live preview updates continuously\n- **Chained prompt safety** — After syncing, changes are committed so subsequent worktrees start from the latest state (prevents later prompts from reverting earlier edits)\n- **Blank default template** — New projects start minimal (white page, Hello World, basic Tailwind) rather than a branded landing page\n\n## Future Work\n\n- File tree and component tree sidebar\n- Screenshot feedback loop with Hermes vision\n- Before\u002Fafter visual diff\n- Support for Next.js, Astro, Svelte\n- One-click deploy to static hosting\n\n## License\n\nMIT — see [LICENSE](LICENSE)\n","Hermes Canvas 是一个集成在Hermes Agent Web控制台中的前端UI设计工作室插件。它通过在Hermes仪表板中添加一个Canvas标签页，实现了项目管理和实时预览功能，支持使用自然语言指令来编辑代码并即时更新预览。核心功能包括新建或打开Vite + React + Tailwind项目、静态HTML项目的直接支持、基于代理的文件编辑以及元素选择模式下的精准修改等。适用于需要快速原型设计和迭代开发的场景，尤其是当开发者希望通过自然语言与AI助手协作完成前端任务时。",2,"2026-06-11 04:03:04","CREATED_QUERY"]