Skip to content

feat: webmcp #73

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Cherry merged 1 commit into from
Aug 27, 2026
Merged

feat: webmcp #73

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .npmrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
save-exact = true
min-release-age = 7
9 changes: 9 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,15 @@ This project makes use of Cloudflare Workers, and Cloudflare Workers Static Asse
- `textWrap`
- Wrap text to fit within the image (to best ability). Will not alter font size, so especially long strings may still appear outside of the image. Defaults to `false`.

### WebMCP

While [placeholders.dev](https://placeholders.dev) is open, it registers tools with the visitor's AI agent via the draft [WebMCP](https://webmachinelearning.github.io/webmcp/) `navigator.modelContext` API, so an agent can build placeholder URLs from a plain-language request without any setup. Tools live in [`public/webmcp.js`](public/webmcp.js) and are pure URL work, so no requests leave the browser.

- `generate_placeholder_image_url`
- Builds a validated image URL from any of the API options above, and returns HTML and Markdown snippets alongside it. Values the image API would silently drop, such as an unparseable color or a `fontWeight` keyword, are rejected with an explanation instead. Also renders the result on the page so the visitor can see what the agent produced.
- `explain_placeholder_image_url`
- Breaks an existing placeholders.dev URL into the options it uses, resolves the defaults the image API would apply, and flags query parameters it ignores.

## Dev

- `npm run start:dev` (this will use `wrangler dev` to locally start the Cloudflare Worker for testing)
Expand Down
2,117 changes: 1,249 additions & 868 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

26 changes: 13 additions & 13 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,23 +28,23 @@
"test:watch": "vitest watch"
},
"devDependencies": {
"@adaptivelink/pops": "0.5.8",
"@cloudflare/vitest-pool-workers": "0.13.0",
"@cloudflare/workers-types": "4.20260313.1",
"@nodecraft/eslint-config": "47.0.2",
"@adaptivelink/pops": "0.6.1",
"@cloudflare/vitest-pool-workers": "0.22.0",
"@cloudflare/workers-types": "5.20260820.1",
"@nodecraft/eslint-config": "51.0.0",
"@stylistic/eslint-plugin": "5.10.0",
"@types/sanitize-html": "2.16.1",
"eslint": "10.0.3",
"eslint": "10.8.1",
"eslint-plugin-import-newlines": "2.0.0",
"eslint-plugin-import-x": "4.16.2",
"eslint-plugin-n": "17.24.0",
"eslint-plugin-unicorn": "63.0.0",
"typescript-eslint": "8.57.0",
"sanitize-html": "2.17.1",
"typescript": "5.9.3",
"eslint-plugin-import-x": "4.17.1",
"eslint-plugin-n": "18.3.0",
"eslint-plugin-unicorn": "73.0.0",
"typescript-eslint": "8.67.0",
"sanitize-html": "2.17.7",
"typescript": "6.0.3",
"validate-color": "2.2.4",
"vitest": "4.1.0",
"wrangler": "4.73.0"
"vitest": "4.1.11",
"wrangler": "4.124.0"
},
"engines": {
"node": ">=18"
Expand Down
40 changes: 40 additions & 0 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,6 +237,30 @@
margin-top: 0.25rem;
}

.prompts {
list-style: none;
display: grid;
gap: 0.5rem;
margin-bottom: 1rem;
}

.prompts li {
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.5rem 0.75rem;
color: var(--text-muted);
font-size: 0.9375rem;
}

#agentPreview img {
display: block;
border-radius: 6px;
max-width: 100%;
height: auto;
margin-bottom: 0.75rem;
}

.social {
display: flex;
justify-content: center;
Expand Down Expand Up @@ -297,6 +321,21 @@ <h2>About</h2>
<p>placeholders.dev generates custom placeholder images on the fly. All images are generated on Cloudflare's edge network at <span class="edgeLocations">330</span>+ locations worldwide, ensuring optimal performance. Images are cached for extended periods.</p>
</section>

<section>
<h3>Ask your AI agent</h3>
<p>This page exposes <a href="https://webmachinelearning.github.io/webmcp/" target="_blank" rel="noopener">WebMCP</a> tools, so a WebMCP-compatible browser agent can build and inspect placeholder URLs for you while you have this page open. Nothing to install, just ask it for what you need:</p>
<ul class="prompts">
<li>&ldquo;Generate a 1200x630 dark grey social share placeholder that says Hello World&rdquo;</li>
<li>&ldquo;Make me a 64x64 avatar placeholder that works in light and dark mode&rdquo;</li>
<li>&ldquo;What options does this placeholders.dev URL use?&rdquo;</li>
</ul>
<div class="url-example" id="agentPreview" hidden>
<div class="url-example-label">Latest agent-generated placeholder</div>
<img id="agentPreviewImage" alt="" width="300" height="150">
<pre><code><a id="agentPreviewUrl" href=""></a></code></pre>
</div>
</section>

<section>
<h3>Example URLs</h3>
<div class="url-examples">
Expand Down Expand Up @@ -370,5 +409,6 @@ <h3>API Options</h3>
</a>
</footer>
</main>
<script type="module" src="/webmcp.js"></script>
</body>
</html>
Loading
Loading