DEV Community: yuan chen

I built an AI that reads stock charts — and made it grade its own homework

yuan chen — Tue, 09 Jun 2026 15:50:20 +0000

How KlineVision does AI technical analysis with Next.js + Gemini, draws it on the real candles, and verifies every call it makes after the fact — misses included.

Most "AI stock analysis" tools confidently tell you a chart looks bullish and then never look back. I wanted the opposite: a tool that records every call it makes and later checks whether the market actually agreed — and publishes the hit rate, misses included.

That one constraint — keep yourself honest — ended up shaping most of the interesting engineering. Here's how KlineVision is put together.

What it does

Type a ticker (AAPL, 600519.SH, 0700.HK) — or drop a chart screenshot.
You get a structured read: trend, support/resistance, candlestick + chart patterns, and 缠论 (Chan theory) structure — drawn directly onto the real candles, not hand-waved in prose.
Works across US, A-shares, and Hong Kong markets.

The stack

Next.js (App Router) on Vercel
Supabase (Postgres + RLS) for data & auth
Gemini 3 Flash for the analysis itself
EODHD + Yahoo Finance for market data
GitHub Actions + Vercel Cron for the background jobs
PostHog for product analytics

Now the parts that were actually interesting to build.

1. "Never analyze fake data"

The market-data layer had a silent fallback: when a provider rate-limited, it returned synthetic candles so the UI never broke. Great for a demo, terrible for a product whose entire value is trust — the model would write a beautiful, confident analysis of a chart that never existed.

The fix was to make the data layer fail honestly:

Yahoo (primary) → EODHD (fallback) → if only demo data is available → 503, no analysis

If we can't get real candles, the user gets "live market data temporarily unavailable" — not a hallucinated read. For a trust tool, a silent fallback to fake data is the worst bug on the board.

2. Make the AI show its work

A text blob saying "there's a double bottom" isn't credible. You have to see it on the chart.

So the model returns structured overlays keyed to candle timestamps, and an isomorphic canvas renderer maps them onto the real OHLCV:

{
  "zones":       [{ "kind": "support", "price_low": 188.2, "price_high": 190.1 }],
  "trend_lines": [{ "from": "2026-05-02", "to": "2026-06-01", "label": "neckline" }],
  "markers":     [{ "type": "double_bottom", "time": "2026-05-20" }],
  "chan":        { "bi_direction": "up", "zhongshu": [ ... ] }
}

The same renderer runs server-side (for share cards / OG images) and client-side (interactive, with layer toggles). Structuring LLM output into something a renderer can trust — and validating it hard — was most of the work here.

3. The honest track record (the whole point)

This is the part I'm proudest of. Every analysis snapshots its Chan bi-direction call (is the current move up or down?). Then a nightly cron — verify-chan — does the unglamorous thing:

Wait 7 days.
Re-fetch the candles.
Check what actually happened.
Mark the call verified_correct, verified_incorrect, or expired (inconclusive).

The published hit rate is deliberately conservative:

accuracy = correct / (correct + incorrect)   // 'expired' excluded

…and we don't show a percentage at all until there are enough decisive samples. No small-sample theatre, no cherry-picking. A generic LLM can't offer this; a system that remembers its own predictions and checks them can. It's the one moat that AI hype can't fake — you either kept the receipts or you didn't.

4. The pSEO lesson that cost me a weekend

I generated ~6,300 programmatic pages — every stock × every detected pattern × two locales. Google discovered them and indexed about 400.

The trap: those ~4,500 templated "does AAPL have a doji right now?" combo pages weren't just sitting unindexed — they were dragging the whole site's quality signal down. A ~6% index rate is Google telling you the site is mostly thin content.

The fix wasn't more pages. It was fewer:

Cut the sitemap from 6,322 → ~1,834 genuinely-differentiated URLs (pattern/indicator explainers, comparison pages, per-symbol pages).
Dropped the combinatorial filler (kept the pages reachable, just stopped advertising them).

On a young domain, crawl budget is a ceiling set by authority — not by how many URLs you shove into a sitemap. Submitting 6k pages doesn't get you 6k indexed; it gets your good pages buried with the junk.

5. Latency honesty

