Vibe Coding Web Search: Add a Search API With Cursor, Claude Code or Lovable

You can add web search to an app you are building with an AI tool without writing the code yourself. It takes three steps: create an API key, give your agent the docs and one prompt, and put the key in your app's secrets. That last step is the only one that can go wrong, and this guide shows how to get it right in Cursor, Claude Code and Lovable.

We make Serpex, the search API used in the examples, so read this as a vendor's guide. The steps and settings for each tool come from that tool's own documentation, checked on 24 October 2026.

Two different things "add search" can mean

Decide which one you want before you start, because the setup is different.

Many people want both. They take about five minutes each.

Step 1: Get an API key

1. Sign in at app.serpex.dev with Google or GitHub.
2. Open API Keys in the sidebar and create a key. It starts with sk_.
3. Copy it straight away. The dashboard shows the full key only once.

New accounts get 200 free credits, with no card. A plain search costs 1 credit, so that is 200 searches to try things out.

Treat the key like a password: whoever has it can spend your credits. If it ever leaks, delete it on the API Keys page, create a new one and update it wherever you saved it.

Step 2a: Give your coding agent web search

Coding agents connect to tools through MCP (Model Context Protocol). The Serpex MCP server gives your agent two tools:

• serpex_search searches the web. It can also return the page text of the top 5 or 10 results as Markdown in the same call.
• serpex_extract reads up to 10 pages you already have the links for, as clean Markdown.

The server runs through npx, which comes with Node.js. Install Node.js first if your computer doesn't have it.

Claude Code

Run this once in your terminal, with your own key:

claude mcp add --env SERPEX_API_KEY=sk_your_api_key --transport stdio serpex -- npx -y serpex-mcp

By default this is stored in your user settings for the current project, not in the project's files, so the key won't end up in a repository. Add --scope user to use it in every project.

Cursor

Create ~/.cursor/mcp.json in your home folder, or add to it if it exists:

{
  "mcpServers": {
    "serpex": {
      "command": "npx",
      "args": ["-y", "serpex-mcp"],
      "env": {
        "SERPEX_API_KEY": "sk_your_api_key"
      }
    }
  }
}

Cursor also reads .cursor/mcp.json inside a project, but use the file in your home folder for anything that holds a key. A project folder is the one you push to GitHub or share.

Claude Desktop and other MCP clients

The same block goes in Claude Desktop's config file. Any other MCP client needs three values: command npx, arguments -y serpex-mcp, and the environment variable SERPEX_API_KEY. See the MCP server docs.

What to ask once it's connected

You don't call the tools yourself. Ask in plain language and the agent picks the tool:

• "Search for the current docs of the payments library we use and update our checkout code to match."
• "Search this error message and fix the cause."
• "Read these three pages and summarise what changed in version 4."

Step 2b: Add a search feature to your app

Your agent can write the integration if it has two things: the docs, and clear rules about the key.

The docs. Give it serpex.dev/llms-full.txt: every page of the Serpex docs as one Markdown file, written to be read by AI tools. serpex.dev/llms.txt is the short index if your tool prefers one.

The prompt. Paste this and edit the parts in angle brackets:

Add a web search feature to this app using the Serpex Search API.

Docs (read them first): https://serpex.dev/llms-full.txt

Requirements:
- Call POST https://api.serpex.dev/api/search from server-side code only
  (a server function or API route), never from code that runs in the browser.
- Read the key from a secret named SERPEX_API_KEY and send it as
  "Authorization: Bearer <key>". Ask me to add the secret. Do not ask me
  to paste the key into this chat.
- Send {"q": "<what the user typed>"}. Show each result's title as a link
  to its url, with its snippet underneath.
- If metadata.status is "no_results", show "No results found".
- On 401 show "Search isn't set up", on 402 show "Search is out of credits",
  and on 429 wait the number of seconds in the Retry-After header and try once more.

Lovable

Lovable's docs call this a direct integration: describe the API (paste the prompt above), and when Lovable asks for the key, enter it in the Add secret form, not in the chat. The key is stored in your project's secrets and read by server-side code, so visitors to your app can't see it. Newer Lovable apps use server functions; older React + Vite apps use Edge Functions on the built-in backend. Lovable handles that part.

