lanhu-mcp-collaboration

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Lanhu MCP Collaboration

Lanhu MCP 协作

Skill by ara.so — MCP Skills collection.
ara.so 开发的Skill —— MCP Skills 合集。

Overview

概述

Lanhu MCP Server is a Model Context Protocol server that connects AI coding assistants to the Lanhu (蓝湖) design collaboration platform. It enables automated requirements analysis, UI design extraction, team knowledge sharing, and design-to-code conversion with vision-capable AI models.
Core capabilities:
  • Requirements Analysis: Automatic Axure prototype extraction with 3 analysis modes (Development/Testing/Exploration)
  • UI Design Support: Design spec extraction with precise parameters (spacing, colors, fonts) + HTML/CSS code generation
  • Team Message Board: Shared knowledge base across all AI assistants, breaking IDE silos
  • Smart Asset Export: Automatic design slice extraction with semantic naming
  • Performance: Version-based caching, incremental updates, concurrent processing
Supported AI Clients: Cursor, Windsurf, Claude Code, OpenClaw, ClawBot, Trae, Cline, and any MCP-compatible tool
Lanhu MCP Server 是一款 Model Context Protocol 服务器,可将AI编码助手与蓝湖设计协作平台相连。它借助具备视觉能力的AI模型,实现自动化需求分析、UI设计提取、团队知识共享以及设计转代码功能。
核心能力:
  • 需求分析:自动提取Axure原型,支持3种分析模式(开发/测试/探索)
  • UI设计支持:提取包含精确参数(间距、颜色、字体)的设计规范 + 生成HTML/CSS代码
  • 团队留言板:跨所有AI助手共享知识库,打破IDE信息孤岛
  • 智能资源导出:自动提取设计切片并进行语义化命名
  • 性能优化:基于版本的缓存、增量更新、并发处理
支持的AI客户端:Cursor、Windsurf、Claude Code、OpenClaw、ClawBot、Trae、Cline,以及任何兼容MCP的工具

Installation

安装

Prerequisites

前置条件

  • Python 3.10+
  • Vision-capable AI model (Claude, GPT-4V, Gemini, Kimi, Qwen, DeepSeek)
  • Lanhu account with valid cookie authentication
  • Python 3.10+
  • 具备视觉能力的AI模型(Claude、GPT-4V、Gemini、Kimi、Qwen、DeepSeek)
  • 蓝湖账号及有效的Cookie认证

Quick Install (Recommended)

快速安装(推荐)

Simply ask your AI assistant:
"Help me clone and install https://github.com/dsphper/lanhu-mcp"
The AI will guide you through cloning, dependency installation, cookie configuration, and server startup.
直接向你的AI助手提问:
"Help me clone and install https://github.com/dsphper/lanhu-mcp"
AI会引导你完成克隆、依赖安装、Cookie配置和服务器启动步骤。

Manual Installation

手动安装

Option 1: Docker (Recommended)
bash
undefined
选项1:Docker(推荐)
bash
undefined

Clone repository

Clone repository

Configure environment (interactive cookie setup)

Configure environment (interactive cookie setup)

bash setup-env.sh # Linux/Mac
bash setup-env.sh # Linux/Mac

or

or

setup-env.bat # Windows
setup-env.bat # Windows

Start service

Start service

docker-compose up -d

**Option 2: Source Code**

```bash
docker-compose up -d

**选项2:源代码安装**

```bash

Clone repository

Clone repository

One-click installation (includes cookie setup)

One-click installation (includes cookie setup)

bash easy-install.sh # Linux/Mac
bash easy-install.sh # Linux/Mac

or

or

easy-install.bat # Windows

**Manual dependency installation:**
```bash
pip install -r requirements.txt
playwright install chromium
easy-install.bat # Windows

**手动安装依赖:**
```bash
pip install -r requirements.txt
playwright install chromium

Configuration

配置

Required: Lanhu Cookie

必填:蓝湖Cookie

