77306d1aaf
Reference existing JSDoc examples instead of maintaining a separate one in `docs/patterns.ts`: - Vanilla JS: `applyDocumentTheme_fromHostContext` from `styles.examples.ts` - React: `useDocumentTheme_conditionalRender` for reactive theme reading Expand `applyDocumentTheme_fromHostContext` example to show both the `onhostcontextchanged` handler and initial theme application after `connect()`. Note in the docs that `useHostStyles()` applies theme automatically, so React apps don't need additional setup unless they want to read the theme reactively for conditional rendering. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
94 lines
2.6 KiB
TypeScript
94 lines
2.6 KiB
TypeScript
/**
|
|
* Type-checked code examples for the patterns documentation.
|
|
*
|
|
* These examples are included in {@link ./patterns.md} via `@includeCode` tags.
|
|
* Each function's region markers define the code snippet that appears in the docs.
|
|
*
|
|
* @module
|
|
*/
|
|
|
|
import { App } from "../src/app.js";
|
|
|
|
/**
|
|
* Example: Authenticated calls from App
|
|
*/
|
|
function authenticatedCalls(app: App) {
|
|
//#region authenticatedCalls
|
|
// TODO: Use tool calls / read resources
|
|
// See PDF example to read binaries by chunks
|
|
// Pass auth token in _meta + refresh token + store in local storage
|
|
//#endregion authenticatedCalls
|
|
}
|
|
|
|
/**
|
|
* Example: Giving errors back to model
|
|
*/
|
|
function errorsToModel(app: App) {
|
|
//#region errorsToModel
|
|
// Before app runs: validate inputs in tool call
|
|
// After it runs: updateModelContext
|
|
// TODO: Complete implementation
|
|
//#endregion errorsToModel
|
|
}
|
|
|
|
/**
|
|
* Example: Support fullscreen / exit fullscreen
|
|
*/
|
|
function fullscreen() {
|
|
//#region fullscreen
|
|
// TODO: Implement fullscreen support
|
|
//#endregion fullscreen
|
|
}
|
|
|
|
/**
|
|
* Example: Persist data (incl. widget state)
|
|
*/
|
|
function persistData(app: App) {
|
|
//#region persistData
|
|
// Note: OAI's window.openai.setWidgetState({modelContent, privateContent, imageIds})
|
|
// has only a partial equivalent in MCP Apps: App.updateModelContext({content, structuredContent})
|
|
// For data persistence / to reload when conversation is reloaded,
|
|
// use localStorage / IndexedDb with hostInfo.toolInfo.id as key
|
|
// returned CallToolResult._meta.widgetUUID = randomUUID()
|
|
// TODO: Complete implementation
|
|
//#endregion persistData
|
|
}
|
|
|
|
/**
|
|
* Example: Lower perceived latency / manage loading time
|
|
*/
|
|
function lowerPerceivedLatency(app: App) {
|
|
//#region lowerPerceivedLatency
|
|
// TODO: Leverage partial inputs to show widgets as possible.
|
|
// Beware of partial JSON being partial (but healed),
|
|
// so some objects may not be complete.
|
|
//#endregion lowerPerceivedLatency
|
|
}
|
|
|
|
/**
|
|
* Example: Supporting both iframe & MCP Apps in same binary
|
|
*/
|
|
function iframeAndMcpApps() {
|
|
//#region iframeAndMcpApps
|
|
// TODO: See recipe: https://github.com/modelcontextprotocol/ext-apps/issues/34
|
|
//#endregion iframeAndMcpApps
|
|
}
|
|
|
|
/**
|
|
* Example: Migrating from OpenAI to MCP Apps
|
|
*/
|
|
function migrateFromOpenai() {
|
|
//#region migrateFromOpenai
|
|
// TODO: See OpenAI -> MCP Apps migration guide
|
|
// https://docs.google.com/document/d/13ROImOR9B8xc32yhqsFyC9Hh3_H63JFORDIyjyIPcU4/edit
|
|
//#endregion migrateFromOpenai
|
|
}
|
|
|
|
// Suppress unused variable warnings
|
|
void authenticatedCalls;
|
|
void errorsToModel;
|
|
void fullscreen;
|
|
void persistData;
|
|
void lowerPerceivedLatency;
|
|
void iframeAndMcpApps;
|
|
void migrateFromOpenai;
|