Skip to main content
Glama
deenesjakoruzh
bhaltair

frontend-dev-mcp

by bhaltair
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Local

frontend-dev-mcp

frontend-dev-mcp — это MCP-сервер для задач фронтенд-разработки, целью которого является инкапсуляция таких возможностей, как понимание структуры проекта, генерация типов OpenAPI и управление интернационализацией (i18n), в стандартизированные AI-инструменты. Это помогает AI-ассистентам быстрее понимать фронтенд-репозитории и помогает разработчикам в выполнении повторяющихся инженерных задач.

Текущие возможности

Инструмент

Статус

Описание

check_i18n_issues

Реализовано

Сканирование JSON-файлов локализации и исходного кода на основе TypeScript AST для проверки отсутствующих ключей, неиспользуемых ключей и жестко закодированного китайского текста в JSX.

generate_api_types

Реализовано

Чтение OpenAPI JSON/YAML, фильтрация операций по тегам, генерация типов TypeScript и клиентов fetch/axios.

get_project_structure

Реализовано

Идентификация фронтенд-фреймворка, менеджера пакетов, маршрутизации, каталогов модулей и ключевых конфигурационных файлов.

Все инструменты возвращают:

{
  content: [{ type: "text", text: result.summary }],
  structuredContent: result
}

Related MCP server: Text-Toolkit

Технологический стек

  • TypeScript

  • MCP TypeScript SDK

  • zod/v3

  • stdio transport

  • Vitest

Быстрый старт

Установка зависимостей:

npm install

Запуск MCP-сервера в режиме разработки:

npm run dev

Сборка продакшн-версии:

npm run build

Запуск собранного сервера:

npm run start

Запуск проверки типов:

npm run typecheck

Запуск тестов:

npm run test

Запуск только тестов уровня функций инструментов:

npm run test:unit

Запуск интеграционных тестов MCP stdio после сборки:

npm run test:integration

Пример конфигурации MCP-клиента

После сборки сервер можно подключить как stdio MCP-сервер к клиентам, поддерживающим MCP.

Пример конфигурации:

{
  "mcpServers": {
    "frontend-dev-mcp": {
      "command": "node",
      "args": [
        "C:/Users/wangqi/Downloads/frontend-dev-mcp/dist/index.js"
      ]
    }
  }
}

На этапе разработки также можно использовать tsx для прямого запуска исходного кода:

{
  "mcpServers": {
    "frontend-dev-mcp": {
      "command": "npx",
      "args": [
        "tsx",
        "C:/Users/wangqi/Downloads/frontend-dev-mcp/src/index.ts"
      ]
    }
  }
}

Инструмент: check_i18n_issues

Входные параметры

type CheckI18nIssuesInput = {
  rootDir?: string;
  localeDir?: string;
  defaultLocale?: string;
  checkHardcodedText?: boolean;
  checkMissingKeys?: boolean;
  checkUnusedKeys?: boolean;
  include?: string[];
  exclude?: string[];
};

Значения по умолчанию:

  • rootDir：текущая рабочая директория

  • localeDir：src/locales

  • defaultLocale：en

  • checkHardcodedText：true

  • checkMissingKeys：true

  • checkUnusedKeys：true

  • include：["src/**/*.{ts,tsx,js,jsx}"]

  • exclude：["**/*.test.*", "**/*.spec.*", "**/node_modules/**", "**/dist/**"]

Структура вывода

type CheckI18nIssuesOutput = {
  localeDir: string;
  locales: string[];
  missingKeys: Array<{
    locale: string;
    key: string;
    basedOn: string;
  }>;
  hardcodedTexts: Array<{
    file: string;
    text: string;
    line?: number;
  }>;
  unusedKeys: Array<{
    locale: string;
    key: string;
  }>;
  summary: string;
};

