diff --git a/data/git-timestamps-created.json b/data/git-timestamps-created.json index a1167818d..1201a497c 100644 --- a/data/git-timestamps-created.json +++ b/data/git-timestamps-created.json @@ -15,6 +15,7 @@ "src/content/blog/microlink-api-introducing-microlink-pdf.md": "2026-01-13T14:11:10.000Z", "src/content/blog/microlink-cards.md": "2026-01-06T20:49:38.000Z", "src/content/blog/microlink-for-pdf.md": "2026-01-06T20:49:38.000Z", + "src/content/blog/microlink-mcp-the-web-llm-ready.md": "2026-02-27T15:32:53.000Z", "src/content/blog/microlink-proxy-how-it-works.md": "2026-01-13T14:11:10.000Z", "src/content/blog/microlink-sdk-4-5.md": "2026-01-06T20:49:38.000Z", "src/content/blog/microlink-sdk-v45-introducing-iframe-support.md": "2026-01-13T14:11:10.000Z", @@ -43,6 +44,7 @@ "src/content/docs/api/basics/rate-limit.md": "2026-01-06T20:49:38.000Z", "src/content/docs/api/getting-started/cli.md": "2026-01-06T20:49:38.000Z", "src/content/docs/api/getting-started/data-fields.md": "2026-01-06T20:49:38.000Z", + "src/content/docs/api/getting-started/mcp.md": "2026-02-25T20:47:48.000Z", "src/content/docs/api/getting-started/overview.md": "2026-01-06T20:49:38.000Z", "src/content/docs/api/parameters/adblock.md": "2026-01-06T20:49:38.000Z", "src/content/docs/api/parameters/animations.md": "2026-01-06T20:49:38.000Z", @@ -411,7 +413,9 @@ "src/pages/iframe.js": "2019-11-11T22:57:18.000Z", "src/pages/index.js": "2017-10-07T15:12:41.000Z", "src/pages/insights.js": "2020-01-30T10:01:37.000Z", + "src/pages/integration/mcp.js": "2026-02-25T11:33:59.000Z", "src/pages/integrations.js": "2020-02-07T09:02:30.000Z", + "src/pages/integrations/mcp.js": "2026-02-26T11:59:20.000Z", "src/pages/logo.js": "2022-12-17T14:17:02.000Z", "src/pages/markdown.js": "2026-02-19T21:02:29.000Z", "src/pages/meta.js": "2019-12-27T17:46:49.000Z", diff --git a/data/git-timestamps-modified.json b/data/git-timestamps-modified.json index 8b06903d6..220dd135c 100644 --- a/data/git-timestamps-modified.json +++ b/data/git-timestamps-modified.json @@ -15,6 +15,7 @@ "src/content/blog/microlink-api-introducing-microlink-pdf.md": "2026-02-03T14:39:59.000Z", "src/content/blog/microlink-cards.md": "2026-02-03T14:39:59.000Z", "src/content/blog/microlink-for-pdf.md": "2026-01-10T15:22:34.000Z", + "src/content/blog/microlink-mcp-the-web-llm-ready.md": "2026-02-27T15:32:53.000Z", "src/content/blog/microlink-proxy-how-it-works.md": "2026-02-03T14:39:59.000Z", "src/content/blog/microlink-sdk-4-5.md": "2026-01-10T15:22:34.000Z", "src/content/blog/microlink-sdk-v45-introducing-iframe-support.md": "2026-02-03T14:39:59.000Z", @@ -43,6 +44,7 @@ "src/content/docs/api/basics/rate-limit.md": "2026-01-10T13:37:59.000Z", "src/content/docs/api/getting-started/cli.md": "2026-01-10T13:37:59.000Z", "src/content/docs/api/getting-started/data-fields.md": "2026-01-10T13:37:59.000Z", + "src/content/docs/api/getting-started/mcp.md": "2026-02-26T11:45:32.000Z", "src/content/docs/api/getting-started/overview.md": "2026-02-04T20:02:09.000Z", "src/content/docs/api/parameters/adblock.md": "2026-02-04T20:02:09.000Z", "src/content/docs/api/parameters/animations.md": "2026-02-04T20:02:09.000Z", @@ -411,8 +413,10 @@ "src/pages/iframe.js": "2023-03-19T22:23:34.000Z", "src/pages/index.js": "2026-02-26T11:40:49.000Z", "src/pages/insights.js": "2026-02-23T17:35:57.000Z", + "src/pages/integration/mcp.js": "2026-02-25T20:48:06.000Z", "src/pages/integrations.js": "2020-07-29T16:14:34.000Z", - "src/pages/logo.js": "2026-02-26T11:40:49.000Z", + "src/pages/integrations/mcp.js": "2026-02-27T17:42:59.000Z", + "src/pages/logo.js": "2026-02-26T17:36:15.000Z", "src/pages/markdown.js": "2026-02-24T15:39:02.000Z", "src/pages/meta.js": "2026-01-24T13:05:07.000Z", "src/pages/metadata.js": "2026-02-19T21:48:11.000Z", diff --git a/eslint.config.mjs b/eslint.config.mjs index 42baa0fa7..b0c351115 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -115,7 +115,9 @@ export default [ TextEncoder: 'readonly', TextDecoder: 'readonly', Blob: 'readonly', - CustomEvent: 'readonly' + CustomEvent: 'readonly', + requestAnimationFrame: 'readonly', + cancelAnimationFrame: 'readonly' } }, rules: { diff --git a/src/components/icons/Brain.js b/src/components/icons/Brain.js new file mode 100644 index 000000000..5d6a88f59 --- /dev/null +++ b/src/components/icons/Brain.js @@ -0,0 +1,28 @@ +import React from 'react' +import Svg from 'components/elements/Svg' + +export const Brain = props => ( + + + + + + + + + + + +) diff --git a/src/components/patterns/Aside/constants.js b/src/components/patterns/Aside/constants.js index d3416299c..33cf82272 100644 --- a/src/components/patterns/Aside/constants.js +++ b/src/components/patterns/Aside/constants.js @@ -173,6 +173,10 @@ const ROUTES_API = [ { name: 'CLI', href: '/docs/api/getting-started/cli' + }, + { + name: 'MCP', + href: '/docs/api/getting-started/mcp' } ] }, diff --git a/src/components/patterns/Toolbar/ToolbarLinks.js b/src/components/patterns/Toolbar/ToolbarLinks.js index 4ebf4480d..7121996f3 100644 --- a/src/components/patterns/Toolbar/ToolbarLinks.js +++ b/src/components/patterns/Toolbar/ToolbarLinks.js @@ -16,6 +16,7 @@ import { ShieldUser as ShieldUserIcon } from 'components/icons/ShieldUser' import { Terminal as TerminalIcon } from 'components/icons/Terminal' import { WandSparkles as WandSparklesIcon } from 'components/icons/WandSparkles' import { GitHub as GitHubBrand } from 'components/icons/GitHub' +import { Brain as BrainIcon } from 'components/icons/Brain' import { useOssTotalStars } from 'components/hook/use-oss-total-stars' import { theme } from 'theme' import styled from 'styled-components' @@ -170,8 +171,14 @@ export const NAVIGATION_SECTIONS = [ { label: 'Tools', description: 'Utilities to test and validate your metadata integrations.', - columns: 2, + columns: 3, items: [ + createNavigationItem({ + label: 'MCP', + href: '/integrations/mcp', + description: 'Give your AI access to the Microlink API', + icon: BrainIcon + }), createNavigationItem({ label: 'Sharing Debugger', href: '/tools/sharing-debugger', diff --git a/src/content/blog/microlink-mcp-the-web-llm-ready.md b/src/content/blog/microlink-mcp-the-web-llm-ready.md new file mode 100644 index 000000000..60b606dcb --- /dev/null +++ b/src/content/blog/microlink-mcp-the-web-llm-ready.md @@ -0,0 +1,83 @@ +--- +title: 'Microlink MCP: The Web, LLM-Ready' +description: 'Microlink is now available as an MCP server. Screenshots, PDFs, markdown conversion, and web scraping through natural language. The web, LLM-ready.' +authors: + - joseba +date: '2026-03-02' +--- + +The web wasn't built for LLMs. Microlink bridges the gap. One config block gives [Claude Desktop](https://claude.ai/download), [Cursor](https://cursor.com), [Windsurf](https://windsurf.com), and any MCP-compatible client access to screenshots, PDFs, markdown conversion, metadata extraction, Lighthouse audits, and more. No boilerplate. No extra SDKs. Just ask. + +[MCP — Model Context Protocol](https://modelcontextprotocol.io) is the open standard that lets AI agents use external tools through natural language. Instead of writing HTTP clients, handling auth, and parsing responses, you give your agent an MCP server and it handles the rest. + +```json +{ + "mcpServers": { + "microlink": { + "command": "npx", + "args": ["-y", "@microlink/mcp"], + "env": { + "MICROLINK_API_KEY": "your-api-key" + } + } + } +} +``` + +No global install. No signup to start. + + +## What makes it different + +Most agents struggle with the real web: bot detection blocks requests, cookie banners halt execution, and raw HTML — when it does come through — is thousands of tokens of nav bars, footers, and ad noise that buries the actual content. + +Every Microlink MCP request routes through its headless browser infrastructure. Anti-bot evasion, automatic cookie banner dismissal, proxy routing. The target site sees Microlink, not your agent, not your IP. Your agent gets structured, clean output. Not a raw dump. + + +## 80% fewer tokens. Cleaner content. + +Ask your agent to fetch a page via [`microlink_markdown`](/markdown) and it gets clean Markdown — body content, structured headings, relevant links. Headers, footers, cookie banners, ads stripped out. 80% fewer tokens than raw HTML. + +`microlink_text` goes further: plain text only. The lightest option when you just need the words. + +Less noise. Faster responses. More accurate results. + + +## Pixel-perfect screenshots, on demand + +[`microlink_screenshot`](/screenshot) captures any URL and returns a CDN-hosted image in seconds. Full-page, element-level crops via CSS selector, any viewport, any device. Dark mode, browser chrome overlays, custom CSS injection before capture. + +Designers: ask your agent to screenshot any URL at mobile, tablet, and desktop in one go. No browser open. No manual resizing. Just ask. + + +## One config block. Ten tools. + +- [`microlink_screenshot`](/screenshot) — Full-page, element crops, device emulation, overlays, custom CSS/JS injection. +- [`microlink_pdf`](/pdf) — Any URL as a PDF. Paper size, margins, orientation, page ranges. +- [`microlink_markdown`](/markdown) — Any webpage as clean Markdown. 80% fewer tokens. No noise. +- `microlink_text` — Plain text only. The lightest way to read a page. +- [`microlink_meta`](/metadata) — Normalized metadata: title, description, author, date, image, favicon. +- `microlink_extract` — Metadata, CSS selector scraping, screenshot, PDF, video, [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) — one request. +- [`microlink_insights`](/insights) — [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) audit plus [Wappalyzer](https://www.wappalyzer.com) tech-stack detection. +- `microlink_video` and `microlink_audio` — Direct playable sources from YouTube, Vimeo, TikTok, SoundCloud, Spotify, and hundreds more. +- `microlink_palette` — Dominant color palette from any page. Hex codes plus [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/)-safe colors. + + +## No code. Just ask. + +*"What can you do with the Microlink tool?"* → The agent explains every capability in plain language. No docs needed. + +*"Screenshot our landing page at mobile, tablet, and desktop — full page, JPEG"* → Three CDN URLs. Done. + +*"Read this research paper and summarize the key findings"* → Clean Markdown, 80% fewer tokens, straight into context. + +*"Audit this site's performance and tell me what stack they're running"* → Lighthouse scores plus tech-stack detection, in one response. + +*"Convert this documentation page to an A4 PDF"* → Print-ready, CDN-hosted, immediately. + + +## Get started + +- [Integration page](/integrations/mcp) +- [Documentation](/docs/api/getting-started/mcp) +- [GitHub](https://github.com/microlinkhq/mcp) diff --git a/src/content/docs/api/getting-started/mcp.md b/src/content/docs/api/getting-started/mcp.md new file mode 100644 index 000000000..43de90e02 --- /dev/null +++ b/src/content/docs/api/getting-started/mcp.md @@ -0,0 +1,151 @@ +--- +title: 'MCP' +description: 'Connect Microlink MCP to your AI client to extract metadata, screenshots, PDFs, insights, media, markdown, and text from any URL.' +--- + +import { Terminal } from 'components/markdown/Terminal' + +Microlink MCP exposes [Microlink API](/docs/api/getting-started/overview/) as MCP tools for assistants like Claude, Codex, Cursor, and VS Code. + +## Install + +No global install is required. Run with `npx` (or `pnpm dlx` if you use pnpm): + +npx -y @microlink/mcp + +pnpm dlx @microlink/mcp + +## Add it to your MCP client + +Use this `mcpServers` entry: + +```json +{ + "mcpServers": { + "microlink": { + "command": "npx", + "args": ["-y", "@microlink/mcp"], + "env": { + // Optional. Free 50 reqs/day rate limit. + "MICROLINK_API_KEY": "YOUR_MICROLINK_API_KEY" + } + } + } +} +``` + +For higher/unlimited usage, get an API key at [microlink.io/#pricing](https://microlink.io/#pricing). +If no API key is provided, requests go to the free endpoint with a 50 requests/day limit. + +## Usage + +Once you've added the MCP to your favorite LLM client, try asking it to take a screenshot of a specific webpage, generate a PDF, or fetch metadata. Just use plain language to describe what you want — the agent will know which **tool** to call and with what parameters. + +## Tools + +- **microlink_extract**: General extractor. Metadata + custom `data` scraping + optional screenshot/pdf/video/audio/insights/palette in one call. +- **microlink_screenshot**: Capture screenshots (`fullPage`, `element`, `overlay`, `type`, etc.). +- **microlink_pdf**: Generate PDFs (`format`, `margin`, `scale`, `pageRanges`, etc.). +- **microlink_video**: Extract playable video source (`data.video`). +- **microlink_audio**: Extract playable audio source (`data.audio`). +- **microlink_insights**: Lighthouse + technology detection. +- **microlink_meta**: Normalized metadata only (`title`, `description`, `image`, `logo`, etc.). +- **microlink_palette**: Extract color palette from detected images. +- **microlink_markdown**: Convert URL content to Markdown (`microlink.data.markdown`). +- **microlink_text**: Convert URL content to plain text (`microlink.data.text`). + +Notes: +- **screenshot**, **pdf**, and **insights** accept `true` or `{ ...options }`. +- Empty objects like `{}` are treated as `true`. +- Boolean strings (`"true"`, `"false"`) and JSON-stringified objects are normalized for compatibility with some MCP clients. + +## Response format + +- All tools return `structuredContent` with: + - `endpoint`, `requestUrl`, `finalUrl`, `statusCode`, `responseHeaders`, `microlink` +- For markdown/text specifically: + - Markdown content is in `microlink.data.markdown` + - Plain text content is in `microlink.data.text` + +## Prompt Examples + +### Extract metadata + screenshot in one request + +*"Get a full page screenshot of microlink.io and include the metadata"* + +```json +{ + "tool": "microlink_extract", + "arguments": { + "url": "https://microlink.io", + "screenshot": { + "fullPage": true + }, + "meta": true + } +} +``` + +### Screenshot with overlay + +*"Get a screenshot of microlink.io with a dark browser overlay"* + +```json +{ + "tool": "microlink_screenshot", + "arguments": { + "url": "https://microlink.io", + "screenshot": { + "overlay": { "browser": "dark" }, + "type": "png" + } + } +} +``` + +### Generate a PDF + +*"Download a pdf of example.com"* + +```json +{ + "tool": "microlink_pdf", + "arguments": { + "url": "https://example.com", + "pdf": { + "format": "A4", + "margin": "0.35cm" + } + } +} +``` + +### Get page insights + +*"Check the performance of microlink.io"* + +```json +{ + "tool": "microlink_insights", + "arguments": { + "url": "https://microlink.io", + "insights": { + "lighthouse": { "preset": "perf" }, + "technologies": true + } + } +} +``` + +### Convert a page to Markdown + +*"Read https://microlink.io/blog/antibot-detection-at-scale as markdown and give the key points of the article"* + +```json +{ + "tool": "microlink_markdown", + "arguments": { + "url": "https://microlink.io/blog/antibot-detection-at-scale" + } +} +``` diff --git a/src/pages/integrations/mcp.js b/src/pages/integrations/mcp.js new file mode 100644 index 000000000..471123c5b --- /dev/null +++ b/src/pages/integrations/mcp.js @@ -0,0 +1,1243 @@ +import { borders, layout, colors, fonts, theme } from 'theme' +import { cdnUrl } from 'helpers/cdn-url' +import React, { useState, useMemo, useCallback } from 'react' + +import Box from 'components/elements/Box' +import CodeCopy from 'components/elements/Codecopy' +import Container from 'components/elements/Container' +import Flex from 'components/elements/Flex' +import Heading from 'components/elements/Heading' +import Video from 'components/elements/Video/Video' +import { Link } from 'components/elements/Link' +import Meta from 'components/elements/Meta/Meta' +import Subhead from 'components/elements/Subhead' +import Text from 'components/elements/Text' +import Terminal from 'components/elements/Terminal/Terminal' + +import ArrowLink from 'components/patterns/ArrowLink' +import Block from 'components/patterns/Block/Block' +import Caption from 'components/patterns/Caption/Caption' +import Faq from 'components/patterns/Faq/Faq' +import Features from 'components/patterns/Features/Features' +import Layout from 'components/patterns/Layout' + +const FEATURES = [ + { + title: 'extract', + description: + 'The Swiss Army knife. Pull metadata, scrape custom fields with CSS selectors, capture a screenshot, generate a PDF, extract video, run Lighthouse — all in one request.' + }, + { + title: 'screenshot', + description: + 'Ask your AI to screenshot any page and get back a CDN URL in seconds. Full-page, device emulation, browser overlays, custom CSS/JS — every option the Microlink screenshot API offers.' + }, + { + title: 'pdf', + description: + 'Turn any URL into a downloadable PDF on demand. Your AI controls paper size, margins, orientation, and page range — no headless browser setup required.' + }, + { + title: 'markdown', + description: + 'Any webpage, clean Markdown output. 80% fewer tokens than raw HTML. Feed articles, docs, and research straight into your LLM context window.' + }, + { + title: 'text', + description: + 'Extract plain text from any URL, stripping all HTML and formatting. The lightest option when all you need is raw readable content.' + }, + { + title: 'meta', + description: + 'Fast, normalized metadata from any URL — title, description, author, date, image, and favicon. Lighter than extract when all you need are the basics.' + }, + { + title: 'video & audio', + description: + 'Extract a direct playable source from any media page. Video works with YouTube, Vimeo, TikTok, Instagram, and hundreds of other platforms. Audio covers SoundCloud, Spotify, Mixcloud, and more.' + }, + { + title: 'palette', + description: + 'Dominant color palette from any page images, ranked by coverage. Returns hex codes plus WCAG-contrast-safe background and overlay colors for design work.' + }, + { + title: 'insights', + description: + 'Ask your AI to audit any site for performance, accessibility, SEO, and best practices via Lighthouse. Pairs with tech-stack detection via Wappalyzer.' + } +] + +const MCP_CONFIG_WITH_KEY = `{ + "mcpServers": { + "microlink": { + "command": "npx", + "args": ["-y", "@microlink/mcp"], + "env": { + "MICROLINK_API_KEY": "your-api-key" // Optional - Free tier 50 reqs/day + } + } + } +}` + +const Hero = () => ( + + + The web browser your
AI agent never had + + + One config block gives Claude, Cursor, and any MCP client access to + screenshots, PDFs, web scraping, markdown conversion, and metadata + extraction. No API wrangling, no extra SDKs. + + + + Read the docs + + + View on GitHub + + + +) + +const Installation = () => ( + + + {MCP_CONFIG_WITH_KEY} + + Paste this into your MCP client config file.{' '} + + Claude Desktop + + ,{' '} + + Cursor + + ,{' '} + + Windsurf + + , and every other MCP-compatible client get access immediately. + + + +) + +const MediaPlaceholder = () => ( + + + + + Ask. Get. Done. + + + Use the Microlink API through natural language. + + + Tell your AI what you need. It screenshots, scrapes, converts, and + extracts — straight from the live web. Type a request. Get a result. + + + + +) + +const ProductInformation = () => ( + +
+ Microlink MCP is a Model Context Protocol server that gives AI + assistants direct access to the Microlink API. Claude, Cursor, + Windsurf, and any other MCP-compatible client can take + screenshots, generate PDFs, scrape structured data, convert pages + to markdown, and extract metadata — through natural language. +
+
+ MCP is an open standard for connecting AI applications to external + tools. Microlink MCP implements that standard for browser and + web-data capabilities. +
+ + ) + }, + { + question: 'Do I need an API key?', + answer: ( + <> +
+ No API key required to get started. The free tier covers 50 + requests per day — enough to explore all ten tools. +
+
+ Add your Microlink API key when you + need production volume, configurable TTL, custom headers, or proxy + support. +
+ + ) + }, + { + question: 'Which AI clients are supported?', + answer: ( + <> +
+ Any client that supports the Model Context Protocol works: Claude + Desktop, Cursor, Windsurf, VS Code, Continue, and more. The same + config block works everywhere. +
+
+ As new MCP-compatible tools ship, Microlink MCP works with them + automatically — no updates needed on your end. +
+ + ) + }, + { + question: 'What can my AI agent do with it?', + answer: ( + <> +
+ Screenshot any URL, generate a PDF, convert a webpage to clean + Markdown, pull normalized metadata, scrape custom fields with CSS + selectors, extract video or audio sources, run a Lighthouse audit, + detect a site's tech stack, and extract color palettes. +
+
+ All ten tools are available through natural language — no code, no + API calls, no configuration beyond the initial setup. +
+ + ) + }, + { + question: 'Is there a free tier?', + answer: ( + <> +
+ Yes. Start immediately with 50 free requests per day — no credit + card, no signup required. All ten tools are available on the free + tier. +
+
+ When you need more throughput or pro features, upgrade to a paid + plan at any time from{' '} + microlink.io/#pricing. +
+ + ) + }, + { + question: + 'How is this different from calling the Microlink API directly?', + answer: ( + <> +
+ Calling the API directly means writing HTTP requests, handling + auth, parsing responses, and wiring everything up in code. + Microlink MCP removes all of that — your AI agent calls the same + API through natural language, and structured results come back + automatically. +
+
+ Use the API directly when you need full programmatic control. Use + the MCP server when you want your AI assistant to handle web tasks + on its own. +
+ + ) + }, + { + question: 'How do I install it?', + answer: ( + <> +
+ The recommended way requires no installation. Use npx{' '} + directly in your MCP client config: +
+ + { + '{\n "mcpServers": {\n "microlink": {\n "command": "npx",\n "args": ["-y", "@microlink/mcp"]\n }\n }\n}' + } + +
+ Optionally, install globally to run it as a named command: +
+ + npm install -g @microlink/mcp + +
+ And then reference it via node with the absolute path + to the local entry point: +
+ + { + '{\n "mcpServers": {\n "microlink": {\n "command": "node",\n "args": ["/absolute/path/to/mcp/src/index.js"],\n "env": {\n "MICROLINK_API_KEY": "YOUR_MICROLINK_API_KEY"\n }\n }\n }\n}' + } + + + ) + } + ]} + /> +) + +export const Head = () => ( + +) + +const EXAMPLES = [ + { + tool: 'screenshot', + accent: '#7B61FF', + prompt: + 'Screenshot the Stripe pricing page with a dark browser overlay and share it with the team', + result: + 'A framed, browser-chrome PNG hosted on CDN — ready to paste into Notion or Slack.', + span: 2 + }, + { + tool: 'markdown', + accent: '#00B4D8', + prompt: + 'Read this research paper and summarise the key findings in bullet points', + result: + 'Clean Markdown — 80 % fewer tokens than raw HTML — fed straight into the LLM context.' + }, + { + tool: 'extract', + accent: '#067df7', + prompt: + 'Scrape every pricing plan name and monthly price from this SaaS page', + result: + 'Structured JSON with the exact fields you asked for, extracted via CSS selectors.' + }, + { + tool: 'pdf', + accent: '#EA407B', + prompt: + 'Convert this documentation page to an A4 PDF and send it to the client', + result: + 'A print-ready PDF with full CSS rendering, hosted on CDN and available immediately.' + }, + { + tool: 'insights', + accent: '#F59E0B', + prompt: + "Audit our competitor's homepage performance and tell me what stack they're running", + result: + 'Lighthouse scores for performance, accessibility, SEO, plus tech-stack detection.' + }, + { + tool: 'palette', + accent: '#10B981', + prompt: 'What are the exact brand colors used on linear.app?', + result: + 'Hex codes ranked by dominance, plus WCAG-contrast-safe background and overlay colors.' + }, + { + tool: 'video', + accent: '#F43F5E', + prompt: + 'Extract the playable video URL from this YouTube page so I can embed it', + result: + 'A direct playable source URL — works with YouTube, Vimeo, TikTok, and hundreds more.', + span: 2 + }, + { + tool: 'meta', + accent: '#F97316', + prompt: + 'Fetch the title, OG image, and description for each of these 10 blog posts', + result: + 'Normalized metadata for every URL — title, description, image, author, date, and favicon.' + }, + { + tool: 'text', + accent: '#14B8A6', + prompt: + 'Extract the plain text content of this article so I can count the words', + result: + 'Raw readable text — no tags, no scripts, no noise — ready for analysis or summarisation.' + }, + { + tool: 'screenshot', + accent: '#7B61FF', + prompt: + 'Capture a mobile view of twitter.com to see how the layout looks on a phone screen', + result: + 'A screenshot taken at 390 x 844 mobile viewport — identical to what a real iPhone sees.', + hidden: true + }, + { + tool: 'audio', + accent: '#D946EF', + prompt: + 'Extract the audio stream from this SoundCloud track so I can embed it in our app', + result: + 'A direct playable audio URL from SoundCloud — no API key, no scraping setup, no rate limits.' + }, + { + tool: 'extract', + accent: '#067df7', + prompt: + 'Get the metadata and a full-page screenshot of vercel.com in a single request', + result: + 'Title, description, OG image, author, date — plus a screenshot URL — all in one call.', + span: 2 + }, + { + tool: 'screenshot', + accent: '#7B61FF', + prompt: + 'Screenshot the dark-mode version of our app at 1440 px wide for the design review', + result: + 'A full desktop-width capture at the exact viewport you need — dark scheme applied, CDN-hosted.' + }, + { + tool: 'screenshot', + accent: '#7B61FF', + prompt: + 'Take a full-page screenshot of our landing page and export it as a JPEG', + result: + 'A pixel-perfect full-page capture — every section, above and below the fold — as a JPEG URL.', + hidden: true + }, + { + tool: 'screenshot', + accent: '#7B61FF', + prompt: + 'Screenshot only the hero section of linear.app using its CSS selector', + result: + 'An element-level crop of exactly the DOM node you specified — nothing more, nothing less.', + hidden: true + }, + { + tool: 'screenshot', + accent: '#7B61FF', + prompt: + 'Take a screenshot of our staging site with a browser overlay for the pitch deck', + result: + 'A polished browser-framed PNG that looks great in presentations — one CDN link, no fuss.', + hidden: true + }, + { + tool: 'markdown', + accent: '#00B4D8', + prompt: + 'Convert this Wikipedia article to Markdown so I can paste it into Notion', + result: + 'Clean structured Markdown — headings, lists, links all preserved — ready to paste anywhere.', + hidden: true + }, + { + tool: 'markdown', + accent: '#00B4D8', + prompt: + 'Turn this changelog page into Markdown and summarise what changed in the last release', + result: + 'Parsed Markdown fed to the LLM, which returns a concise summary of the latest version changes.', + hidden: true + }, + { + tool: 'markdown', + accent: '#00B4D8', + prompt: + 'Convert the React docs page to Markdown and find all the code examples', + result: + 'Full-page Markdown with all code blocks intact — grep, filter, or pipe straight into your workflow.', + hidden: true + }, + { + tool: 'extract', + accent: '#067df7', + prompt: + 'Find all the author names and publish dates from this blog index page', + result: + 'An array of structured objects — one per article — with author and date fields extracted via selectors.', + hidden: true + }, + { + tool: 'extract', + accent: '#067df7', + prompt: + 'Pull the job title, company, and LinkedIn URL from this profile page', + result: + 'Structured JSON with every field you named — ready to push into your CRM or spreadsheet.', + hidden: true + }, + { + tool: 'extract', + accent: '#067df7', + prompt: + 'Extract the product name, SKU, and price from each item on this e-commerce page', + result: + 'A clean JSON array — one object per product — with all the fields you specified.', + hidden: true + }, + { + tool: 'pdf', + accent: '#EA407B', + prompt: 'Export this invoice page as a PDF so I can send it to accounting', + result: + 'A pixel-accurate PDF of the page at A4 size — fonts, tables, and layout fully rendered.', + hidden: true + }, + { + tool: 'pdf', + accent: '#EA407B', + prompt: + 'Generate a landscape PDF of this analytics dashboard for the board meeting', + result: + 'A landscape-format PDF at the exact dimensions you specified — charts, colors, and all.', + hidden: true + }, + { + tool: 'pdf', + accent: '#EA407B', + prompt: 'Save this terms-of-service page as a PDF for our legal records', + result: + 'A print-ready PDF with correct pagination, hosted on CDN and ready to download or share.', + hidden: true + }, + { + tool: 'insights', + accent: '#F59E0B', + prompt: + 'Check our new landing page for accessibility issues before we ship', + result: + 'Lighthouse accessibility score with every failing rule listed — fix before launch, not after.', + hidden: true + }, + { + tool: 'insights', + accent: '#F59E0B', + prompt: + 'Run a performance audit on our checkout page and flag the biggest bottlenecks', + result: + 'Core Web Vitals breakdown — LCP, FID, CLS — with actionable suggestions for each.', + hidden: true + }, + { + tool: 'insights', + accent: '#F59E0B', + prompt: + 'Detect what CMS our competitor is running and what analytics tools they use', + result: + 'A full Wappalyzer tech-stack report — CMS, CDN, analytics, A/B testing tools, and more.', + hidden: true + }, + { + tool: 'palette', + accent: '#10B981', + prompt: + 'Extract the color palette from our hero image so I can build a matching UI', + result: + 'Dominant hex codes from the image ranked by coverage — ready to drop into your design system.', + hidden: true + }, + { + tool: 'palette', + accent: '#10B981', + prompt: + 'What background color would be safest to use on top of the main image on stripe.com?', + result: + 'The WCAG-contrast-safe overlay color — guaranteed readable text on any image background.', + hidden: true + }, + { + tool: 'palette', + accent: '#10B981', + prompt: + 'Give me the five most used colors on vercel.com so I can match our design', + result: + 'Five dominant hex codes ranked by usage — with dark/light contrast-safe alternatives for each.', + hidden: true + }, + { + tool: 'video', + accent: '#F43F5E', + prompt: + 'Get the direct MP4 URL from this Vimeo embed so I can cache it locally', + result: + 'A direct, playable MP4 source URL — no embed, no JavaScript, no rate limits.', + hidden: true + }, + { + tool: 'video', + accent: '#F43F5E', + prompt: + 'Extract the audio stream from this SoundCloud track so I can transcribe it', + result: + 'A direct audio source URL from SoundCloud, Spotify, Mixcloud, or any supported platform.', + hidden: true + }, + { + tool: 'video', + accent: '#F43F5E', + prompt: + 'Pull the video source from this TikTok so I can use it in our montage', + result: + 'A watermark-free direct video URL from TikTok — ready to download or pipe into ffmpeg.', + hidden: true + }, + { + tool: 'meta', + accent: '#F97316', + prompt: + 'Get the OG image and title for this URL so I can generate a link preview', + result: + 'Open Graph image URL, title, and description — normalized and ready for your link preview component.', + hidden: true + }, + { + tool: 'meta', + accent: '#F97316', + prompt: + 'Check if this article has an author and publication date set in its metadata', + result: + 'Parsed author name and ISO date from the page meta tags — null if not present, never guessed.', + hidden: true + }, + { + tool: 'meta', + accent: '#F97316', + prompt: + "Pull the favicon URL from our competitor's site for the comparison table", + result: + 'A direct favicon URL — upsized, normalized, and CDN-hosted — for any page you point at.', + hidden: true + }, + { + tool: 'text', + accent: '#14B8A6', + prompt: + 'Pull the raw text from this job listing so I can parse requirements with an LLM', + result: + 'Plain text stripped of all HTML — just the readable content, ready for LLM processing.', + hidden: true + }, + { + tool: 'text', + accent: '#14B8A6', + prompt: + 'Extract the article body from this page without the nav or footer noise', + result: + 'Main content only — navigation, headers, footers, and ads stripped out automatically.', + hidden: true + }, + { + tool: 'text', + accent: '#14B8A6', + prompt: + 'Get the plain text of this product changelog so I can diff it against last month', + result: + 'Raw text output — no markup, no scripts — ready to compare, diff, or feed into any tool.', + hidden: true + }, + { + tool: 'audio', + accent: '#D946EF', + prompt: + 'Get the direct audio source from this Spotify episode so I can transcribe it', + result: + 'A direct audio stream URL from Spotify — ready to pipe into Whisper or any transcription tool.', + hidden: true + }, + { + tool: 'audio', + accent: '#D946EF', + prompt: + 'Pull the audio file from this podcast episode page so I can process it offline', + result: + 'A direct MP3 or AAC URL from any podcast host — download, transcribe, or archive with no friction.', + hidden: true + }, + { + tool: 'audio', + accent: '#D946EF', + prompt: + 'Extract the audio from this Mixcloud mix so I can add it to our playlist', + result: + 'A direct playable source from Mixcloud — works with hundreds of audio platforms out of the box.', + hidden: true + } +] + +const TOOLS = [ + { tool: 'screenshot', accent: '#7B61FF' }, + { tool: 'markdown', accent: '#00B4D8' }, + { tool: 'extract', accent: '#067df7' }, + { tool: 'pdf', accent: '#EA407B' }, + { tool: 'insights', accent: '#F59E0B' }, + { tool: 'palette', accent: '#10B981' }, + { tool: 'video', accent: '#F43F5E' }, + { tool: 'audio', accent: '#D946EF' }, + { tool: 'meta', accent: '#F97316' }, + { tool: 'text', accent: '#14B8A6' } +] + +const examplesCss = ` + @keyframes ex-ball-on { + 0% { transform: scale(1); opacity: 0.35; box-shadow: none; } + 45% { transform: scale(1.7); opacity: 1; } + 75% { transform: scale(0.85); } + 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 3px var(--card-accent), 0 0 10px var(--card-accent); } + } + @keyframes ex-tool-in { + from { letter-spacing: 0; } + to { letter-spacing: 0.04em; } + } + @keyframes ex-card-in { + from { opacity: 0; transform: translateY(10px); } + to { opacity: 1; transform: translateY(0); } + } + .ex-card { + transition: box-shadow 0.25s ease; + animation: ex-card-in 0.3s ease both; + } + .ex-card:hover { + box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 12px 40px rgba(0,0,0,0.10), 0 24px 64px rgba(0,0,0,0.06); + } + .ex-copy { + opacity: 0; + transition: opacity 0.2s ease; + } + .ex-card:hover .ex-copy { + opacity: 1; + } + .ex-ball { + opacity: 0.35; + } + .ex-card:hover .ex-ball { + animation: ex-ball-on 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; + } + .ex-tool { + transition: color 0.25s ease; + } + .ex-card:hover .ex-tool { + color: var(--card-accent); + animation: ex-tool-in 0.3s ease forwards; + } + .ex-pill { + display: flex; + align-items: center; + justify-content: center; + gap: 6px; + padding: 7px 12px; + width: 100%; + border-radius: 999px; + border: 1px solid rgba(0,0,0,0.1); + background: white; + cursor: pointer; + font-family: ${fonts.mono}; + font-size: 13px; + color: rgba(0,0,0,0.55); + transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease; + user-select: none; + appearance: none; + outline: none; + } + .ex-pill:hover { + border-color: var(--pill-accent, rgba(0,0,0,0.3)); + color: var(--pill-accent, rgba(0,0,0,0.8)); + } + .ex-pill.active { + border-color: var(--pill-accent, rgba(0,0,0,0.5)); + color: var(--pill-accent, rgba(0,0,0,0.8)); + background-color: var(--pill-bg, rgba(0,0,0,0.04)); + } + .ex-pill-dot { + width: 7px; + height: 7px; + border-radius: 50%; + flex-shrink: 0; + background-color: var(--pill-accent, rgba(0,0,0,0.3)); + opacity: 0.4; + transition: opacity 0.2s ease; + } + .ex-pill:hover .ex-pill-dot, + .ex-pill.active .ex-pill-dot { + opacity: 1; + } +` + +const ExamplesGrid = () => { + const [active, setActive] = useState('all') + const handlePillClick = useCallback(e => { + const tool = e.currentTarget.dataset.tool + setActive(curr => (curr === tool ? 'all' : tool)) + }, []) + + const visible = useMemo( + () => + active === 'all' + ? EXAMPLES.filter(e => !e.hidden) + : EXAMPLES.filter(e => e.tool === active), + [active] + ) + + return ( + <> +