MarketCheck API & MCP Apps

45 interactive automotive market intelligence dashboards + 7 AI chat demos — usable as MCP UI Apps inside AI assistants, as a standalone web showcase, as embeddable iframe widgets, or as conversational AI chat interfaces.

Powered by MarketCheck real-time automotive data — VIN decoding, ML price predictions, active/sold inventory, and aggregated market analytics. The chat demos showcase the same API capabilities through 7 different chat SDKs.

Live demo: apps.marketcheck.com

4 Ways to Use

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

Quick Start

Live Demo (hosted)

Visit apps.marketcheck.com — all 45 apps are available in demo mode. Enter your API key in the settings gear to switch to live data.

Self-hosted

# Install dependencies
npm install

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

# Start the server
npm run serve

Then open:

• Gallery: http://localhost:3001/ — browse all 45 apps

• 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/vin-market-report/dist/index.html
open packages/apps/deal-evaluator/dist/index.html
open packages/apps/car-search-app/dist/index.html

Connecting as an MCP Server

MCP Server URL

If hosted at apps.marketcheck.com:

https://apps.marketcheck.com/mcp

Authentication for MCP Mode

There are two ways to authenticate:

Option 1: API key in the MCP URL (recommended for individual users)

Pass your MarketCheck API key as a query parameter on the MCP URL:

https://apps.marketcheck.com/mcp?api_key=YOUR_API_KEY

This lets each user provide their own key. No server configuration needed.

Option 2: Server-side environment variable (recommended for shared/hosted deployments)

Set MARKETCHECK_API_KEY on the server. All connected MCP clients share this key automatically — users don't need to provide one.

MARKETCHECK_API_KEY=your_api_key npm run serve

Priority order: If a client provides ?api_key= in the URL, it takes precedence over the server env var for that request. If no URL key is provided, the env var is used as fallback.

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

Setting up in Claude

1. Go to Settings → Connectors → Add Custom Connector

2. Enter the MCP server URL:

   • With your own key: https://apps.marketcheck.com/mcp?api_key=YOUR_API_KEY

   • Without key (uses server default): https://apps.marketcheck.com/mcp

3. Start a new chat and ask Claude to use any tool (e.g. "Evaluate this deal: VIN 5TDJSKFC2NS055758")

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

Setting up in Claude Code / VS Code / Other MCP Clients

Add to your MCP client configuration:

{
  "mcpServers": {
    "marketcheck-apps": {
      "url": "https://apps.marketcheck.com/mcp?api_key=YOUR_API_KEY"
    }
  }
}

Or without a personal key (server provides its own):

{
  "mcpServers": {
    "marketcheck-apps": {
      "url": "https://apps.marketcheck.com/mcp"
    }
  }
}

How is this different from the MarketCheck MCP Data Server?

MarketCheck offers two separate MCP servers:

Key differences:

• The Data Server returns raw JSON data — the AI model processes and presents it

• The Apps Server returns interactive HTML dashboards that render in the MCP host's UI panel — the user can interact with charts, tables, and filters directly

• The Apps Server calls the same MarketCheck APIs under the hood, but wraps them in rich visual interfaces

• You can use both servers simultaneously — they have different tool names and don't conflict

You do NOT need the Data Server to use the Apps Server. Each is independent. The Apps Server has its own server-side API key and makes its own API calls.

All 52 Apps

Consumer (9 apps)

Dealer (5 apps)

Appraiser (4 apps)

Dealership Group (3 apps)

Lender (4 apps)

Analyst (3 apps)

Insurer (2 apps)

Manufacturer (2 apps)

Auction House (2 apps)

Wholesaler (1 app)

Cross-Segment (4 apps)

Consumer UK (1 app)

Dealer UK (1 app)

Auto Media (1 app)

Fleet Manager (1 app)

Rental/Subscription (1 app)

Lender Sales (1 app)

Chat Demos (7 apps)

Each chat demo uses a different SDK to showcase MarketCheck API capabilities through conversational AI interfaces:

Running Chat Demos

TypeScript apps (Vercel AI SDK, CopilotKit, assistant-ui, LangChain):

cd packages/chat/vercel-ai-chat   # or copilotkit-chat, assistant-ui-chat, langchain-agent-chat
cp .env.local.example .env.local  # Add your ANTHROPIC_API_KEY and MARKETCHECK_API_KEY
npm install
npm run dev

Python apps (Chainlit, Streamlit):

cd packages/chat/chainlit-chat    # or streamlit-chat
cp .env.example .env              # Add your keys
pip install -r requirements.txt

# Chainlit:
chainlit run app.py -w

# Streamlit:
streamlit run app.py

Chat SDK Bot (Slack/Discord/Telegram):

cd packages/chat/chat-sdk-bot
cp .env.example .env              # Add API keys + platform bot tokens
npm install
npm run dev