Поддерживаемые возможности сканирования

  • Чтение .json файлов локализации из localeDir.

  • Развертывание вложенных объектов локализации в пути через точку, например profile.title.

  • Распознавание t("key") в исходном коде.

  • Распознавание const key = "profile.title"; t(key) в исходном коде.

  • Распознавание intl.formatMessage({ id: "key" }) в исходном коде.

  • Распознавание <Trans i18nKey="key" /> в JSX.

  • Проверка отсутствующих ключей в других языках на основе defaultLocale.

  • Проверка ключей, которые существуют в локализации, но не используются в исходном коде.

  • Проверка жестко закодированного китайского текста в текстовых узлах JSX, строковых выражениях и видимых атрибутах, таких как title, placeholder, alt, label.

  • Поддержка комментариев игнорирования:

    • На уровне файла: /* i18n-ignore-file */ или // i18n-ignore-file

    • На уровне строки: // i18n-ignore или {/* i18n-ignore */}, игнорирует использование ключей и сканирование жестко закодированного текста для текущей и следующей строки.

Примеры игнорирования

Игнорирование всего файла:

/* i18n-ignore-file */

export function DebugPanel() {
  return <button type="button">调试按钮</button>;
}

Игнорирование одной строки или следующей строки:

// i18n-ignore
const title = t("debug.title");

{/* i18n-ignore */}
<button type="button" title="临时按钮">临时保存</button>

Инструмент: generate_api_types

Входные параметры

type GenerateApiTypesInput = {
  source: string;
  outputDir?: string;
  clientStyle?: "fetch" | "axios";
  generateHooks?: boolean;
  includeTags?: string[];
  excludeTags?: string[];
};

Значения по умолчанию:

  • outputDir：src/generated/api

  • clientStyle：fetch

  • generateHooks：false

Структура вывода

type GenerateApiTypesOutput = {
  source: string;
  outputDir: string;
  files: Array<{
    path: string;
    kind: "types" | "client" | "hooks";
  }>;
  operationsCount: number;
  schemaCount: number;
  summary: string;
};

Поддерживаемые возможности генерации

  • Чтение локальных или HTTP/HTTPS OpenAPI JSON/YAML.

  • Чтение components.schemas и генерация types.ts.

  • Чтение операций paths и генерация client.ts.

  • Генерация типов параметров path/query/request body.

  • Интеграция замены параметров пути, параметров запроса и JSON request body в клиенте.

  • Поддержка стилей клиента fetch и axios.

  • Поддержка фильтрации операций через includeTags / excludeTags.

  • Поддержка генерации базовых хуков React Query при generateHooks = true.

Текущие ограничения:

  • Ограниченные возможности комбинирования сложных схем OpenAPI, например, oneOf, anyOf, allOf пока не разворачиваются.

  • Для сгенерированных хуков бизнес-проекту необходимо самостоятельно установить @tanstack/react-query.

Инструмент: get_project_structure

Входные параметры

type GetProjectStructureInput = {
  rootDir?: string;
  includeRoutes?: boolean;
  includeModules?: boolean;
  includeConfigs?: boolean;
  maxDepth?: number;
};

Значения по умолчанию:

  • rootDir：текущая рабочая директория

  • includeRoutes：true

  • includeModules：true

  • includeConfigs：true

  • maxDepth：4

Структура вывода

type GetProjectStructureOutput = {
  rootDir: string;
  framework: "react" | "nextjs" | "vite-react" | "unknown";
  packageManager: "npm" | "pnpm" | "yarn" | "unknown";
  routes?: Array<{
    path: string;
    file: string;
    kind: "page" | "layout" | "api" | "unknown";
  }>;
  modules?: Array<{
    name: string;
    path: string;
    role: "pages" | "components" | "services" | "hooks" | "store" | "i18n" | "unknown";
  }>;
  configFiles?: Array<{
    name: string;
    path: string;
  }>;
  summary: string;
};

