Practical Guide to Building an AI Visibility Detection Tool with Claude Code

Why You Need an AI Visibility Detection Tool

As Google deeply integrates AI Overview and AI Mode into search results, the logic of brand exposure in search engines is undergoing a fundamental shift. In the past, the goal of SEO was to get web pages ranked at the top of search results. Now, a new question has emerged: when users ask a question, which brands does Google's AI actually mention in its answer? And how many times?

Google AI Overview (formerly known as SGE, or Search Generative Experience) is a search feature officially launched by Google in 2024. It uses large language models to generate a comprehensive answer directly at the top of the search results page, allowing users to get an information summary without clicking any links. AI Mode is an experimental feature Google further rolled out in 2025, enabling users to interact with the search engine in a conversational manner — similar to ChatGPT but powered by Google's search index. The key difference between the two: AI Overview is passively triggered (Google determines which queries are suitable for displaying AI summaries), while AI Mode is a conversational search mode that users actively choose to enter. According to research data, the appearance of AI Overview has caused traditional organic search result click-through rates to drop by approximately 30% on average. This means that if a brand can't appear in AI-generated answers, it may completely "vanish" from the search landscape.

This is exactly the core of the emerging concept of AI Visibility. For brands and marketers, whether or not they appear in AI-generated answers directly impacts their ability to capture user mindshare. This article walks through a practical build of an AI visibility detection tool using Claude Code combined with a SERP API, demonstrating how to create a useful brand monitoring application with almost no manual coding.

What the Tool Can Do

The core functionality of this AI visibility detection app is highly focused: enter a search keyword and one or more brand names, and the tool calls Google's AI Overview and AI Mode interfaces to check how many times those brands are mentioned in the AI-generated answers, highlighting the relevant content.

Take "best laptop for coding" as an example — when checking both Apple and Lenovo simultaneously, the results show that in Google AI Overview, Apple is mentioned 6 times while Lenovo is mentioned only 2 times. The tool not only provides mention counts but also displays specific citation sources and links. Scrolling down reveals the corresponding data from Google AI Mode, making the results from both AI features instantly comparable.

This kind of quantitative comparison is extremely valuable for brands — it intuitively reveals who's content is more "favored" by AI in AI-driven search scenarios, and who has become "invisible" in AI answers.

Prerequisites: Just Two Things

The preparation work for the entire build is extremely simple — you only need two things.

Getting a SERP API Key

SERP API (Search Engine Results Page API) is a category of third-party services that provide structured search engine result data. Taking SerpAPI.com as an example, it works by deploying a large number of proxy servers globally, simulating real users sending requests to search engines like Google, then parsing the returned HTML pages into structured JSON data. This solves several major challenges developers face when scraping Google directly: IP bans, CAPTCHA challenges, geographic restrictions, and complex page structure parsing. For dynamically rendered content like AI Overview and AI Mode, SERP APIs specifically wait for JavaScript execution to complete before extracting data, ensuring they capture the full AI-generated response content along with its citation source links.

After registering on SERPAPI.com, you can get your API Key from the Dashboard — the entire process is very straightforward.

Preparing an AI Coding Assistant

In this example, the tool used is Claude Code, a command-line AI coding tool from Anthropic. Unlike traditional code completion tools (like GitHub Copilot), it can directly read project files, browse web documentation, execute shell commands, and autonomously modify code files within the terminal environment. This capability makes it particularly well-suited for building complete projects from scratch, rather than just completing code snippets.

This "vibe coding" approach is a typical paradigm of AI-assisted development today. The concept of "Vibe Coding" was coined by prominent AI figure Andrej Karpathy in early 2025, referring to a development style where developers no longer write code line by line, but instead describe their intent in natural language and let AI generate and debug the code, while developers focus on reviewing results and guiding direction. This paradigm is especially suitable for prototyping and tool-building scenarios, though production-grade systems still require manual review of AI-generated code for security, performance, and edge case handling.

Driving Development with Natural Language

The entire build process was accomplished almost entirely through natural language instructions. Create a folder named AI visibility in the terminal, enter it, start a Claude Code session, and then describe the requirements in plain language:

• Use Node.js for the backend, vanilla JavaScript for the frontend, keep the project simple;
• This is an AI visibility app that detects Google AI Mode and AI Overview answers;
• Provide documentation links for both the AI Overview and AI Mode endpoints in SERP API, letting Claude Code reference them on its own;
• Usage: enter a keyword and a brand name/URL, then highlight whether that brand is mentioned in the answers.

