Add a Puppeteer tool to capture screenshot as raw base64 text
This commit is contained in:
parent
0d12ab3263
commit
c5de8bdf3f
2 changed files with 63 additions and 0 deletions
|
|
@ -21,6 +21,14 @@ A Model Context Protocol server that provides browser automation capabilities us
|
||||||
- `width` (number, optional, default: 800): Screenshot width
|
- `width` (number, optional, default: 800): Screenshot width
|
||||||
- `height` (number, optional, default: 600): Screenshot height
|
- `height` (number, optional, default: 600): Screenshot height
|
||||||
|
|
||||||
|
- **puppeteer_screenshot_encoded**
|
||||||
|
- Captures a screenshot of the entire page or a specific element and return it as a base64-encoded data URI.
|
||||||
|
- Inputs:
|
||||||
|
- `name` (string, required): Name for the screenshot
|
||||||
|
- `selector` (string, optional): CSS selector for element to screenshot
|
||||||
|
- `width` (number, optional, default: 800): Screenshot width
|
||||||
|
- `height` (number, optional, default: 600): Screenshot height
|
||||||
|
|
||||||
- **puppeteer_click**
|
- **puppeteer_click**
|
||||||
- Click elements on the page
|
- Click elements on the page
|
||||||
- Input: `selector` (string): CSS selector for element to click
|
- Input: `selector` (string): CSS selector for element to click
|
||||||
|
|
|
||||||
|
|
@ -43,6 +43,20 @@ const TOOLS: Tool[] = [
|
||||||
required: ["name"],
|
required: ["name"],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: "puppeteer_screenshot_encoded",
|
||||||
|
description: "Take a screenshot of the current page or a specific element and return it as a base64-encoded data URI",
|
||||||
|
inputSchema: {
|
||||||
|
type: "object",
|
||||||
|
properties: {
|
||||||
|
name: { type: "string", description: "Name for the screenshot" },
|
||||||
|
selector: { type: "string", description: "CSS selector for element to screenshot" },
|
||||||
|
width: { type: "number", description: "Width in pixels (default: 800)" },
|
||||||
|
height: { type: "number", description: "Height in pixels (default: 600)" },
|
||||||
|
},
|
||||||
|
required: ["name"],
|
||||||
|
},
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: "puppeteer_click",
|
name: "puppeteer_click",
|
||||||
description: "Click an element on the page",
|
description: "Click an element on the page",
|
||||||
|
|
@ -265,6 +279,47 @@ async function handleToolCall(name: string, args: any): Promise<CallToolResult>
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
case "puppeteer_screenshot_encoded": {
|
||||||
|
const width = args.width ?? 800;
|
||||||
|
const height = args.height ?? 600;
|
||||||
|
await page.setViewport({ width, height });
|
||||||
|
|
||||||
|
const screenshot = await (args.selector
|
||||||
|
? (await page.$(args.selector))?.screenshot({ encoding: "base64" })
|
||||||
|
: page.screenshot({ encoding: "base64", fullPage: false }));
|
||||||
|
|
||||||
|
if (!screenshot) {
|
||||||
|
return {
|
||||||
|
content: [
|
||||||
|
{
|
||||||
|
type: "text",
|
||||||
|
text: args.selector ? `Element not found: ${args.selector}` : "Screenshot failed",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
isError: true,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
screenshots.set(args.name, screenshot as string);
|
||||||
|
server.notification({
|
||||||
|
method: "notifications/resources/list_changed",
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
content: [
|
||||||
|
{
|
||||||
|
type: "text",
|
||||||
|
text: `Screenshot '${args.name}' taken at ${width}x${height}`,
|
||||||
|
} as TextContent,
|
||||||
|
{
|
||||||
|
type: "text",
|
||||||
|
text: `data:image/png;base64,${screenshot}`,
|
||||||
|
} as TextContent,
|
||||||
|
],
|
||||||
|
isError: false,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
case "puppeteer_click":
|
case "puppeteer_click":
|
||||||
try {
|
try {
|
||||||
await page.click(args.selector);
|
await page.click(args.selector);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue