MarketCheck MCP Apps

MarketCheck MCP Apps

25 interactive automotive market intelligence dashboards — usable as MCP UI Apps inside AI assistants, as a standalone web showcase, or as embeddable iframe widgets in your own portal.

Powered by MarketCheck real-time automotive data — VIN decoding, ML price predictions, active/sold inventory, and aggregated market analytics.

4 Ways to Use

Don't have an API key? Sign up free at developers.marketcheck.com

Quick Start

# Install dependencies
npm install

# Build everything (gallery + 25 apps + server)
npm run build

# Start the server
npm run serve

Then open:

• Gallery: http://localhost:3001/ — browse all 25 apps, enter API key
• MCP endpoint: http://localhost:3001/mcp — for AI assistant connectors
• Any app directly: http://localhost:3001/apps/{app-name}/dist/index.html

Demo Mode (no server needed)

Open any built HTML file directly in your browser — all apps have mock data:

open packages/apps/used-car-market-index/dist/index.html
open packages/apps/deal-evaluator/dist/index.html
open packages/apps/trade-in-estimator/dist/index.html

Test with MCP test host

# Terminal 1: Start server
npm run serve

# Terminal 2: Run the official MCP test host
git clone https://github.com/modelcontextprotocol/ext-apps.git /tmp/ext-apps
cd /tmp/ext-apps/examples/basic-host
npm install
SERVERS='["http://localhost:3001/mcp"]' npm start
# → Open http://localhost:8080, pick a tool, call it, see the app render

Test with Claude

# Terminal 1: Start server
npm run serve

# Terminal 2: Tunnel to internet
npx cloudflared tunnel --url http://localhost:3001

Copy the tunnel URL, then in Claude:

1. Go to Settings → Connectors → Add Custom Connector
2. Paste the URL with /mcp suffix (e.g., https://random-name.trycloudflare.com/mcp)
3. Start a new chat and ask Claude to use any tool

Custom connectors require a paid Claude plan (Pro, Max, or Team).

All 25 Apps

Consumer Apps

Appraiser Apps

Dealer Apps

Dealership Group Apps

Analyst Apps

Lender Apps

Insurer App

Manufacturer Apps

Auction House App

Lender Sales App

Cross-Segment App

App Details

App 25: Used Car Market Index

"The stock ticker for cars."

Track used car prices like Wall Street tracks stocks. Composite market index, segment indices (SUV, Sedan, Truck, EV, Luxury), and individual Make:Model tickers with candlestick-style charts.

• Canvas line/area chart with volume bars, crosshair hover, multi-ticker overlay (up to 4)
• Sector heatmap — body type × price tier grid colored by price change %
• Top Gainers / Losers / Most Active tables
• Geographic comparison — state-level pricing for any ticker
• Watchlist strip with mini sparklines
• Toggle: Absolute $ ↔ Indexed (base=100), US ↔ UK

App 7: Trade-In Estimator

"What's my car worth?"

Enter VIN + mileage + ZIP + condition → get three value tiers:

1. Private Party Value — selling direct
2. Trade-In Value — franchise dealer offer
3. Instant Cash Range — independent dealer offers

Each with horizontal range bars. Condition cards (Excellent/Good/Fair/Poor) recalculate instantly without API calls. Expandable "How We Got This Number" with sold comp evidence.

App 5: Deal Evaluator

"Should I buy this car?"

Enter a VIN → get a color-coded verdict (Great Deal / Fair / Above Market / Overpriced) with a Canvas semicircular gauge showing market position. Three-column layout: This Car specs, Market Context stats, Negotiation Toolkit with suggested offer and leverage points. Scrollable alternative cars row.

App 6: Car Search & Compare

Visual car shopping with filter chips (body type, fuel, make, year, price, mileage), photo card grid with deal badges, and side-by-side comparison of up to 3 cars with auto-highlighted winner.

App 1: Appraiser Workbench

Three-panel valuation studio:

• Left: Retail + wholesale predictions with range bars and % of MSRP
• Center: Tabbed Active Comps / Sold Comps (color-coded tables) / History (Canvas stepped line chart)
• Right: Full vehicle spec card from VIN decode

App 8: Lot Pricing Dashboard

Weekly dealer workflow. Full inventory with market price gaps (DROP/HOLD/RAISE badges), aging heatmap (DOM buckets), floor plan burn calculator, and stocking hot list with D/S ratios.

App 13: Earnings Signal Dashboard

Pre-earnings channel check for auto tickers (F, GM, TM, TSLA, etc.). 6-dimension signal matrix (Volume, Pricing, Inventory, DOM, EV, Mix) with Canvas sparklines and individual BULL/BEAR badges. Composite signal + bull/bear scenario panel.

App 18: Claims Valuation Workbench

Insurance total-loss determination. Enter VIN + damage severity + condition → get verdict banner (NOT TOTAL LOSS / LIKELY / TOTAL LOSS), settlement range bar (25th–75th percentile), comparable evidence table, regional variance, and replacement vehicle options.

Architecture

marketcheck-mcp-apps/
├── package.json                    # Monorepo root (npm workspaces)
├── tsconfig.base.json              # Shared TypeScript config
├── scripts/build-apps.mjs          # Builds all 25 app UIs
├── packages/
│   ├── shared/                     # Shared utilities
│   │   └── src/
│   │       ├── types.ts            # Common TypeScript types
│   │       ├── formatters.ts       # Currency, percent, signal classifiers
│   │       ├── index-calculator.ts # Index computation, depreciation, D/S ratio
│   │       ├── marketcheck-client.ts # Typed MarketCheck API wrapper
│   │       └── app-template.ts     # Shared UI components (KPI cards, tables, badges)
│   ├── server/                     # MCP server (all 25 tools)
│   │   └── src/
│   │       ├── index.ts            # Express + MCP server, registers all tools
│   │       ├── register-app.ts     # Helper to register tool + UI resource pairs
│   │       └── tools/              # 25 tool handler files
│   └── apps/                       # 25 app UI folders
│       ├── used-car-market-index/
│       │   ├── package.json
│       │   ├── vite.config.ts
│       │   ├── index.html
│       │   ├── src/main.ts         # Full app UI code
│       │   └── dist/index.html     # Built single-file HTML bundle
│       ├── trade-in-estimator/
│       ├── deal-evaluator/
│       └── ... (22 more)

How it works

1. The MCP server registers 25 tools, each with a _meta.ui.resourceUri pointing to a ui:// resource
2. When a host (Claude, VS Code, etc.) calls a tool, it also fetches the UI resource — a single-file HTML bundle containing the entire app
3. The app renders in a sandboxed iframe inside the host
4. The app calls app.callServerTool() for data and app.updateModelContext() to push results back to the LLM
5. All apps include mock data fallback so they work even without a live MarketCheck API key

Tech stack

• Server: @modelcontextprotocol/sdk + @modelcontextprotocol/ext-apps + Express
• UI: Vanilla TypeScript + Canvas 2D API (no chart libraries) + @modelcontextprotocol/ext-apps App class
• Build: Vite + vite-plugin-singlefile → single HTML file per app (~400KB, ~98KB gzipped)
• Data: MarketCheck API (9 endpoints: VIN decode, price prediction, active/sold search, listing history, sold summary, OEM incentives, UK markets)

Embedding Apps in Your Portal

Embed any app as an iframe in your website. For security, use OAuth access tokens (not API keys) — tokens expire in 6 hours and can be revoked.

Step 1: Generate an OAuth Access Token

Exchange your API key + client secret for a short-lived token (server-side):

curl -X POST https://api.marketcheck.com/oauth2/token \
  -H "Content-Type: application/json" \
  -d '{"grant_type":"client_credentials","client_id":"YOUR_API_KEY","client_secret":"YOUR_SECRET"}'

Step 2: Embed with the Token

<iframe
  src="https://your-domain.com/apps/deal-evaluator/dist/index.html?access_token=TOKEN&embed=true&vin=5TDJSKFC2NS055758"
  width="100%" height="700"
  style="border:none;border-radius:8px;"
></iframe>

URL Parameters

Security

Generate credentials at developers.marketcheck.com/api-keys

Deployment

Environment Variables

MARKETCHECK_API_KEY=your_api_key    # Required for MCP mode live data
MC_API_BASE=https://mc-api.marketcheck.com/v2  # Default
PORT=3001                           # Server port (default 3001)

Option 1: Vercel (recommended for serverless)

Yes — these apps can be hosted on Vercel. The server uses stateless HTTP mode (sessionIdGenerator: undefined), which is compatible with Vercel's serverless functions.

npm install -g vercel

Create vercel.json in the project root:

{
  "buildCommand": "npm run build",
  "functions": {
    "api/mcp.ts": {
      "maxDuration": 30
    }
  },
  "rewrites": [
    { "source": "/mcp", "destination": "/api/mcp" }
  ]
}

Create api/mcp.ts:

import type { VercelRequest, VercelResponse } from "@vercel/node";
// Import and initialize your MCP server here
// Handle req/res with StreamableHTTPServerTransport

Then deploy:

vercel --prod

Note: Each tool call is a single HTTP POST → response cycle, which fits Vercel's serverless model well. The 30-second timeout is sufficient for most tools. Set MARKETCHECK_API_KEY in Vercel's environment variables.

Option 2: Google Cloud Run (container)

# Build container
docker build -t marketcheck-mcp-apps .
docker tag marketcheck-mcp-apps gcr.io/YOUR_PROJECT/marketcheck-mcp-apps

# Push and deploy
docker push gcr.io/YOUR_PROJECT/marketcheck-mcp-apps
gcloud run deploy marketcheck-mcp-apps \
  --image gcr.io/YOUR_PROJECT/marketcheck-mcp-apps \
  --port 3001 \
  --set-env-vars MARKETCHECK_API_KEY=your_key \
  --allow-unauthenticated

Option 3: Railway / Render / Fly.io

Any platform that supports Node.js:

# Railway
railway up

# Render — set build command: npm run build
# Start command: npm run serve

# Fly.io
fly launch
fly deploy

Option 4: Self-hosted (VPS, EC2, etc.)

npm install && npm run build
PORT=3001 MARKETCHECK_API_KEY=your_key npm run serve

Do I need to host on cloud?

For personal/local use: No. Run npm run serve locally and use cloudflared tunnel to connect to Claude. The apps work fully offline with mock data too.

For team/production use: Yes, host on any cloud platform. The server is a standard HTTP service — no WebSockets, no sessions, no state. Any platform that can run a Node.js HTTP server works.

The apps themselves don't need separate hosting. They're served as MCP resources from the server — the HTML is bundled into the server response. You only host the single MCP server.

MarketCheck API Tools

The server wraps these MarketCheck API endpoints as MCP tools:

MCP Host Compatibility

MCP Apps are supported by:

• Claude (web) and Claude Desktop
• VS Code GitHub Copilot
• Goose
• Postman
• MCPJam

Development

Build a single app

cd packages/apps/deal-evaluator
npx vite build

Build all apps

npm run build

Add a new app

1. Create packages/apps/my-new-app/ with package.json, tsconfig.json, vite.config.ts, index.html, src/main.ts
2. Create packages/server/src/tools/my-new-app.ts with the tool handler
3. Import and register in packages/server/src/index.ts
4. Run npm install && npm run build

Project stats

License

MIT