One noteworthy detail is that the API documentation links were proactively provided to Claude Code. This is a key practice in AI-assisted programming — rather than letting the model guess API usage from memory, feeding it authoritative documentation dramatically reduces the probability of errors. LLM training data has timeliness issues — API parameter formats, endpoint addresses, and authentication methods may have changed after the model's training cutoff date. Providing the latest documentation directly ensures the generated code uses correct interface specifications.

Claude Code immediately began fetching the API documentation and, after receiving authorization, automatically scaffolded the front-end and back-end code structure. It also intelligently recognized the need for a SERP API key and proactively created a .env.example file for configuration. The .env file is a standard practice in Node.js projects for storing environment variables (such as API keys, database connection strings, and other sensitive information). Used with the dotenv library, it avoids hardcoding keys in source code or accidentally committing them to version control systems.

Running and Debugging: AI's Self-Repair Capability

Once the code was generated, all that was needed was to copy .env.example to .env, fill in the key, run npm start, and open localhost:3000. Testing with a search for "Notion," the AI Overview answer returned normally and automatically highlighted brand mention locations.

Here's an important real-world reminder: AI Overview is not available for all queries — many searches won't return AI Overview results. Google decides whether to trigger AI Overview based on multiple factors including query type, region, language, and user intent. For example, factual questions ("What language is Python") are more likely to trigger AI Overview than navigational queries ("GitHub login"), and for certain sensitive topics (medical, legal, and other YMYL areas), Google may choose not to display AI-generated content. Therefore, in actual development, you should have AI add fallback logic to handle cases with no results.

When testing the AI Mode feature, an error occurred. The approach was straightforward — feed the problem back to Claude Code. The AI immediately identified the issue upon actually running the SERP API and completed the fix. This demonstrates a key advantage of Claude Code: it can not only generate code but also perform contextual reasoning after receiving runtime error information, understanding the root cause and making targeted code modifications rather than simply regenerating the entire file. You can also run npm run dev (typically using tools like nodemon for file change monitoring and automatic server restarts) to have server-side changes take effect automatically, further improving debugging efficiency. After the fix, AI Mode results displayed successfully as well. Note that the returned content is in Markdown format by default, and you can have the AI further optimize it into a more user-friendly rendered view.

Iterating New Features: Multi-Brand Comparison

The initial version of the tool only supported single-brand detection, but new requirements could quickly be proposed: support multi-brand search, with comma-separated brand names, and the tool should display whether each brand is mentioned separately.

This feature likewise required only a single natural language description for Claude Code to complete the iteration. During testing, when searching a certain keyword, Notion was mentioned 2 times while Asana was mentioned 20 times — the data clearly indicated Asana's significant visibility advantage in that AI Mode answer. Adding Trello further enabled simultaneous viewing and direct comparison of both AI Overview and AI Mode answers.

This multi-brand comparison feature has tremendous practical value in real marketing scenarios. Brands can regularly track changes in AI visibility trends between themselves and competitors across core keywords, thereby evaluating the effectiveness of their content strategies. For example, if a brand is consistently mentioned at low frequency in AI answers for the keyword "best project management tools," it may indicate room for optimization in content authority, structured data implementation, or topic coverage.

More Possibilities and Reflections

SERP API's search engine API catalog includes other AI results available for querying, such as DuckDuckGo's AI Assist answers and Bing Copilot answers. Developers can absolutely integrate these interfaces into their projects to build a panoramic visibility monitoring tool covering multiple AI search engines. Beyond that, emerging AI search engines like Perplexity and You.com are also rising rapidly — brand AI visibility monitoring should not be limited to Google alone.

The value of this case study lies not just in the tool itself, but in the entirely new development paradigm it demonstrates: from idea to usable product, the entire pipeline is driven by natural language, with AI handling the code implementation while humans only need to handle requirement descriptions, acceptance testing, and iteration direction. For non-professional developers or product people looking to quickly validate ideas, this model dramatically lowers the barrier from zero to one.

At the same time, this tool reflects the profound transformation the SEO industry is undergoing. When the search entry point shifts from "blue link lists" to "AI directly providing answers," brand visibility metrics and optimization strategies both need to be redefined. The industry has already coined a new term — "GEO" (Generative Engine Optimization) — specifically referring to content optimization strategies targeting AI-generated responses. Research shows that AI models tend to cite web pages with high authority (high E-E-A-T scores), well-implemented structured data markup, and content that directly answers user questions. This means brand content strategies need to shift from "optimizing for search engine rankings" to "optimizing for AI citations" — content not only needs to rank well, but must become an authoritative information source that AI models are "willing to cite." Those who can establish AI visibility monitoring capabilities earlier will gain the upper hand in this new battle for attention.

Key Takeaways