快速接入

先看主来源和安装命令，再打开仓库或文档；下面只保留这个条目的关键接入事实。

详细介绍

MCP WebDev服务器🚀

具有模块化编排系统的综合Svelte+shadcn Svelte+Routify开发服务器

一个强大的MCP（模型上下文协议）服务器，集成了shadcn-svelte、svelte 5和Routify，用于快速构建网站，以及一个完整的模块化编排系统，用于复杂的应用程序状态管理。

🏗️ 架构概述

此存储库包含两个主要系统：

1. MCP WebDev服务器 (`/src/`)

战略核心8 MCP功能，用于快速发展Svelte：

核心功能（6）：

generate_component -使用shadcn-Svelte集成创建Svelte组件
generate_page -生成带有路由的完整页面
scaffold_project -创建完整的项目结构
create_route -使用参数设置路由
generate_theme -创建一致的设计系统
list_templates -浏览可用的模板和模式

战略职能（2）：

search_examples -查找相关的代码示例和文档
compose_patterns -从多个组件构建复杂的UI模式

2. 模块化编排器系统 (`/orchestrator-modules/`)

用于复杂Svelte应用的可插拔模块系统：

核心基础：

@orchestrator/core -Singleton状态管理，钩子系统（始终包含在内）

插件模块：

@orchestrator/websocket -实时WebSocket集成
@orchestrator/api -具有重试逻辑的REST API管理
@orchestrator/workflow -具有节点执行功能的可视化工作流引擎
@orchestrator/files -文件处理（JSON、YAML、CSV）和上传
@orchestrator/state-ui -状态可视化和管理界面
@orchestrator/hooks-ui -钩子管理和调试界面

🚀 快速开始

作为MCP服务器安装

# Install the MCP server globally
npm install -g @theagencyinstitute/mcp-webdev

# Add to your Claude Desktop config
claude mcp add --scope user webdev -- mcp-webdev-server

使用编排器系统

// Minimal setup (just state management)
import { Orchestrator } from '@orchestrator/core';

const app = Orchestrator.getInstance({
  debug: true,
  persistence: { type: 'localStorage', prefix: 'my-app' }
});

app.setState('user', { name: 'John', theme: 'dark' });

// Full-featured real-time dashboard
import { Orchestrator } from '@orchestrator/core';
import { WebSocketModule } from '@orchestrator/websocket';
import { ApiModule } from '@orchestrator/api';
import { StateUIModule } from '@orchestrator/state-ui';

const dashboard = Orchestrator.getInstance()
  .use(WebSocketModule, { url: 'ws://localhost:8080' })
  .use(ApiModule, { baseUrl: 'https://api.example.com' })
  .use(StateUIModule);

📦 包含什么

MCP WebDev服务器功能：

✅ 完整的shadcn轻量级集成 （40+组件）

警报、头像、徽章、按钮、卡片、复选框、对话框、下拉菜单、输入、选择、表格、工具提示等。
包含道具、变体和示例的完整组件元数据

✅ Svelte 5符文支持

$state, $derived, $effect, $props 整合
现代反应模式和类型安全

✅ 路由基于文件的路由

带参数的动态路线
布局系统和导航
路线警卫和元处理

✅ 高级代码生成

组件组合模式（身份验证、仪表板、电子商务）
使用CSS变量生成主题
TypeScript集成贯穿始终

编排器系统功能：

✅ 始终在场状态管理

Svelte门店整合
持久性（本地存储/会话存储/内存）
状态快照和历史记录

✅ 强大的挂钩系统

生命周期事件（状态更新之前、状态更新之后）
模块安装/卸载挂钩
自定义事件系统

✅ 可视化工作流引擎

基于拖放节点的工作流
触发器/动作/条件/变换节点
拓扑执行与日志记录

✅ 实时集成

WebSocket自动重新连接
消息路由到状态
连接状态跟踪

✅ 文件处理

JSON、YAML、CSV解析
自定义文件处理器
带验证的拖放上传

📁 项目结构

mcp_webdev/
├── src/                          # MCP WebDev Server
│   ├── index.ts                  # Main server entry point
│   ├── integrations/             # shadcn-svelte integration
│   ├── services/                 # Code generation services
│   ├── templates/                # Component and page templates
│   └── generators/               # File generators
├── orchestrator-modules/         # Modular Orchestrator System
│   ├── core/                     # Core orchestrator (state + hooks)
│   ├── websocket/               # WebSocket module
│   ├── api/                     # API integration module
│   ├── workflow/                # Workflow engine module
│   ├── files/                   # File processing module
│   ├── state-ui/                # State management UI
│   ├── hooks-ui/                # Hook debugging UI
│   └── examples/                # Usage examples
├── dist/                        # Compiled output
└── README.md                    # This file

🎯 使用示例

示例1：最小应用程序（公正国家管理）

import { Orchestrator } from '@orchestrator/core';

const app = Orchestrator.getInstance({
  persistence: { type: 'localStorage', prefix: 'minimal-app' }
});

app.setState('user', { name: 'John', preferences: { theme: 'dark' } });
app.addHook('afterStateUpdate', (context) => {
  console.log(`State updated: ${context.data.key}`, context.data.value);
});

示例2：实时仪表板

import { Orchestrator } from '@orchestrator/core';
import { WebSocketModule } from '@orchestrator/websocket';
import { ApiModule } from '@orchestrator/api';

