02-programmatic.html

<!--
  Starting and stopping the tools from your own JavaScript: the script is
  loaded without data-key, so it waits for you to call init. Replace
  wmk_YOUR_KEY (and wmk_OTHER_KEY, if you want to try switching keys) with
  your integrations' keys. Needs a browser with WebMCP switched on.
-->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>WebMCP: start and stop from JavaScript</title>
</head>
<body>
  <h1>Start and stop from JavaScript</h1>
  <p>
    The script is loaded without <code>data-key</code>, so it waits for you. These buttons call
    <code>init</code> and <code>destroy</code>. <code>init</code> always gives back a result saying
    whether the tools were offered, and why not if they weren't.
  </p>
  <p>
    <button id="start">init</button>
    <button id="switch">init with another key</button>
    <button id="stop">destroy</button>
  </p>

  <h2>Log</h2>
  <ol id="log"></ol>

  <!-- No data-key, so nothing starts on its own. -->
  <script src="https://js.subcontext.com/webmcp-latest.js"></script>
  <script>
    // Your integration's key (starts wmk_). In the dashboard: Organisation > Agent access >
    // Manage WebMCP tools, then open the integration.
    var KEY = 'wmk_YOUR_KEY'
    // Optional: another integration's key, to try switching from one to the other.
    var OTHER_KEY = 'wmk_OTHER_KEY'

    function log(text) {
      var item = document.createElement('li')
      item.textContent = new Date().toLocaleTimeString() + '  ' + text
      document.getElementById('log').prepend(item)
    }

    function start(key) {
      // debug: true logs extra detail in the console (show the Verbose level).
      // There is also baseUrl, which defaults to https://subcontext.com. You don't normally need it.
      SubcontextWebMCP.init({ key: key, debug: true }).then(function (result) {
        // result is { ok, status: 'registered' | 'unsupported' | 'failed' | 'cancelled', tools, org, error }
        if (result.ok) log('Tools offered for ' + result.org + ': ' + result.tools.join(', '))
        else log('Tools not offered: ' + result.status + (result.error ? ' (' + result.error + ')' : ''))
      })
    }

    log('Script loaded, version ' + SubcontextWebMCP.version)

    // init removes whatever the last init registered first, so calling it again with another key switches to that key's tools.
    document.getElementById('start').onclick = function () { start(KEY) }
    document.getElementById('switch').onclick = function () { start(OTHER_KEY) }

    // For example when the visitor opts out of AI assistants. It also cancels an
    // init that hasn't finished (that init reports 'cancelled').
    document.getElementById('stop').onclick = function () {
      SubcontextWebMCP.destroy()
      log('destroy: every tool is removed')
    }
  </script>
</body>
</html>