2nd Prize
baseline-mcp
MCP server for baseline data that's more than just a wrapper
Core trick
Exposes web-features compatibility data through MCP tools that compute browser-support minimums server-side before the LLM sees results.
Tags
Built with
elevenlabsfirebaseflowgeminigemini-cligoogleaistudioimagenjavascriptlyriamcpmusicfxdjnetlifysveltesveltekittsveoveo2veo3whisper
Description
Baseline MCP Server
What it does
This project is an MCP server that provides a set of tools and prompts for querying information about Baseline web features. It can be used by AI assistants to answer questions about web standards, browser compatibility, and feature details. It also includes a demo client that showcases the server's capabilities.
Inspiration
The inspiration for this project was to explore the interaction between Baseline and Model Context Protocol (MCP) while building a practical tool for web developers. I wanted to create a server that could provide accurate and up-to-date information about Baseline web features, empowering AI assistants to give better, more informed answers to developers' questions.
An AI Wrangler's Perspective
As an "AI Wrangler", I'm a firm believer in an AI-assisted future. I know that the key to unlocking the full potential of AI is providing it with the right context. This project is a direct reflection of that philosophy. By creating an MCP server for Baseline web features, I'm providing a structured and reliable context that AI assistants can use to become more effective partners in the development process.
This isn't just a simple data wrapper on the Baseline data. It makes use of the unique opportunities that AI provides to put the Baseline data to use even before it gets into the hands of the LLM. Tools like
suggest-baseline-features
and
min-browser-support-report
are examples of how the server uses its own intelligence to process and analyze the data, providing more than just raw information. This pre-processing step is crucial for making the data more digestible and useful for the LLM, further enhancing its capabilities.
What I Learned
This project was a huge learning experience. While an avid user of MCP, I had never built a server or a client myself, so that was a steep hill to climb. I dove deep into the
@modelcontextprotocol/sdk
and learned the ins and outs of creating a server that can communicate with MCP-compatible clients.
I also got to see how AI fits into the creative process. I used Google Veo, Imagen and Lyria to bring my video's vision to life, which was an eye-opening experience. It showed me how AI can be a powerful tool for creativity, not just for technical tasks.
Accomplishments that we're proud of
Like many developers, I have a graveyard of unfinished projects. Getting this project to the finish line, in a state that I can actually be proud of, is a huge accomplishment for me. It's a motivator, not just for future coding projects, but for other parts of my life as well. It's a reminder that with focus and perseverance, it's possible to see things through to the end.
How I Built It
The project is built on a foundation of modern web technologies:
Node.js and TypeScript:
The MCP server is a Node.js application written in TypeScript, providing a robust and powerful backend.
@modelcontextprotocol/sdk:
This was the core library for building the MCP server.
web-features:
This package from the Baseline project is the data source for all the web features information.
SvelteKit:
The demo client is a modern web application built with SvelteKit.
Netlify & Firebase:
The project is deployed on Netlify and Firebase, making it accessible to demo.
Challenges I Faced
The biggest challenge was the learning curve of MCP. With no prior experience building an MCP server or client, I had to learn everything from the ground up. It was a difficult but ultimately rewarding process.
Another significant challenge was the client-server integration. Getting the client and server to communicate seamlessly, not just on my local machine but also over the internet, was a painful endeavor. There was a lot of debugging and head scratching involved, but seeing it all come together and work for others to enjoy made it all worthwhile.
What's next for baseline-mcp
I'm excited to see what people think of the project and I'm very open to feedback and improvements. As we continue to make our way through my favorite month of the open-source year, Hacktoberfest, I encourage everyone to try it out, file issues, and contribute to making it even better.
README excerpt
<p align="center">
<img src="video-assets/images/mcp.svg" alt="MCP Logo" width="200">
</p>
# Baseline MCP Server
A server for querying baseline web features data. It is built using the `@modelcontextprotocol/sdk` and uses the [`web-features`](https://www.npmjs.com/package/web-features) package as a data source. It was built for the [Baseline Tooling 2025 Hackathon](https://baseline.devpost.com/).
## Prerequisites
- For local development, you will also need Node.js and npm.
## Usage
There are two ways to use the Baseline MCP Server:
1. **Demo Client:** Try the demo client at [https://baseline-mcp-demo.web.app/](https://baseline-mcp-demo.web.app/).
2. **Your Own Client:** You can connect your own MCP-compatible client to the server. See the "Connecting a Client" section below for details.
### Connecting a Client
Use the accordion below to configure your client.
<details>
<summary>Connect with Gemini CLI & Gemini Code Assist</summary>
In your `~/.gemini/settings.json`, add one of the following objects to the `mcpServers` array.
```json
{
"name": "baseline-mcp",
"command": ["npx", "mcp-remote", "https://baseline-mcp.netlify.app/mcp"]
}
```
</details>
<details>
<summary>Connect with VS Code Copilot</summary>
In your `settings.json` or `.vscode/mcp.json`, add the following configuration.
```json
"mcp": {
"servers": {
"baseline-mcp": {
"command": "npx",
"args": ["mcp-remote", "https://baseline-mcp.netlify.app/mcp"]
}
}
}
```
</detail