Skip to content
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.
Technickel-Dev/baseline-mcp★ 74 forksTypeScriptMITCreated Sep 21, 2025 · last push Oct 26, 2026

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

Team