<img src="frontend/public/composter_logo.png" alt="Composter Logo" width="120" height="120"> <h1 align="center">Composter</h1> Your Personal Vault for React Components Upload, organize, and retrieve your components instantly with CLI, Dashboard, and MCP integration. <a href="https://github.com/binit2-1/Composter/blob/main/LICENSE"> <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="MIT License"> </a> <a href="https://www.npmjs.com/package/composter-cli"> <img src="https://img.shields.io/npm/v/composter-cli.svg" alt="npm version"> </a> <a href="https://github.com/binit2-1/Composter/actions"> <img src="https://img.shields.io/github/actions/workflow/status/binit2-1/Composter/ci.yml?branch=main" alt="CI Status"> </a> <a href="https://github.com/binit2-1/Composter/issues"> <img src="https://img.shields.io/github/issues/binit2-1/Composter.svg" alt="Issues"> </a> <a href="https://github.com/binit2-1/Composter/stargazers"> <img src="https://img.shields.io/github/stars/binit2-1/Composter.svg?style=social" alt="GitHub stars"> </a>

Composter Landing Page

✨ 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
Wiki: DeepWiki - Composter
Documentation: see the docs/ folder for user and developer guides (docs/getting-started.md, docs/api-reference.md, docs/mcp-integration.md).

🚀 Quick Start

For Users (No Setup Required)

Install the CLI:

npm install -g composter-cli

Login and start using:

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

Access the web dashboard:
- Visit composter.vercel.app

For Contributors

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

# Install dependencies at repo root (monorepo)
npm install

# Start API
cd apps/api && npm run dev

# Start Web
cd ../web && npm run dev

Run the whole monorepo (recommended)

This repository uses Turbo (turborepo) to orchestrate apps and packages. From the repository root you can run the full development environment with one command.

# From repo root
npm install         # if you haven't already
npm run dev         # runs `turbo dev` which starts services in parallel

Turbo will run the dev scripts defined in each workspace (for example apps/api, apps/web, cli, mcp). If you need to run only a subset, use Turbo filtering:

# Run only API and Web
npx turbo dev --filter=apps/api... --filter=apps/web...

# Run only the web app
npx turbo dev --filter=apps/web

Environment variables

Create per-service .env files (for example apps/api/.env and apps/web/.env), or set them in your shell.
For local development the important vars are DATABASE_URL, BETTER_AUTH_SECRET, BETTER_AUTH_URL, and CLIENT_URL.

Example apps/api/.env:

DATABASE_URL="postgresql://user:password@localhost:5432/composter"
BETTER_AUTH_SECRET="your_secret_here"
BETTER_AUTH_URL="http://localhost:3000"
CLIENT_URL="http://localhost:5173"

Notes

If you change ports or hostnames, update CLIENT_URL and VITE_API_BASE_URL in apps/web/.env or apps/web/.env.production.
To build everything for production use npm run build from the repo root (runs turbo build).

📖 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/

CLI Usage

Web Dashboard

Access the dashboard at composter.vercel.app

Dashboard

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

Component Detail

🤖 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

Login via CLI first:
```
composter login
```

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

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! 🎉

Composter

Install / Use

README