hwms-mcp-server
Provides an Android WebView app shell module to wrap web applications as native Android apps.
Integrates MUI (Material-UI) components and the Mantis Admin template for building user interfaces.
Automatically resolves and adds npm dependencies for each module during scaffold generation.
Uses React as the framework for building page components and managing routes in generated projects.
Uses Vite as the build tool for fast development and production builds in the generated project scaffold.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@hwms-mcp-serverCreate a hybrid admin app with dashboard and login page."
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Hybrid WebApp Modules System
AI-driven module selection and scaffold generation for hybrid web applications.
Overview
하이브리드 웹앱 개발을 위한 모듈 시스템입니다. MCP(Model Context Protocol)를 통해 AI가 프로젝트 요구사항에 맞는 모듈을 자동으로 선택하고 조합합니다.
Related MCP server: Next.js MCP Server
Features
모듈 목록 조회 - 사용 가능한 모듈 및 카테고리별 필터링
의존성 자동 해결 - 선택된 모듈의 의존성 분석 및 해결
프로젝트 스캐폴드 생성 - 모듈 조합으로 프로젝트 구조 자동 생성
라우트/메뉴 자동 주입 - 페이지 모듈 추가 시 라우트와 메뉴 자동 등록
npm 의존성 자동 추가 - 모듈별 npm 패키지 자동 주입
Quick Start
1. 설치
git clone https://github.com/yundoun/hwms-mcp-server.git
cd hwms-mcp-server
npm install
npm run build2. MCP 서버 등록
Claude Code (CLI) 사용자
방법 A: 프로젝트 범위 (.mcp.json 생성, 팀 공유 가능)
claude mcp add -s project hwms -- node dist/index.js방법 B: 사용자 범위 (모든 프로젝트에서 사용)
claude mcp add -s user hwms -- node /절대경로/hwms-mcp-server/dist/index.js등록 확인
claude mcp listClaude Desktop 사용자
~/Library/Application Support/Claude/claude_desktop_config.json (Mac)
%APPDATA%\Claude\claude_desktop_config.json (Windows)
{
"mcpServers": {
"hwms": {
"command": "node",
"args": ["/절대경로/hwms-mcp-server/dist/index.js"]
}
}
}설정 후 Claude Desktop 재시작
3. 사용 시작
Claude에게 말하기:
"사용 가능한 모듈 목록을 보여줘"
"대시보드와 로그인 페이지가 있는 관리자 앱을 만들어줘"Available Modules
Base Template
Module | Description |
| Mantis Admin 기반 템플릿 (MUI, Vite, React) |
Page Modules
Module | Description |
| Analytics 스타일 대시보드 |
| 소셜 로그인 페이지 |
| 회원가입 페이지 |
| 사용자 관리 CRUD |
| MUI DataGrid 기반 고급 테이블 |
| Stepper 기반 다단계 폼 |
| CRUD 예제 페이지 |
Bridge Modules (Native)
Module | Description |
| 네이티브 브릿지 코어 |
| 카메라/갤러리 브릿지 |
| 푸시 알림 브릿지 |
| 기기 정보 브릿지 |
UI Modules
Module | Description |
| MUI Snackbar 컴포넌트 |
| MUI Loader 컴포넌트 |
Shell
Module | Description |
| Android WebView 앱 쉘 |
MCP Tools
list_modules
사용 가능한 모듈 목록을 조회합니다.
resolve_dependencies
선택된 모듈들의 의존성을 해결합니다.
generate_scaffold
프로젝트 구조를 생성합니다.
Usage Example
Claude와 대화:
"대시보드와 사용자 관리 페이지가 있는 관리자 웹앱을 만들어줘"
→ AI가 자동으로:
1. base-mantis-admin + page-dashboard + page-user-management 선택
2. 의존성 해결
3. 프로젝트 생성Development
npm run dev # 개발 모드
npm run build # 빌드
npm run test # 테스트
npm run lint # ESLintAdding Custom Modules
modules/ 디렉토리에 새 폴더 생성 후 module.meta.json 작성:
{
"name": "page-my-feature",
"displayName": "My Feature",
"version": "1.0.0",
"category": "page",
"description": "My custom feature page",
"platforms": ["web"],
"dependencies": {
"modules": ["base-mantis-admin"],
"npm": {}
},
"slots": {
"web.routes": {
"path": "my-feature",
"component": "MyFeaturePage"
},
"web.menu": {
"id": "my-feature",
"title": "My Feature",
"type": "item",
"url": "/my-feature",
"icon": "StarIcon"
}
}
}License
MIT
Available Tools
4 toolsadd_moduleB
기존 HWMS 프로젝트에 새 모듈을 추가합니다. 의존성 자동 해결, 라우트/메뉴 자동 주입, Android 핸들러 재생성을 지원합니다.
| Name | Required | Description | Default |
|---|---|---|---|
| modules | Yes | 추가할 모듈 이름 배열 (예: ["page-user-management", "bridge-push"]) | |
| projectPath | Yes | 기존 HWMS 프로젝트의 절대 경로 (예: "/Users/user/my-project") |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description reveals automatic dependency resolution, route/menu injection, and handler regeneration, which adds behavioral context. However, it omits side effects (e.g., file modifications, reversibility, permission requirements) and does not fully disclose the tool's impact.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two sentences with front-loaded main purpose and additional features. Efficient, though a slight restructuring could separate features more clearly.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the complexity (multiple automatic actions) and lack of output schema/annotations, the description is incomplete. It does not explain return values, prerequisites (project must exist), error conditions, or permanent changes, leaving significant gaps.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, providing clear parameter meanings. The description does not add additional parameter-specific guidance (e.g., format constraints, order), so it meets the baseline but does not exceed it.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the verb 'add' and resource 'module' to an existing HWMS project, listing specific features (dependency resolution, route/menu injection, handler regeneration) that distinguish it from siblings like list_modules, resolve_dependencies, and generate_scaffold.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
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 versus alternatives. The description implies it's for adding modules to existing projects, but does not exclude cases like new projects, or advise using resolve_dependencies separately.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
generate_scaffoldB
선택된 모듈들로 프로젝트 구조를 생성합니다. 프로젝트 디렉토리, 모듈 파일, package.json, README.md 등을 자동으로 생성합니다.
| Name | Required | Description | Default |
|---|---|---|---|
| modules | Yes | 포함할 모듈 이름 배열 (의존성은 자동 해결됨) | |
| projectName | Yes | 생성할 프로젝트 이름 (예: "my-hybrid-app") |
TDQS
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. It mentions creation of files/directories, but omits critical details: whether it overwrites existing files, whether it requires a clean directory, side effects, or dependency installation. For a scaffold tool, these are important behavioral aspects missing from the description.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two concise sentences in Korean, front-loaded with the core action. No filler words; every phrase adds value. The description is immediately understandable and efficient.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's moderate complexity (2 params, no output schema, no annotations), the description is minimal. It covers the basic purpose and outputs but lacks context on return values, error conditions, and workflow integration with sibling tools. It is adequate but not fully comprehensive.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, with both parameters well-documented. The description adds slight context ('with selected modules' and 'automatically creates project directory, module files, package.json, README.md'), but this largely reinforces rather than extends schema information. Baseline 3 is appropriate as schema handles the semantic load.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool generates a project structure with selected modules, listing specific outputs (directory, module files, package.json, README). This is a specific verb+resource combination that inherently differentiates it from sibling tools like list_modules (listing) and resolve_dependencies (resolving dependencies).
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance on when to use this tool versus alternatives. It does not mention prerequisites (e.g., having selected modules via list_modules), when not to use it, or typical workflow context. The description only states what it does, without any usage instructions.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
list_modulesA
사용 가능한 모듈 목록을 조회합니다. 하이브리드 웹앱 개발에 사용할 수 있는 검증된 모듈들의 이름, 카테고리, 설명을 반환합니다.
| Name | Required | Description | Default |
|---|---|---|---|
| category | No | 모듈 카테고리로 필터링 (예: core, media, notification, device) |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries full responsibility. It discloses that the tool returns names, categories, and descriptions of 'verified' modules, adding some behavioral context. However, it does not mention authorization requirements, whether the list is static or dynamic, or any side effects. The disclosure is adequate but not comprehensive.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is two sentences, front-loaded with the core purpose, and contains no extraneous words. Every sentence contributes value, making it highly efficient and easy to parse.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's simplicity (one optional parameter, no output schema), the description sufficiently explains the output (names, categories, descriptions). It could be slightly more complete by clarifying if the list is exhaustive or paginated, but for a basic list tool this is sufficient.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema has 100% coverage with the 'category' parameter already described as a filter with examples. The tool description adds no additional meaning beyond the schema, so baseline score of 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool queries a list of available modules and specifies the returned fields (names, categories, descriptions of verified modules). It is specific with verb 'queries' and resource 'list of available modules', and distinguishes from siblings that handle dependency resolution, scaffold generation, and module addition.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives (resolve_dependencies, generate_scaffold, add_module). There is no explicit when/when-not context or mention of prerequisites, leaving the agent to infer usage purely from the tool name.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
resolve_dependenciesA
선택된 모듈들의 의존성을 자동으로 해결합니다. 필요한 의존 모듈을 추가하고, 충돌을 검사하며, 환경 변수와 설정 단계를 반환합니다.
| Name | Required | Description | Default |
|---|---|---|---|
| modules | Yes | 선택된 모듈 이름 배열 (예: ["bridge-camera", "bridge-push"]) |
TDQS
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 discloses that the tool adds dependency modules, checks conflicts, and returns env vars and config steps. However, it does not clarify whether modifications are permanent or reversible, error handling behavior, or any required permissions. The description is moderately transparent but leaves ambiguity about side effects.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is two sentences with no waste. The first sentence front-loads the core purpose, and the second adds specific details. Every sentence earns its place.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a tool with one parameter, no output schema, and no annotations, the description covers the main purpose and outcomes. However, it is ambiguous whether the tool actually modifies the project or only returns information. It also lacks details on error handling, prerequisites, and the exact nature of the returned data. This gap reduces completeness.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema has 100% coverage with a parameter description that matches the tool's description ('selected module name array'). The tool description adds context about dependency resolution but does not provide additional semantic meaning beyond what the schema already offers. Baseline 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool resolves dependencies of selected modules, including adding dependency modules, checking conflicts, and returning environment variables and configuration steps. This specific verb and resource distinguish it from siblings like list_modules (listing) and add_module (adding a single module).
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies usage for dependency resolution after selecting modules, but it does not explicitly state when to use this tool versus alternatives, nor does it mention prerequisites or when not to use it. The context of sibling tools provides some guidance, but the description itself lacks explicit usage guidelines.
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.
4 tool updates
v1.0.0- First observed
add_module - First observed
generate_scaffold - First observed
list_modules - First observed
resolve_dependencies
TDQS
Scored across 4 tools
Each tool has a distinct purpose: listing available modules, resolving dependencies, generating a new scaffold, and adding a module to an existing project. There is no overlap in their primary functions, making misselection unlikely.
All tool names follow a consistent verb_noun pattern: list_modules, resolve_dependencies, generate_scaffold, add_module. This predictable structure aids agent selection and comprehension.
With 4 tools, the server is tightly scoped to the core workflow of module management: listing, dependency resolution, scaffolding, and adding. Each tool is essential and there is no bloat, making the count ideal.
The tool surface covers the main lifecycle of module management in a hybrid web app project. Minor gaps might include module update or removal operations, but the current set covers starting a project and extending it sufficiently.
Maintenance
Related MCP Connectors
One message in, a full agentic application out: website and MCP app, live. Built from any AI client.
AppDeploy turns app ideas described in AI chat into live full-stack web applications
Code intelligence platform for AI agents. 20 tools for architecture, security & impact analysis.
AI development agent using Kendo UI to rapidly create and style quality web UIs or Pages.
Related MCP Servers
- FlicenseBqualityDmaintenanceEnables AI-driven frontend component design and code generation from natural language requirements. Supports Vue, React, and Angular with intelligent component decomposition, API design, and complete project generation.43-
- AlicenseNot gradedqualityDmaintenanceEnables AI assistants to automate Next.js development including project scaffolding, React component generation, API route creation, and full-stack application workflows with TypeScript and Tailwind CSS support.MIT
- AlicenseNot gradedqualityDmaintenanceEnables AI models to interact with ABP.IO applications through over 48 tools for managing modules, entities, users, and multi-tenancy. It supports comprehensive application lifecycle management and automated UI generation across multiple frameworks including Angular, Blazor, and MVC.35 npm13MIT
- AlicenseNot gradedqualityDmaintenanceEnables AI assistants to manage complex development workflows by creating structured handoffs between strategic planning and tactical implementation, with project management, task tracking, and intelligent scaffolding.9 npmMIT