Cursor or Claude Code, building your own app

The agent will usually put the key in a .env file. Check two things before you push anything:

1. .env is listed in .gitignore, so the key never reaches GitHub.
2. When you deploy, the same SERPEX_API_KEY is added in your hosting provider's environment variables, because the .env file stays on your computer.

Other app builders

The rule is the same in any builder: use its secrets or environment-variable setting, and make sure the search call runs on the server.

The one rule: the key never goes in the page

Anything that runs in the browser can be read by anyone who opens your app, and that includes a key pasted into page code. With your key, a stranger can spend your credits.

Serpex also refuses browser requests from other websites (this is called CORS). So if your app calls the API from the page, the browser blocks the request and the console shows a CORS error. If your agent reports one, the fix is to move the call into a server function. Making the API "accept the browser" is not the fix: that would put the key back in the page.

Before you ship: a short checklist

• Try a real search in your app, and one that should find nothing, to see the "No results found" message.
• Know the three errors. 401 means the key or the secret's name is wrong. 402 means the account is out of credits. 429 means requests are coming too fast. The first tier allows 5 requests per second, and a search with page content counts as 2 or 3 of those. The errors page has the details.
• Know what you pay for. Errors are never charged. If you repeat the same search within 5 minutes, the repeat costs 0. Page content for the top 5 or 10 results costs 3 or 6 credits instead of 1, billed on the pages actually delivered.
• Watch your balance on the dashboard's Billing page.

What it costs after the free credits

Credits are pay-as-you-go, with no subscription, and they don't expire. A plain search costs $0.80, $0.65 or $0.50 per 1,000, with the lower rates on larger top-ups. See pricing.

For a side project, the smallest top-up, $5, buys 6,250 credits: 6,250 plain searches.

No-code automation: n8n

If you build workflows in n8n rather than an app, use the Serpex community node. On self-hosted n8n, go to Settings → Community Nodes → Install and enter n8n-nodes-serpex. You need the Owner or Admin role on the n8n instance to install it.

What makes a search API easy for an AI agent to integrate

If you are comparing APIs for a vibe-coded project, these are the things that decide whether your agent gets it right the first time:

• One endpoint and one required field. The fewer choices, the fewer wrong guesses.
• The docs in one Markdown file the agent can read in a single step.
• An MCP server, so your coding agent can use the API as a tool.
• Errors you can act on: separate codes for a wrong key, no credits and too many requests, plus a Retry-After header.
• Page text in the same call, if your app needs more than snippets. Otherwise your agent has to wire up a second API.

For a wider comparison of search APIs on price, page content and limits, see Best Search APIs for AI Agents and LLMs (2026).

FAQ

What is the easiest web search API to integrate for an AI agent?

The one your agent can set up without guessing: a single endpoint with one required field, docs in one Markdown file, an MCP server, and clear error codes. Serpex has all four (POST /api/search with q, llms-full.txt, serpex-mcp, and separate 401, 402 and 429 errors). Test any API you shortlist with the prompt above.

Do I need to know how to code to add search to my app?

No. Your agent writes the code. You need to do two things yourself: create the key, and put it in your app's secrets rather than the chat. For an MCP server, you also need Node.js installed on your computer.

Can I paste my API key into the chat with Lovable or Cursor?

Don't. Chat history isn't a secret store, and an agent that sees the key may write it into your code. Use Lovable's Add secret form, Cursor's or Claude Code's MCP config on your own computer, or a .env file listed in .gitignore.

Why does my app show a CORS error when it calls the search API?

The call is running in the browser. Move it into a server function or API route that reads the key from your secrets. Our prompt above tells the agent to do that from the start.

Which search API should a coding agent use to read current documentation?

Any search API with an MCP server works. Two things help with documentation: getting the page text along with the search results, so the agent reads the docs page rather than a snippet, and an extract tool for links you already have. With Serpex, that is serpex_search with page content turned on, and serpex_extract.

How much does it cost to add web search to a small app?

Nothing to start: new accounts get 200 free credits. After that, a plain search costs $0.50 to $0.80 per 1,000 depending on top-up size, with no subscription.