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.

---

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.

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%)

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.

	Tools	On the chart
👁 Read	get_chart_data · get_chart_summary · read_drawings · get_capabilities · list_indicators · get_corporate_events	Live OHLC bars, existing drawings (including your own), engine capabilities, active studies, dividends and splits
✍️ Draw	draw_support · draw_trendline · draw_ray · draw_line · draw_crossline · draw_arrow · draw_vertical · draw_channel · draw_rectangle · draw_ellipse · draw_callout · draw_raw	Support and resistance, trendlines, rays, rectangles, ellipses, parallel channels, vertical markers, text callouts, plus a raw escape hatch to any tool the engine has
📐 Fibonacci	draw_fib · draw_fib_arc · draw_fib_fan · draw_fib_projection · draw_fib_timezone	The full Fib family: retracement, arcs, fan, projection, and time zones, with per-level selection and styling
🧮 Analytical	draw_pitchfork · draw_gann_fan · draw_gartley · draw_speed_arc · draw_speed_line · draw_time_cycle · draw_measurement · draw_volume_profile · draw_quadrant_lines · draw_tirone_levels · draw_average_line · draw_regression_line	Pitchforks, Gann fans, harmonic patterns, speed resistance, volume profile, regression and average lines with standard-deviation bands
🗂 Manage	remove_drawing · undo_drawing · clear_drawings · list_saved_drawings · delete_saved_drawing	Remove one, undo the last, clear all, and list or delete the drawings Tratto remembers
🎛 View	open_chart · set_chart_style · set_periodicity · set_range · add_comparison · remove_comparison · toggle_corporate_events	Jump to a symbol, switch candle, line, or bar, change timeframe and range, overlay comparison symbols, toggle event markers
📊 Indicators	add_indicator · remove_indicator	Add or remove studies (RSI, MACD, Bollinger Bands, moving averages) with per-line color, width, and parameters
🎨 Guide	get_drawing_guide	Tratto's built-in design system (palette, weights, budget) so the AI draws clean, readable markup instead of clutter

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