> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dexpaprika.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Vibe code a crypto dashboard with AI

> Use Claude Code, Cursor, or any AI-assisted IDE with DexPaprika access to build a crypto dashboard from a natural language prompt. No manual API calls -- let the AI do the work.

## What is vibe coding?

Vibe coding means describing what you want in natural language and letting an AI assistant write the code. With DexPaprika connected to your AI tool, the AI can fetch real crypto data while it builds -- testing endpoints, checking response shapes, and writing working code from the start.

This tutorial shows the workflow, not a fixed script. Your results will vary based on your AI tool, your prompts, and what you ask for.

***

## Prerequisites

Connect DexPaprika to your AI tool using one of these methods:

| Tool               | Setup                                                                                         |
| ------------------ | --------------------------------------------------------------------------------------------- |
| **Claude Code**    | `/plugin marketplace add coinpaprika/claude-marketplace` then `/plugin install dexpaprika`    |
| **Cursor**         | Add MCP server URL `https://mcp.dexpaprika.com/sse` in Settings → Tools & Integrations        |
| **VS Code**        | Add MCP server via Copilot Chat settings                                                      |
| **Claude Desktop** | Add `"dexpaprika": {"url": "https://mcp.dexpaprika.com/sse"}` to `claude_desktop_config.json` |

See the [AI Integration overview](/ai-integration) for detailed setup instructions.

***

## Example 1: "Build me a token price dashboard"

### The prompt

Give your AI a clear, specific prompt:

```
Build a single-page HTML dashboard that shows:
1. The current price of SOL, ETH, and BTC
2. Their 24h volume and price change percentage
3. Auto-refreshes every 30 seconds

Use the DexPaprika API. No frameworks -- just vanilla HTML, CSS, and JavaScript.
The SOL address on Solana is So11111111111111111111111111111111111111112.
Use the search endpoint to find ETH and BTC addresses.
```

### What happens

The AI will:

1. Call the DexPaprika search endpoint to find ETH and BTC token addresses and networks
2. Read the token details endpoint to understand the response format
3. Write HTML/CSS/JS that fetches from the DexPaprika REST API
4. Use `summary.price_usd` for the price, `summary.24h.volume_usd` for volume, and `summary.24h.last_price_usd_change` for the percentage change
5. Add a `setInterval` for auto-refresh

### Tips for better results

* **Be specific about data fields.** "Show the 24h price change" is better than "show some stats"
* **Name the tokens and networks.** Don't assume the AI knows every address
* **Mention the API by name.** Say "Use the DexPaprika API" so the AI uses the MCP tools or REST endpoints
* **Start simple, then iterate.** Get a working version first, then ask for styling, charts, or more features

***

## Example 2: "Find me the hottest new pools"

### The prompt

```
Use DexPaprika to find pools created in the last 24 hours on Solana
that have more than $10,000 in daily volume and at least 100 transactions.
Show them in a table sorted by volume, with the pool address, DEX, volume,
and transaction count.
```

### What the AI does

The AI will use the filter endpoint:

```
GET /networks/solana/pools/filter?created_after={24h_ago_timestamp}&volume_24h_min=10000&txns_24h_min=100&sort_by=volume_24h&sort_dir=desc
```

Then format the results. It might also follow up with pool detail calls to get token pair names.

***

## Example 3: "Build a price comparison tool"

### The prompt

```
Build a Python script that compares the price of WETH across Ethereum,
Arbitrum, and Base networks. Use DexPaprika batch pricing.
Show the price on each network and highlight the highest and lowest.
```

### What the AI does

1. Finds WETH addresses on each network (via search or by knowing common addresses)
2. Makes three batch pricing calls (one per network)
3. Compares results and formats output

***

## Example 4: "Add a live price ticker"

### The prompt

```
Add a live price ticker to the dashboard that streams real-time prices
for SOL and ETH using the DexPaprika streaming API at
streaming.dexpaprika.com. Use Server-Sent Events.
```

### What the AI does

The AI will use the streaming API:

```javascript theme={null}
const evtSource = new EventSource(
  "https://streaming.dexpaprika.com/stream?method=t_p&chain=solana&address=So11111111111111111111111111111111111111112"
);

evtSource.addEventListener("t_p", (event) => {
  const data = JSON.parse(event.data);
  // data.p is the price as a string
  updatePrice(data.c, data.a, data.p);
});
```

For multiple tokens, the AI should use the POST endpoint with a JSON array.

***

## Iteration tips

Once you have a working first version, iterate with follow-up prompts:

* "Add a chart showing the last 7 days of price history" (AI will use OHLCV endpoint)
* "Show the top 5 pools for each token" (AI will use token pools endpoint)
* "Add error handling for when the API is down"
* "Make it responsive for mobile"
* "Add dark mode"
* "Export the data to CSV"

Each iteration builds on the previous code. The AI already has context about which endpoints to use and what the response formats look like.

***

## Common issues

<AccordionGroup>
  <Accordion title="AI doesn't use DexPaprika">
    Be explicit: "Use the DexPaprika API at api.dexpaprika.com" or "Use the DexPaprika MCP tool." If using an IDE integration, make sure the MCP server is connected and showing as active.
  </Accordion>

  <Accordion title="AI uses wrong endpoint or field names">
    Point the AI to specific documentation: "Check the token endpoint response format at docs.dexpaprika.com" or provide the correct field path directly: "The price is at response.summary.price\_usd, not response.price."
  </Accordion>

  <Accordion title="CORS errors in browser">
    The DexPaprika REST API supports CORS, so browser requests should work. The streaming API also supports CORS. If you see CORS errors, check that the URL is correct (https, not http).
  </Accordion>

  <Accordion title="AI hallucinates endpoints that don't exist">
    If the AI invents endpoints, ground it: "Only use endpoints from the DexPaprika API reference at docs.dexpaprika.com/api-reference/introduction. The available endpoints are: /networks, /search, /networks/{n}/pools, /networks/{n}/tokens/{addr}, /networks/{n}/pools/{addr}/ohlcv, etc."
  </Accordion>
</AccordionGroup>

***

## Next steps

<CardGroup cols={2}>
  <Card title="AI Integration Setup" icon="robot" href="/ai-integration">
    Connect DexPaprika to your AI tool
  </Card>

  <Card title="Common Patterns" icon="book" href="/knowledge-base/common-patterns">
    Standard API workflows to reference in your prompts
  </Card>

  <Card title="Streaming API" icon="signal-stream" href="/streaming/introduction">
    Real-time price streaming for live dashboards
  </Card>

  <Card title="Pool Filtering" icon="filter" href="/tutorials/pool-filtering">
    Advanced pool screening with the filter endpoint
  </Card>
</CardGroup>