screenpipe-mcp 0.4.0 → 0.5.0

package/dist/http-server.d.ts

@@ -0,0 +1,8 @@
+#!/usr/bin/env node
+/**
+ * HTTP Server for Screenpipe MCP
+ *
+ * This allows web apps to call MCP tools over HTTP instead of stdio.
+ * Run with: npx ts-node src/http-server.ts --port 3031
+ */
+export {};

package/dist/http-server.js

@@ -0,0 +1,203 @@
+#!/usr/bin/env node
+"use strict";
+/**
+ * HTTP Server for Screenpipe MCP
+ *
+ * This allows web apps to call MCP tools over HTTP instead of stdio.
+ * Run with: npx ts-node src/http-server.ts --port 3031
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const http_1 = require("http");
+const index_js_1 = require("@modelcontextprotocol/sdk/server/index.js");
+const streamableHttp_js_1 = require("@modelcontextprotocol/sdk/server/streamableHttp.js");
+const types_js_1 = require("@modelcontextprotocol/sdk/types.js");
+// Parse command line arguments
+const args = process.argv.slice(2);
+let mcpPort = 3031;
+let screenpipePort = 3030;
+for (let i = 0; i < args.length; i++) {
+    if (args[i] === "--port" && args[i + 1]) {
+        mcpPort = parseInt(args[i + 1], 10);
+    }
+    if (args[i] === "--screenpipe-port" && args[i + 1]) {
+        screenpipePort = parseInt(args[i + 1], 10);
+    }
+}
+const SCREENPIPE_API = `http://localhost:${screenpipePort}`;
+// Tool definitions
+const TOOLS = [
+    {
+        name: "search_content",
+        description: "Search screenpipe's recorded content: screen text (OCR), audio transcriptions, and UI elements. " +
+            "Returns timestamped results with app context. " +
+            "Call with no parameters to get recent activity.",
+        inputSchema: {
+            type: "object",
+            properties: {
+                q: {
+                    type: "string",
+                    description: "Search query. Optional - omit to return all recent content.",
+                },
+                content_type: {
+                    type: "string",
+                    enum: ["all", "ocr", "audio", "ui"],
+                    description: "Content type filter. Default: 'all'",
+                },
+                limit: {
+                    type: "integer",
+                    description: "Max results. Default: 10",
+                },
+                offset: {
+                    type: "integer",
+                    description: "Skip N results for pagination. Default: 0",
+                },
+                start_time: {
+                    type: "string",
+                    description: "ISO 8601 UTC start time (e.g., 2024-01-15T10:00:00Z)",
+                },
+                end_time: {
+                    type: "string",
+                    description: "ISO 8601 UTC end time (e.g., 2024-01-15T18:00:00Z)",
+                },
+                app_name: {
+                    type: "string",
+                    description: "Filter by app (e.g., 'Google Chrome', 'Slack', 'zoom.us')",
+                },
+                window_name: {
+                    type: "string",
+                    description: "Filter by window title",
+                },
+            },
+        },
+    },
+];
+// Helper function to make HTTP requests
+async function fetchAPI(endpoint, options = {}) {
+    const url = `${SCREENPIPE_API}${endpoint}`;
+    return fetch(url, {
+        ...options,
+        headers: {
+            "Content-Type": "application/json",
+            ...options.headers,
+        },
+    });
+}
+// Create MCP server
+const server = new index_js_1.Server({
+    name: "screenpipe-http",
+    version: "0.1.0",
+}, {
+    capabilities: {
+        tools: {},
+    },
+});
+// List tools handler
+server.setRequestHandler(types_js_1.ListToolsRequestSchema, async () => {
+    return { tools: TOOLS };
+});
+// Call tool handler
+server.setRequestHandler(types_js_1.CallToolRequestSchema, async (request) => {
+    const { name, arguments: args } = request.params;
+    if (!args) {
+        throw new Error("Missing arguments");
+    }
+    if (name === "search_content") {
+        const params = new URLSearchParams();
+        for (const [key, value] of Object.entries(args)) {
+            if (value !== null && value !== undefined) {
+                params.append(key, String(value));
+            }
+        }
+        const response = await fetchAPI(`/search?${params.toString()}`);
+        if (!response.ok) {
+            throw new Error(`HTTP error: ${response.status}`);
+        }
+        const data = await response.json();
+        const results = data.data || [];
+        const pagination = data.pagination || {};
+        if (results.length === 0) {
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: "No results found. Try: broader search terms, different content_type, or wider time range.",
+                    },
+                ],
+            };
+        }
+        const formattedResults = [];
+        for (const result of results) {
+            const content = result.content;
+            if (!content)
+                continue;
+            if (result.type === "OCR") {
+                formattedResults.push(`[OCR] ${content.app_name || "?"} | ${content.window_name || "?"}\n` +
+                    `${content.timestamp || ""}\n` +
+                    `${content.text || ""}`);
+            }
+            else if (result.type === "Audio") {
+                formattedResults.push(`[Audio] ${content.device_name || "?"}\n` +
+                    `${content.timestamp || ""}\n` +
+                    `${content.transcription || ""}`);
+            }
+            else if (result.type === "UI") {
+                formattedResults.push(`[UI] ${content.app_name || "?"} | ${content.window_name || "?"}\n` +
+                    `${content.timestamp || ""}\n` +
+                    `${content.text || ""}`);
+            }
+        }
+        const header = `Results: ${results.length}/${pagination.total || "?"}` +
+            (pagination.total > results.length ? ` (use offset=${(pagination.offset || 0) + results.length} for more)` : "");
+        return {
+            content: [
+                {
+                    type: "text",
+                    text: header + "\n\n" + formattedResults.join("\n---\n"),
+                },
+            ],
+        };
+    }
+    throw new Error(`Unknown tool: ${name}`);
+});
+// Create HTTP server with MCP transport
+const transports = new Map();
+const httpServer = (0, http_1.createServer)(async (req, res) => {
+    // CORS headers
+    res.setHeader("Access-Control-Allow-Origin", "*");
+    res.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
+    res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization, mcp-session-id");
+    if (req.method === "OPTIONS") {
+        res.writeHead(204);
+        res.end();
+        return;
+    }
+    // Health check
+    if (req.url === "/health") {
+        res.writeHead(200, { "Content-Type": "application/json" });
+        res.end(JSON.stringify({ status: "ok" }));
+        return;
+    }
+    // MCP endpoint
+    if (req.url === "/mcp" || req.url?.startsWith("/mcp?")) {
+        const sessionId = req.headers["mcp-session-id"];
+        let transport = sessionId ? transports.get(sessionId) : undefined;
+        if (!transport) {
+            transport = new streamableHttp_js_1.StreamableHTTPServerTransport({
+                sessionIdGenerator: () => crypto.randomUUID(),
+            });
+            await server.connect(transport);
+            if (transport.sessionId) {
+                transports.set(transport.sessionId, transport);
+            }
+        }
+        await transport.handleRequest(req, res);
+        return;
+    }
+    res.writeHead(404, { "Content-Type": "application/json" });
+    res.end(JSON.stringify({ error: "Not found" }));
+});
+httpServer.listen(mcpPort, () => {
+    console.log(`Screenpipe MCP HTTP server running on http://localhost:${mcpPort}`);
+    console.log(`MCP endpoint: http://localhost:${mcpPort}/mcp`);
+    console.log(`Health check: http://localhost:${mcpPort}/health`);
+});

package/dist/index.js

@@ -71,7 +71,7 @@ const SCREENPIPE_API = `http://localhost:${port}`;
 // Initialize server
 const server = new index_js_1.Server({
     name: "screenpipe",
-    version: "0.4.0",
+    version: "0.5.0",
 }, {
     capabilities: {
         tools: {},
@@ -87,6 +87,10 @@ const BASE_TOOLS = [
             "Returns timestamped results with app context. " +
             "Call with no parameters to get recent activity. " +
             "Use the 'screenpipe://context' resource for current time when building time-based queries.",
+        annotations: {
+            title: "Search Content",
+            readOnlyHint: true,
+        },
         inputSchema: {
             type: "object",
             properties: {
@@ -148,6 +152,10 @@ const BASE_TOOLS = [
         name: "pixel-control",
         description: "Control mouse and keyboard at the pixel level. This is a cross-platform tool that works on all operating systems. " +
             "Use this to type text, press keys, move the mouse, and click buttons.",
+        annotations: {
+            title: "Pixel Control",
+            destructiveHint: true,
+        },
         inputSchema: {
             type: "object",
             properties: {
@@ -196,6 +204,10 @@ const BASE_TOOLS = [
             "EXAMPLES:\n" +
             "- Last 30 minutes: Calculate timestamps from current time\n" +
             "- Specific meeting: Use the meeting's start and end times in UTC",
+        annotations: {
+            title: "Export Video",
+            destructiveHint: true,
+        },
         inputSchema: {
             type: "object",
             properties: {
@@ -231,6 +243,10 @@ const MACOS_TOOLS = [
             "- Clickable items: 'AXButton', 'AXMenuItem', 'AXMenuBarItem', 'AXImage', 'AXStaticText'\n" +
             "- Web content may use: 'AXWebArea', 'AXLink', 'AXHeading', 'AXRadioButton'\n\n" +
             "Use MacOS Accessibility Inspector app to identify the exact roles in your target application.",
+        annotations: {
+            title: "Find Elements",
+            readOnlyHint: true,
+        },
         inputSchema: {
             type: "object",
             properties: {
@@ -272,6 +288,10 @@ const MACOS_TOOLS = [
     {
         name: "click-element",
         description: "Click an element in an application using its id (MacOS only)",
+        annotations: {
+            title: "Click Element",
+            destructiveHint: true,
+        },
         inputSchema: {
             type: "object",
             properties: {
@@ -304,6 +324,10 @@ const MACOS_TOOLS = [
     {
         name: "fill-element",
         description: "Type text into an element in an application (MacOS only)",
+        annotations: {
+            title: "Fill Element",
+            destructiveHint: true,
+        },
         inputSchema: {
             type: "object",
             properties: {
@@ -340,6 +364,10 @@ const MACOS_TOOLS = [
     {
         name: "scroll-element",
         description: "Scroll an element in a specific direction (MacOS only)",
+        annotations: {
+            title: "Scroll Element",
+            destructiveHint: true,
+        },
         inputSchema: {
             type: "object",
             properties: {
@@ -381,6 +409,10 @@ const MACOS_TOOLS = [
     {
         name: "open-application",
         description: "Open an application by name",
+        annotations: {
+            title: "Open Application",
+            destructiveHint: true,
+        },
         inputSchema: {
             type: "object",
             properties: {
@@ -395,6 +427,10 @@ const MACOS_TOOLS = [
     {
         name: "open-url",
         description: "Open a URL in a browser",
+        annotations: {
+            title: "Open URL",
+            destructiveHint: true,
+        },
         inputSchema: {
             type: "object",
             properties: {
@@ -433,6 +469,12 @@ const RESOURCES = [
         description: "How to use screenpipe search effectively",
         mimeType: "text/markdown",
     },
+    {
+        uri: "ui://search",
+        name: "Search Dashboard",
+        description: "Interactive search UI for exploring screen recordings and audio transcriptions",
+        mimeType: "text/html",
+    },
 ];
 // List resources handler
 server.setRequestHandler(types_js_1.ListResourcesRequestSchema, async () => {
@@ -505,6 +547,56 @@ server.setRequestHandler(types_js_1.ReadResourceRequestSchema, async (request) =
                     },
                 ],
             };
+        case "ui://search": {
+            // MCP App UI - Interactive search dashboard
+            const uiHtmlPath = path.join(__dirname, "..", "ui", "search.html");
+            let htmlContent;
+            try {
+                htmlContent = fs.readFileSync(uiHtmlPath, "utf-8");
+            }
+            catch {
+                // Fallback: serve embedded minimal UI if file not found
+                htmlContent = `<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    body { font-family: system-ui; background: #0a0a0a; color: #fff; padding: 20px; }
+    input { width: 100%; padding: 10px; margin-bottom: 10px; background: #1a1a1a; border: 1px solid #333; color: #fff; border-radius: 6px; }
+    button { padding: 10px 20px; background: #fff; color: #000; border: none; border-radius: 6px; cursor: pointer; }
+    #results { margin-top: 20px; }
+    .result { background: #1a1a1a; padding: 12px; margin: 8px 0; border-radius: 8px; border: 1px solid #333; }
+  </style>
+</head>
+<body>
+  <h2>screenpipe search</h2>
+  <input id="q" placeholder="search..." onkeydown="if(event.key==='Enter')search()"/>
+  <button onclick="search()">search</button>
+  <div id="results"></div>
+  <script>
+    function search() {
+      window.parent.postMessage({jsonrpc:'2.0',method:'tools/call',params:{name:'search-content',arguments:{q:document.getElementById('q').value,limit:20}}},'*');
+    }
+    window.addEventListener('message',e=>{
+      if(e.data?.result||e.data?.method==='tool/result'){
+        const r=e.data.result||e.data.params?.result;
+        const d=r?.data||r||[];
+        document.getElementById('results').innerHTML=d.map(x=>'<div class="result"><b>'+((x.type||'')+'</b> '+(x.content?.app_name||'')+': '+(x.content?.text||x.content?.transcription||'').substring(0,200))+'</div>').join('');
+      }
+    });
+  </script>
+</body>
+</html>`;
+            }
+            return {
+                contents: [
+                    {
+                        uri,
+                        mimeType: "text/html",
+                        text: htmlContent,
+                    },
+                ],
+            };
+        }
         default:
             throw new Error(`Unknown resource: ${uri}`);
     }

package/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": "0.3",
   "name": "screenpipe",
   "display_name": "Screenpipe",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "description": "Search your screen recordings, audio transcriptions, and control your computer with AI",
   "long_description": "Screenpipe is a 24/7 screen and audio recorder that lets you search everything you've seen or heard. This extension connects Claude to your local screenpipe instance, enabling AI-powered search through your digital memory and computer control capabilities.",
   "author": {
@@ -30,6 +30,10 @@
       "name": "search-content",
       "description": "Search through recorded screen content, audio transcriptions, and UI elements"
     },
+    {
+      "name": "export-video",
+      "description": "Export screen recordings as MP4 video for a specific time range"
+    },
     {
       "name": "pixel-control",
       "description": "Control mouse and keyboard (type text, press keys, move mouse, click)"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "screenpipe-mcp",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "MCP server for screenpipe - search your screen recordings, audio transcriptions, and control your computer",
   "main": "dist/index.js",
   "bin": {
@@ -9,7 +9,9 @@
   "scripts": {
     "build": "tsc",
     "start": "node dist/index.js",
+    "start:http": "node dist/http-server.js",
     "dev": "ts-node src/index.ts",
+    "dev:http": "ts-node src/http-server.ts",
     "test": "vitest run",
     "test:watch": "vitest",
     "prepublishOnly": "npm run build"

package/src/http-server.ts

@@ -0,0 +1,243 @@
+#!/usr/bin/env node
+
+/**
+ * HTTP Server for Screenpipe MCP
+ *
+ * This allows web apps to call MCP tools over HTTP instead of stdio.
+ * Run with: npx ts-node src/http-server.ts --port 3031
+ */
+
+import { createServer } from "http";
+import { Server } from "@modelcontextprotocol/sdk/server/index.js";
+import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
+import {
+  CallToolRequestSchema,
+  ListToolsRequestSchema,
+} from "@modelcontextprotocol/sdk/types.js";
+
+// Parse command line arguments
+const args = process.argv.slice(2);
+let mcpPort = 3031;
+let screenpipePort = 3030;
+
+for (let i = 0; i < args.length; i++) {
+  if (args[i] === "--port" && args[i + 1]) {
+    mcpPort = parseInt(args[i + 1], 10);
+  }
+  if (args[i] === "--screenpipe-port" && args[i + 1]) {
+    screenpipePort = parseInt(args[i + 1], 10);
+  }
+}
+
+const SCREENPIPE_API = `http://localhost:${screenpipePort}`;
+
+// Tool definitions
+const TOOLS = [
+  {
+    name: "search_content",
+    description:
+      "Search screenpipe's recorded content: screen text (OCR), audio transcriptions, and UI elements. " +
+      "Returns timestamped results with app context. " +
+      "Call with no parameters to get recent activity.",
+    inputSchema: {
+      type: "object" as const,
+      properties: {
+        q: {
+          type: "string",
+          description: "Search query. Optional - omit to return all recent content.",
+        },
+        content_type: {
+          type: "string",
+          enum: ["all", "ocr", "audio", "ui"],
+          description: "Content type filter. Default: 'all'",
+        },
+        limit: {
+          type: "integer",
+          description: "Max results. Default: 10",
+        },
+        offset: {
+          type: "integer",
+          description: "Skip N results for pagination. Default: 0",
+        },
+        start_time: {
+          type: "string",
+          description: "ISO 8601 UTC start time (e.g., 2024-01-15T10:00:00Z)",
+        },
+        end_time: {
+          type: "string",
+          description: "ISO 8601 UTC end time (e.g., 2024-01-15T18:00:00Z)",
+        },
+        app_name: {
+          type: "string",
+          description: "Filter by app (e.g., 'Google Chrome', 'Slack', 'zoom.us')",
+        },
+        window_name: {
+          type: "string",
+          description: "Filter by window title",
+        },
+      },
+    },
+  },
+];
+
+// Helper function to make HTTP requests
+async function fetchAPI(endpoint: string, options: RequestInit = {}): Promise<Response> {
+  const url = `${SCREENPIPE_API}${endpoint}`;
+  return fetch(url, {
+    ...options,
+    headers: {
+      "Content-Type": "application/json",
+      ...options.headers,
+    },
+  });
+}
+
+// Create MCP server
+const server = new Server(
+  {
+    name: "screenpipe-http",
+    version: "0.1.0",
+  },
+  {
+    capabilities: {
+      tools: {},
+    },
+  }
+);
+
+// List tools handler
+server.setRequestHandler(ListToolsRequestSchema, async () => {
+  return { tools: TOOLS };
+});
+
+// Call tool handler
+server.setRequestHandler(CallToolRequestSchema, async (request) => {
+  const { name, arguments: args } = request.params;
+
+  if (!args) {
+    throw new Error("Missing arguments");
+  }
+
+  if (name === "search_content") {
+    const params = new URLSearchParams();
+    for (const [key, value] of Object.entries(args)) {
+      if (value !== null && value !== undefined) {
+        params.append(key, String(value));
+      }
+    }
+
+    const response = await fetchAPI(`/search?${params.toString()}`);
+    if (!response.ok) {
+      throw new Error(`HTTP error: ${response.status}`);
+    }
+
+    const data = await response.json();
+    const results = data.data || [];
+    const pagination = data.pagination || {};
+
+    if (results.length === 0) {
+      return {
+        content: [
+          {
+            type: "text",
+            text: "No results found. Try: broader search terms, different content_type, or wider time range.",
+          },
+        ],
+      };
+    }
+
+    const formattedResults: string[] = [];
+    for (const result of results) {
+      const content = result.content;
+      if (!content) continue;
+
+      if (result.type === "OCR") {
+        formattedResults.push(
+          `[OCR] ${content.app_name || "?"} | ${content.window_name || "?"}\n` +
+          `${content.timestamp || ""}\n` +
+          `${content.text || ""}`
+        );
+      } else if (result.type === "Audio") {
+        formattedResults.push(
+          `[Audio] ${content.device_name || "?"}\n` +
+          `${content.timestamp || ""}\n` +
+          `${content.transcription || ""}`
+        );
+      } else if (result.type === "UI") {
+        formattedResults.push(
+          `[UI] ${content.app_name || "?"} | ${content.window_name || "?"}\n` +
+          `${content.timestamp || ""}\n` +
+          `${content.text || ""}`
+        );
+      }
+    }
+
+    const header = `Results: ${results.length}/${pagination.total || "?"}` +
+      (pagination.total > results.length ? ` (use offset=${(pagination.offset || 0) + results.length} for more)` : "");
+
+    return {
+      content: [
+        {
+          type: "text",
+          text: header + "\n\n" + formattedResults.join("\n---\n"),
+        },
+      ],
+    };
+  }
+
+  throw new Error(`Unknown tool: ${name}`);
+});
+
+// Create HTTP server with MCP transport
+const transports = new Map<string, StreamableHTTPServerTransport>();
+
+const httpServer = createServer(async (req, res) => {
+  // CORS headers
+  res.setHeader("Access-Control-Allow-Origin", "*");
+  res.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
+  res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization, mcp-session-id");
+
+  if (req.method === "OPTIONS") {
+    res.writeHead(204);
+    res.end();
+    return;
+  }
+
+  // Health check
+  if (req.url === "/health") {
+    res.writeHead(200, { "Content-Type": "application/json" });
+    res.end(JSON.stringify({ status: "ok" }));
+    return;
+  }
+
+  // MCP endpoint
+  if (req.url === "/mcp" || req.url?.startsWith("/mcp?")) {
+    const sessionId = req.headers["mcp-session-id"] as string | undefined;
+
+    let transport = sessionId ? transports.get(sessionId) : undefined;
+
+    if (!transport) {
+      transport = new StreamableHTTPServerTransport({
+        sessionIdGenerator: () => crypto.randomUUID(),
+      });
+
+      await server.connect(transport);
+
+      if (transport.sessionId) {
+        transports.set(transport.sessionId, transport);
+      }
+    }
+
+    await transport.handleRequest(req, res);
+    return;
+  }
+
+  res.writeHead(404, { "Content-Type": "application/json" });
+  res.end(JSON.stringify({ error: "Not found" }));
+});
+
+httpServer.listen(mcpPort, () => {
+  console.log(`Screenpipe MCP HTTP server running on http://localhost:${mcpPort}`);
+  console.log(`MCP endpoint: http://localhost:${mcpPort}/mcp`);
+  console.log(`Health check: http://localhost:${mcpPort}/health`);
+});

