阿尔卑斯山mcp
一 MCP（模型上下文协议） 服务器，提供完整的Alpine.js文档作为资源。在使用Alpine.js构建时，为AI助手提供准确、最新的参考。
资源
| URI | 内容 |
|---|---|
alpine://directives | 所有指令——x-data、x-show、x-bind、x-on、x-model、x-for、x-transition、x-effect、x-ref、x-cloak、x-teleport、x-id等 |
alpine://magics | 所有魔法属性——$el、$refs、$store、$watch、$dispatch、$nextTick、$root、$data、$id |
alpine://globals | 全球API-Alpine.data（）、Alpine.store（）、Alpine.bind（） |
alpine://plugins | 官方插件——掩码、交集、持久、聚焦、折叠、锚点、变形、排序 |
安装
克劳德桌面
添加到您的 claude_desktop_config.json:
- macOS：
~/Library/Application Support/Claude/claude_desktop_config.json - 窗户：
%APPDATA%\Claude\claude_desktop_config.json
{
"mcpServers": {
"alpine": {
"command": "npx",
"args": ["-y", "alpine-mcp"]
}
}
}重新启动克劳德桌面。
克劳德代码
在终端中运行：
claude mcp add alpine -- npx -y alpine-mcp或者通过创建/编辑将其添加到项目中 .claude/settings.json:
{
"mcpServers": {
"alpine": {
"command": "npx",
"args": ["-y", "alpine-mcp"]
}
}
}光标
添加到您的全局MCP配置 ~/.cursor/mcp.json，或创建 .cursor/mcp.json 在项目根目录中：
{
"mcpServers": {
"alpine": {
"command": "npx",
"args": ["-y", "alpine-mcp"]
}
}
}重新启动游标。
VS Code
添加到您的用户 settings.json （打开 首选项：打开用户设置（JSON）):
{
"mcp": {
"servers": {
"alpine": {
"type": "stdio",
"command": "npx",
"args": ["-y", "alpine-mcp"]
}
}
}
}或者通过将相同的块添加到来将其范围限定到工作区 .vscode/settings.json.
任何MCP客户端
任何支持模型上下文协议stdio传输的客户端都可以直接运行它：
npx alpine-mcp或全局安装：
npm install -g alpine-mcp
alpine-mcp用法
注册后，向您的AI助手询问Alpine.js，它将自动引用准确的文档。例如：
- *“如何将x-transition与自定义CSS类一起使用？”*
- *“x-on支持哪些修饰符？”*
- *“如何使用Alpine在页面加载过程中保持状态？”*
- *“演示如何将Focus插件用于模态。”*
发展
git clone https://github.com/BillyNoyes/alpine-mcp.git
cd alpine-mcp
npm install
npm run build本地配置
{
"mcpServers": {
"alpine": {
"command": "node",
"args": ["/path/to/alpine-mcp/build/index.js"]
}
}
}内容
文档内容直接来源于 Alpine.js官方存储库 并涵盖了Alpine.js v3。
许可证
麻省理工学院