API Access Modes

Apps support three data access paths, tried in order:

1. MCP Mode (AI assistants)

When running inside an MCP host (Claude, VS Code, etc.), apps call _safeApp.callServerTool() which routes through the MCP server. The server uses its MARKETCHECK_API_KEY env var — users don't provide a key.

2. Direct API Mode (web/embed)

When loaded in a browser with an API key, apps call the MarketCheck API directly from the browser:

Browser → https://api.marketcheck.com/v2/search/car/active?api_key=KEY&...

No proxy or server needed. The MarketCheck API supports CORS (Access-Control-Allow-Origin: *).

To use: enter your API key in the app's settings gear, or pass it as a URL parameter:

https://apps.marketcheck.com/apps/deal-evaluator/dist/index.html?api_key=YOUR_KEY

3. Demo Mode (no auth)

If no API key is available, apps display realistic mock data. Every app works fully offline.

Embedding Apps in Your Portal

Embed any app as an iframe in your website.

Option A: API Key (simple, for internal use)

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

Option B: OAuth Token (recommended for production)

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"}'

Then embed with the token:

<iframe
  src="https://apps.marketcheck.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

Architecture

marketcheck-api-mcp-apps/
├── package.json                    # Monorepo root (npm workspaces)
├── packages/
│   ├── shared/                     # Shared utilities & types
│   │   └── 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 (server-side)
│   ├── server/                     # MCP server (44 tools)
│   │   └── src/
│   │       ├── index.ts            # Express + MCP server
│   │       ├── register-app.ts     # Helper to register tool + UI resource pairs
│   │       ├── proxy.ts            # CORS proxy for legacy/fallback mode
│   │       └── tools/              # 44 tool handler files
│   ├── gallery/                    # Web gallery UI
│   ├── apps/                       # 45 app UI folders
│   │   ├── vin-market-report/
│   │   │   ├── src/main.ts         # Full app UI + direct API client
│   │   │   └── dist/index.html     # Built single-file HTML bundle
│   │   └── ... (44 more)
│   └── chat/                       # 7 AI chat demo apps
│       ├── shared/                 # Shared tool definitions & prompts
│       ├── vercel-ai-chat/         # Next.js + Vercel AI SDK
│       ├── copilotkit-chat/        # Next.js + CopilotKit
│       ├── assistant-ui-chat/      # Next.js + assistant-ui
│       ├── chat-sdk-bot/           # Multi-platform bot (Slack/Discord/Telegram)
│       ├── chainlit-chat/          # Python + Chainlit
│       ├── streamlit-chat/         # Python + Streamlit
│       └── langchain-agent-chat/   # Next.js + LangGraph
├── public/                         # Vercel deployment output
├── static/screenshots/             # App screenshots for gallery
└── scripts/                        # Build & migration utilities

How it works

1. The MCP server registers 44 tools, each with a _meta.ui.resourceUri pointing to a ui:// resource

2. When an MCP host (Claude, VS Code, etc.) calls a tool, it also fetches the UI resource — a single-file HTML bundle

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. In web mode, apps call the MarketCheck API directly from the browser (no proxy needed)

6. All apps include mock data fallback for demo mode

Tech stack

• Server: @modelcontextprotocol/sdk + @modelcontextprotocol/ext-apps + Express

• UI: Vanilla TypeScript + Canvas 2D API (no chart libraries)

• Build: Vite + vite-plugin-singlefile → single HTML file per app

• Data: MarketCheck API (12 endpoints: VIN decode, price prediction, active/sold search, listing history, sold summary, OEM incentives, dealer/vehicle ranking, UK markets)

MarketCheck API Endpoints

Deployment

Hosted at apps.marketcheck.com

The production instance is hosted at apps.marketcheck.com.

• Gallery: https://apps.marketcheck.com/

• MCP endpoint: https://apps.marketcheck.com/mcp

• Individual app: https://apps.marketcheck.com/apps/{app-name}/dist/index.html

• Health check: https://apps.marketcheck.com/health

Environment Variables

MARKETCHECK_API_KEY=your_api_key    # Required for MCP mode
PORT=3001                           # Server port (default 3001)

Self-hosting Options

Vercel (recommended for serverless):

npx vercel --prod

Docker / Cloud Run / Railway / Render / Fly.io:

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

MCP Host Compatibility

MCP Apps are supported by:

• Claude (web) and Claude Desktop

• Claude Code (CLI and VS Code extension)

• VS Code GitHub Copilot

• Goose

• Postman

• MCPJam

Development

Build all apps

npm run build

Build a single app

cd packages/apps/deal-evaluator
npx vite 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. Add to packages/server/src/index.ts toolModules array

4. Add to packages/gallery/src/main.ts APPS array

5. Run npm install && npm run build

Project stats

License

MIT