AI Chat with Photo Upload: Self-Hosted Guide (2026)

Your visitor hits a snag. They want to paste a screenshot of the error, the broken product photo, or the confusing UI — and your chat widget just sits there, blinking. Text only. Most AI chat widgets on the market do not accept images at all. The ones that do are SaaS services where you hand over the image data to a third-party platform, pay per message, and hope their vendor’s vision model suits your use case.

AI Chat Agent takes a different approach: self-hosted, your domain, your choice of vision provider. Starting with v1.6.0 (released 2026-05-28), visitors can paste photos directly into the chat widget. The image goes to your server and your configured LLM — not to a SaaS intermediary. This article explains how it works, when it matters, and where the honest limitations are.

What Is AI Chat with Photo Upload?

Most consumer apps — ChatGPT, Claude.ai, Gemini — accept image uploads via a file picker or drag-and-drop. That works well for a single user logged in to their own account. A chat widget embedded on your website is a different beast: it serves anonymous visitors, lives inside your DOM (or a Shadow DOM), and must handle images without a full-page file management UI.

The mechanism in AI Chat Agent is clipboard paste. Visitors copy an image to their clipboard — a screenshot (Cmd+Shift+4, Win+Shift+S), a photo, an export from a design tool — and press Ctrl+V (or Cmd+V on Mac) while the chat input is focused. The widget captures the clipboard event, compresses the image client-side via the HTML5 Canvas API (max edge 1280px, JPEG quality 0.8), and displays a thumbnail preview before the message is sent.

Supported formats: JPEG, PNG, WebP, GIF. Maximum 4 images per message. Rate limit: 10 images per 60-second session window (enforced server-side via Redis). The history stores [image] markers rather than full base64 blobs, so the database stays lean.

One hard limit: there is no drag-and-drop and no file picker button. Paste is the only input method. On desktop browsers this is seamless. On mobile it depends entirely on the browser’s clipboard implementation — some mobile browsers support it, many don’t. If your primary audience is mobile, test before committing.

Common Use Cases for AI Chat Photo Upload

Knowing a chatbot can accept images is only useful if you know when it helps. A few concrete scenarios:

Customer support with screenshots

A SaaS support bot for a project management tool sees a constant stream of “I clicked X and got Y” tickets. Half the time the user’s description is incomplete. With image paste enabled, the visitor pastes their browser screenshot, the vision LLM identifies the error modal, and the bot replies with the exact fix — no support agent needed at step one.

E-commerce: fit checks and damage claims

A Shopify store owner running a clothing brand gets returns questions. Visitors paste a photo of the item alongside their own measurements marked on a size chart. The bot cross-references the uploaded image against the product’s documented size guide (from your RAG knowledge base) and gives a specific recommendation. Damage claims work similarly: paste the photo, bot confirms whether it qualifies for the return policy.

SaaS onboarding

Onboarding flows are full of “my dashboard looks different from the tutorial” moments. A visitor pastes their dashboard screenshot, the bot identifies which plan tier they’re on from the visible UI elements, and routes them to the correct setup guide. This reduces onboarding drop-off without requiring a human agent.

Document and form intake

For B2B services — accounting, legal, consulting — visitors sometimes need to share a form snippet or contract clause for a quick pre-qualification answer. Image paste handles that without building a full document upload pipeline. The bot extracts visible text, answers the question, and flags anything that needs a human review.

How Vision LLMs Actually Process Images

Here is what happens under the hood — knowing the mechanics sets realistic expectations on latency and cost.

When a visitor pastes an image, the widget compresses it to at most 1280px on the longest edge (HTML5 Canvas, JPEG 0.8 output). The compressed image becomes a base64-encoded data URL. That data URL is included in the POST to /api/widget/:botId/message alongside the text content.

On the server, the image is reformatted for the configured provider. Here is the simplified shape for an OpenAI-compatible call:

// Simplified vision request shape (OpenAI format)
{
"model": "gpt-4o",
"messages": [
  {
    "role": "user",
    "content": [
      { "type": "text", "text": "What's wrong here?" },
      {
        "type": "image_url",
        "image_url": {
          "url": "data:image/jpeg;base64,/9j/4AAQ...",
          "detail": "auto"
        }
      }
    ]
  }
]
}

For Anthropic Claude the format uses a source object with type: “base64” and a media_type field. For Google Gemini it’s inlineData parts. The AI Chat Agent backend normalizes across all five provider formats so you don’t have to think about this per-provider translation yourself.

Vision tokens are more expensive than text tokens — roughly 500–800 tokens per image depending on size and provider. A 1280px image processed by GPT-4o currently costs around the same as 400–600 words of text. For support bots handling dozens of image conversations per day, this is negligible. At thousands per day, it starts to matter — which is why cost control is one of the main arguments for self-hosting.

The Vision Chatbot Landscape

Here is how the options stack up:

Consumer apps (ChatGPT, Claude.ai, Gemini web): Excellent vision capabilities, but these are user-facing products, not embeddable widgets. You cannot put ChatGPT’s interface on your website with your branding and your system prompt. Data goes to OpenAI/Anthropic/Google’s servers, full stop.

SaaS chat widgets (Intercom Fin, Chatbase, Tidio): Some now support image upload in specific plans. You get a polished product but: you pay per message or per seat, you cannot choose the vision model, and the images flow through the SaaS platform’s infrastructure. Chatbase and Intercom lock you into their pricing model; at scale the per-message costs compound fast.

Open-source frameworks (LibreChat, OpenWebUI): Full-featured, vision-capable, truly open. But they’re general-purpose chat interfaces, not embeddable widgets. You can’t drop LibreChat into a corner of your e-commerce site with a 22KB embed script and a system prompt trained on your product docs.

Self-hosted chat widgets: This is a narrow category. AI Chat Agent occupies it specifically — a widget designed to embed on any site, self-hosted on your infrastructure, with vision support and full provider choice. Check the AI chatbot examples article for a wider look at deployment patterns.

How AI Chat Agent Handles Image Paste

Full data flow when a visitor pastes a photo:

1. Clipboard capture: The widget’s Shadow DOM listens for paste events on the textarea. It reads event.clipboardData.items, filters for image MIME types, and extracts the blob.
2. Client-side compression: The blob is drawn onto an off-screen HTML5 Canvas. If the longest edge exceeds 1280px, it’s scaled down proportionally. The canvas outputs a JPEG data URL at quality 0.8. This happens in the browser — no raw file is ever sent to your server.
3. Thumbnail preview: A small preview appears above the text input so the visitor confirms the right image is attached. Up to 4 images can be queued per message.
4. Transport: On send, the data URLs are included in the message payload to /api/widget/:botId/message. The server checks the session-level rate limit (10 images / 60s via Redis). If the limit is exceeded, the request is rejected with a user-facing error.
5. Provider format translation: The backend identifies the configured LLM provider for that bot and reformats the images accordingly — image_url for OpenAI, source for Anthropic, inlineData for Gemini, or OpenAI-compatible format for OpenRouter and custom endpoints.
6. Non-vision fallback: If the configured model doesn’t support vision (e.g. a text-only model via a custom endpoint), the images are silently dropped from the payload. The system prompt instructs the bot to apologize in the visitor’s detected language — English or Russian — and ask them to describe the issue in text instead.
7. History storage: The message is stored in the database with [image] text markers where the images were. The base64 data is not persisted, keeping storage requirements sane.

Images are ephemeral: used for the LLM call, then discarded. Only [image] placeholder markers land in the database, keeping storage requirements sane.

Vision Model Showdown: OpenAI vs Claude vs Gemini

All five provider integrations in AI Chat Agent can handle images, but they have different strengths:

