dejank

dejank

An MCP server that gives AI agents hands-on control of a live React Native app, enabling UI taps, screenshots, UI/component trees, native logs, and JS/React profiling to debug, verify fixes, and diagnose performance issues.

Category
访问服务器

README

Dejank

Give your AI coding agent hands on a live React Native app.

Dejank is an MCP server. Your agent can tap the UI, read the screen, pull native logs, capture React/JS profiles, and save evidence — so it can find bugs, verify fixes, and investigate performance without you switching to DevTools by hand.

You describe what's wrong in plain English. The agent uses Dejank to look at the running app and figure it out.

What you need first

  • A React Native or Expo app running in debug mode
  • Metro already started (usually port 8081)
  • A simulator or device with the app open
  • An AI tool that supports MCP (Cursor, Claude, VS Code, ChatGPT desktop, Windsurf, Antigravity, Gemini CLI, …)

Dejank doesn't start Metro or your app for you — it attaches to what's already running.

Install

1. Add Dejank to your AI tool

From this repo:

pnpm mcp:install-global -- --npx

That writes a dejank MCP server into every client it finds on your machine:

App Config
Cursor ~/.cursor/mcp.json
Claude Desktop ~/Library/Application Support/Claude/claude_desktop_config.json
Claude Code ~/.claude.json (if claude CLI is installed)
VS Code / VSCodium …/Code/User/mcp.json (servers key)
ChatGPT desktop ~/.codex/config.toml + …/ChatGPT/chatgpt_mcp_config.json
Windsurf ~/.codeium/windsurf/mcp_config.json
Antigravity ~/.gemini/antigravity/mcp_config.json
Gemini CLI ~/.gemini/settings.json
GitHub Copilot (Agent Host) ~/.copilot/mcp-config.json
Warp ~/.warp/.mcp.json
Amazon Q / Kiro / LM Studio / Cline / Roo when their config dirs already exist

Equivalent Cursor / Claude config:

{
  "mcpServers": {
    "dejank": {
      "command": "npx",
      "args": ["-y", "dejank"],
      "env": {
        "DEJANK_METRO_HOST": "localhost",
        "DEJANK_METRO_PORT": "8081"
      }
    }
  }
}

VS Code uses the same command, but the top-level key is servers (not mcpServers). ChatGPT desktop on macOS stores MCP in ~/.codex/config.toml under [mcp_servers.dejank].

Developing Dejank itself? Use the local build instead of npm:

pnpm mcp:install-global

Fully quit and reopen your AI tools so they reload MCP. In VS Code, use Agent mode in Copilot Chat.

2. Start your app

npx expo start
# open the app on a simulator or device

Metro should be running (usually on port 8081) before you ask the agent anything.

Try it

Just ask your agent, in plain English:

Reproduce the bug when I tap Submit and tell me what failed.

I fixed the null check — tap Submit again and confirm the error is gone.

Why is the screen slow when I press Load feed?

Show me the UI tree and a screenshot of the current screen.

Pull the last minute of device logs after I tap Retry.

The agent picks the right Dejank tools for the job — no need to know their names.

What it's good for

Goal Dejank gives the agent
Fix a bug UI tree, tap, screenshot, native logs, component tree
Verify a fix The same tap/screenshot/logs, repeatable before vs after
Diagnose slowness One-shot JS + React profiling around a tap, via investigate_slow_screen
Check UI state UI tree + screenshot
Trace React renders Component tree and profiler data via Fusebox DevTools
Catch runtime noise Android logcat / iOS Simulator logs

Dejank collects evidence from the live app. Your agent — and you — decide the fix.

Not built yet: dedicated JS console streaming, network inspection, memory/heap profiling. Native device logs often catch JS/runtime errors anyway, since most get printed there too.

How it works

you ask to debug / verify / profile
            │
            ▼
   agent calls Dejank (MCP)
            │
            ▼
 Dejank attaches to Metro / the app
            │
            ▼
