• UI MAPPING
  • CONTEXT
  • HUMAN
  • ACCURACY

How to provide visual context with your AI

Connect Smartling to your AI client to bridge the gap between raw text strings and the actual interface where they live.

Ask AI about this page

Short answer

How can I give my AI visual context for translations?

Attach screenshots or HTML files directly to your Smartling projects. Your agent uses the upload_context tool to pull these files and see exactly where text sits in the UI. This helps you get translations that actually fit the layout.

Where context lands.

The payoff of visual context.

The agent uses the files you attach to Smartling to understand the interface.

UI MAPPING

Visual alignment

The agent reads HTML files to map text to specific UI elements. You get translations that respect the intended layout.

CONTEXT

Reduced ambiguity

By looking at screenshots, your agent understands if a word is a button, a header, or a tooltip. This leads to more accurate phrasing.

HUMAN

Expert review

The agent flags confusing layout issues for you. You decide if the visual context requires a manual change to the source or the translation.

ACCURACY

Better string handling

The agent uses the uploaded files to ensure gender and plurality match the surrounding UI. You avoid broken layouts in production.

The workflow

What your AI does when the context arrives.

The agent processes the files you've attached to the Smartling project to build a mental model of your app.

  1. Ingest visual files

    The agent pulls the screenshots and HTML files you've linked to the project. It scans the files to identify text placement.

    upload_context

  2. Analyze UI structure

    The agent compares the text strings in the project to the elements found in the HTML. It identifies which string belongs to which component.

    upload_context

  3. Interpret layout intent

    By looking at the screenshots, the agent determines the tone and length constraints of the UI. It uses this to pick the right words.

    upload_context

  4. Flag visual conflicts

    If a translation is too long for the screenshot's button or container, the agent notifies you. You get a heads-up before the code goes live.

    upload_context

Try it

Copy these to start.

Use these prompts to begin working with your Smartling context.

Starting points

These are opening lines. Swap the bracketed text for your specific project names or file types.

Smartling Connector

You're all set. Choose your MCP client and follow the setup instructions.

Connector linkhttps://edge.vinkius.com/vk_preview_5QcDqXV1nvbDFmYjGLXZ24BExH2qTP4svbYsNGAe/mcp

Claude Desktop

Follow the steps below to connect in seconds.

  1. 1In Claude Desktop, open Settings → Connectors.
  2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
  3. 3Click Add and start a new chat — Smartling capabilities are ready to use.
Configuration · claude_desktop_config.jsonCopy
{
  "mcpServers": {
    "smartling-translation-workflow-api-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_5QcDqXV1nvbDFmYjGLXZ24BExH2qTP4svbYsNGAe/mcp"
    }
  }
}
Copy into chat04

  • Look at the screenshots in the [Project Name] Smartling project and tell me if this string fits the button size.

  • Using the HTML files in [Project Name], explain the context for the string '[String Text]'.

  • Check the visual context for [Project Name] and suggest a shorter translation for '[String Text]' to prevent UI overflow.

  • Based on the screenshots in [Project Name], is the translation for '[String Text]' grammatically correct for a header?

  • Claude
  • ChatGPT
  • Cursor
  • VS Code
  • Windsurf
  • Claude Code
  • JetBrains
  • Cline

Start here

Connect Smartling once, then ask.

Log in to Smartling through the Vinkius interface. Your credentials stay encrypted, and you can immediately start asking your agent about your project files.

Connect Smartling to your AI

FAQ

How this task behaves.

  • 01

    Can the AI change the screenshots?

    No. The AI only reads the files you upload to provide context; it cannot edit or overwrite your original image files.

  • 02

    Does the AI automatically upload files to Smartling?

    No. You must attach the screenshots or HTML files to the Smartling project yourself so the agent can access them.

  • 03

    Can the AI fix layout issues in my code?

    No. The AI identifies where a translation might break a layout, but you must make the actual code or design changes.

  • 04

    What happens if I don't provide any screenshots?

    The agent will still work with the text strings, but it won't have the visual context needed to understand UI constraints or placement.

  • 05

    Will the AI delete any files in my Smartling project?

    No. The agent only has permission to read the context you provide via the upload_context tool.

  • More questions about Smartling? The Connector page answers them. See everything the Smartling Connector can do

Connect Smartling to Claude, Cursor, ChatGPT & more