Skip to main content
Glama
deenesjakoruzh
bhaltair

frontend-dev-mcp

by bhaltair
OverviewSchemaSourceRelated ServersDiscussionsAdmin
TypeScript
Local

frontend-dev-mcp

frontend-dev-mcp ist ein MCP-Server für Frontend-Entwicklungsszenarien. Ziel ist es, Fähigkeiten wie das Verständnis der Projektstruktur, die Generierung von OpenAPI-Typen und das i18n-Engineering in standardisierte KI-Tools zu kapseln, um KI-Assistenten dabei zu helfen, Frontend-Repositories schneller zu verstehen und Entwickler bei repetitiven technischen Aufgaben zu unterstützen.

Aktuelle Funktionen

Tool

Status

Beschreibung

check_i18n_issues

Implementiert

Scannt locale-JSON-Dateien und Quellcode mittels TypeScript AST, um fehlende Keys, ungenutzte Keys und hartcodierte chinesische Texte in JSX zu finden.

generate_api_types

Implementiert

Liest OpenAPI JSON/YAML, filtert Operationen nach Tags und generiert TypeScript-Typen sowie fetch/axios-Clients.

get_project_structure

Implementiert

Erkennt Frontend-Frameworks, Paketmanager, Routen, Modulverzeichnisse und wichtige Konfigurationsdateien.

Alle Tools geben einheitlich Folgendes zurück:

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

Related MCP server: Text-Toolkit

Tech-Stack

  • TypeScript

  • MCP TypeScript SDK

  • zod/v3

  • stdio transport

  • Vitest

Erste Schritte

Abhängigkeiten installieren:

npm install

MCP-Server im Entwicklungsmodus starten:

npm run dev

Produktions-Build erstellen:

npm run build

Den gebauten Server starten:

npm run start

Typenprüfung ausführen:

npm run typecheck

Tests ausführen:

npm run test

Nur Tool-Funktionstests ausführen:

npm run test:unit

Nach dem Build MCP-stdio-Integrationstests ausführen:

npm run test:integration

Beispiel für MCP-Client-Konfiguration

Nach dem Build kann der Server als stdio-MCP-Server in Clients eingebunden werden, die MCP unterstützen.

Beispielkonfiguration:

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

In der Entwicklungsphase kann der Quellcode auch direkt mit tsx ausgeführt werden:

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

Tool: check_i18n_issues

Eingabeparameter

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

Standardwerte:

  • rootDir: Aktuelles Arbeitsverzeichnis

  • localeDir: src/locales

  • defaultLocale: en

  • checkHardcodedText: true

  • checkMissingKeys: true

  • checkUnusedKeys: true

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

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

Ausgabestruktur

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;
};

Unterstützte Scan-Funktionen

  • Lesen von .json locale-Dateien im localeDir.

  • Auflösen verschachtelter locale-Objekte in Punkt-Pfade, z. B. profile.title.

  • Erkennung von t("key") im Quellcode.

  • Erkennung von const key = "profile.title"; t(key) im Quellcode.

  • Erkennung von intl.formatMessage({ id: "key" }) im Quellcode.

  • Erkennung von <Trans i18nKey="key" /> in JSX.

  • Überprüfung auf fehlende Keys in anderen Sprachen basierend auf defaultLocale.

  • Überprüfung auf Keys, die in den Locales existieren, aber im Quellcode nicht referenziert werden.

  • Überprüfung auf hartcodierte chinesische Texte in JSX-Textknoten, String-Ausdrücken und sichtbaren Attributen wie title, placeholder, alt, label.

  • Unterstützung für Ignore-Kommentare:

    • Dateiebene: /* i18n-ignore-file */ oder // i18n-ignore-file

    • Zeilenebene: // i18n-ignore oder {/* i18n-ignore */}, ignoriert die Verwendung von Keys und das Scannen von hartcodiertem Text in der aktuellen und der nächsten Zeile.

Ignore-Beispiele

Gesamte Datei ignorieren:

/* i18n-ignore-file */

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

Einzelne Zeile oder nächste Zeile ignorieren:

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

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

Tool: generate_api_types

Eingabeparameter

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

Standardwerte:

  • outputDir: src/generated/api

  • clientStyle: fetch

  • generateHooks: false

Ausgabestruktur

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

Unterstützte Generierungsfunktionen

  • Lesen von lokalen oder HTTP/HTTPS OpenAPI JSON/YAML-Dateien.

  • Lesen von components.schemas und Generierung von types.ts.

  • Lesen von paths-Operationen und Generierung von client.ts.

  • Generierung von Typen für Pfad-, Query- und Request-Body-Parameter.

  • Integration von Pfad-Parameter-Ersetzung, Query-Parametern und JSON-Request-Body im Client.

  • Unterstützung für fetch- und axios-Client-Stile.

  • Unterstützung für includeTags / excludeTags zum Filtern von Operationen.

  • Unterstützung für die Generierung grundlegender React-Query-Hooks bei generateHooks = true.

