romaco-chart-analysis

Romaco chart analysis

Build a real romaco-charts chart, connect it to the romaco MCP bridge, analyze a ticker with the MCP's deterministic tools, and draw the result on the live chart.

Critical gotchas — these break cold runs, do not skip

1. Fetch market data SERVER-SIDE only. A browser fetch to Yahoo fails with CORS, and a hand-rolled proxy gets 429. Use the yahoo-finance2 library (v3) inside a Vite dev-server middleware — it handles Yahoo's cookie/crumb handshake and retries (it is the same library the MCP uses internally).
2. No <StrictMode>. Its dev-only double mount/unmount tears down the McpBridge WebSocket ("WebSocket is closed before the connection is established"). Render the app without it.
3. Apply each indicator exactly once. Call romaco_setup_chart with preset: "clean" (no indicators), then add indicators once during annotation. A preset that pre-loads indicators plus a manual add = duplicated rows in the legend (double EMA/RSI, a flood of VOL).
4. One MCP owns port 7399. The browser bridge connects to whichever MCP holds 7399. If two agents (e.g. Claude and Codex) both run the romaco MCP, they fight for the port. Run only one.

Workflow

1. Scaffold the chart app

• Vite + React + TypeScript project (wherever the user asks).
• Install: romaco-charts, react, react-dom, yahoo-finance2@^3.
• vite.config.ts — a plugin exposing GET /api/<symbol>-daily, server-side:

  import YahooFinance from 'yahoo-finance2'
  const yf = new YahooFinance()
  // period1 ≈ 1–3y back, enough for EMA200 / volume profile / structure
  const result = await yf.chart(SYMBOL, { period1, interval: '1d' })
  // map each quote → { time, open, high, low, close, volume }
  //   time = Math.floor(new Date(q.date).getTime() / 1000)  // UNIX seconds
  //   skip rows with null OHLC; cache in memory; respond { candles }
  

• src/App.tsx — fetch the candles from the proxy (same-origin, no CORS), pass data={candles} to <TradingTerminal ref={ref} symbol={SYMBOL} data={candles} />, and mount <McpBridge chartRef={ref} /> below it.
• src/main.tsx — render WITHOUT <StrictMode>.
• npm install → npm run dev → open the dev URL in the browser.