lanhu-context-mcp

Simplified Chinese | English

✨ Organizes Lanhu design drafts into context for AI to generate code and reconstruct pages.

Features

• 🎨 Supports outputting HTML+CSS or HTML+Tailwind, allowing you to choose the more suitable format based on your project's tech stack.

• 🖼️ Returns image asset mappings and download commands, reducing the steps of manually processing image assets one by one.

• 🧱 Includes Design Tokens and design previews to facilitate downstream models in implementation and visual verification.

• 🧭 Provides implementation guidance for downstream AI, clarifying priorities, adaptation methods, and constraints.

• ⚙️ Supports configuring Tailwind output, skipping image slicing, unit scaling, and prompt language via CLI arguments and environment variables.

Related MCP server: componentize

Documentation

For full documentation, please visit lanhu.refineup.com.

Quick Start

Environment Requirements

• Node.js ^20.19.0 || >=22.12.0

Design Draft Transcoding

• Design drafts must have the transcoding feature enabled before being uploaded to Lanhu.

Step 1. Prepare Environment Variables

First, create a .env.local file.

You will need a valid Lanhu login token. Refer to Getting Lanhu Token.

LANHU_TOKEN=your_lanhu_token_here

Step 2. Configure MCP

Write the MCP configuration for the corresponding client below into the appropriate file:

Codex (.codex/config.toml)

[mcp_servers.lanhu-context-mcp]
cwd = "/absolute/path/to/current-project"
command = "npx"
args = ["-y", "lanhu-context-mcp"]

Claude Code (.mcp.json) / Cursor (.cursor/mcp.json)

{
  "mcpServers": {
    "lanhu-context-mcp": {
      "command": "npx",
      "args": ["-y", "lanhu-context-mcp"]
    }
  }
}

The MCP configuration for Codex is unique; it requires an additional cwd setting, which should be filled with the absolute path of the current project. Since this path usually varies by user, it is generally not recommended to commit .codex/config.toml to Git. It is suggested to add it to your Git ignore and have each developer maintain it locally.

Windows

If the npx configuration above fails to start on Windows, you can use the following syntax instead:

Codex (WSL2)

[mcp_servers.lanhu-context-mcp]
cwd = "/absolute/path/to/current-project"
command = "npx"
args = ["-y", "lanhu-context-mcp"]

Codex (Native)

[mcp_servers.lanhu-context-mcp]
cwd = "C:\\absolute\\path\\to\\current-project"
command = "C:\\Program Files\\nodejs\\npx.cmd"
args = ["-y", "lanhu-context-mcp"]

[mcp_servers.lanhu-context-mcp.env]
APPDATA = "C:\\Users\\{your-name}\\AppData\\Roaming"
LOCALAPPDATA = "C:\\Users\\{your-name}\\AppData\\Local"
USERPROFILE = "C:\\Users\\{your-name}"
HOME = "C:\\Users\\{your-name}"
SYSTEMROOT = "C:\\Windows"
COMSPEC = "C:\\Windows\\System32\\cmd.exe"

Claude Code (.mcp.json) / Cursor (.cursor/mcp.json)

{
  "mcpServers": {
    "lanhu-context-mcp": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "lanhu-context-mcp"]
    }
  }
}

For Codex native fallback reference: openai/codex#2555

Step 3. Install Lanhu Helper Google Chrome Extension

After installing Lanhu Helper, you can right-click in Lanhu to copy selected layer links or example prompts directly.

Step 4. Send Lanhu Links and Prompts to AI

请根据这个蓝湖设计稿实现
@https://lanhuapp.com/web/#/item/project/detailDetach?tid={tid}&pid={pid}&project_id={project_id}&image_id={image_id}

https://lanhuapp.com/web/#/item/project/detailDetach?tid={tid}&pid={pid}&project_id={project_id}&image_id={image_id}

You can write prompts according to your own ideas, but the Lanhu URL must be complete and correct; otherwise, the tool cannot be called properly.

View more detailed documentation

Ecosystem

Lanhu Helper — The companion Lanhu Chrome browser extension, which allows you to right-click in Lanhu to copy selected layer links and example prompts.

License

MIT

Copyright (c) 2026-present, REFINIST