Screenshot a URL from a Chat Message with AI in n8n
A user types a request in plain English — 'grab a shot of hacker news' — an AI step reads the message and extracts the URL, and the Rendex node captures it. The whole flow is wired end to end, so it runs the moment you add your Rendex and model credentials.
Last updated 2026-08-08
The Problem
Chat and agent front-ends increasingly need to act on the web — capture what a page looks like, render a snippet, fetch a PDF. The hard part is turning a messy human message ('screenshot HN', 'google.com') into a clean, valid URL before you can capture anything.
The Solution
An AI Information Extractor reads the incoming chat message and returns a single normalized URL (adding https:// when the user omits it and ignoring surrounding words). That URL flows straight into the Rendex node, which screenshots the page and returns the image plus real metadata — no manual URL wrangling, no custom code.
How the Workflow Runs
Chat
A user asks for a screenshot in natural language
Extract URL (AI)
An LLM pulls a clean, normalized URL out of the message
Rendex capture
Rendex screenshots the extracted URL and returns the image
Input → Rendered Output
Rendered by Rendex
What You Need
- A Rendex API key — free tier, 100 renders/month, no card
- n8n with the Rendex community node installed
- A chat-model credential (OpenAI or any supported model)
What This Recipe Uses
AI reads the URL
An Information Extractor pulls a single, normalized URL out of a free-text message — adding https:// and ignoring surrounding words.
Runs on import
Every node is wired end to end, so the workflow works the moment you add credentials — no manual tool-socket setup to trip over.
Grounded results
Rendex returns real capture metadata (format, size), so the flow reports what it actually captured instead of a hallucinated success.
Build It
User (Chat): "Take a screenshot of news.ycombinator.com"
1. Chat trigger receives the message ({{ $json.chatInput }}).
2. Extract URL (AI) returns a normalized URL:
-> { "output": { "url": "https://news.ycombinator.com" } }
3. Rendex — Capture URL screenshots {{ $json.output.url }} as PNG.
Add your Rendex API + OpenAI credentials, then hit Test workflow.100 free API calls/month — no credit card required. Get your API key and start building.
Reach for this when you're building a chat or agent experience that should be able to act on the web, not just talk about it — a support bot that captures a customer's page, an assistant that renders a preview, a research agent that grabs a screenshot. The flow is deliberately inline (Chat -> AI extract -> Rendex) so it imports and runs on the first try, rather than depending on any manual socket wiring. The AI step handles the fuzzy part — pulling and normalizing the URL out of free text — and Rendex returns real capture metadata the model can cite instead of hallucinating success. Prefer to give a full AI Agent a native tool instead of this inline pattern? The Rendex node is also marked usableAsTool, so you can drop it onto an Agent's Tool socket; see the FAQ. Screenshot and render are free-tier capabilities, so this runs freely within your plan's rate limit.