AI Gateway Documentation - Required Images
This file lists all images that need to be created for the AI Gateway documentation. Image Location:/images/ folder in the documentation root
Overview & Setup Images
Introduction Page (introduction.mdx)
| Image | Description | Priority |
|---|---|---|
ai-gateway-architecture.png | Diagram showing Your App -> LeanMCP Gateway -> AI Provider flow. Show logging, security, and analytics happening at the gateway level. | HIGH |
API Keys Page (api-keys.mdx)
| Image | Description | Priority |
|---|---|---|
ai-gateway-api-keys-page.png | Screenshot of ship.leanmcp.com/api-keys page showing the API keys list | HIGH |
ai-gateway-create-key.png | Screenshot of the “Create API Key” modal with name field and SDK permissions checkbox highlighted | HIGH |
Getting Started Page (getting-started.mdx)
| Image | Description | Priority |
|---|---|---|
ai-gateway-signup.png | Screenshot of ship.leanmcp.com signup/onboarding page | MEDIUM |
ai-gateway-logs.png | Screenshot of the AI Gateway logs view showing a test request | HIGH |
For Users - IDE Integration Images
Cursor Page (cursor.mdx)
| Image | Description | Priority |
|---|---|---|
ai-gateway-cursor-settings.png | Screenshot of Cursor Settings > Models showing: (1) API Key field with leanmcp_xxx entered, (2) “Override OpenAI Base URL” field with gateway URL. Highlight both fields with arrows or boxes. | HIGH |
ai-gateway-cursor-verify.png | Screenshot showing a successful AI request in Cursor AND the corresponding log entry in LeanMCP dashboard (side by side or before/after) | HIGH |
Windsurf Page (windsurf.mdx)
| Image | Description | Priority |
|---|---|---|
ai-gateway-windsurf-settings.png | Screenshot of Windsurf Settings showing where to enter Base URL and API Key. Highlight the relevant fields. Should show: (1) Base URL field, (2) API Key field. | HIGH |
Raycast Page (raycast.mdx)
| Image | Description | Priority |
|---|---|---|
ai-gateway-raycast-settings.png | Screenshot of Raycast Settings > AI section showing the Custom API Keys area. Show where to find it in the settings sidebar. | HIGH |
ai-gateway-raycast-models.png | Screenshot of Raycast model picker showing the key icon next to models using BYOK | MEDIUM |
OpenCode Page (opencode.mdx)
| Image | Description | Priority |
|---|---|---|
ai-gateway-opencode-models.png | Screenshot of OpenCode /models command output showing LeanMCP provider in the list | MEDIUM |
Clawdbot Page (clawdbot.mdx)
| Image | Description | Priority |
|---|---|---|
ai-gateway-clawdbot-logs.png | Screenshot of LeanMCP dashboard showing logged requests from Clawdbot Discord bot | LOW |
For Users - Personal Use Images
For Personal Users Page (for-personal-users.mdx)
| Image | Description | Priority |
|---|---|---|
ai-gateway-personal-dashboard.png | Screenshot of personal user dashboard showing overview: recent requests, token usage, any detected sensitive data | HIGH |
ai-gateway-request-log.png | Screenshot of detailed request log view showing: full request content, response, token usage, timestamp | HIGH |
ai-gateway-cost-tracking.png | Screenshot of cost tracking graph showing daily/weekly usage with cost breakdown | MEDIUM |
For Developers Images
For Developers Page (for-developers.mdx)
| Image | Description | Priority |
|---|---|---|
ai-gateway-user-tracking.png | Dashboard screenshot showing per-user tracking: list of users, their request counts, token usage | HIGH |
ai-gateway-block-user.png | Screenshot showing how to block a user: either the block button in UI or the blocked users list | HIGH |
ai-gateway-competitor-analysis.png | Dashboard showing benchmarks/analytics comparing usage patterns | LOW |
ai-gateway-ab-testing.png | A/B test results view showing variant comparison: quality scores, token usage, cost per variant | MEDIUM |
ai-gateway-dev-analytics.png | Developer analytics dashboard: request volume graph, cost breakdown by feature, error rates | HIGH |
ai-gateway-user-management.png | User management interface: list of users with usage stats, ability to set limits or block | MEDIUM |
Features Images
Observability Page (observability.mdx)
| Image | Description | Priority |
|---|---|---|
ai-gateway-request-detail.png | Detailed view of a single request: timestamp, full request body, full response, model, tokens, latency | HIGH |
ai-gateway-log-filters.png | Log filtering UI: date range picker, model dropdown, user ID search, status filter | MEDIUM |
ai-gateway-code-context.png | Example showing code sent to AI: highlight the actual source code in the request, show filename and context | HIGH |
ai-gateway-live-stream.png | Real-time log stream view with requests appearing live | MEDIUM |
ai-gateway-metrics.png | Metrics dashboard: graphs for requests/minute, token usage, error rate, latency | HIGH |
Security Page (security.mdx)
| Image | Description | Priority |
|---|---|---|
ai-gateway-sensitive-detection.png | Example of detected sensitive data: show a request with API key highlighted/flagged | HIGH |
ai-gateway-block-user.png | (Same as for-developers) User blocking interface | HIGH |
ai-gateway-audit-log.png | Security audit log: list of security events with timestamps and details | MEDIUM |
ai-gateway-security-alert.png | Example security alert notification (email or Slack format) | LOW |
Token Optimization Page (token-optimization.mdx)
| Image | Description | Priority |
|---|---|---|
ai-gateway-token-analytics.png | Token analytics dashboard: breakdown by model, by feature, by user, over time | HIGH |
ai-gateway-ab-test-setup.png | A/B test creation UI: experiment name, variants, weights, metrics | MEDIUM |
ai-gateway-ab-results.png | (Same as for-developers) A/B test results comparison | MEDIUM |
ai-gateway-benchmarks.png | Industry benchmarks view: compare your usage to averages | LOW |
ai-gateway-model-routing.png | Diagram showing smart model routing: simple queries -> smaller model, complex -> larger model | MEDIUM |
ai-gateway-cost-alert.png | Cost alert notification example | LOW |
ai-gateway-roi-calculator.png | ROI calculator showing cost savings from optimization | LOW |
Summary by Priority
HIGH Priority (Must Have) - 16 images
These are essential for users to understand how to set up and use the gateway:ai-gateway-architecture.png- Core concept visualizationai-gateway-api-keys-page.png- Where to get API keyai-gateway-create-key.png- How to create API keyai-gateway-logs.png- Verify setup worksai-gateway-cursor-settings.png- Cursor setupai-gateway-cursor-verify.png- Cursor verificationai-gateway-windsurf-settings.png- Windsurf setupai-gateway-raycast-settings.png- Raycast setupai-gateway-personal-dashboard.png- Personal user overviewai-gateway-request-log.png- How to read logsai-gateway-user-tracking.png- Developer user trackingai-gateway-block-user.png- Blocking usersai-gateway-dev-analytics.png- Developer analyticsai-gateway-request-detail.png- Request detailsai-gateway-code-context.png- Code visibilityai-gateway-token-analytics.png- Token trackingai-gateway-sensitive-detection.png- Security detectionai-gateway-metrics.png- Metrics overview
MEDIUM Priority (Should Have) - 11 images
These improve understanding but aren’t blocking:ai-gateway-signup.pngai-gateway-raycast-models.pngai-gateway-opencode-models.pngai-gateway-cost-tracking.pngai-gateway-ab-testing.pngai-gateway-user-management.pngai-gateway-log-filters.pngai-gateway-live-stream.pngai-gateway-audit-log.pngai-gateway-ab-test-setup.pngai-gateway-model-routing.png
LOW Priority (Nice to Have) - 6 images
These are supplementary:ai-gateway-clawdbot-logs.pngai-gateway-competitor-analysis.pngai-gateway-security-alert.pngai-gateway-benchmarks.pngai-gateway-cost-alert.pngai-gateway-roi-calculator.png
Image Guidelines
Format
- Format: PNG or WebP
- Max Width: 1200px (will be scaled down if larger)
- Quality: High quality, no compression artifacts
Style
- Clean UI: Use clean, uncluttered screenshots
- Annotations: Add arrows, boxes, or numbers to highlight important areas
- Consistency: Use the same browser/app window size for all screenshots
- Dark Mode: Consider providing both light and dark mode versions if applicable
Content
- Realistic Data: Use realistic but fake data (not real user data)
- Blur Sensitive Info: Blur any real API keys, user IDs, or personal data
- Current UI: Screenshots should match the current production UI
Naming Convention
All images should be prefixed withai-gateway- and use lowercase with hyphens.
Checklist
- Create
/images/folder structure if not exists - HIGH priority images (16 images)
- MEDIUM priority images (11 images)
- LOW priority images (6 images)
- Review all images for consistency
- Test images render correctly in documentation