Starter Prompt: Card-Grid BI Dashboard

Use this starter prompt to instruct your AI coding assistant (such as Cursor, Claude, GPT, or Copilot) to build a complete, fully functional Business Intelligence (BI) dashboard on top of the FullMention API.

What This Prompt Builds

The prompt guides an AI assistant to create a full-stack single-page application (SPA) featuring:

• Secure Backend Proxy: Prevents CORS issues and key leakage by keeping FULLMENTION_API_KEY on the server side and routing all traffic to the Base URL https://api.fullmention.com/v1.
• SQLite Database: Stores historical Share-of-Voice (SoV) snapshots for historical timeline graphs.
• Background Sweeper: Automatically polls active runs, paginates results, and calculates brand matches and SoV.
• Interactive Card-Grid: A beautiful, dark, glassmorphic UI based on a bento-grid layout, where each card expands into an in-depth panel (drawer/modal).
• Keyword Management: Manages keyword creation and synchronization directly via FullMention’s /v1/keywords endpoint.

---

Copy the Starter Prompt

Copy the text below and paste it directly into your AI development assistant:

Role and Purpose: You are an experienced full-stack web developer. Your task is to build a professional, unified Business Intelligence (BI) dashboard as a Single-Page Application (SPA) with a Node.js backend. The dashboard must track a brand's visibility, reputation, and Share of Voice (SoV) across ChatGPT (OpenAI) and Google Gemini, based on data from the FullMention API.

Architectural Rules:

1. Security and CORS (Frontend Isolation): The frontend must NEVER call api.fullmention.com directly. All traffic must be routed through a secure backend proxy (Express or Hono) that calls the official Base URL: https://api.fullmention.com/v1. The FULLMENTION_API_KEY must be stored securely as a server secret to prevent key leakage and CORS errors.
2. Quota Monitoring: The proxy must read and forward quota values from the API response headers (X-Quota-Limit, X-Quota-Used, X-Quota-Remaining) to the frontend, so the quota visualization in the dashboard always reflects actual live consumption.
3. Headless Platform (No External Admin UI): FullMention is a purely headless API platform and does not have a management panel for keywords. Keyword creation, deletion, and management must occur programmatically from your dashboard application by calling the API's keyword endpoints through the proxy. The AI must NOT assume that the user can add keywords in an external FullMention interface.
4. Database Writes: Historical SoV snapshots and citations must be calculated and stored on the server side in a local SQLite database. Users only have read access to this aggregated data from the frontend.

Database and Setup: Setup a SQLite database with the following tables:
- settings (brand_name, domain, default_engines as JSON array) - Note: Competitors do not need to be statically defined, as all other brands and domains appearing in the FullMention results are automatically treated as competitors in the dashboard.
- keywords_cache (id, keyword, country, country_code, language, language_code, engines as JSON array) - for local display and sync with the FullMention API
- scheduled_runs (id/run_id, label, status, error, triggered_at, completed_at)
- run_snapshots (id, run_id, engine, brand_name, mention_count, total_results, avg_rank, score, completed_at)
- run_host_ranks (id, run_id, host, mention_count, total_results, avg_rank, score, completed_at)

Seed Data: Ensure to seed the database with 30 days of realistic history for Acme Inc (and two realistic competitors found in the industry) on the very first startup, so all charts and statistics are active from day 1.

API Endpoints (FullMention Integration): Your backend proxy must integrate with and call the following endpoints under Base URL https://api.fullmention.com/v1 with Authorization: Bearer Header. Note that keywords must always be created via POST before they can be tracked in runs. If the tags array is omitted or empty when estimating or triggering a run, FullMention will automatically run all active keywords on the account:

- Create keyword: POST /v1/keywords (Sends JSON body with keywords array. Example: { "keywords": [{ "keyword": "seo tool", "country": "Denmark", "countryCode": "DK", "language": "Danish", "languageCode": "da", "engines": ["openai-mini", "gemini"] }] }). This endpoint registers the keyword in FullMention.
- List keywords: GET /v1/keywords (Fetches registered keywords, and supports cursor-based pagination via meta.nextCursor).
- Delete keyword: DELETE /v1/keywords/:keywordId (Deactivates the keyword in FullMention to exclude it from future runs).
- Estimate cost: POST /v1/runs/estimate (Sends options in the body. If the tags array is empty or omitted, FullMention estimates the cost for all keywords. Example body: { "tags": [], "options": { "fanout": false } }).
- Trigger run: POST /v1/runs (Triggered with a unique Idempotency-Key UUID v4 header and the same body as the estimate. Starts a run and returns a run ID and status queued).
- Run status: GET /v1/runs/:id (Checks the status of a run ID. Returns status queued, processing, success, or failed. Also includes progress.percentage).
- Get results: GET /v1/results/latest?runId=RUN_ID (Fetches the latest results for a run. The response contains a data array and meta.nextCursor. If nextCursor is present, you must paginate and fetch additional pages by passing the cursor parameter).

