Provides the complete Alpine.js documentation as resources, including directives, magic properties, global API, and official plugins, enabling AI assistants to accurately reference Alpine.js when building applications.
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., "@alpine-mcp Show me how to use x-for directive"
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.
An MCP (Model Context Protocol) server that provides the complete Alpine.js documentation as resources. Gives AI assistants accurate, up-to-date reference when building with Alpine.js.
URI | Contents |
| All 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, and more |
| All magic properties — $el, $refs, $store, $watch, $dispatch, $nextTick, $root, $data, $id |
| Global API — Alpine.data(), Alpine.store(), Alpine.bind() |
| Official plugins — Mask, Intersect, Persist, Focus, Collapse, Anchor, Morph, Sort |
Related MCP server: Vue Docs MCP
Add to your claude_desktop_config.json:
macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json
{
"mcpServers": {
"alpine": {
"command": "npx",
"args": ["-y", "alpine-mcp"]
}
}
}Restart Claude Desktop.
Run in your terminal:
claude mcp add alpine -- npx -y alpine-mcpOr add it to a project by creating/editing .claude/settings.json:
{
"mcpServers": {
"alpine": {
"command": "npx",
"args": ["-y", "alpine-mcp"]
}
}
}Add to your global MCP config at ~/.cursor/mcp.json, or create .cursor/mcp.json in your project root:
{
"mcpServers": {
"alpine": {
"command": "npx",
"args": ["-y", "alpine-mcp"]
}
}
}Restart Cursor.
Add to your user settings.json (open with Preferences: Open User Settings (JSON)):
{
"mcp": {
"servers": {
"alpine": {
"type": "stdio",
"command": "npx",
"args": ["-y", "alpine-mcp"]
}
}
}
}Or scope it to a workspace by adding the same block to .vscode/settings.json.
Any client that supports the Model Context Protocol stdio transport can run it directly:
npx alpine-mcpOr install globally:
npm install -g alpine-mcp
alpine-mcpOnce registered, ask your AI assistant about Alpine.js and it will automatically reference the accurate documentation. For example:
"How do I use x-transition with custom CSS classes?"
"What modifiers does x-on support?"
"How do I persist state across page loads with Alpine?"
"Show me how to use the Focus plugin for a modal."
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"]
}
}
}Documentation content is sourced directly from the official Alpine.js repository and covers Alpine.js v3.
MIT
The documentation, as a tool your agent can call: 950+ AI-dev guides. Search + fetch tools.
Provide your AI coding tools with token-efficient access to up-to-date technical documentation for…
Versioned documentation registry and semantic search for AI tools and coding assistants.
Serves your design system and coding standards to coding agents, so they stop guessing.
