supercli

CLI Framework

← Back to Boilerplates

# Create a Plugin from Boilerplate

Turn any CLI-UI boilerplate into a SuperCLI plugin in 6 steps.

1

## Choose Your Boilerplate

Pick the language and framework that fits your project.

Go + Vue
~5MB • Recommended
Rust + Vue
~1.1MB • Smallest
C++ + Vue
~493KB • Tiny
Go + React
~5MB • React fans
# 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

## Next Steps

- Read the full Plugin Development Guide →
- Learn about Agent-Friendly Design →
- Browse existing plugins for inspiration →