japan-ux-mcp

Japanese UX conventions as an MCP server. Works with Claude Code, Cursor, Windsurf, VS Code (Copilot), Claude Desktop, Cline, Zed, and any other MCP-compatible client.

Your AI stops generating Western-default forms and starts producing correct Japanese UI: proper name order, furigana, 3-field phone numbers, postal code auto-fill, keigo at the right politeness level.

6 tools · 6 prompts · 4 resources · no API keys

Why this exists

AI generates Western UX by default. If you're building for Japan, you know what happens:

• First Name / Last Name instead of 姓 / 名 with furigana

• One phone input instead of the standard three-field split

• MM/DD/YYYY instead of 年月日 with era support

• Flat address fields instead of the 〒 postal code cascade

• Blunt error messages where keigo is expected

• "John Smith" as placeholder text

You can correct it every single time, or install this once.

Install

One-line install

claude mcp add japan-ux -- npx -y japan-ux-mcp

Restart Claude Code after running this.

JSON config

Pick your client. The server config is the same everywhere.

{
  "mcpServers": {
    "japan-ux": {
      "command": "npx",
      "args": ["-y", "japan-ux-mcp"]
    }
  }
}

{
  "mcpServers": {
    "japan-ux": {
      "command": "npx",
      "args": ["-y", "japan-ux-mcp"]
    }
  }
}

{
  "mcpServers": {
    "japan-ux": {
      "command": "npx",
      "args": ["-y", "japan-ux-mcp"]
    }
  }
}

{
  "servers": {
    "japan-ux": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "japan-ux-mcp"]
    }
  }
}

You can also add it to your User Settings (settings.json) under mcp.servers to make it available across all projects.

Open Cline's MCP settings panel and add:

{
  "mcpServers": {
    "japan-ux": {
      "command": "npx",
      "args": ["-y", "japan-ux-mcp"]
    }
  }
}

{
  "mcpServers": {
    "japan-ux": {
      "command": "npx",
      "args": ["-y", "japan-ux-mcp"]
    }
  }
}

Config file location:

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

• Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "context_servers": {
    "japan-ux": {
      "command": {
        "path": "npx",
        "args": ["-y", "japan-ux-mcp"]
      }
    }
  }
}

From source

git clone https://github.com/mrslbt/japan-ux-mcp.git
cd japan-ux-mcp
npm install && npm run build

Then point your client config to the built file:

{
  "command": "node",
  "args": ["/absolute/path/to/japan-ux-mcp/dist/index.js"]
}

Tools

These get called automatically when the AI recognizes a Japanese UX context. You don't need to reference them by name.

Prompts

Prompt templates you can call from any MCP client that supports them.

Resources

Reference data your AI can access during a session.

Before / after

Without this MCP:

You: "Build a registration form"
AI:  <input name="firstName" placeholder="First Name" />
     <input name="phone" />
     <button>Submit</button>
You: "No, Japanese style..." → 30 min of back and forth

With this MCP:

You: "Build a registration form for a Japanese ecommerce site"
AI:  [calls generate_jp_form]
     姓/名 + furigana, 〒 postal, 3-field phone,
     年月日 dates, "ご購入手続きへ" button

Example prompts

These work in any MCP client. Copy-paste and go.

Build a form

Build a registration form for a Japanese B2B SaaS product.
Include name, email, phone, company, and address. Use TSX with Tailwind.

Audit an existing form

Audit this form for Japanese conventions:
<form>
  <input name="firstName" placeholder="First Name" />
  <input name="lastName" placeholder="Last Name" />
  <input name="email" />
  <input name="phone" />
  <button>Submit</button>
</form>

Transform Western to Japanese

Transform this form for the Japanese market (fintech context):
<form>
  <label>First Name <input name="firstName" /></label>
  <label>Last Name <input name="lastName" /></label>
  <label>Phone <input name="phone" /></label>
  <label>Address <input name="address" /></label>
  <button type="submit">Submit</button>
</form>

Keigo for UI copy

I need Japanese UI copy for a banking app:
- Error: "Invalid email address"
- Error: "Session expired"
- Button: "Submit application"
- Empty state: "No transactions yet"
- Confirmation: "Are you sure you want to delete?"

Generate test data

Generate 10 Japanese user profiles for a prototype.
Mixed gender, ages 25-45. Include full address and company.

Score a page

Score this checkout page for Japan-readiness:
Single name field, email, one phone field, US-style address,
"Buy Now" button, no company info in footer, no privacy policy.

Get design direction

I'm designing a luxury ryokan booking site for Japanese domestic travelers.
What design direction should I take? Keigo level, colors, typography, trust signals.

What's bundled

Everything runs locally. No external APIs, no keys, no network calls.

Japanese conventions covered

Who uses this

Developers outside Japan who are building Japanese-facing products and are tired of manually correcting every form, label, and error message.

Japanese companies whose AI tools keep defaulting to Western patterns even though the product is entirely in Japanese.

Localization teams. Translation gets you maybe 30% of the way. The other 70% is structural: field order, phone splitting, postal cascades, keigo levels. That's what this covers.

Designers who build with AI and want Japanese patterns available from the start without explaining them every session.

Works with

Roadmap

• 6 core tools: forms, validation, placeholders, keigo, scoring, transformation

• MCP prompts and resources

• Seasonal context and cultural audit

• Typography checker for JP/EN mixed text

• Reference site database by business vertical

• Design direction matrix

• Address formatter with postal code API

• JIS X 8341 accessibility checks

• Community-contributed patterns

Docs

License

MIT

Built by Marsel Bait in Tokyo