Provider / Model	Strong at	Notes
OpenAI (gpt-4o, gpt-4.1, gpt-5, o3, o4)	Charts, UI screenshots, precise OCR, structured extraction	Native image_url support; detail: auto balances cost vs quality
Anthropic Claude (Sonnet 4.x, Haiku 4.x, Opus 4.x)	Long-form document images, reasoning about image context, nuanced descriptions	Base64 source format; strong at multi-image reasoning
Google Gemini (multimodal models)	Real-world photos, product images, scene understanding	inlineData parts; competitive token pricing
OpenRouter (100+ models)	Flexibility — route to whichever model fits the task	OpenAI-compatible format; vision availability depends on the chosen model
Custom endpoints (Groq, Ollama, self-hosted)	Zero external data exposure, local LLMs	Auto-fallback to text-only if vision is rejected by the endpoint

For support bots handling error screenshots and UI states, GPT-4o and Claude Sonnet 4.x are both strong. For product photos and e-commerce fit queries, Gemini’s scene understanding tends to produce better natural-language descriptions. The self-hosted path with Ollama plus a vision-capable model (LLaVA, Llama 3.2 Vision) keeps all image data on your own hardware — relevant for medical, legal, or financial use cases. See the OpenAI vs Anthropic vs Gemini for customer support comparison for a deeper model-by-model breakdown.

Cost Breakdown: Self-Hosted vs SaaS

A typical SaaS chat widget with vision support charges per message or per resolution (a “resolution” being a full conversation that ends without escalation). At scale — say, 10,000 image-containing conversations per month — you’re looking at meaningful per-conversation fees on top of your existing plan. The SaaS platform also controls which vision model runs, so you can’t switch to a cheaper model without switching platforms.

With AI Chat Agent:

• License: EUR 79 one-time. No monthly platform fee. Source code included. Lifetime updates.
• Hosting: A VPS adequate for most deployments (2 vCPU, 4 GB RAM) runs roughly EUR 5–15/month on Hetzner, DigitalOcean, or equivalent.
• LLM API costs: You pay the provider directly. For image-heavy bots, you pick the cheapest capable model — Haiku 4.x, Gemini Flash, or a self-hosted vision model — rather than being locked into whatever the SaaS chose for you.
• OpenRouter option: Route to 100+ models, including budget vision models, from a single API key. Useful for cost experimentation without re-configuring your deployment.

The crossover point where self-hosting beats SaaS economically depends on your conversation volume. For low-volume deployments (under ~500 conversations/month), SaaS convenience may outweigh the setup cost. Above roughly 1,000–2,000 conversations per month — especially image-heavy ones — the EUR 79 license pays for itself quickly. The Docker deployment guide walks through the full setup cost and effort.

Privacy and Compliance: Who Sees the Image?

Most SaaS vendors skip this in their marketing.

When a visitor uploads an image to an Intercom Fin or Chatbase-powered widget, that image travels to the SaaS platform’s servers first, then to whichever LLM provider they’ve contracted with. You have limited visibility into the data path, limited control over retention, and limited ability to demonstrate compliance to an auditor.

With a self-hosted deployment:

• Images are compressed client-side and sent directly to your server over TLS.
• From your server, they travel to your configured LLM provider — the one you’ve reviewed the DPA for.
• Images are not stored in your database (only [image] markers are).
• You can configure a local model (Ollama) so images never leave your infrastructure at all.

For GDPR purposes, the data controller relationship is clean: you control the processing pipeline, you select the sub-processor (your LLM provider), and you can document the data flow. For EU AI Act compliance, you have full transparency into which model is making the decision — relevant if you’re in a regulated sector.

Sensitive use cases — medical images, legal documents, financial statements — are where the SaaS black box becomes a real liability. A self-hosted Ollama deployment with a local vision model eliminates the external sub-processor entirely. Read the GDPR-compliant AI chat guide for a detailed compliance walkthrough.

Enabling AI Chat Photo Upload on Your Deployment

