Tratto

The chart already has a drawing engine. Tratto hands your AI the pen.

tratto · Italian for a stroke, a line drawn in one movement.

Tratto lets your AI draw technical-analysis markup (support and resistance, trendlines, Fibonacci) straight onto the Yahoo Finance chart you're already looking at. It isn't a screenshot, and it isn't a second chart bolted on top. It's the real chart on the page.

1 bridge · 0 chart libraries · 50 MCP tools · 100% local

The trick

Open any Yahoo Finance chart, open DevTools, and run:

document.querySelector('.chartContainer').stx

That's a live charting engine, the same one rendering the page you're on, sitting there with its full public drawing API exposed. Tratto is the thin bridge that lets your coding agent pick up that pen:

• It borrows what's already there. The chart, the OHLC data, and the drawing tools all ship with the page.

• It owns nothing. No scraping, no bundled chart library, no cloud, no account.

• The strokes are native. The AI's lines come out of the same engine that draws yours, so they look identical to hand-drawn markup.

Related MCP server: MCP YFinance Stock Server

What it feels like

You're staring at NVDA after earnings, wondering where support is. You ask your AI, and back come three paragraphs of prose. But you wanted a line on the chart.

you › mark the key support and resistance
  ai › ✎ drew 2 levels — support $172.30, resistance $195.80
you › draw the fib from the March low to the June high
  ai › ✎ Fibonacci retracement placed (0 → 100%)

https://github.com/user-attachments/assets/f2c5c53e-580e-4eaf-8555-4e9ad7c9cefc

Reach for Tratto when:

• You already read charts on Yahoo Finance and already live in Claude Code or Codex. Tratto is the missing wire between them.

• You want "where did this trend break?" answered as a drawn line, not a paragraph.

• You want the AI to read your chart too. read_drawings sees your own hand-drawn markup, so it critiques your chart instead of a copy of it.

Quick start

Prerequisites: Node.js and Google Chrome.

1. Register the MCP server with your coding agent. npx fetches it, so there's nothing to install:

# Claude Code
claude mcp add tratto -- npx -y tratto-mcp-server

# Codex
codex mcp add tratto -- npx -y tratto-mcp-server

2. Install the Chrome extension (it bridges the server to the page):

git clone https://github.com/Taoo425/tratto && cd tratto
npm install && npm run build

Then in Chrome go to chrome://extensions, enable Developer mode, click Load unpacked, and select packages/extension/dist.

3. Draw. Open a chart (finance.yahoo.com/chart/NVDA, or the embedded /quote/NVDA/chart) and ask your agent in plain language.

The tools

50 MCP tools. The AI reads the chart, draws on it, styles what it draws, and manages what's there.

The design guide travels with the tools. An LLM doesn't know the chart engine's 30-plus drawing tools, or how to keep a chart readable, so Tratto ships its own design system inside the MCP server. Any MCP-speaking agent gets it with zero extra install, loaded once and progressively as needed to stay token-cheap.

How it works

Claude Code / Codex  ──MCP (stdio)──►  local MCP server  ──WebSocket──►  Chrome extension  ──►  .chartContainer.stx
   (your words)                        (127.0.0.1:8787)                  (on the page)             (charting engine)

Everything runs on your machine. A shared-token handshake over a 127.0.0.1-only socket keeps it that way.

Good to know

• The page won't save AI-drawn lines, so they'd vanish on refresh. Tratto remembers them itself and redraws them when you come back, storing the semantics (price, date, text) and recomputing the anchors against the current data.

• Front-end redesigns are our weather. The mount point is a standard one, but when it drifts, that's the number-one place to contribute: a selector fix or a fresh recipe keeps Tratto alive.

• It only draws. No trading, no orders, no moving money, ever.

Design philosophy

Tratto is parasitic enhancement. Instead of rebuilding the chart, it drives the one already there: minimal code, maximally native, cleanest possible footprint. The chart, the data, and the pen were all sitting on the page. Tratto just taught your AI to reach them.

Disclaimer

Personal, non-commercial, educational tool. It uses the chart's own on-page drawing engine. It does not scrape, redistribute, or store market data, and it adds no trading capability. Because it depends on the page structure it runs against, a redesign may break it until the mount point is updated. Use of Yahoo Finance is subject to Yahoo's Terms of Service. Provided "as is", without warranty of any kind.

License

MIT © Taoo425