CarCare WebMCP

Inspiration

Vehicle maintenance information is often scattered across receipts, notes, and service records. It can be difficult for drivers to remember what was serviced and what maintenance is coming next.

I wanted to explore how WebMCP could make a normal vehicle maintenance website more useful by allowing an AI agent to understand and interact with the application directly.

What it does

CarCare MCP is a vehicle maintenance dashboard that keeps track of a vehicle and its maintenance history.

Users can view completed services, record new maintenance, and see when upcoming maintenance is due based on mileage.

The application exposes its functionality to AI agents through WebMCP tools. These tools allow an agent to:

• Get vehicle information
• Read maintenance history
• Add maintenance records
• Calculate upcoming maintenance

For example, instead of manually filling out a form, a user can tell an AI agent that an oil change was completed at a certain mileage, and the agent can use the WebMCP tool to add that information to the application.

How I built it

I built CarCare MCP as a lightweight web application using HTML, CSS, and JavaScript.

Maintenance data is stored in the browser using localStorage. The application calculates upcoming maintenance based on the latest service mileage and predefined service intervals.

I then integrated WebMCP using the Model Context API and registered tools with document.modelContext.registerTool(). Each tool includes a description, input schema, and an execute function that connects the AI agent to the same application logic used by the web interface.

The application is deployed on Vercel, and the source code is available on GitHub.

Challenges I ran into

One of the main challenges was understanding how a traditional web application should expose its functionality to an AI agent.

Instead of having an agent rely on clicking buttons or interpreting the visual interface, I needed to think about the application's actions as structured tools with clear descriptions and input schemas.

I also had to test the experimental WebMCP implementation and verify that the browser correctly registered and exposed the tools.

What I learned

This project helped me understand the difference between building a website only for humans and building one that can also be understood and operated by AI agents.

WebMCP allows the application itself to describe the actions an agent can perform. This can make agent interactions more structured and reliable than depending entirely on visual browser automation.

What's next for CarCare MCP

Future versions could support multiple vehicles, customizable maintenance schedules, cloud synchronization, service receipts, and more detailed maintenance recommendations.

The same WebMCP approach could also allow an AI agent to manage a driver's complete maintenance workflow across multiple vehicles.

Built With

• css3
• html5
• javascript
• vercel
• webmcp