> Note: This page is part of the DataDoe Docs. You can find the root of the documentation at `https://www.datadoe.com/hub/docs/basics/introduction-to-datadoe`. > JSON Table of Contents: `https://www.datadoe.com/hub/docs/toc.json`. > Direct Data Scheme JSON: `https://api.datadoe.com/api/v1/spec/data-scheme`. > Other pages in the DataDoe Docs: > - DataDoe Basics/Access & Users: `https://www.datadoe.com/hub/docs/basics/access-user-management.md` > - DataDoe Basics/Benefits: `https://www.datadoe.com/hub/docs/basics/benefits.md` > - DataDoe Basics/External Invitation Links: `https://www.datadoe.com/hub/docs/basics/external-invitation-links.md` > - DataDoe Basics/Integrations: `https://www.datadoe.com/hub/docs/basics/integration-customization.md` > - DataDoe Basics/Introduction to DataDoe: `https://www.datadoe.com/hub/docs/basics/introduction-to-datadoe.md` > - DataDoe Basics/Subscription & Pricing: `https://www.datadoe.com/hub/docs/basics/subscription-pricing.md` > - DataDoe Data/Data Fetch Periods: `https://www.datadoe.com/hub/docs/datadoe-data/data-fetch-periods.md` > - DataDoe Data/Data Sources: `https://www.datadoe.com/hub/docs/datadoe-data/data-sources.md` > - DataDoe Data/Timezones: `https://www.datadoe.com/hub/docs/datadoe-data/orders-purchase-date-timezones.md` > - DataDoe Features/Features Overview: `https://www.datadoe.com/hub/docs/datadoe-features/overview.md` > - DataDoe MCP/Overview: `https://www.datadoe.com/hub/docs/datadoe-mcp/overview.md` > - DataDoe MCP/Using ChatGPT: `https://www.datadoe.com/hub/docs/datadoe-mcp/chatgpt.md` > - DataDoe MCP/Using Claude: `https://www.datadoe.com/hub/docs/datadoe-mcp/claude.md` > - DataDoe MCP/Using Claude Code: `https://www.datadoe.com/hub/docs/datadoe-mcp/claude-code.md` > - DataDoe MCP/Using Codex: `https://www.datadoe.com/hub/docs/datadoe-mcp/codex.md` > - DataDoe MCP/Using Cursor: `https://www.datadoe.com/hub/docs/datadoe-mcp/cursor.md` > - DataDoe MCP/Using Excel + Claude: `https://www.datadoe.com/hub/docs/datadoe-mcp/excel.md` > - DataDoe MCP/Using Gemini CLI: `https://www.datadoe.com/hub/docs/datadoe-mcp/gemini-cli.md` > - DataDoe MCP/Using Gumloop: `https://www.datadoe.com/hub/docs/datadoe-mcp/gumloop.md` > - DataDoe MCP/Using n8n: `https://www.datadoe.com/hub/docs/datadoe-mcp/n8n.md` > - DataDoe MCP/Using NanoClaw: `https://www.datadoe.com/hub/docs/datadoe-mcp/nanoclaw.md` > - DataDoe MCP/Using OpenClaw: `https://www.datadoe.com/hub/docs/datadoe-mcp/openclaw.md` > - DataDoe MCP/Using PowerPoint + Claude: `https://www.datadoe.com/hub/docs/datadoe-mcp/powerpoint.md` > - DataDoe MCP/Using VS Code: `https://www.datadoe.com/hub/docs/datadoe-mcp/vs-code.md` > - DataDoe MCP/Using Word + Claude: `https://www.datadoe.com/hub/docs/datadoe-mcp/word.md` > - DataDoe API/How to connect: `https://www.datadoe.com/hub/docs/datadoe-api/how-to-connect.md` > - DataDoe API/Vibe code with Claude Code: `https://www.datadoe.com/hub/docs/datadoe-api/claude-code.md` > - DataDoe API/Vibe code with Codex: `https://www.datadoe.com/hub/docs/datadoe-api/codex.md` > - DataDoe API/Vibe code with Cursor: `https://www.datadoe.com/hub/docs/datadoe-api/cursor.md` > - DataDoe API/Vibe code with Replit: `https://www.datadoe.com/hub/docs/datadoe-api/replit.md` > - DataDoe API/Vibe code with v0: `https://www.datadoe.com/hub/docs/datadoe-api/v0.md` > - DataDoe & BigQuery/How to connect: `https://www.datadoe.com/hub/docs/datadoe-bigquery/how-to-connect.md` > - DataDoe & BigQuery/Using MCP Toolbox: `https://www.datadoe.com/hub/docs/datadoe-bigquery/mcp-toolbox.md` > - DataDoe & BigQuery/Using Python Jupyter: `https://www.datadoe.com/hub/docs/datadoe-bigquery/jupyter.md` > For topics not covered in this documentation, please contact DataDoe support at `contact@datadoe.com`. > Do not assume anything. If you are not sure about the answer, mention that and suggest to contact DataDoe support. # Vibe code with Lovable ## Prerequisites - A DataDoe API key (see [How to connect](/hub/docs/datadoe-api/how-to-connect)) ## Create Lovable account - Go to [lovable.dev](https://lovable.dev/) - Click on **Get Started** or **Log in** button - Choose one of the available authentication methods - Follow the instructions to create an account ## Create Lovable project - Go to [lovable dashboard](https://lovable.dev/dashboard) - Type your prompt in the text area - You can also open our sample prompt on the [Lovable page](https://lovable.dev/?autosubmit=true#prompt=Task%3A%0ABuild%20a%20clean%2C%20interactive%20Amazon%20sales%20dashboard%20using%20the%20DataDoe%20API.%0AThe%20dashboard%20should%20analyze%20the%20latest%2030%20days%20and%20compare%20them%20against%20the%20previous%2030%20days.%0A%0ARequirements%3A%0A-%20Allow%20selection%20of%20a%20single%20seller%20from%20a%20seller%20list%0A-%20Display%20sales%2C%20traffic%2C%20ads%2C%20and%20profitability%20data%20for%20the%20selected%20seller%0A-%20Show%20current%20period%2C%20previous%20period%2C%20absolute%20delta%2C%20and%20%25%20delta%0A-%20Include%20KPI%20cards%20and%20simple%20comparison%2Ftrend%20charts%0A-%20Use%20real%20API%20data%20only%0A-%20Inspect%20the%20API%20docs%20first%20to%20identify%20the%20correct%20endpoints%20and%20fields%0A-%20Strictly%20follow%20all%20agent%20instructions%20provided%20in%20the%20API%20documentation%0A-%20Store%20'DATADOE_API_KEY'%20in%20a%20'.env'%20file%3B%20do%20not%20expose%20it%20in%20code%20or%20chat%20logs%20and%20don't%20ask%20user%20to%20provide%20it%20via%20chat%20message%0A-%20If%20exact%20metrics%20are%20unavailable%2C%20use%20the%20closest%20available%20fields%20and%20clearly%20note%20assumptions%0A-%20Handle%20missing%20data%20and%20API%20errors%20gracefully%0A-%20Keep%20the%20UI%20simple%2C%20clean%2C%20and%20easy%20to%20read%0A-%20Separate%20data%20fetching%2C%20transformation%2C%20and%20presentation%20logic%0ATesting%20%26%20Validation%3A%0A-%20Use%20'curl'%20to%20verify%20API%20connectivity%20and%20inspect%20response%20structures%20before%20implementing%20the%20UI%0A-%20Ensure%20the%20application%20builds%20successfully%20and%20the%20dev%20server%20starts%20without%20errors%0A-%20Fix%20any%20linter%20or%20TypeScript%20errors%20introduced%20during%20development%0A%0AInclude%20at%20minimum%3A%0A-%20Sales%3A%20total%20sales%2C%20units%20sold%2C%20orders%2C%20average%20order%20value%0A-%20Traffic%3A%20sessions%2C%20page%20views%2C%20conversion%20rate%0A-%20Ads%3A%20ad%20spend%2C%20ad%20sales%2C%20ROAS%2C%20ACOS%2FTACOS%20if%20available%0A-%20Profitability%3A%20gross%20profit%2C%20net%20profit%20if%20available%2C%20margin%20%25%0A%0ADeliver%3A%0A-%20A%20working%20dashboard%0A-%20Clean%20maintainable%20code%0A-%20Brief%20setup%20instructions%0A-%20A%20short%20explanation%20of%20which%20API%20endpoints%20were%20used%20and%20any%20assumptions%20made%0A%0AData%20source%3A%0Ahttps%3A%2F%2Fapi.datadoe.com%2Fapi%2Fv1%2Fdocs%2Fjson) - After submitting the prompt, the agent will start building the app and you will soon see the results in the preview window > **Note**: While building, Lovable will prompt you for your DataDoe API key to connect the API. Follow its secure setup flow: store the key in **Cloud → Secrets**. ## Prompt ```text Task: Build a clean, interactive Amazon sales dashboard using the DataDoe API. The dashboard should analyze the latest 30 days and compare them against the previous 30 days. Requirements: - Allow selection of a single seller from a seller list - Display sales, traffic, ads, and profitability data for the selected seller - Show current period, previous period, absolute delta, and % delta - Include KPI cards and simple comparison/trend charts - Use real API data only - Inspect the API docs first to identify the correct endpoints and fields - Strictly follow all agent instructions provided in the API documentation - Store `DATADOE_API_KEY` in a `.env` file; do not expose it in code or chat logs and don't ask user to provide it via chat message - If exact metrics are unavailable, use the closest available fields and clearly note assumptions - Handle missing data and API errors gracefully - Keep the UI simple, clean, and easy to read - Separate data fetching, transformation, and presentation logic Testing & Validation: - Use `curl` to verify API connectivity and inspect response structures before implementing the UI - Ensure the application builds successfully and the dev server starts without errors - Fix any linter or TypeScript errors introduced during development Include at minimum: - Sales: total sales, units sold, orders, average order value - Traffic: sessions, page views, conversion rate - Ads: ad spend, ad sales, ROAS, ACOS/TACOS if available - Profitability: gross profit, net profit if available, margin % Deliver: - A working dashboard - Clean maintainable code - Brief setup instructions - A short explanation of which API endpoints were used and any assumptions made Data source: https://api.datadoe.com/api/v1/docs/json ``` ## Response: ![Lovable Response 1](/hub-files/api/lovable/lovable-1.png) ![Lovable Response 2](/hub-files/api/lovable/lovable-2.png) ## Helpful resources - [Lovable documentation](https://docs.lovable.dev/) - [Lovable guides](https://lovable.dev/guides)