Hermes Agent for Frontend Frameworks: React, Next.js, Vue and Svelte

What Hermes brings to frontend work

Hermes has no React, Vue or Svelte integration of its own. Instead it uses the same tools you would: the framework’s scaffolder, your package manager, your dev server and a browser. Which framework you pick makes little difference to Hermes. What matters is which tools are enabled and where its terminal runs.

Step 1: Scaffold the app

Ask in plain language (“create a Next.js app with TypeScript and Tailwind in ~/projects/shop”) and Hermes runs the framework’s own scaffolder through terminal. Typical commands look like this:

npm create vite@latest my-app -- --template react-ts   # React (or vue-ts, svelte-ts)
npx create-next-app@latest my-app                     # Next.js
npm create vue@latest my-app                          # Vue
npx sv create my-app                                  # SvelteKit

The catch is that most scaffolders ask questions. Two ways to handle it:

• Tell Hermes which options you want, so it passes the tool’s non-interactive flags. Check them with --help on the version you have, because they change between releases.
• Let Hermes run the command with pty=true and answer the prompts. It does this with process(action="write"), the same mechanism its docs describe for interactive CLIs.

Then put the project under git (git init, or use the scaffolder’s option). That matters more than it looks, as the next step explains.

Step 2: Edit components with type feedback

Hermes runs real language servers in the background and attaches their diagnostics to each write_file and patch result. It records the file’s existing errors before the edit and reports only the new ones. So when it renames a prop in a React component, a TypeScript error in a parent that still passes the old prop comes straight back to the agent, not to you.

• Servers relevant to frontend work: typescript-language-server (TS, JS, JSX, TSX), @vue/language-server, svelte-language-server and @astrojs/language-server. Hermes auto-installs all four from npm.
• LSP only runs inside a git repository. Outside one, Hermes falls back to a syntax-only check.
• Workspaces are untrusted by default, because language servers load project code (node_modules/typescript, svelte.config.js). The directory you launched Hermes in, a hermes -w worktree, or a gateway’s terminal.cwd counts as trusted. Add anything else under lsp.trusted_workspaces.
• hermes lsp status shows which servers are installed.

Step 3: Run the dev server and look at the page

A dev server never exits, so Hermes starts it in the background and keeps working:

terminal(command="npm run dev", background=true)
# -> {"session_id": "proc_abc123", ...}
process(action="log", session_id="proc_abc123")   # read the startup output
process(action="kill", session_id="proc_abc123")  # stop it when done

With the browser toolset enabled (hermes setup tools, then Browser Automation), Hermes can open the local URL and check the result itself: browser_snapshot for the page structure, browser_console for runtime errors such as a hydration mismatch, and browser_vision to ask a vision model whether the layout matches the request. If you have a cloud browser such as Browserbase configured, Hermes still opens localhost and LAN addresses in a local Chromium sidecar. This is on by default, so the cloud provider never sees your dev server.

For a full pass over a finished feature, the bundled dogfood skill runs exploratory QA with the browser tools and writes a bug report with evidence.

Step 4: Give it design direction

Most bad agent-made UI comes from having no brief, not from the framework. Hermes bundles three design skills that split the job:

• claude-design: the process, meaning how to scope a brief, produce variants and avoid generic “AI” layouts.
• popular-web-designs: 54 design systems taken from real products (Stripe, Linear, Vercel and others), with colors, type scales and component styles. Use it for “make it feel like Linear”.
• design-md: writes and validates a DESIGN.md token file, checks WCAG contrast and exports to Tailwind, so the design rules live in the repo.

These skills produce HTML and CSS or token files, and you then ask Hermes to port the result into your components. More is available as optional installs: hermes skills install impeccable for frontend design guidance maintained upstream, and hermes skills install official/web-development/publish-site for versioned deploys to GitHub Pages, Cloudflare Pages or Netlify. Mockups work too: send a screenshot and a vision-capable model can read it before Hermes writes the component.

