Inspiration
AI API pricing is fragmented. One model can appear across several providers at very different prices. If you want to compare them, you may need to open several sites, understand different pricing formats, and calculate the cost of your workload.
I had built AI API Prices as a website for comparing published inference prices before this challenge. The WebMCP Challenge gave me a reason to test whether an agent could use the same product without pretending to be a person clicking through it.
I chose price comparison because the task needs little explanation. You ask for a model or a workload, and you can see the value of WebMCP in one short interaction.
What it does
You can search for a model on AI API Prices and compare provider prices in the browser.
With WebMCP enabled, your agent gets five tools built on the same pricing data:
- find models and prices
- compare providers for one model
- calculate a workload cost from input and output token counts
- compare models for the same workload
- open the matching model or provider view on the page
Before I added these tools, an agent had to infer meaning from the page and interact with the interface like a person, or the user had to carry information between the chat and the site.
The WebMCP tools give the agent explicit actions and structured results. You can ask for the research or calculation in chat, then continue on the website with the relevant view open.
How I built it
I built the site with Next.js, React, TypeScript and Node.js.
I connected the five WebMCP tools to the same normalized catalogue, provider comparison rules and workload calculations used by the browser interface. I kept one pricing system for both humans and agents.
At submission time, users can compare published prices from 12 AI inference providers.
I started the project before the challenge and added the WebMCP integration during the submission period. You can verify both stages in the dated commit history of the public repository.
Challenges I ran into
A live ChatGPT test exposed the most useful bug I found during the challenge.
ChatGPT found the cheapest providers for a model, then handed the model name to the provider directory. The answer was right, but the page showed no matching provider because the two views expect different kinds of queries.
I changed the handoff contract so a resolved model opens the model comparison view. I kept provider-name searches in the provider directory and added regression tests for both paths.
I then repeated the same test in ChatGPT's in-app browser and confirmed that the agent's answer and the page state matched.
Accomplishments I'm proud of
I am most proud of the handoff between the agent and the regular website.
You can ask an agent to compare prices or calculate a workload cost, get the answer in chat, and continue on the site with the relevant model open.
I also kept the WebMCP tools tied to the product's existing pricing logic. I did not create separate data or calculations for the challenge demo.
What I learned
I had heard of WebMCP before this challenge, but I had not used it.
Working on AI API Prices gave me a practical model for agent support on websites: give the agent explicit actions over product logic you already use, then return the user to a page state where they can continue the task.
That approach let me keep the existing human interface while giving agents access to the same pricing work.
What's next for AI API Prices
I plan to expand price coverage and improve data quality after the challenge.
I also want to keep testing handoffs where an agent handles the research or calculation and the user continues the task in the browser.
Built With
- docker
- github
- next.js
- node.js
- react
- typescript
- vitest
- webmcp
Log in or sign up for Devpost to join the conversation.