Quickstart: Hello World in 5 Minutes
Go from nothing to a running AMC plugin — with a live UI and a working toast — in five minutes. No prior plugin experience needed.
What you'll build
A tiny "Hello World" plugin: a sidebar panel that greets you and pops a toast when you click a button. You'll see it running in the dev shell with hot-reload.
Before you start (30 seconds)
You need two things:
- Node.js v18+ — check with
node --version - Agent Mission Control — only required for the final "install for real" step; the dev shell runs without it
That's it. No accounts, no config.
1. Install the CLI (1 min)
npm install -g @agent-mc/plugin-cliConfirm it's on your PATH:
amc-plugin --version2. Scaffold the plugin (1 min)
Skip the interactive prompts — generate everything in one line:
amc-plugin create hello-world \
--display-name "Hello World" \
--description "My first AMC plugin" \
--author "Your Name" \
--icon smileThen step in:
cd hello-worldYou now have a complete, valid plugin:
hello-world/
manifest.json # metadata + permissions
package.json
tsconfig.json
src/ui/
index.html # your panel's markup
plugin.ts # your panel's logic3. Make it say hello (2 min)
Open src/ui/index.html and replace the <body> with a heading and a button:
<body>
<h1 id="greeting">Loading…</h1>
<button id="hello-btn">Say hello</button>
<script src="plugin.js"></script>
</body>Now open src/ui/plugin.ts and make it talk to AMC through the AgentMC bridge:
import type { AgentMC } from '@agent-mc/plugin-sdk/browser'
// The bridge is injected on `window` by AMC (and by the dev shell).
const amc = (window as unknown as { AgentMC: AgentMC }).AgentMC
const greeting = document.getElementById('greeting') as HTMLHeadingElement
const button = document.getElementById('hello-btn') as HTMLButtonElement
greeting.textContent = 'Hello from your first plugin! 👋'
button.addEventListener('click', () => {
amc.toast.show({ type: 'success', message: 'It works!' })
})That's the whole plugin. amc.toast.show() needs no permission — it's available to every plugin — so manifest.json doesn't need to change.
4. See it run (30 sec)
Launch the dev shell. It builds your plugin, opens it in an Electron window with a mock AgentMC, and hot-reloads on every save:
npm run devClick Say hello — a success toast appears. Edit the greeting text, save, and watch the window refresh instantly.
The dev shell mocks the APIs
npm run dev doesn't need AMC installed — it stubs the AgentMC bridge so you can iterate fast. See Dev Shell for what's mocked.
5. Install it in AMC for real (optional, 1 min)
When you're happy, bundle and install it:
npm run package # → hello-world-1.0.0.amcpluginThen in Agent Mission Control: Settings → Plugins → Install from file, pick the .amcplugin, and your panel shows up in the sidebar.
What just happened
manifest.jsondeclared your plugin to AMC (id, name, permissions, UI entry).src/ui/is your panel — plain HTML + TypeScript, no framework required.window.AgentMCis the bridge: the typed gateway to every AMC API.toastis free; other APIs are unlocked by permissions.amc-plugin devgave you a mock-backed, hot-reloading loop;packageproduced the installable artifact.
Next steps
- Getting Started — the full walkthrough (templates, validate, publish)
- Project Structure — every file, explained
- Permissions — unlock storage, sessions, AI, HTTP, and more
- API Reference — the complete
AgentMCsurface - Examples — seven runnable plugins to learn from