package/src/index.ts

@@ -51,7 +51,7 @@ const SCREENPIPE_API = `http://localhost:${port}`;
 const server = new Server(
   {
     name: "screenpipe",
-    version: "0.4.0",
+    version: "0.5.0",
   },
   {
     capabilities: {
@@ -71,6 +71,10 @@ const BASE_TOOLS: Tool[] = [
       "Returns timestamped results with app context. " +
       "Call with no parameters to get recent activity. " +
       "Use the 'screenpipe://context' resource for current time when building time-based queries.",
+    annotations: {
+      title: "Search Content",
+      readOnlyHint: true,
+    },
     inputSchema: {
       type: "object",
       properties: {
@@ -133,6 +137,10 @@ const BASE_TOOLS: Tool[] = [
     description:
       "Control mouse and keyboard at the pixel level. This is a cross-platform tool that works on all operating systems. " +
       "Use this to type text, press keys, move the mouse, and click buttons.",
+    annotations: {
+      title: "Pixel Control",
+      destructiveHint: true,
+    },
     inputSchema: {
       type: "object",
       properties: {
@@ -183,6 +191,10 @@ const BASE_TOOLS: Tool[] = [
       "EXAMPLES:\n" +
       "- Last 30 minutes: Calculate timestamps from current time\n" +
       "- Specific meeting: Use the meeting's start and end times in UTC",
+    annotations: {
+      title: "Export Video",
+      destructiveHint: true,
+    },
     inputSchema: {
       type: "object",
       properties: {
@@ -223,6 +235,10 @@ const MACOS_TOOLS: Tool[] = [
       "- Clickable items: 'AXButton', 'AXMenuItem', 'AXMenuBarItem', 'AXImage', 'AXStaticText'\n" +
       "- Web content may use: 'AXWebArea', 'AXLink', 'AXHeading', 'AXRadioButton'\n\n" +
       "Use MacOS Accessibility Inspector app to identify the exact roles in your target application.",
+    annotations: {
+      title: "Find Elements",
+      readOnlyHint: true,
+    },
     inputSchema: {
       type: "object",
       properties: {
@@ -267,6 +283,10 @@ const MACOS_TOOLS: Tool[] = [
     name: "click-element",
     description:
       "Click an element in an application using its id (MacOS only)",
+    annotations: {
+      title: "Click Element",
+      destructiveHint: true,
+    },
     inputSchema: {
       type: "object",
       properties: {
@@ -299,6 +319,10 @@ const MACOS_TOOLS: Tool[] = [
   {
     name: "fill-element",
     description: "Type text into an element in an application (MacOS only)",
+    annotations: {
+      title: "Fill Element",
+      destructiveHint: true,
+    },
     inputSchema: {
       type: "object",
       properties: {
@@ -335,6 +359,10 @@ const MACOS_TOOLS: Tool[] = [
   {
     name: "scroll-element",
     description: "Scroll an element in a specific direction (MacOS only)",
+    annotations: {
+      title: "Scroll Element",
+      destructiveHint: true,
+    },
     inputSchema: {
       type: "object",
       properties: {
@@ -376,6 +404,10 @@ const MACOS_TOOLS: Tool[] = [
   {
     name: "open-application",
     description: "Open an application by name",
+    annotations: {
+      title: "Open Application",
+      destructiveHint: true,
+    },
     inputSchema: {
       type: "object",
       properties: {
@@ -390,6 +422,10 @@ const MACOS_TOOLS: Tool[] = [
   {
     name: "open-url",
     description: "Open a URL in a browser",
+    annotations: {
+      title: "Open URL",
+      destructiveHint: true,
+    },
     inputSchema: {
       type: "object",
       properties: {
@@ -430,6 +466,12 @@ const RESOURCES = [
     description: "How to use screenpipe search effectively",
     mimeType: "text/markdown",
   },
+  {
+    uri: "ui://search",
+    name: "Search Dashboard",
+    description: "Interactive search UI for exploring screen recordings and audio transcriptions",
+    mimeType: "text/html",
+  },
 ];
 
 // List resources handler
@@ -507,6 +549,56 @@ server.setRequestHandler(ReadResourceRequestSchema, async (request) => {
         ],
       };
 
+    case "ui://search": {
+      // MCP App UI - Interactive search dashboard
+      const uiHtmlPath = path.join(__dirname, "..", "ui", "search.html");
+      let htmlContent: string;
+      try {
+        htmlContent = fs.readFileSync(uiHtmlPath, "utf-8");
+      } catch {
+        // Fallback: serve embedded minimal UI if file not found
+        htmlContent = `<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    body { font-family: system-ui; background: #0a0a0a; color: #fff; padding: 20px; }
+    input { width: 100%; padding: 10px; margin-bottom: 10px; background: #1a1a1a; border: 1px solid #333; color: #fff; border-radius: 6px; }
+    button { padding: 10px 20px; background: #fff; color: #000; border: none; border-radius: 6px; cursor: pointer; }
+    #results { margin-top: 20px; }
+    .result { background: #1a1a1a; padding: 12px; margin: 8px 0; border-radius: 8px; border: 1px solid #333; }
+  </style>
+</head>
+<body>
+  <h2>screenpipe search</h2>
+  <input id="q" placeholder="search..." onkeydown="if(event.key==='Enter')search()"/>
+  <button onclick="search()">search</button>
+  <div id="results"></div>
+  <script>
+    function search() {
+      window.parent.postMessage({jsonrpc:'2.0',method:'tools/call',params:{name:'search-content',arguments:{q:document.getElementById('q').value,limit:20}}},'*');
+    }
+    window.addEventListener('message',e=>{
+      if(e.data?.result||e.data?.method==='tool/result'){
+        const r=e.data.result||e.data.params?.result;
+        const d=r?.data||r||[];
+        document.getElementById('results').innerHTML=d.map(x=>'<div class="result"><b>'+((x.type||'')+'</b> '+(x.content?.app_name||'')+': '+(x.content?.text||x.content?.transcription||'').substring(0,200))+'</div>').join('');
+      }
+    });
+  </script>
+</body>
+</html>`;
+      }
+      return {
+        contents: [
+          {
+            uri,
+            mimeType: "text/html",
+            text: htmlContent,
+          },
+        ],
+      };
+    }
+
     default:
       throw new Error(`Unknown resource: ${uri}`);
   }

package/ui/search.html

@@ -0,0 +1,559 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>screenpipe search</title>
+  <style>
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    body {
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      background: #0a0a0a;
+      color: #fafafa;
+      padding: 16px;
+      min-height: 100vh;
+    }
+
+    .container {
+      max-width: 700px;
+      margin: 0 auto;
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 20px;
+    }
+
+    .header h1 {
+      font-size: 18px;
+      font-weight: 600;
+    }
+
+    .logo {
+      width: 24px;
+      height: 24px;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 6px;
+    }
+
+    .search-box {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 16px;
+    }
+
+    .search-input {
+      flex: 1;
+      padding: 12px 16px;
+      border: 1px solid #333;
+      border-radius: 8px;
+      background: #1a1a1a;
+      color: #fff;
+      font-size: 14px;
+      outline: none;
+      transition: border-color 0.2s;
+    }
+
+    .search-input:focus {
+      border-color: #666;
+    }
+
+    .search-input::placeholder {
+      color: #666;
+    }
+
+    .btn {
+      padding: 12px 20px;
+      border: none;
+      border-radius: 8px;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+
+    .btn-primary {
+      background: #fff;
+      color: #000;
+    }
+
+    .btn-primary:hover {
+      background: #e0e0e0;
+    }
+
+    .btn-secondary {
+      background: #1a1a1a;
+      color: #fff;
+      border: 1px solid #333;
+    }
+
+    .btn-secondary:hover {
+      background: #252525;
+    }
+
+    .filters {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 20px;
+      flex-wrap: wrap;
+    }
+
+    .filter-btn {
+      padding: 6px 14px;
+      border: 1px solid #333;
+      border-radius: 20px;
+      background: transparent;
+      color: #888;
+      font-size: 13px;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+
+    .filter-btn:hover {
+      border-color: #555;
+      color: #fff;
+    }
+
+    .filter-btn.active {
+      background: #fff;
+      color: #000;
+      border-color: #fff;
+    }
+
+    .stats {
+      display: flex;
+      gap: 20px;
+      padding: 12px 16px;
+      background: #1a1a1a;
+      border-radius: 8px;
+      margin-bottom: 20px;
+      font-size: 13px;
+    }
+
+    .stat {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .stat-value {
+      font-weight: 600;
+      color: #fff;
+    }
+
+    .stat-label {
+      color: #666;
+    }
+
+    .results {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .result-card {
+      background: #1a1a1a;
+      border: 1px solid #252525;
+      border-radius: 10px;
+      padding: 16px;
+      transition: border-color 0.2s;
+    }
+
+    .result-card:hover {
+      border-color: #333;
+    }
+
+    .result-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      margin-bottom: 10px;
+    }
+
+    .result-type {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 4px 10px;
+      border-radius: 4px;
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    .type-ocr {
+      background: rgba(59, 130, 246, 0.2);
+      color: #60a5fa;
+    }
+
+    .type-audio {
+      background: rgba(34, 197, 94, 0.2);
+      color: #4ade80;
+    }
+
+    .type-ui {
+      background: rgba(168, 85, 247, 0.2);
+      color: #c084fc;
+    }
+
+    .result-time {
+      font-size: 12px;
+      color: #666;
+    }
+
+    .result-app {
+      font-size: 13px;
+      color: #888;
+      margin-bottom: 8px;
+    }
+
+    .result-text {
+      font-size: 14px;
+      line-height: 1.5;
+      color: #ccc;
+    }
+
+    .result-actions {
+      display: flex;
+      gap: 8px;
+      margin-top: 12px;
+      padding-top: 12px;
+      border-top: 1px solid #252525;
+    }
+
+    .action-btn {
+      padding: 6px 12px;
+      border: 1px solid #333;
+      border-radius: 6px;
+      background: transparent;
+      color: #888;
+      font-size: 12px;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+
+    .action-btn:hover {
+      border-color: #555;
+      color: #fff;
+    }
+
+    .empty-state {
+      text-align: center;
+      padding: 60px 20px;
+      color: #666;
+    }
+
+    .empty-state h3 {
+      font-size: 16px;
+      margin-bottom: 8px;
+      color: #888;
+    }
+
+    .loading {
+      display: flex;
+      justify-content: center;
+      padding: 40px;
+    }
+
+    .spinner {
+      width: 24px;
+      height: 24px;
+      border: 2px solid #333;
+      border-top-color: #fff;
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+    }
+
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+
+    .hidden {
+      display: none;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="header">
+      <div class="logo"></div>
+      <h1>screenpipe search</h1>
+    </div>
+
+    <div class="search-box">
+      <input
+        type="text"
+        id="query"
+        class="search-input"
+        placeholder="search your screen history, audio, and more..."
+        onkeydown="if(event.key==='Enter')search()"
+      />
+      <button class="btn btn-primary" onclick="search()">search</button>
+    </div>
+
+    <div class="filters">
+      <button class="filter-btn active" data-type="all" onclick="setFilter('all')">all</button>
+      <button class="filter-btn" data-type="ocr" onclick="setFilter('ocr')">screen</button>
+      <button class="filter-btn" data-type="audio" onclick="setFilter('audio')">audio</button>
+      <button class="filter-btn" data-type="ui" onclick="setFilter('ui')">ui elements</button>
+    </div>
+
+    <div id="stats" class="stats hidden">
+      <div class="stat">
+        <span class="stat-value" id="result-count">0</span>
+        <span class="stat-label">results</span>
+      </div>
+      <div class="stat">
+        <span class="stat-value" id="time-range">-</span>
+        <span class="stat-label">time range</span>
+      </div>
+    </div>
+
+    <div id="loading" class="loading hidden">
+      <div class="spinner"></div>
+    </div>
+
+    <div id="results" class="results">
+      <div class="empty-state">
+        <h3>search your digital history</h3>
+        <p>type a query above to search through your screen recordings and audio transcriptions</p>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    let currentFilter = 'all';
+    let pendingRequestId = null;
+
+    // MCP App communication layer
+    const mcp = {
+      requestId: 0,
+
+      callTool: function(name, args) {
+        this.requestId++;
+        pendingRequestId = this.requestId;
+        window.parent.postMessage({
+          jsonrpc: '2.0',
+          id: this.requestId,
+          method: 'tools/call',
+          params: { name, arguments: args }
+        }, '*');
+        return this.requestId;
+      },
+
+      sendMessage: function(text) {
+        window.parent.postMessage({
+          jsonrpc: '2.0',
+          method: 'message/send',
+          params: { content: text }
+        }, '*');
+      }
+    };
+
+    // listen for messages from host
+    window.addEventListener('message', (event) => {
+      const data = event.data;
+
+      // handle tool results
+      if (data?.result || data?.method === 'tool/result') {
+        hideLoading();
+        const result = data.result || data.params?.result;
+        if (result) {
+          displayResults(result);
+        }
+      }
+
+      // handle errors
+      if (data?.error) {
+        hideLoading();
+        showError(data.error.message || 'search failed');
+      }
+    });
+
+    function setFilter(type) {
+      currentFilter = type;
+      document.querySelectorAll('.filter-btn').forEach(btn => {
+        btn.classList.toggle('active', btn.dataset.type === type);
+      });
+      // re-run search with new filter if there's a query
+      const query = document.getElementById('query').value;
+      if (query) {
+        search();
+      }
+    }
+
+    function search() {
+      const query = document.getElementById('query').value;
+      showLoading();
+
+      const args = {
+        q: query || undefined,
+        content_type: currentFilter,
+        limit: 20
+      };
+
+      mcp.callTool('search-content', args);
+    }
+
+    function showLoading() {
+      document.getElementById('loading').classList.remove('hidden');
+      document.getElementById('results').innerHTML = '';
+      document.getElementById('stats').classList.add('hidden');
+    }
+
+    function hideLoading() {
+      document.getElementById('loading').classList.add('hidden');
+    }
+
+    function showError(message) {
+      document.getElementById('results').innerHTML = `
+        <div class="empty-state">
+          <h3>error</h3>
+          <p>${escapeHtml(message)}</p>
+        </div>
+      `;
+    }
+
+    function displayResults(data) {
+      const results = data.data || data || [];
+      const container = document.getElementById('results');
+      const statsEl = document.getElementById('stats');
+
+      if (!Array.isArray(results) || results.length === 0) {
+        container.innerHTML = `
+          <div class="empty-state">
+            <h3>no results found</h3>
+            <p>try a different search term or adjust your filters</p>
+          </div>
+        `;
+        statsEl.classList.add('hidden');
+        return;
+      }
+
+      // update stats
+      document.getElementById('result-count').textContent = results.length;
+
+      // calculate time range
+      const timestamps = results
+        .map(r => r.content?.timestamp)
+        .filter(Boolean)
+        .map(t => new Date(t).getTime())
+        .sort((a, b) => a - b);
+
+      if (timestamps.length > 1) {
+        const start = new Date(timestamps[0]);
+        const end = new Date(timestamps[timestamps.length - 1]);
+        document.getElementById('time-range').textContent = formatTimeRange(start, end);
+      } else {
+        document.getElementById('time-range').textContent = 'now';
+      }
+
+      statsEl.classList.remove('hidden');
+
+      // render results
+      container.innerHTML = results.map(result => {
+        const content = result.content || {};
+        const type = result.type?.toLowerCase() || 'unknown';
+        const text = content.text || content.transcription || '';
+        const app = content.app_name || content.device_name || 'unknown';
+        const window = content.window_name || '';
+        const time = content.timestamp ? formatTime(new Date(content.timestamp)) : '';
+
+        return `
+          <div class="result-card">
+            <div class="result-header">
+              <span class="result-type type-${type}">${getTypeIcon(type)} ${type}</span>
+              <span class="result-time">${time}</span>
+            </div>
+            <div class="result-app">${escapeHtml(app)}${window ? ' - ' + escapeHtml(window) : ''}</div>
+            <div class="result-text">${escapeHtml(truncate(text, 300))}</div>
+            <div class="result-actions">
+              <button class="action-btn" onclick="copyText('${escapeJs(text)}')">copy</button>
+              <button class="action-btn" onclick="askAbout('${escapeJs(text.substring(0, 100))}')">ask AI</button>
+            </div>
+          </div>
+        `;
+      }).join('');
+    }
+
+    function getTypeIcon(type) {
+      switch(type) {
+        case 'ocr': return '';
+        case 'audio': return '';
+        case 'ui': return '';
+        default: return '';
+      }
+    }
+
+    function formatTime(date) {
+      const now = new Date();
+      const diff = now - date;
+
+      if (diff < 60000) return 'just now';
+      if (diff < 3600000) return Math.floor(diff / 60000) + 'm ago';
+      if (diff < 86400000) return Math.floor(diff / 3600000) + 'h ago';
+
+      return date.toLocaleDateString('en-US', {
+        month: 'short',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: '2-digit'
+      });
+    }
+
+    function formatTimeRange(start, end) {
+      const diff = end - start;
+      if (diff < 3600000) return Math.floor(diff / 60000) + ' min';
+      if (diff < 86400000) return Math.floor(diff / 3600000) + ' hours';
+      return Math.floor(diff / 86400000) + ' days';
+    }
+
+    function truncate(str, len) {
+      if (!str) return '';
+      if (str.length <= len) return str;
+      return str.substring(0, len) + '...';
+    }
+
+    function escapeHtml(str) {
+      if (!str) return '';
+      return str
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+    }
+
+    function escapeJs(str) {
+      if (!str) return '';
+      return str
+        .replace(/\\/g, '\\\\')
+        .replace(/'/g, "\\'")
+        .replace(/"/g, '\\"')
+        .replace(/\n/g, '\\n')
+        .replace(/\r/g, '\\r');
+    }
+
+    function copyText(text) {
+      navigator.clipboard.writeText(text).then(() => {
+        // could show a toast here
+      });
+    }
+
+    function askAbout(text) {
+      mcp.sendMessage(`Tell me more about: "${text}"`);
+    }
+
+    // auto-focus search input
+    document.getElementById('query').focus();
+  </script>
+</body>
+</html>