Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .dev.vars.example
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
# You can set a password for API access
# PASSWORD=supersecretpassword
4 changes: 3 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
node_modules/*
dist/*
dist
worker-configuration.d.ts
.wrangler
4 changes: 4 additions & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
# Machine-generated file
pnpm-lock.yaml
worker-configuration.d.ts
node_modules/
3 changes: 3 additions & 0 deletions .simple-git-hooks.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default {
"pre-commit": "pnpm lint-staged --config lint-staged.config.mjs",
};
17 changes: 0 additions & 17 deletions Dockerfile

This file was deleted.

2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,4 @@ Copyright (c) 2024 Baby Manisha Sunkara (https://babymanisha.com)

Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
163 changes: 88 additions & 75 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,110 +1,83 @@
# <img src="images/logo.png" alt="logo" height="48"/> mdnlookup
# <img src="images/logo.png" alt="logo" height="48"/> mdnlookup

[![Deploy to Cloudflare](https://deploy.workers.cloudflare.com/button)](https://deploy.workers.cloudflare.com/?url=https%3A%2F%2Fgithub.com%2Fbabymanisha%2Fmdn-lookup)

A tool to fetch and summarize developer documentation from [MDN Web Docs](https://developer.mozilla.org/).

**MDNlookup** is a developer productivity tool that streamlines access to [MDN Web Docs](https://developer.mozilla.org/) documentation directly from your development environment.
**MDNlookup** is a developer productivity tool that streamlines access to [MDN Web Docs](https://developer.mozilla.org/) documentation directly from your development environment.
Designed for seamless integration with MCP-compatible clients and editors like VS Code, mdnlookup enables developers to quickly search for and retrieve concise, relevant documentation summaries for web APIs, JavaScript methods, and other web technologies—without leaving their workflow.

By exposing an MCP-compatible tool server over stdio, mdnlookup makes it easy to automate documentation lookups and integrate them into custom toolchains or editor extensions. This helps developers save time, reduce context switching, and stay focused on coding.
By exposing an MCP-compatible tool server over Streamable HTTP, mdnlookup makes it easy to automate documentation lookups and integrate them into custom toolchains or editor extensions. This helps developers save time, reduce context switching, and stay focused on coding.

## Features

- Search MDN for documentation using a query string.
- Returns a summary (first paragraph) and a link to the full documentation.
- Exposes an MCP-compatible tool server over stdio.
- Exposes an MCP-compatible tool server over Streamable HTTP.

## Available Tools

### mdnlookup

- **Description:** Fetches and summarizes developer documentation from MDN based on a search query.
- **Parameters:**
- `query` (string): The search term or API/method name you want documentation for.
- `query` (string): The search term or API/method name you want documentation for.
- `limit` (number, optional): The maximum number of results to return (default is 5).

## Installation

Clone the repository and install dependencies:

```sh
git clone https://github.com/yourusername/mdn-lookup.git
git clone https://github.com/babymanisha/mdn-lookup.git
cd mdn-lookup
npm install
pnpm install
```

## Usage

This tool is designed to be used as an MCP tool server. You can run it directly using Node:
This tool is designed to be used as an MCP tool server. You can run the server locally.

```sh
node index.js
pnpm dev
```

It will start an MCP server over stdio, ready to accept requests.
Or, you can also deploy it to Cloudflare Workers.

### Example: Configure in MCP Client
```
{
"mcpServers": {
"SmartDeveloperAssistant": {
"command": "node",
"args": [
"</absolute/path/to>/mdn-lookup/index.js"
]
}
}
}
```

VS Code (.vscode/settings.json)
```
"mcp": {
"servers": {
"mdnlookup": {
"type": "stdio",
"command": "node",
"args": ["</absolute/path/to>/mdn-lookup/index.js"]
}
},
"inputs": []
},
```

## Run with Docker

You can use Docker to run the mdnlookup MCP server without installing Node.js or dependencies locally or using https://hub.docker.com/r/babymanisha/mdnlookup

**Pull the Docker image from Docker Hub:**
```sh
docker pull babymanisha/mdnlookup:latest
pnpm run deploy
```

**Or build the Docker image locally:**
```sh
docker build -t mdnlookup .
```
It will start an MCP server over Streamable HTTP, ready to accept requests.

**Run the server:**
```sh
docker run -i babymanisha/mdnlookup:latest
```
_or, if you built locally:_
```sh
docker run -i mdnlookup
### Example: Configure in MCP Client

```json
{
"mcpServers": {
"server1": {
"type": "http",
"url": "http://localhost:5173/mcp" // Or your deployed URL
}
}
}
```

This will start the MCP server over stdio inside the container, ready to be used by any MCP-compatible client or editor (such as VS Code).
VS Code (mcp.json)

To configure VS Code to use the Dockerized server, set the command to:
```json
{
"mcpServers": {
"mdnlookup": {
"command": "docker",
"args": [
"run", "-i", "mdnlookup"
]
}
}
"servers": {
"mdnlookup": {
"type": "http",
"url": "http://localhost:5173/mcp",
// Optional: If your server requires authentication
"headers": {
"X-API-Key": "your-api-key"
}
}
},
"inputs": []
}
```

Expand All @@ -114,23 +87,63 @@ You can use the `mdnlookup` tool by sending a request from any MCP-compatible cl

```json
{
"tool": "mdnlookup",
"params": {
"query": "Array.prototype.map"
}
"tool": "mdnlookup",
"params": {
"query": "Array.prototype.map",
"limit": 5 // Optional, default is 5
}
}
```

...Or simple shell script.

```sh
./test_query.sh WebXR
```

The response will look like:

```json
{
"content": [
{
"type": "text",
"text": "The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.\n\nMore info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map"
"content": [],
"structuredContent": {
"result": [
{
"mdn_url": "https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API/Fundamentals",
"score": 72.50494,
"title": "Fundamentals of WebXR",
"locale": "en-us",
"slug": "web/api/webxr_device_api/fundamentals",
"popularity": 0.0003701797219308471,
"summary": "WebXR, with the WebXR Device API at its core, provides the functionality needed to bring both augmented and virtual reality (AR and VR) to the web. Together, these technologies are referred to as mixed reality (MR) or cross reality (XR). Mixed reality is a large and complex subject, with much to learn and many other APIs to bring together to create an engaging experience for users.",
"highlight": {
"body": [
"<mark>WebXR</mark>, with the <mark>WebXR</mark> Device API at its core, provides the functionality needed to bring both augmented and virtual reality",
"That led to the birth of <mark>WebXR</mark>.",
"<mark>WebXR</mark> application life cycle\nStarting up and shutting down a <mark>WebXR</mark> session\nMovement, orientation, and motion: A <mark>WebXR</mark> example"
],
"title": ["Fundamentals of <mark>WebXR</mark>"]
}
},
{
"mdn_url": "https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API",
"score": 72.48302,
"title": "WebXR Device API",
"locale": "en-us",
"slug": "web/api/webxr_device_api",
"popularity": 0.0014612698655553928,
"summary": "WebXR is a group of standards which are used together to support rendering 3D scenes to hardware designed for presenting virtual worlds (virtual reality, or VR), or for adding graphical imagery to the real world, (augmented reality, or AR). The WebXR Device API implements the core of the WebXR feature set, managing the selection of output devices, render the 3D scene to the chosen device at the appropriate frame rate, and manage motion vectors created using input controllers.",
"highlight": {
"body": [
"The <mark>WebXR</mark> Device API implements the core of the <mark>WebXR</mark> feature set, managing the selection of output devices, render the 3D",
"Foundations and basics\nFundamentals of <mark>WebXR</mark>\nMatrix math for the <mark>web</mark>\n<mark>WebXR</mark> application life cycle\nCreating a mixed reality",
"experience\nStarting up and shutting down a <mark>WebXR</mark> session\nGeometry and reference spaces in <mark>WebXR</mark>\nSpatial tracking in <mark>WebXR</mark>"
],
"title": ["<mark>WebXR</mark> Device API"]
}
}
]
}
]
}
```

Expand All @@ -157,6 +170,7 @@ Below are screenshots of the tool in action for various queries:
## Configuration

No additional configuration is required. The tool uses the MDN public API and fetches documentation in English.
You can optionally set `PASSWORD` environment variable. If set, the server will require `X-API-Key` header with the correct password for authentication.

## License

Expand All @@ -173,4 +187,3 @@ Thanks
Happy Coding!!

[Baby Manisha Sunkara 👩🏻‍💻](https://babymanisha.com)

50 changes: 0 additions & 50 deletions index.js

This file was deleted.

8 changes: 8 additions & 0 deletions lint-staged.config.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
/**
* @type {import("lint-staged").Configuration}
*/
export default {
"src/**/*.{js,json,md}": "prettier --write",
"src/**/*.ts":
"cross-env NODE_OPTIONS=--experimental-strip-types prettier --write",
};
Loading