Skip to main content
MCP Apps SDK
import { App } from "@modelcontextprotocol/ext-apps";

Overview

sendLog sends log messages from the View to the host for debugging purposes. These logs are not added to the conversation and are not visible to the end user. They are intended for developers to diagnose issues during development or in production. Use sendLog when you need structured logging that the host can capture, filter, or display in its developer tools. This is particularly useful because MCP App Views run in sandboxed iframes where console.log output may not be easily accessible.

Signature

sendLog(
  params: { level: string; data: string; logger?: string },
): Promise<void>

Parameters

params
object
required
level
string
required
The log level. Common values include "debug", "info", "warning", and "error".
data
string
required
The log message content.
logger
string
An optional logger name to identify the source of the log message. Useful when multiple components emit logs.

Returns

Returns Promise<void>. The method resolves when the log has been sent to the host.

Usage

Basic logging

app.sendLog({
  level: "info",
  data: "Weather data refreshed",
  logger: "WeatherApp",
});

Logging at different levels

// Debug-level detail
app.sendLog({
  level: "debug",
  data: `Fetching resource: ${resourceUri}`,
  logger: "ResourceLoader",
});

// Warning when something unexpected happens
app.sendLog({
  level: "warning",
  data: "API response was empty, using cached data",
  logger: "DataService",
});

// Error when something fails
app.sendLog({
  level: "error",
  data: `Failed to parse response: ${error.message}`,
  logger: "DataService",
});

Wrapping in a helper

function createLogger(name: string) {
  return {
    debug: (msg: string) => app.sendLog({ level: "debug", data: msg, logger: name }),
    info: (msg: string) => app.sendLog({ level: "info", data: msg, logger: name }),
    warn: (msg: string) => app.sendLog({ level: "warning", data: msg, logger: name }),
    error: (msg: string) => app.sendLog({ level: "error", data: msg, logger: name }),
  };
}

const log = createLogger("CartView");
log.info("Cart loaded with 3 items");
log.error("Payment gateway unreachable");
  • useSendLog — React hook that wraps this method.
  • Requests — Overview of all View-to-host request methods.