Aktuelle Einschränkungen:

  • Komplexe OpenAPI-Schema-Kombinationen wie oneOf, anyOf, allOf sind noch nicht vollständig implementiert.

  • Die generierten Hooks erfordern, dass das Business-Projekt @tanstack/react-query selbst installiert.

Tool: get_project_structure

Eingabeparameter

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

Standardwerte:

  • rootDir: Aktuelles Arbeitsverzeichnis

  • includeRoutes: true

  • includeModules: true

  • includeConfigs: true

  • maxDepth: 4

Ausgabestruktur

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;
};

Unterstützte Scan-Funktionen

  • Erkennung von nextjs, vite-react, react, unknown.

  • Erkennung von pnpm, npm, yarn.

  • Scannen von Next.js App Router: app/**/page.tsx, src/app/**/page.tsx.

  • Scannen von Next.js Pages Router: pages/**/*.tsx, src/pages/**/*.tsx.

  • Scannen von React/Vite pages-Verzeichnissen: src/pages/**/*.tsx.

  • Erkennung gängiger Modulverzeichnisse: components, services, hooks, store, locales, i18n.

  • Erkennung wichtiger Konfigurationsdateien: package.json, vite.config.*, next.config.*, tsconfig.json, ESLint, Prettier, Tailwind-Konfiguration.

Anwendungsbeispiele

Beispiel 1: i18n-Probleme in Test-Fixtures prüfen

Tool: check_i18n_issues

Eingabe:

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

Zusammenfassung des erwarteten Ergebnisses:

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

Beispiel für eine strukturierte Ausgabe:

{
  "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"
    }
  ]
}

Beispiel 2: Nur auf fehlende Keys prüfen

Tool: check_i18n_issues

Eingabe:

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

Geeignet für CI-Prüfungen, bei denen nur die Vollständigkeit der mehrsprachigen Ressourcen wichtig ist.

Beispiel 3: Scan-Bereich des Quellcodes einschränken

Tool: check_i18n_issues

Eingabe:

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

Geeignet für reale Business-Repositories, um Testdateien, Build-Artefakte und Abhängigkeitsverzeichnisse auszuschließen und Fehlalarme zu reduzieren.

Beispiel 4: API-Typen und Client generieren

Tool: generate_api_types

Eingabe:

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

Zusammenfassung des erwarteten Ergebnisses:

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

Generierte Dateien:

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

Beispiel 5: Projektstruktur scannen

Tool: get_project_structure

Eingabe:

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

Das erwartete Ergebnis liefert Framework, Paketmanager, Routen, Modulverzeichnisse, wichtige Konfigurationsdateien und eine Zusammenfassung.

Projektstruktur

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

Test-Fixtures

Aktuelle Test-Fixtures decken ab:

  • i18n-missing-keys: Zur Überprüfung von fehlenden Keys, ungenutzten Keys und hartcodiertem Chinesisch.

  • openapi-basic: Für zukünftige OpenAPI-Codegen-Tests.

  • vite-react-basic: Für zukünftige Vite-React-Projektstruktur-Scans.

  • next-app-router: Für zukünftige Next.js-App-Router-Projektstruktur-Scans.

Die Tests sind in zwei Ebenen unterteilt:

  • Funktions-Integrationstests: Direkter Aufruf der Tool-Handler in src/tools/*, um Geschäftslogik und strukturierte Ausgaben zu validieren.

  • MCP-stdio-Integrationstests: Starten der gebauten dist/index.js, Aufruf echter Tools über den MCP-SDK-Client, um Server-Registrierung, Transport und Rückgabeformat zu validieren.

Entwicklungs-Roadmap

  1. check_i18n_issues: MVP abgeschlossen.

  2. generate_api_types: JSON/YAML, Tag-Filterung, grundlegende Parameter- und Request-Body-Generierung abgeschlossen; komplexe Schemata und vollständigere Hooks folgen.

  3. get_project_structure: MVP abgeschlossen; React-Router-AST-Parsing, Monorepo-Workspace-Erkennung und vollständigere Konfigurations-Scans folgen.

Eine vollständigere Designbeschreibung finden Sie unter 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.

  1. 3 tool updatesv0.1.0
    • First observedcheck_i18n_issues
    • First observedgenerate_api_types
    • First observedget_project_structure
Deploy Server
Shareable, User-Owned Context BackendPeople, applications, and agents read, write, and coordinate together in one context lake. Reach it over MCP, a CLI, a Python SDK, or REST.fulcradynamics.comAd

TDQS

A3.5/5.0

Scored across 3 tools

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

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.
    6 npm
    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