diff --git a/docs/patterns.md b/docs/patterns.md index 43d7519..f55d807 100644 --- a/docs/patterns.md +++ b/docs/patterns.md @@ -345,14 +345,46 @@ return { ```tsx source="./patterns.tsx#persistData" -// In your tool callback, include viewUUID in the result metadata. -return { - content: [{ type: "text", text: `Displaying PDF viewer for "${title}"` }], - structuredContent: { url, title, pageCount, initialPage: 1 }, - _meta: { - viewUUID: randomUUID(), - }, +// Store the viewUUID received from the server +let viewUUID: string | undefined; + +// Helper to save state to localStorage +function saveState(state: T): void { + if (!viewUUID) return; + try { + localStorage.setItem(viewUUID, JSON.stringify(state)); + } catch (err) { + console.error("Failed to save view state:", err); + } +} + +// Helper to load state from localStorage +function loadState(): T | null { + if (!viewUUID) return null; + try { + const saved = localStorage.getItem(viewUUID); + return saved ? (JSON.parse(saved) as T) : null; + } catch (err) { + console.error("Failed to load view state:", err); + return null; + } +} + +// Receive viewUUID from the tool result +app.ontoolresult = (result) => { + viewUUID = result._meta?.viewUUID + ? String(result._meta.viewUUID) + : undefined; + + // Restore any previously saved state + const savedState = loadState<{ currentPage: number }>(); + if (savedState) { + // Apply restored state to your UI... + } }; + +// Call saveState() whenever your view state changes +// e.g., saveState({ currentPage: 5 }); ``` _See [`examples/map-server/`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/map-server) for a full implementation of this pattern._ diff --git a/scripts/sync-snippets.ts b/scripts/sync-snippets.ts index 4e9cfa8..ee81d79 100644 --- a/scripts/sync-snippets.ts +++ b/scripts/sync-snippets.ts @@ -254,8 +254,9 @@ function extractRegion( ); } - const regionStart = `//#region ${regionName}`; - const regionEnd = `//#endregion ${regionName}`; + const lineEnding = exampleContent.includes("\r\n") ? "\r\n" : "\n"; + const regionStart = `//#region ${regionName}${lineEnding}`; + const regionEnd = `//#endregion ${regionName}${lineEnding}`; const startIndex = exampleContent.indexOf(regionStart); if (startIndex === -1) {