Поддерживаемые возможности сканирования

  • Идентификация nextjs, vite-react, react, unknown.

  • Идентификация pnpm, npm, yarn.

  • Сканирование Next.js App Router: app/**/page.tsx, src/app/**/page.tsx.

  • Сканирование Next.js Pages Router: pages/**/*.tsx, src/pages/**/*.tsx.

  • Сканирование каталогов React/Vite pages: src/pages/**/*.tsx.

  • Идентификация общих каталогов модулей: components, services, hooks, store, locales, i18n.

  • Идентификация ключевых конфигурационных файлов: package.json, vite.config.*, next.config.*, tsconfig.json, конфигурации ESLint, Prettier, Tailwind.

Примеры использования

Пример 1: Проверка проблем i18n в тестовых фикстурах

Инструмент: check_i18n_issues

Ввод:

{
  "rootDir": "tests/fixtures/i18n-missing-keys",
  "localeDir": "src/locales",
  "defaultLocale": "en"
}

Краткий ожидаемый результат:

检测到 2 个语言资源：en, zh-CN；发现 2 个缺失 key；1 处硬编码文案；3 个未使用 key。

Пример структурированного результата:

{
  "localeDir": "src/locales",
  "locales": ["en", "zh-CN"],
  "missingKeys": [
    {
      "locale": "zh-CN",
      "key": "common.cancel",
      "basedOn": "en"
    },
    {
      "locale": "zh-CN",
      "key": "profile.title",
      "basedOn": "en"
    }
  ],
  "hardcodedTexts": [
    {
      "file": "src/App.tsx",
      "text": "保存",
      "line": 7
    }
  ],
  "unusedKeys": [
    {
      "locale": "en",
      "key": "common.cancel"
    },
    {
      "locale": "en",
      "key": "common.submit"
    },
    {
      "locale": "zh-CN",
      "key": "common.submit"
    }
  ]
}

Пример 2: Проверка только отсутствующих ключей

Инструмент: check_i18n_issues

Ввод:

{
  "rootDir": "tests/fixtures/i18n-missing-keys",
  "localeDir": "src/locales",
  "defaultLocale": "en",
  "checkMissingKeys": true,
  "checkUnusedKeys": false,
  "checkHardcodedText": false
}

Подходит для использования в CI-проверках, где важна только целостность ресурсов интернационализации.

Пример 3: Ограничение области сканирования исходного кода

Инструмент: check_i18n_issues

Ввод:

{
  "rootDir": "tests/fixtures/i18n-missing-keys",
  "localeDir": "src/locales",
  "include": ["src/**/*.{ts,tsx}"],
  "exclude": [
    "**/*.test.*",
    "**/*.spec.*",
    "**/node_modules/**",
    "**/dist/**"
  ]
}

Подходит для исключения тестовых файлов, артефактов сборки и каталогов зависимостей в реальных бизнес-репозиториях для снижения количества ложных срабатываний.

Пример 4: Генерация API-типов и клиента

Инструмент: generate_api_types

Ввод:

{
  "source": "tests/fixtures/openapi-basic/openapi.json",
  "outputDir": "src/generated/api",
  "clientStyle": "fetch",
  "generateHooks": false,
  "includeTags": ["user"]
}

Краткий ожидаемый результат:

从 tests/fixtures/openapi-basic/openapi.json 生成 1 个 schema、1 个 operation，输出 2 个文件到 src/generated/api。

Сгенерированные файлы:

src/generated/api/
  types.ts
  client.ts

Пример 5: Сканирование структуры проекта

Инструмент: get_project_structure

Ввод:

{
  "rootDir": "tests/fixtures/vite-react-basic",
  "includeRoutes": true,
  "includeModules": true,
  "includeConfigs": true,
  "maxDepth": 4
}

Ожидаемый результат вернет фреймворк, менеджер пакетов, маршрутизацию, каталоги модулей, ключевые конфигурационные файлы и сводку.

Структура проекта