const dashboard = Orchestrator.getInstance()
  .use(WebSocketModule, { 
    url: 'ws://localhost:8080/metrics',
    autoReconnect: true 
  })
  .use(ApiModule, { 
    baseUrl: 'https://api.metrics.com',
    timeout: 15000 
  });

dashboard.addHook('websocketMessage', async (context) => {
  const { data } = context.data;
  if (data.type === 'metrics') {
    dashboard.setState('metrics.realtime', data.payload);
  }
});

dashboard.connectWebSocket();

示例3：具有工作流的电子商务

import { Orchestrator } from '@orchestrator/core';
import { ApiModule } from '@orchestrator/api';
import { FilesModule } from '@orchestrator/files';
import { WorkflowModule } from '@orchestrator/workflow';

const ecommerce = Orchestrator.getInstance()
  .use(ApiModule, { baseUrl: 'https://api.shop.com' })
  .use(FilesModule, { allowedTypes: ['csv', 'json'] })
  .use(WorkflowModule);

// Order processing workflow
const orderWorkflow = {
  id: 'order-processing',
  name: 'Order Processing',
  nodes: [
    { id: 'validate-cart', type: 'condition' },
    { id: 'create-order', type: 'action' },
    { id: 'send-confirmation', type: 'action' }
  ]
  // ... connections and config
};

ecommerce.saveWorkflow(orderWorkflow);

🚀 可用MCP功能-战略核心8

功能	目的	示例
核心6功能
`mcp__webdev__generate_component`	创建Svelte组件	按钮、卡片、表单
`mcp__webdev__generate_page`	构建完整页面	登录、关于、博客	\
`mcp__webdev__scaffold_project`	完整的项目设置	启动，企业
`mcp__webdev__create_route`	路由自动化	/about，/blog/\[slug\]
`mcp__webdev__generate_theme`	主题生成	现代蓝色，大胆红色
`mcp__webdev__list_templates`	显示可用模板	组件、页面
战略+2职能
`mcp__webdev__search_examples`	查找代码示例	身份验证表单、数据表
`mcp__webdev__compose_patterns`	构建复杂的UI模式	仪表板、电子商务网格

🛠️ 发展

先决条件

Node.js 18+
TypeScript 5+
Svelte 5

设置开发环境

git clone https://github.com/TheAgencyInstitute/mcp_webdev.git
cd mcp_webdev
npm install

# Build the MCP server
npm run build

# Test the server
npm test

# Development mode
npm run dev

测试MCP功能

# Test MCP server connection
node test-server.js

# Test individual functions
npm run test:generate-component
npm run test:scaffold-project

构建编排器模块

cd orchestrator-modules/core
npm run build

cd ../websocket
npm run build

# ... etc for other modules

🔧 整合

与以下设备无缝协作：

✅ Svelte 4/5 & SvelteKit
✅ shadcn 快速 （40+组件）
✅ 例行化 （基于文件的路由）
✅ 顺风CSS & TypeScript
✅ 快构建系统

🤝 贡献

分叉存储库
创建要素分支(git checkout -b feature/amazing-feature)
提交您的更改(git commit -m 'Add amazing feature')
推到分支(git push origin feature/amazing-feature)
打开拉取请求

开发指南

遵循TypeScript严格模式
添加新功能的测试
更新API变更文档
使用常规提交消息

📄 许可证

MIT许可证-请参阅许可证了解详情。

🚀 路线图

\[ \] MCP服务器增强功能

- \[\]SvelteKit集成 - \[\]尾风CSS优化 - \[\]组件测试生成 - \[\]故事书集成

\[ \] 编排器模块

- \[\]数据库集成模块 - \[\]身份验证模块 - \[\]通知系统模块 - \[\]分析跟踪模块

\[ \] 开发者体验

- \[\]可视化工作流设计器UI - \[\]模块市场 - \[\]CLI脚手架工具 - \[\]VS代码扩展名

❤️ 致谢

基于经过实战测试的编码编排架构
集成了优秀的shadcn轻量级组件库
专为Svelte 5符文系统打造
由Routify基于文件的路由提供支持

______________________________________________________________________

内置于❤️ 机构研究所

*支持快速、模块化和可扩展的Svelte应用程序开发*

目录标签

代码生成TypeScriptClaudeSvelte开发本地部署模块化编排状态管理Web开发

支持客户端

Claude DesktopClaude

接入字段

传输方式（transport，传输协议）

未说明

鉴权方式（authType，认证方式）

none

工具数量（toolCount，工具数）

8

资源数量（resourceCount，资源数）

0

提示词数量（promptCount，提示词数）

0

权限和风险

未说明none部署方式未说明

接入前请确认传输方式、认证方式和部署位置，并根据实际工具能力限制访问范围。

安装前确认

不要直接授予不必要的文件、网络或账号权限；先核对安装命令和配置内容。

仍需确认：installCommand

来源信息

MCP World

mcpworld.com

/detail/18d710ba33135296a1def1da290b9b9f

一个集成了shadcn-svelte、Svelte 5和Routify的MCP WebDev服务器，提供快速网站构建和模块化编排系统，适用于复杂应用状态管理。

继续浏览同类 MCP

更多开发工具 MCP（20,396）返回 MCP 目录

上一个 MCP

MCP Web Client

A web client for managing MCP servers and tools

下一个 MCP

MCP Webdev 3b90c82d

一个集成了shadcn-svelte、Svelte 5和Routify的MCP服务器，用于快速构建网站，并提供模块化编排系统用于复杂应用状态管理。

MCP webdev