Skip to content

getting-started.md

Latest commit

 

History

History
220 lines (164 loc) · 5.29 KB

getting-started.md

File metadata and controls

220 lines (164 loc) · 5.29 KB

Getting Started with Composter

Welcome to Composter! This guide will help you get started with storing, organizing, and retrieving your React components.

What is Composter?

Composter is a personal vault for React components that allows you to:

  • 🗃️ Store reusable components in organized categories
  • ⚡ Access components via CLI, web dashboard, or AI assistants
  • 📦 Preview components with live rendering
  • 🔌 Integrate with your favorite AI tools (Claude, Cursor, VS Code)

Quick Start (5 minutes)

Step 1: Install the CLI

npm install -g composter-cli

Verify installation:

composter --version

Step 2: Create an Account

Visit composter.vercel.app and sign up with your email.

Step 3: Login via CLI

composter login

Enter your credentials when prompted. Your session will be saved for 30 days.

Step 4: Create Your First Category

composter mkcat buttons

Step 5: Add a Component

Create a simple React component:

// MyButton.jsx
export default function MyButton({ children, onClick }) {
  return (
    <button 
      onClick={onClick}
      className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
    >
      {children}
    </button>
  );
}

Push it to your vault:

composter push buttons "MyButton" ./MyButton.jsx

Step 6: Retrieve Your Component

List all components in the category:

composter ls buttons

Pull a component to your project:

composter pull buttons "MyButton" ./components/

What's Next?

Common Use Cases

1. Building a Personal Component Library

# Organize by component type
composter mkcat buttons
composter mkcat forms
composter mkcat cards
composter mkcat layouts

# Add components
composter push buttons "PrimaryButton" ./src/components/Button.jsx
composter push forms "LoginForm" ./src/forms/Login.jsx

2. Sharing Components Across Projects

# In Project A - Save component
composter push ui "Modal" ./components/Modal.jsx

# In Project B - Retrieve component
composter pull ui "Modal" ./src/components/

3. Using with AI Assistants

After setting up MCP integration:

  1. Open Claude/Cursor/VS Code
  2. Ask: "Show me my Button components from Composter"
  3. AI will list and help you use your components

Understanding the Workflow

┌─────────────┐
│   Create    │
│  Component  │
└──────┬──────┘
       │
       ▼
┌─────────────┐
│    Push     │
│  to Vault   │  ← composter push
└──────┬──────┘
       │
       ▼
┌─────────────┐
│   Browse    │
│  Dashboard  │  ← Web UI or CLI
└──────┬──────┘
       │
       ▼
┌─────────────┐
│    Pull     │
│  to Project │  ← composter pull
└─────────────┘

Tips for Success

  1. Use Descriptive Names: Name components clearly (e.g., "PrimaryButton" not "btn1")
  2. Organize by Purpose: Create categories that match your workflow
  3. Include Dependencies: Document any required packages in your component comments
  4. Test Before Pushing: Ensure components work before saving
  5. Regular Backups: Export important components locally

Getting Help

Next Steps

Now that you're set up, explore:

Happy composting! 🌱

Developer / Local Development

If you're developing Composter itself (CLI, API, frontend, or MCP), here are quick commands and tips.

  • Run the API (dev):
cd api
npm install
# start with nodemon or the project's dev script
npm run dev
  • Run the frontend (dev):
cd frontend
npm install
npm run dev
  • Run the CLI locally:
cd cli
npm install
# run the CLI commands via npx during development
npx node ./bin/composter.js login
  • Run MCP server (dev):
cd packages/mcp
npm install
npm start
# or run the inspector (see MCP docs) to debug MCP interactions
  • Inspector (MCP debugging): The project includes the Model Context Protocol inspector. From packages/mcp you can run:
cd packages/mcp
npm run server:inspect
# which runs: npx @modelcontextprotocol/inspector node src/server.js

These will help you iterate quickly while developing integrations and QA-ing the MCP/CLI flows.