tap · screenshot · logs · JS/React profiles
            │
            ▼
   evidence returns to the agent
            │
            ▼
 agent explains it, and can patch your code

Tools

Tool Use it for
investigate_slow_screen Performance — one-shot JS + React profiling + diagnosis around an optional tap
get_ui_tree / tap See on-screen controls; reproduce taps by label or coordinates
take_screenshot Visual proof for bugs and UI checks
get_device_logs Native logs (logcat / iOS Simulator)
get_component_tree React component names via Fusebox DevTools
capture_* / start_* / stop_* profiles Finer-grained JS or React profiling when you need more control
list_targets / get_target_info Metro debug targets, useful if attaching fails
list_artifacts Find recent evidence files

For "is it slow?" questions, investigate_slow_screen alone is usually enough. For bugs and validation, the agent composes tap + get_ui_tree + take_screenshot + get_device_logs.

Settings

Env var Meaning Default
DEJANK_METRO_HOST Where Metro runs localhost
DEJANK_METRO_PORT Metro port 8081
DEJANK_ARTIFACT_DIR Where profiles and screenshots are saved .dejank/artifacts

Developing Dejank itself

pnpm install
pnpm build
pnpm mcp:install-global   # local dist/ → Cursor / Claude (use -- --npx for npm)
pnpm mcp                  # run the server in the foreground

Contributor checks:

pnpm validate:m0   # basic attach / capability check
pnpm validate:m3   # injected slow-screen scenarios (sample app + simulator)

Historical product notes: docs/SCOPE.md.

License

MIT

推荐服务器

Baidu Map

Baidu Map

百度地图核心API现已全面兼容MCP协议,是国内首家兼容MCP协议的地图服务商。

官方
精选
JavaScript
Playwright MCP Server

Playwright MCP Server

一个模型上下文协议服务器,它使大型语言模型能够通过结构化的可访问性快照与网页进行交互,而无需视觉模型或屏幕截图。

官方
精选
TypeScript
Magic Component Platform (MCP)

Magic Component Platform (MCP)

一个由人工智能驱动的工具,可以从自然语言描述生成现代化的用户界面组件,并与流行的集成开发环境(IDE)集成,从而简化用户界面开发流程。

官方
精选
本地
TypeScript
Audiense Insights MCP Server

Audiense Insights MCP Server

通过模型上下文协议启用与 Audiense Insights 账户的交互,从而促进营销洞察和受众数据的提取和分析,包括人口统计信息、行为和影响者互动。

官方
精选
本地
TypeScript
VeyraX

VeyraX

一个单一的 MCP 工具,连接你所有喜爱的工具:Gmail、日历以及其他 40 多个工具。

官方
精选
本地
graphlit-mcp-server

graphlit-mcp-server

模型上下文协议 (MCP) 服务器实现了 MCP 客户端与 Graphlit 服务之间的集成。 除了网络爬取之外,还可以将任何内容(从 Slack 到 Gmail 再到播客订阅源)导入到 Graphlit 项目中,然后从 MCP 客户端检索相关内容。

官方
精选
TypeScript
Kagi MCP Server

Kagi MCP Server

一个 MCP 服务器,集成了 Kagi 搜索功能和 Claude AI,使 Claude 能够在回答需要最新信息的问题时执行实时网络搜索。

官方
精选
Python
e2b-mcp-server

e2b-mcp-server

使用 MCP 通过 e2b 运行代码。

官方
精选
Neon MCP Server

Neon MCP Server

用于与 Neon 管理 API 和数据库交互的 MCP 服务器

官方
精选
Exa MCP Server

Exa MCP Server

模型上下文协议(MCP)服务器允许像 Claude 这样的 AI 助手使用 Exa AI 搜索 API 进行网络搜索。这种设置允许 AI 模型以安全和受控的方式获取实时的网络信息。

官方
精选