frontend-dev-mcp/
  docs/
    technical-design.md
  src/
    index.ts
    tools/
      checkI18nIssues.ts
      generateApiTypes.ts
      getProjectStructure.ts
  tests/
    fixtures/
      i18n-missing-keys/
      next-app-router/
      openapi-basic/
      vite-react-basic/
    checkI18nIssues.test.ts
    generateApiTypes.test.ts
    getProjectStructure.test.ts
  package.json
  tsconfig.json
  vitest.config.ts

Тестовые фикстуры

Текущие тестовые фикстуры охватывают:

  • i18n-missing-keys: для проверки отсутствующих ключей, неиспользуемых ключей и жестко закодированного китайского текста.

  • openapi-basic: для последующего тестирования кодогенерации OpenAPI.

  • vite-react-basic: для последующего сканирования структуры проекта Vite React.

  • next-app-router: для последующего сканирования структуры проекта Next.js App Router.

Тестирование разделено на два уровня:

  • Интеграционное тестирование на уровне функций: прямой вызов обработчиков инструментов в src/tools/* для проверки бизнес-логики и структурированного вывода.

  • Интеграционное тестирование MCP stdio: запуск собранного dist/index.js, вызов реального инструмента через клиент MCP SDK для проверки регистрации сервера, транспорта и формата возвращаемых данных.

План разработки

  1. check_i18n_issues: MVP завершен.

  2. generate_api_types: завершена работа с JSON/YAML, фильтрация тегов, генерация базовых параметров и тела запроса; в дальнейшем будут добавлены сложные схемы и более полные хуки.

  3. get_project_structure: MVP завершен; в дальнейшем будут добавлены парсинг AST React Router, идентификация рабочих областей monorepo и более полное сканирование конфигураций.

Более полное описание дизайна см. в docs/technical-design.md.

Available Tools

3 tools
check_i18n_issuesB

Scan locale resources and source files for missing keys, unused keys, and hardcoded text.

ParametersJSON Schema
NameRequiredDescriptionDefault
rootDirNo
localeDirNosrc/locales
defaultLocaleNoen
checkHardcodedTextNo
checkMissingKeysNo
checkUnusedKeysNo
includeNo
excludeNo

TDQS

B3.1/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full burden. It describes the tool as scanning and checking, implying a read-only analysis. However, it doesn't disclose potential side effects (likely none), performance impact for large codebases, or error behavior. The description is adequate but not rich.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single sentence listing the main actions, which is concise. It front-loades the purpose. It could be slightly more structured by separating the checks, but it's efficient.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the parameter count (8) and no output schema, the description is insufficient. It doesn't explain the return format, how results are structured, or how to interpret failures. For a complex analysis tool, more context is needed for effective agent use.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

With 0% schema description coverage and 8 parameters, the description should compensate but does not. It mentions the three check types (missing keys, unused keys, hardcoded text), which map to three boolean parameters, but provides no details on rootDir, localeDir, defaultLocale, include, or exclude. The baseline is 3 due to low coverage, but the description adds only marginal value beyond the schema.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool scans locale and source files for three specific issues: missing keys, unused keys, and hardcoded text. It uses a specific verb and resource, distinguishing it from siblings like generate_api_types and get_project_structure.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description does not provide any guidance on when to use this tool versus alternatives, nor does it mention any prerequisites or context. The agent is left to infer usage from the parameter names alone.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

generate_api_typesB

Generate TypeScript API types and client code from an OpenAPI spec.

ParametersJSON Schema
NameRequiredDescriptionDefault
sourceYesOpenAPI JSON/YAML file path or URL.
outputDirNosrc/generated/api
clientStyleNofetch
generateHooksNo
includeTagsNo
excludeTagsNo

TDQS

B3.4/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations provided, so description partially carries burden. It describes the behavior (generation from OpenAPI) but lacks details on file system changes, overwrite behavior, or network access for URLs.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Single sentence, concise and front-loaded. Could include a bit more structure but efficient.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

With 6 params and no output schema, description could elaborate on return values or side effects. It's adequate but not complete for a code generation tool.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is low (17%), but description doesn't add meaning beyond schema for most params. It provides general purpose but no detailed guidance on each parameter, so baseline 3.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

Description clearly states it generates TypeScript types and client code from OpenAPI spec. However, it doesn't distinguish from sibling tools like check_i18n_issues or get_project_structure, which are unrelated, so it's still clear.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No explicit guidance on when to use this tool vs alternatives. Siblings are unrelated, so context is implied but no exclusions or alternatives mentioned.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

get_project_structureB

Analyze the frontend project structure, routes, modules, and key config files.

ParametersJSON Schema
NameRequiredDescriptionDefault
rootDirNoProject root directory. Defaults to the current working directory.
includeRoutesNo
includeModulesNo
includeConfigsNo
maxDepthNo

TDQS

B3.2/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description must fully disclose behavioral traits. The description only mentions analysis of structure but does not specify if the tool is read-only, modifies state, or any side effects. It lacks details on output format or how deep the analysis goes, making behavior opaque.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single sentence that is reasonably concise and front-loaded with the verb 'Analyze'. However, it could be slightly more structured by separating the purpose from the scope, but overall it is efficient.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the complexity of 5 parameters and no output schema, the description is minimal but covers the general purpose. It lacks details on return values, error behavior, or prerequisites (e.g., Node.js project). The description is adequate for basic understanding but incomplete for reliable invocation.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is only 20%, meaning only rootDir has a description in the schema. The tool's description adds no parameter-specific meaning beyond the parameter names (e.g., includeRoutes, maxDepth). The description does not explain the semantics of boolean flags or depth constraints, so it fails to compensate for the low schema coverage.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description states the tool analyzes the frontend project structure, specifically routes, modules, and config files. It clearly indicates what the tool does but does not differentiate it from sibling tools like check_i18n_issues or generate_api_types, which are semantically distinct, so no confusion arises. However, the lack of differentiation slightly reduces the top score.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description implies the tool is for analyzing project structure but does not provide explicit guidance on when to use it versus alternatives. No when-not or exclusions are mentioned. The usage context is clear but not deeply prescriptive.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.

  1. 3 tool updatesv0.1.0
    • First observedcheck_i18n_issues
    • First observedgenerate_api_types
    • First observedget_project_structure
Install Server
RayrunBuild, deploy, and operate MCP servers without becoming an infrastructure team.ray.runAd

TDQS

A3.5/5.0
Disambiguation5/5

Each tool addresses a distinct frontend development concern: i18n checking, API type generation, and project structure analysis. There is no overlap in functionality.

Naming Consistency5/5

All tool names follow a consistent verb_noun pattern (check_i18n_issues, generate_api_types, get_project_structure) using snake_case, making them predictable.

Tool Count4/5

Three tools is minimal but appropriate for a focused frontend developer assistant covering common tasks. The scope feels slightly thin but not insufficient.

Completeness3/5

The tools cover i18n, API types, and project structure, but miss other common frontend tasks like linting, dependency checks, or component scaffolding. Some gaps exist but core utilities are present.

Maintenance

ActivityInactive
ResponsivenessNo issues

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Connectors

Related MCP Servers

  • My First MCP Server

    sethdavis512
    A
    license
    Not graded
    quality
    D
    maintenance
    An AI-powered MCP server that provides development tools for code analysis, documentation, and project management including code pattern extraction, humorous code reviews, TODO scanning, and PRD generation.
    16
    ISC

  • Text-Toolkit

    xiaobenyang-com
    A
    license
    C
    quality
    D
    maintenance
    An MCP server that provides text conversion, formatting, and analysis functions, which can be directly integrated into the development workflow.
    43
    2
    Apache 2.0

Appeared in Searches

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/bhaltair/frontend-dev-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server