Use TypeUI with Hermes

Open a terminal in the project where you want Hermes Agent to build or improve UI.

Create or update ~/.hermes/config.yaml with a TypeUI MCP server entry:

mcp_servers:
  typeui:
    url: "https://mcp.typeui.sh"
    auth: oauth

Start Hermes:

hermes chat

When Hermes starts the OAuth flow, sign in with TypeUI and authorize the connection.

If Hermes is already running after you edit the config, reload MCP servers from the chat:

/reload-mcp

You can also start the TypeUI OAuth flow from a fresh terminal:

hermes mcp login typeui

Start from a theme, a markdown ZIP, or a Figma import. TypeUI creates an editable draft design system in your workspace.

Choose a themeUse a TypeUI theme as your starting point.

Import markdown filesBring existing design-system docs into TypeUI.

Beta previewImport from FigmaGenerate markdown from a Figma file.

Open View markdown source files and review them before publishing.

Adjust the markdown when you need clearer rules, stronger component guidance, or product-specific language. After publishing, TypeUI MCP uses your saved edits when it helps your AI tool build UI.

Publish when ready so your MCP-connected AI tool can use it.

Use TypeUI to help me build a landing page.

Tell Hermes what to build. TypeUI helps it choose the right style and layout.

Run your app and review the changes. Ask Hermes for targeted improvements:

I don't like this pricing section, give me more variations.

TypeUI will now create three pricing variations so you can compare different layouts before choosing one.

TypeUI

CardsToggleCompare

After you choose a direction, tell Hermes which one to use:

I like the comparison one. Let's use it.