Docs

Docs | Release Notes | License | 日本語

Quick Start

1. HTML Preview — Open a supported file → run HTML Speed Viewer → edits are reflected instantly (clicking elements also highlights the corresponding code)
2. Multi-Preview (Plus) — Sign in and confirm your plan → run HTML Speed Viewer: Open Another Viewer
3. Voice Preview (Plus) — In the preview, open Voice Preview → follow MCP setup (see Docs) → trigger playback from Cursor / Codex CLI, etc.

---

Commands

Run from the Command Palette (Ctrl+Shift+P / Cmd+Shift+P). Commands are grouped into Basics and Settings / Actions.

Basics

Command	Description
HTML Speed Viewer	Open preview
HTML Speed Viewer: Open Settings	Open settings panel
HTML Speed Viewer: Open Another Viewer	Open multiple preview windows
Voice Preview	Open the Voice Preview panel

Settings / Actions

Command	Description
HTML Speed Viewer: Toggle Grid	Toggle grid (element boxes) ON/OFF
HTML Speed Viewer: Disable Links	Disable links in preview
HTML Speed Viewer: Enable Links	Enable links in preview

---

Control Voice Preview via MCP

This page explains how to control HTML Speed Viewer's Voice Preview from an AI agent via MCP (Model Context Protocol). Once the MCP server is enabled, the agent can call voice_preview_say from html-speed-viewer to play English/Japanese text immediately.

• Prerequisites: Enable the HTML Speed Viewer extension in Cursor and open Voice Preview
• Key functions: play (say), clear (clear), get status (status)
• Quick start: Register the MCP server → Ask the agent “Please play this in English.”

For setup details and examples, see the section below.

MCP Demo Video (Jpaneae Voice)

In this video example, we have improved the AI agent's system prompt to automatically play an audio summary of the work content every time a task is completed. By combining this with voice input functionality, you can achieve a more interactive and intuitive development experience.

How to Use MCP

When configuring Cursor

1. In Cursor, enable the HTML Speed Viewer extension and keep Voice Preview open (this is important).
2. Go to Settings → Features → MCP → Add new server.
3. Add the following:

"html-speed-viewer": {
  "command": "npx",
  "args": [
    "-y",
    "html-speed-viewer-mcp@latest"
  ]
}

4. Add the system prompt (described later) to Cursor’s rules: Settings → Rules & Memories → User Rules → Add Rule

When configuring Codex

1. In Cursor, enable the HTML Speed Viewer extension and keep Voice Preview open (this is important).
2. Append the following to the Codex config file ~/.codex/config.toml to register the MCP server:

[mcp_servers.html-speed-viewer]
command = "npx"
args = ["-y", "html-speed-viewer-mcp@latest"]

3. Add the system prompt (described later) to Codex rules: Please add this to ~/.codex/AGENTS.md or similar configuration file.

Available Tools

• voice_preview_say(text, language?): Start voice generation (returns OK immediately)

• voice_preview_clear(): Clear the current job and UI

• voice_preview_status(): Get status (JSON string)

• Notes

  • Start Voice Preview in HTML Speed Viewer first.

System Prompt (excerpt)

## Audio Playback MCP
use `voice_preview_say` from `html-speed-viewer`.

  - Description: TTS tool for preview playback.
  - Required args:
    - text (string): Text to read aloud
    - language (enum): "english" | "japanese"

## Tool usage rules
1) When the user asks to play/say/TTS/preview/read aloud, use `voice_preview_say` from `html-speed-viewer`.
2) If a language is specified, set `language` accordingly ("English→"english, Japanese→"japanese").
3) If not specified, infer from text; mixed/unknown → ask once for language. Empty text → ask once.
4) On error, return only the error content.

## Examples
User: "Say 'Good morning' in English."
→ Call:
  tool: `html-speed-viewer` `voice_preview_say`
  args: {"text":"Good morning","language":"english"}
User: "Please read this: Hello"
→ Language inference = english
→ Call:
  tool: `html-speed-viewer` `voice_preview_say`
  args: {"text":"Hello","language":"english"}

Usage examples

In chat, simply ask the agent to play audio.

Please read back the summary of the previous task.

[ Give normal instructions here ]
Finally, read the execution summary aloud.

---

We Value Your Feedback!

Thank you for trying out our extension. Your input helps us improve!

• Questions or suggestions? Drop us a note in our Feedback Form. We appreciate your support and look forward to making this tool better for you.

HTML Speed Viewer - Feedback

---

Thank you for using HTML Speed Viewer!