Calculation Logic (Server-Side):
- Brand Match: Perform case-insensitive comparison across the flat, root-level arrays in the FullMention result: brandRankings.name (for brand visibility), websiteRankings.domain (for cited domains), and productRankings.name (for product recommendations).
- Sorting Rule: FullMention arrays are returned pre-sorted by relevance and AI association. This order must be strictly preserved in your logic and not sorted alphabetically.
- Rank Score (sum of 1/position): Each match is assigned a weighted score based on its position in the list. Position 1 yields 1.0, position 2 yields 0.5, position 3 yields 0.33, etc. (formula: 1 / position).
- Background Sweeper: Run an asynchronous polling job for triggered runs. Once a run is completed (status success), the system must fetch all results via GET /v1/results/latest?runId=RUN_ID, paginate through all pages using meta.nextCursor (max 50 pages), calculate SoV and citation data, and store them in the database.

Credit Management and Strategy:
- Live Estimation: Never hardcode credit costs. Always fetch and display the live estimated maximum cost via POST /v1/runs/estimate in the confirmation dialog before a user starts a live run.
- Model Pricing:
  - Gemini: Costs 1 base credit. Does not support fanout in V1.
  - GPT-5-mini: Costs 1 base credit + 1 fanout credit (2 credits total).
  - GPT-5: Costs 1 base credit + 9 fanout credits (10 credits total). Recommend the user save this expensive run for weekly/monthly deep-dive audits.
- Zero-Cost Protection: Show a tooltip indicating that if a fanout search fails during execution, FullMention only deducts 1 base credit (Zero-Cost Search Protection).

Frontend Layout and Interaction (Cyber-AI Theme): Build a beautiful, dark, glassmorphic single-page application using Tailwind CSS:

1. Sticky Topbar (Status Bar):
   - Brand Selector: Display the active brand and allow users to switch brands.
   - Credit Widget: Display live quota status as a progress bar based on X-Quota-Remaining and X-Quota-Limit.
   - Trigger Button: Open a dialog box showing cost estimation.
2. Interactive Card-Grid:
   - Share of Voice Card: Display current SoV %, average rank, and a 30-day sparkline. On click, expand a right-side drawer with Chart.js line charts tracking historical SoV against competitors split by model.
   - Reputation Card: Display top 3 brand associations. On click, open a drawer with the detailed description text, recommended product categories, and mentioned entities.
   - Cited Sources Card: Display the top 3 cited domains in a horizontal bar chart. On click, display the top 10 sources with citation counts and average position (for PR/SEO analysis).
   - Engine Duel Card: Display a visual gauge comparing brand preference between OpenAI and Gemini. On click, expand a drawer with radar charts displaying model differences.
   - Keyword Inspector Card: Display a searchable list of keywords. On click, drill down to view precise recommendations, descriptions, and positions for the selected keyword.
   - Execution History Card: Show the status of the latest run. On click, display a historical table with run status, success rate, and credit usage.
   - Configuration Card: Summarize local settings. On click, display a form to update brand and domain, plus a Keyword Management interface where users can add, view, and deactivate keywords (synchronized with FullMention via POST /v1/keywords and DELETE /v1/keywords/:id).

UI Error Handling: Translate API error codes into clear messages:
- 400 empty_scope: Display "No keywords registered. Please add keywords before triggering a run."
- 402 quota_exceeded: Display "Insufficient credits. Please upgrade your account."
- 429 rate_limited: Display "Rate limit exceeded. The dashboard is waiting to retry."

Template References: Base your work on the existing files in the project directory:
- Express backend and SQLite setup: examples/bi-dashboard/server.js
- Tailwind/Chart.js frontend application with modals: examples/bi-dashboard/public/index.html
Keep the code completely clean, robust, free of placeholders, and ready to run.