Installation

With your AI coding tool

The fastest path: let a coding agent do the integration. The public Napster agent skills work with any Agent Skills-compatible tool (Claude Code, Cursor, Codex, and others):

npx skills add napster/omniagent-api-skills

Then ask your tool to "agentify this app" — or paste the ready-made starting prompt. It covers the whole journey, agentifying included, and then puts the Omniagent on the site; approve each step and stop wherever you like:

The skills install the library, analyze your codebase, propose which operations and state to expose, and write the tools — nothing lands without your review and approval. They also set up a keep-in-sync mechanism so the agent surface follows your app as it changes.

npm

npm install @napster-corp/edge-mcp

Import it once, early in your app's client entry:

import '@napster-corp/edge-mcp';

The import has one side effect: it polyfills document.modelContext (the standard WebMCP surface) and installs the resource extension. From there, everything you write is standard WebMCP. Outside the browser — SSR, workers, edge runtimes — the import is a deliberate no-op, so it's safe in universal code.

Script tag

No npm or bundler — server-rendered templates (Rails, Django, PHP), static HTML? The package ships a pre-bundled browser build (~42 KB before gzip), served by any npm CDN:

<script src="https://cdn.jsdelivr.net/npm/@napster-corp/[email protected]/dist/edge-mcp.iife.min.js"></script>

Loading the script does exactly what the import does. Register tools in plain inline scripts:

<script>
  document.modelContext.registerTool({
    name: 'contact.submit',
    description: 'Submit the contact form.',
    inputSchema: { type: 'object', properties: { email: { type: 'string' } }, required: ['email'] },
    annotations: { destructiveHint: true },
    async execute({ email }) {
      return submitContactForm(email); // the site's real code
    },
  });
</script>

Recommended layout

Keep the integration in one place — a src/edge-mcp/ folder:

src/edge-mcp/
├── index.ts        # imports the toolkit, wires everything up
├── tools/          # one descriptor file per tool
│   └── index.ts    # registers them all via document.modelContext.registerTool
└── resources.ts    # registerResource calls (live state)

One wrinkle worth knowing: a tool's execute lives in a plain module, but things like navigation often exist only inside your framework (React Router's useNavigate, for example). Register a module-level handle from an in-tree component at mount, and have execute call through it.

Next steps