@kanmon-hq/tollgate-ui

Web Components UI suite for Tollgate API Gateway & Key Broker

901

vue react ui web-components api-gateway api-keys tollgate

Install
`npm install @kanmon-hq/tollgate-ui`
Latest Version:	1.1.5 (Oct 12, 2026)
Vue:	3
License:	MPL-2.0
Last Updated:	Oct 12, 2026
Links:	GitHub · npm

Maintainer: northfield.t

@kanmon-hq/tollgate-ui

English | 日本語

An embeddable, framework-agnostic Web Components UI suite for the Tollgate API Gateway & Key Broker.
Easily embed a full-featured API key management console into any frontend stack (Vue 3, React, Next.js, Angular, or Vanilla HTML) via a single <tollgate-console> custom element.

Features

⚡ Web Components (Custom Elements): Framework-independent, drops into any web app via <tollgate-console>.
🛡️ Shadow DOM Style Isolation: Zero CSS leakage. Completely isolated styling that never conflicts with host application stylesheets (Bootstrap, Tailwind, etc.).
🎨 Feature-Rich Admin UI: Built-in issuance, quota and RPM limits, graceful zero-downtime key rotation, suspensions, and real-time authorization testing.
🏢 Multi-Tenant Native: Seamless switching between tenants, scope selection, service key separation, and bulk tenant revocation.
⚙️ Interactive Connection Settings: Dynamic modal in the UI to update API Base URLs and Admin Tokens on the fly with localStorage persistence.

Installation

From npm (Recommended)

npm install @kanmon-hq/tollgate-ui
# or
pnpm add @kanmon-hq/tollgate-ui
# or
yarn add @kanmon-hq/tollgate-ui

From GitHub Packages

Configure your .npmrc in the project root:

@kanmon-hq:registry=https://npm.pkg.github.com

Then install:

npm install @kanmon-hq/tollgate-ui

Usage

1. Vanilla HTML / CDN

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script type="module" src="https://unpkg.com/@kanmon-hq/tollgate-ui/dist/tollgate-ui.js"></script>
</head>
<body class="bg-slate-950 p-8">
  <tollgate-console
    api-base-url="http://localhost:8000"
    admin-token="your-admin-secret"
    tenants-json='[{"id":"tenant-corp-a","name":"Corp A"},{"id":"tenant-corp-b","name":"Corp B"}]'
  ></tollgate-console>
</body>
</html>

2. Vue 3

<script setup lang="ts">
import '@kanmon-hq/tollgate-ui'
// Alternatively:
// import { registerTollgateUI } from '@kanmon-hq/tollgate-ui'
// registerTollgateUI()

const tenants = [
  { id: 'tenant-corp-a', name: 'Corp A' },
  { id: 'tenant-corp-b', name: 'Corp B' }
]
</script>

<template>
  <div class="p-6">
    <tollgate-console
      api-base-url="/api"
      admin-token="your-admin-secret"
      :tenants-json="tenants"
    />
  </div>
</template>

Vue 3 Tip: If using Vite, configure compilerOptions.isCustomElement: (tag) => tag.startsWith('tollgate-') in @vitejs/plugin-vue to avoid custom element compiler warnings.

3. React / Next.js

import React, { useEffect } from 'react'

export function TollgateAdminPage() {
  useEffect(() => {
    import('@kanmon-hq/tollgate-ui')
  }, [])

  const tenants = [
    { id: 'tenant-corp-a', name: 'Corp A' },
    { id: 'tenant-corp-b', name: 'Corp B' }
  ]

  return (
    <div className="p-6">
      {/* @ts-ignore custom element */}
      <tollgate-console
        api-base-url={process.env.NEXT_PUBLIC_TOLLGATE_API_URL}
        admin-token="your-admin-secret"
        tenants-json={JSON.stringify(tenants)}
      />
    </div>
  )
}

Props (Attributes / Properties)

Attribute	Type	Description	Default / Fallback
`api-base-url`	`string`	Base URL of the Tollgate server (e.g. `http://localhost:8000`, `/api`)	`""` / `VITE_TOLLGATE_API_BASE_URL`
`admin-token`	`string`	Master administrative secret / Bearer token	`""` / `VITE_TOLLGATE_ADMIN_TOKEN`
`tenant-id`	`string`	Restrict console to a specific tenant ID	`""`
`tenants-json`	`string` \| `TenantOption[]`	Array of selectable tenants (or JSON string)	`[]` / `VITE_TOLLGATE_TENANTS`
`embedded`	`boolean`	Hide header banner for cleaner embedded layouts	`false`
`title`	`string`	Header banner title text	`"API Key Gateway (Tollgate) Management Console"`

Environment Variables (Build Defaults)

When running locally or building default configuration bundles, fallbacks can be injected via .env:

# Tollgate UI — Environment Variables
VITE_TOLLGATE_API_BASE_URL=http://localhost:8000
VITE_TOLLGATE_ADMIN_TOKEN=admin-secret-key-for-local-dev
VITE_TOLLGATE_TENANTS=[{"id":"tenant-risk-01","name":"Risk Division"},{"id":"tenant-finance-02","name":"Finance Division"}]

Configuration Resolution Order

Configuration values resolve in the following order of precedence:

Interactive UI Overrides (localStorage via connection settings modal)
Component Attributes / Props (api-base-url, admin-token, tenants-json)
Build Environment Variables (VITE_TOLLGATE_*) or Global Object (window.__TOLLGATE_CONFIG__)
Defaults (Same-origin relative path / empty strings)

Development

# Install dependencies
npm install

# Start development server (http://localhost:5173/)
npm run dev

# Build Web Component library bundle
npm run build

License

This project is licensed under the Mozilla Public License 2.0 (MPL-2.0).

Related Packages

@kanmon-hq/kura-ui

Web Components UI suite for Kura LLM Gateway & Token Broker

376 0

react ui vue web-components kura llm-gateway token-usage

@kanmon-hq/portico-ui

Web Components UI suite for Portico FastMCP Hub & Gateway

316 0

react ui vue web-components fastmcp mcp-gateway portico

@unframed/vue

Vue components for Unframed web components, with v-model and typed props.

951 1

ui vue web-components lit

@ds-mo/ui

CompoMo — composable web components styled with TokoMo design tokens

43,041 1

react ui vue web-components angular component-library components custom-elements design-system typescript

gcsa-ui

GCSA website UI kit — Vue 3 components + Web Components (SiteFooter, Logo, Mobil...

2,917

react ui vue web-components custom-elements footer gcsa nextjs nuxt vue3

Version History

Version	Released	Vue	License
1.1.5	Oct 12, 2026	^3.5.13	MPL-2.0
1.1.4	Oct 12, 2026	^3.5.13	MPL-2.0
1.1.2	Oct 12, 2026	^3.5.13	MPL-2.0
0.0.5	Oct 3, 2026	^3.5.13	MPL-2.0
0.0.4	Oct 3, 2026	^3.5.13	Apache-2.0
0.0.1	Oct 3, 2026	^3.5.13	Apache-2.0