Varmory

Component showcase for Vue 3 + Quasar apps, with an MCP server for AI agents.

Varmory drops an interactive component browser into any Vue 3 + Quasar app. Browse live previews, tweak props, copy code — and expose the same metadata to AI agents like Claude via the built-in Model Context Protocol server.

Component categories

• Colors
• Typography
• Icons
• Buttons
• Dialogs
• Lists
• Menu
• Panels
• Inputs
• Tabs & Steppers
• Rich Text Editor
• Tables

Features

• Live previews with interactive prop/slot/event controls
• Copy-ready code snippets for every component
• Semantic search (hybrid dense embeddings + BM25 via vecito)
• MCP server — AI agents can query component APIs, templates, and docs
• Custom component support via JSON API definitions
• Works as a standalone demo or embedded in your own app

Links

• npm: varmory
• GitHub: jeka-kiselyov/varmory
• themed_varmory — reference themed component library

Documentation

• Usage — Vite config, Quasar plugin wiring, fresh app setup
• Building Components — API style, layout patterns, composition
• MCP Server — AI agent integration, tools, resources, search index
• Showcase guide

MCP Server

A public Streamable HTTP MCP server is available for AI agents:

claude mcp add --transport http varmory https://varmory-dec8b20a1b83.herokuapp.com/mcp

Quick install

npm install varmory
npm install vue@^3 quasar@^2 @quasar/extras@^2