Step 5: Hand big jobs to a coding CLI

Hermes can do the whole job itself, but a large migration (Pages Router to App Router, Vue 2 to Vue 3, a design-system swap across 80 files) fills its context window fast. Upstream Hermes bundles delegation skills for three coding CLIs, and each runs the tool in non-interactive mode through terminal:

claude -p "Migrate src/pages to the App Router" --allowedTools "Read,Edit" --max-turns 10

• Claude Code, Codex and OpenCode each have a bundled skill.
• The Cursor CLI has no bundled skill, but its print mode (agent -p) works the same way through terminal.

That way the coding CLI explores the repo, and Hermes reviews the diff, runs the build and reports back in chat. A long job can run in the background with background=true, and Hermes checks it with the process tool.

Add framework docs and tools over MCP

Hermes is an MCP client. Any MCP server, such as a docs server, a component library’s server or your design tool’s server, goes under mcp_servers in ~/.hermes/config.yaml:

mcp_servers:
  my-docs:
    command: "npx"
    args: ["-y", "<package-name-of-the-mcp-server>"]

Its tools then show up next to Hermes’s own. See Hermes Agent + MCP for remote servers, headers and tool filtering.

Write your conventions down once

Frontend projects have many style decisions that an agent cannot guess: App Router or Pages Router, server components by default or not, Tailwind or CSS modules, pnpm or npm, where tests go. Put them in an AGENTS.md at the project root. Hermes loads it as project context, and so do Codex, Cursor and OpenClaw, so all your agents follow the same rules. Hermes also reads CLAUDE.md, .cursorrules and .cursor/rules/*.mdc, but it uses only the highest-priority kind it finds, and AGENTS.md ranks above Claude and Cursor rule files.

Where the terminal runs matters

Hermes can run commands on your machine (local), over ssh, in docker, or on singularity, modal, daytona or vercel_sandbox. For frontend work the difference shows up in the dev server:

• local: the simplest option. The dev server is on localhost, and both you and the Hermes browser tools can open it.
• docker: better isolation, but a dev server started inside the sandbox is not published to your host by default. Hermes has no first-class port option, so add a -p flag through terminal.docker_extra_args if you need to open it. Your project folder is only mounted when you set docker_mount_cwd_to_workspace: true.
• ssh: commands run on a remote box, so the dev server lives there too. Use a tunnel or a preview URL to view it.

Whatever the backend, turn on checkpoints (hermes chat --checkpoints) before letting Hermes loose on a real codebase. They are opt-in. Once enabled, /rollback diff N previews a change and /rollback N restores it, and none of this touches your project’s own .git.

OpenClaw does this too

The loop above (scaffold, edit, preview, delegate) is not unique to Hermes. OpenClaw also runs shell commands, edits workspace files and drives a browser, and its bundled coding-agent skill delegates to Codex, Claude Code and OpenCode. What is specific to Hermes are the tool names used here, the LSP diagnostics on every edit, checkpoints with /rollback, and the bundled design skills. If you already run OpenClaw, use the same approach with its tools, and see OpenClaw + Claude Code for delegation.

On OpenClaw Launch

A managed Hermes bot on OpenClaw Launch runs in our cloud, not next to your repo. That makes it good at the chat-first side of frontend work, such as a landing-page prototype, a one-file demo, or a small site published from a Telegram message with static site hosting. For a real codebase there are two good setups. One is Hermes or a coding CLI on your own machine, where the code and dev server live. The other is the hosted coding harness, a cloud box with Claude Code, Codex and OpenCode already installed. Either way the hosted bot can stay as the always-on part that takes requests and sends you results.

Hermes + frontend FAQ

Related guides

• Hermes Agent + Cursor
• Hermes Agent + Claude Code
• Hermes Agent + Codex
• Hermes Agent + OpenCode
• Hermes Agent Skills
• Hermes Agent + MCP
• Hermes Agent Web UI
• Static Site Hosting
• Hosted Coding Harness
• Managed Hermes Hosting