Create a Plugin from Boilerplate

1

Choose Your Boilerplate

Pick the language and framework that fits your project.

Go + Vue

# Example: Clone Go + Vue
git clone https://github.com/javimosch/boilerplate-cli-ui-go-v2-vue.git my-plugin
cd my-plugin
go run . start  # Test it works

2

Customize the API

Add endpoints for your tool's functionality.

Add your own endpoints (Go example)

// In server.go, add new endpoints:
app.MapGet("/api/my-tool/status", func() Results {
    return Results.Json(new {
        status = "running",
        version = "2.0.0",
        data = GetToolStatus(),
    })
})

app.MapPost("/api/my-tool/run", func(ctx HttpContext) Results {
    var input RunInput
    if err := ctx.Bind(&input); err != nil {
        return Results.BadRequest(new { error = err.Error() })
    }
    
    result := RunTool(input)
    return Results.Json(result)
})

For Rust (main.rs)

async fn my_tool_status() -> Json<MyStatus> {
    Json(MyStatus {
        status: "running".to_string(),
        version: "2.0.0".to_string(),
    })
}

// Add to router:
.route("/api/my-tool/status", get(my_tool_status))

3

Customize the UI

Update the dashboard to show your tool's data.

Edit the Dashboard view

// In ui/js/views/Dashboard.js
const DashboardView = {
    template: `
        <div>
            <h2 class="text-2xl font-bold mb-6">My Tool Dashboard</h2>
            
            <!-- Your custom status cards -->
            <div class="grid grid-cols-4 gap-4 mb-8">
                <status-card title="Status" :value="status?.status" icon="activity" />
                <status-card title="Version" :value="status?.version" icon="tag" />
                <!-- Add more cards -->
            </div>
            
            <!-- Your custom UI -->
            <div class="bg-white rounded-xl border p-6">
                <h3 class="font-semibold mb-4">My Tool Controls</h3>
                <button @click="runTool" class="btn btn-primary">Run Tool</button>
            </div>
        </div>
    `,
    setup() {
        const status = Vue.inject('status');
        const runTool = async () => {
            await fetch('/api/my-tool/run', { method: 'POST' });
        };
        return { status, runTool };
    }
};

Tip: Status cards, sidebar, and layout are reusable components in ui/js/components/.

4

Create plugin.json

Define how SuperCLI discovers and runs your plugin.

{
    "name": "my-tool",
    "version": "1.0.0",
    "description": "My custom CLI tool with web UI",
    "source": "https://github.com/myuser/my-tool",
    "checks": [
        {
            "type": "binary",
            "name": "my-tool"
        }
    ],
    "install_guidance": {
        "plugin": "my-tool",
        "binary": "my-tool",
        "check": "my-tool --version",
        "install_steps": [
            "go install github.com/myuser/my-tool@latest"
        ]
    },
    "commands": [
        {
            "namespace": "my-tool",
            "resource": "_",
            "action": "_",
            "description": "Start my-tool web UI",
            "adapter": "process",
            "adapterConfig": {
                "command": "my-tool start",
                "missingDependencyHelp": "Install: go install github.com/myuser/my-tool@latest"
            }
        }
    ]
}

Key fields:

• commands[0].adapterConfig.command - How to run your tool
• checks - How to verify the tool is installed
• install_guidance - Help users install your tool

5

Add Agent Learning

Create SKILL.md so AI agents can use your tool.

# my-tool/ skills/quickstart/SKILL.md

# My Tool Skill

## Overview

My tool does X, Y, Z. Use it when the user asks about [purpose].

## Usage

my-tool start           # Start web UI
my-tool start -p 3000   # Start on custom port
my-tool version         # Show version

## API Endpoints

GET /api/status    # Server status (JSON)
GET /api/health    # Health check (JSON)
POST /api/run      # Run the tool

## Examples

### Check status
curl http://localhost:8080/api/status | jq

### Run tool
curl -X POST http://localhost:8080/api/run \\
     -H "Content-Type: application/json" \\
     -d '{"param": "value"}'

Why this matters: AI agents read SKILL.md to understand how to use your tool. Include examples, common patterns, and error handling.

6

Test Your Plugin

Install locally and verify everything works.

# Build your tool first
go build -o my-tool .

# Install as SuperCLI plugin
supercli plugins install ./my-plugin

# Verify discovery
supercli plugins explore --name my-tool

# Check health
supercli plugins doctor my-tool

# Test it
supercli my-tool start

Checklist:

□ Tool builds without errors
□ plugin.json is valid JSON
□ supercli plugins explore finds your plugin
□ supercli plugins doctor passes
□ Web UI loads at http://localhost:8080
□ API endpoints return JSON

Complete Example

Directory Structure

my-plugin/
├── plugin.json              # Plugin manifest
├── meta.json                # Registry metadata
├── main.go                  # Backend (customized)
├── server.go                # HTTP server (customized)
├── go.mod
├── ui/
│   ├── index.html
│   ├── js/
│   │   ├── app.js
│   │   ├── components/
│   │   └── views/
│   └── css/
│       └── styles.css
└── skills/
    └── quickstart/
        └── SKILL.md         # Agent learning

meta.json

{
    "description": "My custom tool with web dashboard",
    "tags": ["mytool", "web-ui", "dashboard"],
    "has_learn": true,
    "install_guidance": {
        "plugin": "my-tool",
        "binary": "my-tool",
        "check": "my-tool --version",
        "install_steps": [
            "git clone https://github.com/myuser/my-tool",
            "cd my-tool && go build -o my-tool ."
        ]
    }
}

Quick Commands

# Full workflow
git clone https://github.com/javimosch/boilerplate-cli-ui-go-v2-vue.git my-plugin
cd my-plugin

# Edit files...
# Add plugin.json, meta.json, skills/quickstart/SKILL.md

# Build and test
go build -o my-tool .
supercli plugins install .
supercli my-tool start