Composter

Your Personal Vault for React Components

Upload, organize, and retrieve your components instantly with CLI, Dashboard, and MCP integration.

---

✨ Features

• 🗃️ Component Vault — Store and organize your React components in categories
• ⚡ CLI Tool — Push, pull, and manage components directly from your terminal
• 🎨 Web Dashboard — Visual interface to browse, preview, and manage your library
• 🔌 MCP Compatible — Works with Claude, Cursor, GitHub Copilot, and other AI assistants
• 🔐 Secure Auth — Better Auth integration with JWT-based authentication
• 📦 Live Preview — Sandpack-powered component previews with Tailwind CSS support
• 📋 One-Click Copy — Copy component code or CLI commands instantly

🔗 Links

• Web App: composter.vercel.app
• CLI npm: npmjs.com/package/composter-cli
• MCP npm: npmjs.com/package/composter-mcp
• GitHub: github.com/binit2-1/Composter

🚀 Quick Start

For Users (No Setup Required)

1. Install the CLI:

   npm install -g composter-cli

2. Login and start using:

   composter login
   composter mkcat my-category
   composter push my-category "MyComponent" ./component.jsx

3. Access the web dashboard:

   • Visit composter.vercel.app

For Contributors

Want to contribute or run locally? See CONTRIBUTING.md for full setup instructions.

📖 Usage

CLI Commands

# Login to your account
composter login

# Create a category
composter mkcat buttons

# List all categories
composter ls

# Push a component
composter push buttons "PrimaryButton" ./src/components/Button.jsx

# Pull a component
composter pull buttons "PrimaryButton" ./components/

Web Dashboard

Access the dashboard at composter.vercel.app

Dashboard Features

• Browse Components — View all saved components organized by category
• Live Preview — See components rendered in real-time
• Code View — Inspect source code with syntax highlighting
• Copy Commands — One-click copy for npm install and CLI commands

🤖 MCP Integration

Composter includes a Model Context Protocol (MCP) server that enables AI assistants to interact with your component vault.

Supported AI Tools

Tool	Status
Claude Desktop	✅ Supported
Cursor	✅ Supported
GitHub Copilot	✅ Supported
VS Code + MCP Extensions	✅ Supported
Windsurf	✅ Supported

Setup

1. Login via CLI first:

   composter login

2. Auto-Configure (Recommended):

   # For Claude Desktop
   npx composter-mcp init claude
   
   # For Cursor
   npx composter-mcp init cursor
   
   # For VS Code (Copilot)
   npx composter-mcp init vscode
   
   # For Windsurf
   npx composter-mcp init windsurf

3. Restart your AI assistant

Manual Configuration

If you prefer manual setup, add to your IDE's MCP config file:

{
  "mcpServers": {
    "composter": {
      "command": "npx",
      "args": ["composter-mcp"]
    }
  }
}

Config file locations:

• Claude Desktop (macOS): ~/Library/Application Support/Claude/claude_desktop_config.json
• Claude Desktop (Linux): ~/.config/claude/claude_desktop_config.json
• Claude Desktop (Windows): %APPDATA%\Claude\claude_desktop_config.json
• Cursor: .cursor/mcp.json (in project root)
• VS Code: .vscode/mcp.json (in project root)
• Windsurf: ~/.codeium/windsurf/mcp_config.json

MCP Tools

Tool	Description
search_components	Search components by name or category
list_categories	List all categories in your vault
list_components	List all components in a category
read_component	Read the full source code of a component

For detailed MCP documentation, see mcp/README.md.

🤝 Contributing

We welcome contributions! Please see CONTRIBUTING.md for detailed setup instructions, development guidelines, and how to submit pull requests.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Better Auth — Authentication framework
• Prisma — Database ORM
• Sandpack — Live code preview
• Tailwind CSS — Styling
• shadcn/ui — UI components
• Model Context Protocol — AI integration
• @lobehub/icons — Beautiful icons

🌟 Community

• Discussions: Ask questions and share ideas
• Issues: Report bugs or request features
• Contributing: Read our contribution guide
• Security: Report vulnerabilities

Contributors

Thanks to all our contributors! 🎉

---