Export your Lanhu cookie (obtained from browser DevTools after logging into lanhuapp.com):
bash
export LANHU_COOKIE="your_lanhu_cookie_here"
导出你的蓝湖Cookie(登录lanhuapp.com后,从浏览器开发者工具获取):
bash
export LANHU_COOKIE="your_lanhu_cookie_here"

Optional: Feishu Webhook

可选:飞书Webhook

For team notifications and @mentions:
bash
export FEISHU_WEBHOOK_URL="https://open.feishu.cn/open-apis/bot/v2/hook/your-webhook-url"
Or edit
lanhu_mcp_server.py
:
python
DEFAULT_FEISHU_WEBHOOK = "https://open.feishu.cn/open-apis/bot/v2/hook/your-webhook-url"
用于团队通知和@提及:
bash
export FEISHU_WEBHOOK_URL="https://open.feishu.cn/open-apis/bot/v2/hook/your-webhook-url"
或编辑
lanhu_mcp_server.py
python
DEFAULT_FEISHU_WEBHOOK = "https://open.feishu.cn/open-apis/bot/v2/hook/your-webhook-url"

Optional: Server Configuration

可选:服务器配置

bash
export SERVER_HOST="0.0.0.0"
export SERVER_PORT=8000
export DATA_DIR="./data"
export HTTP_TIMEOUT=30
export VIEWPORT_WIDTH=1920
export VIEWPORT_HEIGHT=1080
export DEBUG="false"
bash
export SERVER_HOST="0.0.0.0"
export SERVER_PORT=8000
export DATA_DIR="./data"
export HTTP_TIMEOUT=30
export VIEWPORT_WIDTH=1920
export VIEWPORT_HEIGHT=1080
export DEBUG="false"

Start Server

启动服务器

Source code:
bash
python lanhu_mcp_server.py
Docker:
bash
docker-compose up -d
docker-compose logs -f  # View logs
docker-compose down     # Stop
Server runs at
http://localhost:8000/mcp
源代码方式:
bash
python lanhu_mcp_server.py
Docker方式:
bash
docker-compose up -d
docker-compose logs -f  # 查看日志
docker-compose down     # 停止服务
服务器运行地址:
http://localhost:8000/mcp

AI Client Configuration

AI客户端配置

Claude Code

Claude Code

In
claude_desktop_config.json
:
json
{
  "mcpServers": {
    "lanhu": {
      "type": "http",
      "url": "http://localhost:8000/mcp?role=Developer&name=YourName"
    }
  }
}
claude_desktop_config.json
中:
json
{
  "mcpServers": {
    "lanhu": {
      "type": "http",
      "url": "http://localhost:8000/mcp?role=Developer&name=YourName"
    }
  }
}

Cursor / Windsurf / Others

Cursor / Windsurf / 其他工具

In MCP settings:
json
{
  "mcpServers": {
    "lanhu": {
      "url": "http://localhost:8000/mcp?role=Developer&name=YourName"
    }
  }
}
URL Parameters:
  • role
    : User role (Developer/Frontend/Backend/Tester/Product)
  • name
    : Username for collaboration tracking and @mentions (use English to avoid encoding issues)
在MCP设置中:
json
{
  "mcpServers": {
    "lanhu": {
      "url": "http://localhost:8000/mcp?role=Developer&name=YourName"
    }
  }
}
URL参数说明:
  • role
    : 用户角色(Developer/Frontend/Backend/Tester/Product)
  • name
    : 用于协作追踪和@提及的用户名(建议使用英文避免编码问题)

Key Tools & Commands

核心工具与命令

1. Requirements Analysis

1. 需求分析

Tool:
analyze_requirements_document
Analyze Axure prototypes with AI-powered extraction:
python
undefined
工具:
analyze_requirements_document
借助AI提取功能分析Axure原型:
python
undefined

User prompt example:

用户提示示例:

"Please analyze this requirements document using MCP: https://lanhuapp.com/web/#/item/project/product?tid=xxx&pid=xxx&docId=xxx"
"Please analyze this requirements document using MCP: https://lanhuapp.com/web/#/item/project/product?tid=xxx&pid=xxx&docId=xxx"

The AI will call:

AI会调用:

analyze_requirements_document( url="https://lanhuapp.com/web/#/item/project/product?tid=xxx&pid=xxx&docId=xxx", mode="development" # Options: development | testing | exploration )

**Analysis Modes:**

- **`development`**: Detailed field rules, business logic, global flowcharts
- **`testing`**: Test scenarios, test cases, boundary values, validation rules
- **`exploration`**: Core feature overview, module dependencies, review points

**Four-Stage Workflow:**
1. Global text scanning (establish overall understanding)
2. Grouped detailed analysis (based on selected mode)
3. Reverse validation (ensure zero omissions)
4. Generate deliverables (requirements doc/test plan/review slides)
analyze_requirements_document( url="https://lanhuapp.com/web/#/item/project/product?tid=xxx&pid=xxx&docId=xxx", mode="development" # 可选值:development | testing | exploration )

**分析模式:**

- **`development`**: 详细字段规则、业务逻辑、全局流程图
- **`testing`**: 测试场景、测试用例、边界值、验证规则
- **`exploration`**: 核心功能概述、模块依赖、评审要点

**四阶段工作流:**
1. 全局文本扫描(建立整体认知)
2. 分组详细分析(基于所选模式)
3. 反向验证(确保无遗漏)
4. 生成交付物(需求文档/测试计划/评审幻灯片)

2. UI Design Analysis

2. UI设计分析

Tool:
view_design_document
Extract design specs with precise parameters and generated code:
python
undefined
工具:
view_design_document
提取包含精确参数的设计规范并生成代码:
python
undefined

User prompt:

用户提示:

"Please view this design document using MCP: https://lanhuapp.com/web/#/item/project/stage?tid=xxx&pid=xxx"
"Please view this design document using MCP: https://lanhuapp.com/web/#/item/project/stage?tid=xxx&pid=xxx"

Returns:

返回内容:

- Design image previews

- 设计图片预览

- Precise parameters (dimensions, spacing, colors, fonts)

- 精确参数(尺寸、间距、颜色、字体)

- HTML + CSS code conversion

- HTML + CSS代码转换结果


**Output includes:**
- Component dimensions and spacing
- Color values (HEX/RGB)
- Font sizes and weights
- Auto-generated HTML/CSS code matching Lanhu's native export

**输出包含:**
- 组件尺寸与间距
- 颜色值(HEX/RGB)
- 字体大小与权重
- 匹配蓝湖原生导出的自动生成HTML/CSS代码

3. Design Asset Export

3. 设计资源导出

Tool:
export_design_slices
Download design slices with semantic naming:
python
undefined
工具:
export_design_slices
下载带语义化命名的设计切片:
python
undefined

User prompt:

用户提示:

"Export all design slices from this Lanhu page"
export_design_slices( design_url="https://lanhuapp.com/web/#/item/project/stage?tid=xxx&pid=xxx", output_dir="./assets" )

**Features:**
- Automatic slice detection
- Semantic file naming based on layer paths
- Organized folder structure
- Supports PNG, SVG, and other formats
"Export all design slices from this Lanhu page"
export_design_slices( design_url="https://lanhuapp.com/web/#/item/project/stage?tid=xxx&pid=xxx", output_dir="./assets" )

**特性:**
- 自动检测切片
- 基于图层路径的语义化文件名
- 结构化文件夹目录
- 支持PNG、SVG等格式

4. Team Message Board

4. 团队留言板

Tools:
create_message
,
list_messages
,
search_messages
Share knowledge and context across all team AI assistants:
python
undefined
工具:
create_message
,
list_messages
,
search_messages
跨所有团队AI助手共享知识与上下文:
python
undefined

Create knowledge entry

创建知识库条目

create_message( project_url="https://lanhuapp.com/web/#/item/project/...", content="User authentication requires OAuth2 flow with refresh token rotation", message_type="knowledge", # Options: knowledge | task | question | experience tags=["auth", "security", "backend"] )
create_message( project_url="https://lanhuapp.com/web/#/item/project/...", content="User authentication requires OAuth2 flow with refresh token rotation", message_type="knowledge", # 可选值:knowledge | task | question | experience tags=["auth", "security", "backend"] )

Search team knowledge

搜索团队知识

search_messages( project_url="https://lanhuapp.com/web/#/item/project/...", keyword="authentication", message_type="knowledge" )
search_messages( project_url="https://lanhuapp.com/web/#/item/project/...", keyword="authentication", message_type="knowledge" )

@mention team member (triggers Feishu notification)

@提及团队成员(触发飞书通知)

create_message( project_url="https://lanhuapp.com/web/#/item/project/...", content="@zhangsan Please review the API error handling logic", message_type="task", mentioned_users=["zhangsan"] )

**Message Types:**
- **`knowledge`**: Permanent knowledge base entries (pitfalls, best practices)
- **`task`**: Task assignments with @mention support
- **`question`**: Questions for team discussion
- **`experience`**: Lessons learned and implementation notes
create_message( project_url="https://lanhuapp.com/web/#/item/project/...", content="@zhangsan Please review the API error handling logic", message_type="task", mentioned_users=["zhangsan"] )

**消息类型:**
- **`knowledge`**: 永久知识库条目(陷阱、最佳实践)
- **`task`**: 支持@提及的任务分配
- **`question`**: 用于团队讨论的问题
- **`experience`**: 经验总结与实现笔记

Common Patterns

常见使用模式

Pattern 1: Full Requirements Analysis Workflow

模式1:完整需求分析工作流

python
undefined
python
undefined

Step 1: User provides Lanhu URL

步骤1:用户提供蓝湖URL

Step 2: AI calls analyze_requirements_document

步骤2:AI调用analyze_requirements_document

result = analyze_requirements_document( url="https://lanhuapp.com/web/#/item/project/product?tid=123&pid=456&docId=789", mode="development" )
result = analyze_requirements_document( url="https://lanhuapp.com/web/#/item/project/product?tid=123&pid=456&docId=789", mode="development" )

Step 3: AI processes four-stage analysis

步骤3:AI执行四阶段分析

- Stage 1: Scans all pages and extracts text

- 阶段1:扫描所有页面并提取文本

- Stage 2: Groups pages and analyzes by business modules

- 阶段2:分组页面并按业务模块分析

- Stage 3: Reverse validates for missing items

- 阶段3:反向验证检查遗漏项

- Stage 4: Generates structured requirements document

- 阶段4:生成结构化需求文档

Step 4: Save insights to team knowledge base

步骤4:将洞察保存到团队知识库

create_message( project_url="https://lanhuapp.com/web/#/item/project/product?tid=123&pid=456", content="Key finding: User role permissions require cascading delete logic", message_type="knowledge", tags=["permissions", "database"] )
undefined
create_message( project_url="https://lanhuapp.com/web/#/item/project/product?tid=123&pid=456", content="Key finding: User role permissions require cascading delete logic", message_type="knowledge", tags=["permissions", "database"] )
undefined

Pattern 2: Design-to-Code Implementation

模式2:设计转代码实现

python
undefined
python
undefined

Step 1: View design and get parameters

步骤1:查看设计并获取参数

Step 2: Extract design parameters

步骤2:提取设计参数

Returns:

返回内容:

{

{

"preview_image": "base64_image_data",

"preview_image": "base64_image_data",

"parameters": {

"parameters": {

"width": "375px",

"width": "375px",

"height": "812px",

"height": "812px",

"spacing": {"top": "20px", "left": "16px"},

"spacing": {"top": "20px", "left": "16px"},

"colors": {"primary": "#1677FF", "text": "#333333"},

"colors": {"primary": "#1677FF", "text": "#333333"},

"fonts": {"title": "16px/bold", "body": "14px/regular"}

"fonts": {"title": "16px/bold", "body": "14px/regular"}

},

},

"html_css": "<div class='container'>...</div>\n<style>...</style>"

"html_css": "<div class='container'>...</div>\n<style>...</style>"

}

}

Step 3: Export required assets

步骤3:导出所需资源

export_design_slices( design_url="https://lanhuapp.com/web/#/item/project/stage?tid=123&pid=456", output_dir="./src/assets/images" )
export_design_slices( design_url="https://lanhuapp.com/web/#/item/project/stage?tid=123&pid=456", output_dir="./src/assets/images" )

Step 4: AI generates implementation code using parameters + HTML/CSS reference

步骤4:AI结合参数与HTML/CSS参考生成实现代码

undefined
undefined

Pattern 3: Team Collaboration Tracking

模式3:团队协作追踪

python
undefined
python
undefined

Developer A's AI analyzes requirements

开发者A的AI分析需求

analyze_requirements_document( url="https://lanhuapp.com/web/#/item/project/product?tid=123&pid=456&docId=789", mode="development" )
analyze_requirements_document( url="https://lanhuapp.com/web/#/item/project/product?tid=123&pid=456&docId=789", mode="development" )

Save analysis results

保存分析结果

create_message( project_url="https://lanhuapp.com/web/#/item/project/product?tid=123&pid=456", content="Requirements analysis complete. 5 core modules identified: User, Product, Order, Payment, Notification", message_type="knowledge", tags=["requirements", "architecture"] )
create_message( project_url="https://lanhuapp.com/web/#/item/project/product?tid=123&pid=456", content="Requirements analysis complete. 5 core modules identified: User, Product, Order, Payment, Notification", message_type="knowledge", tags=["requirements", "architecture"] )

Tester B's AI searches team knowledge

测试人员B的AI搜索团队知识

messages = search_messages( project_url="https://lanhuapp.com/web/#/item/project/product?tid=123&pid=456", keyword="requirements analysis", message_type="knowledge" )
messages = search_messages( project_url="https://lanhuapp.com/web/#/item/project/product?tid=123&pid=456", keyword="requirements analysis", message_type="knowledge" )

Returns Developer A's analysis — no duplicate work!

返回开发者A的分析结果 —— 无需重复工作!

Tester B's AI now performs test-focused analysis

测试人员B的AI现在执行测试聚焦的分析

analyze_requirements_document( url="https://lanhuapp.com/web/#/item/project/product?tid=123&pid=456&docId=789", mode="testing" )
undefined
analyze_requirements_document( url="https://lanhuapp.com/web/#/item/project/product?tid=123&pid=456&docId=789", mode="testing" )
undefined

Pattern 4: Environment Variable Best Practices

模式4:环境变量最佳实践

python
undefined
python
undefined

Never hardcode secrets

切勿硬编码敏感信息

❌ BAD:

❌ 错误示例:

LANHU_COOKIE = "abc123..." FEISHU_WEBHOOK = "https://open.feishu.cn/open-apis/bot/v2/hook/xxx"
LANHU_COOKIE = "abc123..." FEISHU_WEBHOOK = "https://open.feishu.cn/open-apis/bot/v2/hook/xxx"

✅ GOOD: Use environment variables

✅ 正确示例: 使用环境变量

import os
LANHU_COOKIE = os.getenv("LANHU_COOKIE") FEISHU_WEBHOOK = os.getenv("FEISHU_WEBHOOK_URL")
import os
LANHU_COOKIE = os.getenv("LANHU_COOKIE") FEISHU_WEBHOOK = os.getenv("FEISHU_WEBHOOK_URL")

Validate required config

验证必填配置

if not LANHU_COOKIE: raise ValueError("LANHU_COOKIE environment variable is required")
undefined
if not LANHU_COOKIE: raise ValueError("LANHU_COOKIE environment variable is required")
undefined

Troubleshooting

故障排除

Issue: "No vision-capable model detected"

问题:"No vision-capable model detected"

Cause: Using text-only AI model (e.g., GPT-3.5, Claude Instant)
Solution: Switch to vision-capable model:
  • Claude 3+ (Sonnet, Opus)
  • GPT-4V, GPT-4o
  • Gemini Pro Vision
  • Kimi, Qwen-VL, DeepSeek-VL
原因: 使用纯文本AI模型(如GPT-3.5、Claude Instant)
解决方案: 切换到具备视觉能力的模型:
  • Claude 3+(Sonnet、Opus)
  • GPT-4V、GPT-4o
  • Gemini Pro Vision
  • Kimi、Qwen-VL、DeepSeek-VL

Issue: "Cookie authentication failed"

问题:"Cookie authentication failed"

Cause: Invalid or expired Lanhu cookie
Solution:
  1. Login to https://lanhuapp.com in browser
  2. Open DevTools → Network tab
  3. Find any API request to lanhuapp.com
  4. Copy full
    Cookie
    header value
  5. Update
    LANHU_COOKIE
    environment variable
  6. Restart server
原因: 蓝湖Cookie无效或已过期
解决方案:
  1. 在浏览器登录https://lanhuapp.com
  2. 打开开发者工具 → 网络标签
  3. 找到任意lanhuapp.com的API请求
  4. 复制完整的
    Cookie
    头值
  5. 更新
    LANHU_COOKIE
    环境变量
  6. 重启服务器

Issue: "Design-to-code conversion unavailable"

问题:"Design-to-code conversion unavailable"

Cause: Design file uploaded with outdated Lanhu plugin
Solution:
  1. Ask UI designer to update Lanhu plugin (Figma/Sketch/Adobe XD)
  2. Re-upload design file
  3. Retry design analysis
原因: 使用过时的蓝湖插件上传设计文件
解决方案:
  1. 请UI设计师更新蓝湖插件(Figma/Sketch/Adobe XD)
  2. 重新上传设计文件
  3. 重试设计分析

Issue: "Message board not syncing across AI assistants"

问题:"Message board not syncing across AI assistants"

Cause: Different MCP server instances or cache issues
Solution:
  1. Ensure all AI clients connect to same MCP server URL
  2. Verify
    project_url
    is identical across calls
  3. Clear cache:
    rm -rf ./data/cache/*
  4. Restart MCP server
原因: 不同的MCP服务器实例或缓存问题
解决方案:
  1. 确保所有AI客户端连接到同一个MCP服务器URL
  2. 验证所有调用的
    project_url
    完全一致
  3. 清除缓存:
    rm -rf ./data/cache/*
  4. 重启MCP服务器

Issue: Docker container fails to start

问题:Docker容器启动失败

Cause: Port conflict or missing environment variables
Solution:
bash
undefined
原因: 端口冲突或缺少环境变量
解决方案:
bash
undefined

Check port availability

检查端口可用性

lsof -i :8000
lsof -i :8000

Verify environment variables

验证环境变量

docker-compose config
docker-compose config

Check logs

查看日志

docker-compose logs lanhu-mcp
docker-compose logs lanhu-mcp

Restart with clean state

清理状态后重启

docker-compose down -v docker-compose up -d
undefined
docker-compose down -v docker-compose up -d
undefined

Issue: Slow requirements analysis

问题:需求分析速度慢

Cause: Large prototype with many pages, no caching
Solution:
  1. Enable version-based caching (automatic)
  2. Use
    exploration
    mode for quick overview
  3. Increase concurrent processing:
    bash
    export HTTP_TIMEOUT=60
    export VIEWPORT_WIDTH=1920
    export VIEWPORT_HEIGHT=1080
  4. Subsequent analyses will use cached data (much faster)
原因: 原型页面数量多,未启用缓存
解决方案:
  1. 启用基于版本的缓存(自动生效)
  2. 使用
    exploration
    模式快速概览
  3. 增加并发处理能力:
    bash
    export HTTP_TIMEOUT=60
    export VIEWPORT_WIDTH=1920
    export VIEWPORT_HEIGHT=1080
  4. 后续分析将使用缓存数据(速度大幅提升)

Advanced Usage

高级用法

Custom Analysis Modes

自定义分析模式

Modify
lanhu_mcp_server.py
to add custom analysis perspectives:
python
ANALYSIS_MODES = {
    "development": "Developer perspective with detailed field rules",
    "testing": "QA perspective with test cases and validation",
    "exploration": "Quick overview for stakeholder review",
    "security": "Security-focused analysis for audit"  # Custom mode
}
修改
lanhu_mcp_server.py
添加自定义分析视角:
python
ANALYSIS_MODES = {
    "development": "Developer perspective with detailed field rules",
    "testing": "QA perspective with test cases and validation",
    "exploration": "Quick overview for stakeholder review",
    "security": "Security-focused analysis for audit"  # 自定义模式
}

Feishu User ID Mapping

飞书用户ID映射

Enable @mention notifications by updating
FEISHU_USER_ID_MAP
:
python
FEISHU_USER_ID_MAP = {
    "zhangsan": "ou_1234567890abcdef",
    "lisi": "ou_abcdef1234567890",
    # Add your team members
}
更新
FEISHU_USER_ID_MAP
启用@提及通知:
python
FEISHU_USER_ID_MAP = {
    "zhangsan": "ou_1234567890abcdef",
    "lisi": "ou_abcdef1234567890",
    # 添加团队成员
}

Performance Tuning

性能调优

bash
undefined
bash
undefined

Increase concurrent downloads

增加并发下载超时时间

export HTTP_TIMEOUT=60
export HTTP_TIMEOUT=60

Larger viewport for high-res screenshots

更大视窗用于高分辨率截图

export VIEWPORT_WIDTH=2560 export VIEWPORT_HEIGHT=1440
export VIEWPORT_WIDTH=2560 export VIEWPORT_HEIGHT=1440

Enable debug logging

启用调试日志

export DEBUG="true"
undefined
export DEBUG="true"
undefined

Integration Examples

集成示例

Cursor AI Integration

Cursor AI集成

typescript
// In Cursor, add to .cursor/mcp.json
{
  "mcpServers": {
    "lanhu": {
      "url": "http://localhost:8000/mcp?role=Frontend&name=Alice"
    }
  }
}

// Then prompt:
// "Using Lanhu MCP, analyze the design at https://lanhuapp.com/... 
//  and generate React components with Tailwind CSS"
typescript
// 在Cursor中,添加到 .cursor/mcp.json
{
  "mcpServers": {
    "lanhu": {
      "url": "http://localhost:8000/mcp?role=Frontend&name=Alice"
    }
  }
}

// 然后输入提示:
// "Using Lanhu MCP, analyze the design at https://lanhuapp.com/... 
//  and generate React components with Tailwind CSS"

Windsurf Cascade Integration

Windsurf Cascade集成

json
// In Windsurf settings
{
  "mcp": {
    "servers": {
      "lanhu": {
        "url": "http://localhost:8000/mcp?role=Fullstack&name=Bob"
      }
    }
  }
}
json
// 在Windsurf设置中
{
  "mcp": {
    "servers": {
      "lanhu": {
        "url": "http://localhost:8000/mcp?role=Fullstack&name=Bob"
      }
    }
  }
}

Claude Code Integration

Claude Code集成

json
// In claude_desktop_config.json
{
  "mcpServers": {
    "lanhu": {
      "type": "http",
      "url": "http://localhost:8000/mcp?role=Backend&name=Charlie"
    }
  }
}
json
// 在claude_desktop_config.json中
{
  "mcpServers": {
    "lanhu": {
      "type": "http",
      "url": "http://localhost:8000/mcp?role=Backend&name=Charlie"
    }
  }
}

Additional Resources

额外资源

License

许可证

MIT License - See
LICENSE
file for details.
MIT License - 详见
LICENSE
文件。