@mcp-apps-kit/ui

@mcp-apps-kit/ui

Client-side SDK for MCP applications (vanilla JavaScript).

Use this inside the HTML/JS UI returned by your tools. The SDK auto-detects the host (MCP Apps or ChatGPT Apps) and exposes a unified client for tool calls and host context.

Table of Contents

• Background
• Features
• Compatibility
• Install
• Usage
• Debug Logging
• Examples
• API
• Contributing
• License

Background

Widget UIs run inside host environments with different APIs and capabilities. This package normalizes those differences so your UI code can call tools, read results, and respond to host context changes from a single API. For React apps, use @mcp-apps-kit/ui-react.

Features

• createClient() with host auto-detection
• Tool calls with optional TypeScript typing
• Host context access (theme, display mode, safe areas)
• Tool inputs and results access
• Optional debug logger that transports logs via MCP
• Test adapter for local development
• Host capabilities - Query what the host supports (theming, display modes, file upload, etc.)
• Bidirectional tools - Register handlers for host-initiated tool calls
• Theme & style utilities - Apply host themes and CSS variables

Compatibility

• Hosts: MCP Apps and ChatGPT (OpenAI Apps SDK)
• Node.js: >= 18 for tooling/builds (browser runtime)
• MCP SDK: uses @modelcontextprotocol/ext-apps

Install

npm install @mcp-apps-kit/ui

Usage

Quick start

import { createClient } from "@mcp-apps-kit/ui";

const client = await createClient();

await client.callTool("greet", { name: "Alice" });

client.onHostContextChange((ctx) => {
  document.documentElement.dataset.theme = ctx.theme;
});

Typed tool calls

import { createClient } from "@mcp-apps-kit/ui";
import type { AppClientTools } from "../server";

const client = await createClient<AppClientTools>();

await client.callTool("search_restaurants", { location: "Paris" });

Local testing

import { createClient } from "@mcp-apps-kit/ui";

const client = await createClient({ forceAdapter: "mock" });

Debug Logging

Send structured logs from the UI to the server via MCP:

import { clientDebugLogger } from "@mcp-apps-kit/ui";

clientDebugLogger.configure({
  enabled: true,
  level: "debug",
  source: "my-widget",
});

clientDebugLogger.info("Component mounted", { props: "..." });

Server-side configuration:

const app = createApp({
  config: {
    debug: {
      logTool: true,
      level: "debug",
    },
  },
});

Examples

• ../../examples/minimal
• kanban-mcp-example

API

Client Factory

• createClient(options?) - Create a connected client with auto-detection
• detectProtocol() - Detect the host platform ("mcp" | "openai" | "mock")

Host Capabilities

const capabilities = client.getHostCapabilities();

// Common capabilities (both platforms)
capabilities?.theming?.themes; // ["light", "dark"]
capabilities?.displayModes?.modes; // ["inline", "fullscreen", "pip"]
capabilities?.statePersistence?.persistent; // boolean
capabilities?.openLinks; // {} if supported
capabilities?.logging; // {} if supported

// MCP Apps specific
capabilities?.serverTools?.listChanged; // boolean
capabilities?.serverResources?.listChanged; // boolean
capabilities?.sizeNotifications; // {} if supported
capabilities?.partialToolInput; // {} if supported

// ChatGPT specific
capabilities?.fileUpload; // {} if supported
capabilities?.safeAreaInsets; // {} if supported
capabilities?.views; // {} if supported

Host Version

const version = client.getHostVersion();
// { name: "Claude Desktop", version: "1.0.0" } (MCP Apps only)

Theme & Style Utilities

import {
  applyDocumentTheme,
  getDocumentTheme,
  applyHostStyleVariables,
  applyHostFonts,
  removeHostFonts,
  clearHostStyleVariables,
} from "@mcp-apps-kit/ui";

// Apply theme to document
applyDocumentTheme("dark"); // or "light" or "os"

// Apply host-provided CSS variables
applyHostStyleVariables({
  "primary-color": "#007bff",
  "--font-size": "16px",
});

// Apply host-provided font CSS
applyHostFonts("@font-face { ... }");

Bidirectional Tools (MCP Apps)

// Register a handler for host-initiated tool calls
client.setCallToolHandler(async (toolName, args) => {
  if (toolName === "get_selection") {
    return { selection: document.getSelection()?.toString() };
  }
  throw new Error(`Unknown tool: ${toolName}`);
});

// Register a handler for listing available tools
client.setListToolsHandler(async () => [
  { name: "get_selection", description: "Get current text selection" },
]);

Protocol Logging

// Send logs via the MCP protocol (appears in host logs)
await client.sendLog("info", { event: "user_action", details: "..." });

Error Handling

import { UIError, UIErrorCode } from "@mcp-apps-kit/ui";

try {
  await client.callTool("unknown");
} catch (error) {
  if (error instanceof UIError) {
    console.error(error.code, error.message);
  }
}

Key Types

• HostContext - Theme, viewport, locale, display mode, etc.
• HostCapabilities - Protocol-agnostic capability interface
• HostVersion - Host application name and version
• AppsClient - Main client interface
• UIError, UIErrorCode - Client-side error types

Contributing

See ../../CONTRIBUTING.md for development setup and guidelines. Issues and pull requests are welcome.

License

MIT