A full Gemini analysis takes ~70 seconds (it's doing multi-step technical + Chan reasoning). Running that synchronously during SSR meant a blank tab and gateway-timeout risk for the first visitor to an uncached symbol.

So the daily pages:

Serve a fresh cache instantly when one exists (refreshed nightly for popular symbols).
For cold symbols, fall back to a non-blocking client loader with staged progress ("fetching market data → running technical analysis → detecting Chan structure → drawing the chart"), then cache the result for the day.

Slow is fine if it's honest about being slow. A spinner with real status beats a frozen page every time.

Try it (and the obligatory disclaimer)

You can use the assistant free, no sign-up — type a ticker and see what it reads. It's at klinevision.ai.

And to keep with the theme: this is an analysis aid, not investment advice. Past performance doesn't predict future results — which is exactly why the track record verifies itself instead of asking you to take its word for it.

I'd genuinely love feedback from devs who've wrestled with structuring LLM output, programmatic SEO at scale, or financial data pipelines — those were the three hardest parts. What would you have done differently?

An AI-Powered K-Line Chart Analyzer — Upload a Screenshot, Get Structured Technical Analysis

yuan chen — Thu, 23 Apr 2026 07:19:56 +0000

The Problem

Every trader has been here: you're staring at a candlestick chart, trying to figure out if that's a Head and Shoulders forming or just noise. You flip between three indicator panels, check RSI, squint at the MACD histogram, and still aren't sure.

I wanted a tool where I could just screenshot a chart and get a structured breakdown — patterns detected, trend direction, confidence scores, and what to watch next. No manual drawing, no subjective interpretation.

So I built KlineVision.

What It Does

Upload any K-line (candlestick) chart screenshot — A-shares, US stocks, crypto, anything — and KlineVision returns:

Classic Pattern Detection — Head & Shoulders, Bullish Engulfing, Morning Star, Flags, Triangles, and 70+ more patterns with confidence scores
Chan Theory Analysis (缠论) — Bi (笔), Duan (线段), Zhongshu (中枢), and Beichi (背驰) structure detection. If you trade Chinese markets, you know how powerful this is
Trend Judgment — Bullish / Bearish / Sideways with strength and confidence
Trading Signals — Contextual buy/sell/watch signals with risk notes
Bilingual Output — Full analysis in both English and Chinese

The analysis is powered by Google Gemini's vision model with a carefully crafted prompt that enforces structured JSON output.

The Tech Stack

Next.js 16 (App Router, TypeScript)
├── EODHD + Tushare (market data)
├── Supabase (auth + PostgreSQL)
├── Stripe (subscriptions)
├── SVG K-line renderer (server-side, zero deps)
└── 11-locale i18n (en/zh/ja/ko/es/fr/de/pt/ru/ar/hi)

A few things I'm proud of:

Pure SVG K-Line Renderer

Server-rendered candlestick charts that crawlers can see (no Canvas/WebGL). I wrote a pure TypeScript SVG string generator — zero native dependencies, works in Vercel Serverless. It draws candlesticks, MA lines, volume bars, pattern highlights, and annotations, all as SVG XML strings.

Each page has real data — historical win rates, T+5/10/20 return statistics, recent detection cases — not LLM-generated fluff. The pattern detection runs a rule-based engine on actual OHLCV data from EODHD and Tushare.

11-Language Support

Every page renders in 11 languages with proper hreflang tags. Entity content (pattern names, descriptions, FAQs) is stored as L10n objects:

name:
  en: "Bullish Engulfing"
  zh: "看涨吞没"
  ja: "強気の包み足"
  ko: "상승 장악형"
  # ...

Translation is done via Gemini batch API (~$0.15 for all entities × 9 languages).

The prompt is the secret sauce — it forces Gemini to output a strict JSON schema with confidence scores, bilingual explanations, and explicit "what I can't determine from this image" sections. No hallucinated price targets.

Pattern Detection Pipeline

Beyond the screenshot analysis, there's a daily data pipeline:

Fetch — Pull OHLCV data from EODHD (US/A-shares) and Tushare (HK)
Detect — Rule-based engine scans for 10 candlestick patterns (Hammer, Engulfing, Doji, Morning/Evening Star, etc.)
Backfill — Calculate T+5/10/20 returns for historical detections
Compute — MACD, RSI, Bollinger Bands snapshots for each stock
Aggregate — Win rate statistics at global/market/symbol level

Try It

Upload a chart: klinevision.ai
Browse patterns: klinevision.ai/patterns
Check a stock: klinevision.ai/stocks/us/AAPL
Scan for patterns: klinevision.ai/scanner/doji/us

The core analysis feature is free. I'd love feedback from anyone who trades or is interested in technical analysis.

What's Next

More chart patterns in the rule engine (currently 10, targeting 30+)
Multi-timeframe confirmation (daily + 4h + 1h)
Real-time pattern alerts via Telegram
Hong Kong market expansion (Tushare rate limits are... fun)