Image paste is available in AI Chat Agent v1.6.0 and later. The full stack deploys via Docker Compose: PostgreSQL with pgvector, Redis, Nginx, a Node.js backend, and a React admin panel. The 22KB Shadow-DOM widget loads from your domain via a single script tag.

The short path to enabling vision:

1. Deploy the stack. Follow the Docker Compose setup — the docker-compose.yml is self-contained. PostgreSQL + pgvector handles RAG storage, Redis handles rate limiting including the image rate limiter.
2. Create a bot in the admin panel. Set the system prompt, configure your knowledge base if using RAG (hybrid dense + lexical retrieval with LLM listwise reranking, added in v1.8.0), and pick your provider.
3. Configure a vision-capable provider. In the bot settings, select OpenAI (gpt-4o or gpt-4.1 are solid defaults), Anthropic Claude Sonnet 4.x, or Gemini. Paste your API key. If you want zero external data exposure, point the custom endpoint at your local Ollama instance running a vision-capable model.
4. Test paste. Copy any image to your clipboard (a screenshot works fine), open the widget preview in your admin panel, focus the chat input, press Ctrl+V. You should see the thumbnail appear. Send the message and confirm the model describes the image correctly.
5. Embed. Copy the per-bot embed code from the admin panel and drop the script tag into your site’s HTML. That’s it — visitors on your domain can now paste images into the widget.

The admin panel also supports multiple bots per instance with isolated data and separate embed codes. A Shopify store and a SaaS product support page can share one deployment but run completely independent bots with different system prompts and different LLM configurations.

Honest Limitations

These are the real constraints — read them before committing:

• Paste-only input. There is no file picker button and no drag-and-drop. Visitors must use clipboard paste (Ctrl+V / Cmd+V). On desktop this is second nature for developers and power users; for less technical audiences, it may need a UI hint (“Screenshot? Paste it here with Ctrl+V”).
• Mobile is inconsistent. Clipboard paste behavior varies across mobile browsers and operating systems. Safari on iOS has improved, but Android Chrome clipboard access depends on browser version and OS permissions. If your primary users are mobile, test on real devices before relying on this feature.
• 4 images per message cap. Most single-turn support queries need one image. Four is generous. But if your use case involves comparing multiple product photos or multi-page document review, you’ll need multiple message turns.
• History shows markers, not images. When a user reviews the conversation history or the conversation is resumed, the images are represented as [image] text markers — the actual image data is not stored or re-displayed. This is intentional for storage efficiency, but it means the conversation history doesn’t render a visual thumbnail of past images.
• Vision costs money. Each image adds vision tokens to the LLM call. For free-tier or very low-cost deployments, this adds up. Budget accordingly, and consider using Gemini Flash or Haiku 4.x for cost-sensitive high-volume bots.
• Non-vision model fallback is silent to the user. If you accidentally configure a non-vision model, the bot apologizes and asks the user to describe the issue in text. It doesn’t break — but it’s not obvious from the admin side unless you test it explicitly.

Getting Started

If your chat widget can’t accept images today, you’re leaving a meaningful support interaction channel closed. Visitors who can paste a screenshot get faster, more accurate answers. That reduces support escalations, improves perceived product quality, and costs you less per resolution than a SaaS alternative at any meaningful scale.

AI Chat Agent v1.8.1 ships with image paste (v1.6.0+), RAG hybrid retrieval with LLM listwise reranking (v1.8.0), operator live reply, multi-bot support, white-label widget, visitor identity passthrough, and 1,522 automated tests. Full source code. EUR 79 one-time license, no monthly fee.

Try the live demo first — paste a screenshot into the widget and see how it responds: demo.getagent.chat. When you’re ready to deploy on your own domain, the license is at trustfish.lemonsqueezy.com. No SaaS subscription, no vendor lock-in, no third party between your visitor’s screenshot and your chosen LLM.

More on the blog: the vs Tidio comparison and the RAG knowledge base for customer support article cover related decisions in depth.

Frequently Asked Questions