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
|
||||
- `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**
|
||||
- Click elements on the page
|
||||
- Input: `selector` (string): CSS selector for element to click
|
||||
|
|
|
|||
|
|
@ -43,6 +43,20 @@ const TOOLS: Tool[] = [
|
|||
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",
|
||||
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":
|
||||
try {
|
||||
await page.click(args.selector);
|
||||
|
|
|
|||
Loading…
Reference in a new issue