Skip to content

Commit 6d0e066

Browse files
vemonetvemonet
committed
initial commit
0 parents  commit 6d0e066

41 files changed

Lines changed: 10368 additions & 0 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.dockerignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.react-router
2+
build
3+
node_modules
4+
README.md

‎.github/workflows/deploy.yml‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
name: Deploy to GitHub Pages
2+
on:
3+
push:
4+
branches: ['main']
5+
workflow_dispatch:
6+
7+
permissions:
8+
contents: read
9+
pages: write
10+
id-token: write
11+
concurrency:
12+
group: 'pages'
13+
cancel-in-progress: false
14+
15+
jobs:
16+
tests:
17+
name: ✅ Run tests
18+
runs-on: ubuntu-latest
19+
steps:
20+
- uses: actions/checkout@v5
21+
- uses: actions/setup-node@v5
22+
with:
23+
node-version: lts/*
24+
- name: Install dependencies
25+
run: npm ci
26+
- name: Run lint
27+
run: npm run lint
28+
- name: Run type check
29+
run: npm run typecheck
30+
31+
deploy:
32+
name: 📦 Build and deploy to GitHub Pages
33+
needs: tests
34+
environment:
35+
name: github-pages
36+
url: ${{ steps.deployment.outputs.page_url }}
37+
runs-on: ubuntu-latest
38+
steps:
39+
- name: Checkout
40+
uses: actions/checkout@v5
41+
- name: Setup Pages
42+
uses: actions/configure-pages@v5
43+
- uses: actions/setup-node@v5
44+
with:
45+
node-version: lts/*
46+
47+
- name: Install dependencies
48+
run: npm ci
49+
50+
- name: Build demo website
51+
run: npm run build
52+
53+
- name: Upload artifact
54+
uses: actions/upload-pages-artifact@v4
55+
with:
56+
path: './build/client'
57+
58+
- name: Deploy to GitHub Pages
59+
id: deployment
60+
uses: actions/deploy-pages@v4

‎.gitignore‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.DS_Store
2+
.env
3+
/node_modules/
4+
5+
# React Router
6+
/.react-router/
7+
/build/

‎.husky/pre-commit‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
npx lint-staged
2+
npm run typecheck

‎Dockerfile‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
FROM node:20-alpine AS development-dependencies-env
2+
COPY . /app
3+
WORKDIR /app
4+
RUN npm ci
5+
6+
FROM node:20-alpine AS production-dependencies-env
7+
COPY ./package.json package-lock.json /app/
8+
WORKDIR /app
9+
RUN npm ci --omit=dev
10+
11+
FROM node:20-alpine AS build-env
12+
COPY . /app/
13+
COPY --from=development-dependencies-env /app/node_modules /app/node_modules
14+
WORKDIR /app
15+
RUN npm run build
16+
17+
FROM node:20-alpine
18+
COPY ./package.json package-lock.json /app/
19+
COPY --from=production-dependencies-env /app/node_modules /app/node_modules
20+
COPY --from=build-env /app/build /app/build
21+
WORKDIR /app
22+
CMD ["npm", "run", "start"]

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2025-present Vincent Emonet
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
# 🔌 MCP registry UI
2+
3+
Unofficial web UI to explore the [official registry](https://github.com/modelcontextprotocol/registry) for [Model Context Protocol (MCP)](https://modelcontextprotocol.io/) servers.
4+
5+
It lets you explore available MCP servers and easily install them into compatible clients such as [Visual Studio Code](https://code.visualstudio.com/docs/copilot/customization/mcp-servers) or [Cursor](https://cursor.com/docs/context/mcp).
6+
7+
- 🌍 Explore all MCP servers published to the official MCP registry
8+
- 🔌 Point the web UI at any compatible registry URL
9+
- 🔎 Search by server name, and filter by last published date
10+
- 📥 Install MCP servers into compatible clients in 1 click (VSCode and Cursor)
11+
- 🧩 Build a stack from selected MCP servers, and export to VSCode `mcp.json`, or Cursor config formats
12+
- 🦊 Runs entirely in the browser, and fetches data directly from [registry.modelcontextprotocol.io](https://registry.modelcontextprotocol.io/docs)
13+
14+
> [!IMPORTANT]
15+
>
16+
> Contributions welcome, in particular regarding integration of new client install links.
17+
18+
## 🧑‍💻 Development
19+
20+
### 📥 Installation
21+
22+
Install dependencies:
23+
24+
```sh
25+
npm i
26+
```
27+
28+
### ⚡️ Start server in development
29+
30+
Start the development server with HMR (Hot Module Replacement):
31+
32+
```sh
33+
npm run dev
34+
```
35+
36+
Your application will be available at `http://localhost:5173`.
37+
38+
> [!TIP]
39+
>
40+
> Create new UI components with [shadcn/ui](https://ui.shadcn.com/docs/components)
41+
>
42+
> ```sh
43+
> npx shadcn@latest add button
44+
> ```
45+
46+
### 🧹 Format, lint and check types
47+
48+
Format and lint with `prettier` and `eslint`:
49+
50+
```sh
51+
npm run fmt
52+
```
53+
54+
Check types with TypeScript:
55+
56+
```sh
57+
npm run typecheck
58+
```
59+
60+
> [!NOTE]
61+
>
62+
> Formatting and type checking will be run automatically when you commit with `husky` and `lint-staged`.
63+
64+
### ⏫ Upgrade dependencies
65+
66+
Upgrade dependencies to the latest versions listed in `package.json`:
67+
68+
```sh
69+
npm run upgrade
70+
```
71+
72+
### 📦 Building for Production
73+
74+
Create a production build:
75+
76+
```sh
77+
npm run build
78+
```
79+
80+
> [!TIP]
81+
>
82+
> Test it with:
83+
>
84+
> ```sh
85+
> npx http-server build/client
86+
> ```
87+
88+
> [!NOTE]
89+
>
90+
> If you're familiar with deploying Node applications, the built-in app server is production-ready. Deploy the `build` folder.
91+
92+
### 🐳 Docker Deployment
93+
94+
To build and run using Docker:
95+
96+
```bash
97+
docker build -t mcp-registry-app .
98+
```
99+
100+
Run the container:
101+
102+
```sh
103+
docker run -p 3000:3000 mcp-registry-app
104+
```
105+
106+
## ✅ To do
107+
108+
- [ ] Enable browsing server versions (for example: add a dedicated page per server)
109+
- [ ] Improve filtering: filter by status and server type (stdio, http, sse)

‎app/app.css‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
@import 'tailwindcss';
2+
@import 'tw-animate-css';
3+
4+
@custom-variant dark (&:is(.dark *));
5+
6+
@theme {
7+
--font-sans:
8+
'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
9+
'Noto Color Emoji';
10+
}
11+
12+
html,
13+
body {
14+
@apply bg-white dark:bg-gray-950;
15+
overscroll-behavior: none;
16+
17+
@media (prefers-color-scheme: dark) {
18+
color-scheme: dark;
19+
}
20+
}
21+
22+
@theme inline {
23+
--radius-sm: calc(var(--radius) - 4px);
24+
--radius-md: calc(var(--radius) - 2px);
25+
--radius-lg: var(--radius);
26+
--radius-xl: calc(var(--radius) + 4px);
27+
--color-background: var(--background);
28+
--color-foreground: var(--foreground);
29+
--color-card: var(--card);
30+
--color-card-foreground: var(--card-foreground);
31+
--color-popover: var(--popover);
32+
--color-popover-foreground: var(--popover-foreground);
33+
--color-primary: var(--primary);
34+
--color-primary-foreground: var(--primary-foreground);
35+
--color-secondary: var(--secondary);
36+
--color-secondary-foreground: var(--secondary-foreground);
37+
--color-muted: var(--muted);
38+
--color-muted-foreground: var(--muted-foreground);
39+
--color-accent: var(--accent);
40+
--color-accent-foreground: var(--accent-foreground);
41+
--color-destructive: var(--destructive);
42+
--color-border: var(--border);
43+
--color-input: var(--input);
44+
--color-ring: var(--ring);
45+
--color-chart-1: var(--chart-1);
46+
--color-chart-2: var(--chart-2);
47+
--color-chart-3: var(--chart-3);
48+
--color-chart-4: var(--chart-4);
49+
--color-chart-5: var(--chart-5);
50+
--color-sidebar: var(--sidebar);
51+
--color-sidebar-foreground: var(--sidebar-foreground);
52+
--color-sidebar-primary: var(--sidebar-primary);
53+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
54+
--color-sidebar-accent: var(--sidebar-accent);
55+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
56+
--color-sidebar-border: var(--sidebar-border);
57+
--color-sidebar-ring: var(--sidebar-ring);
58+
}
59+
60+
:root {
61+
--radius: 0.625rem;
62+
--background: oklch(1 0 0);
63+
--foreground: oklch(0.145 0 0);
64+
--card: oklch(1 0 0);
65+
--card-foreground: oklch(0.145 0 0);
66+
--popover: oklch(1 0 0);
67+
--popover-foreground: oklch(0.145 0 0);
68+
--primary: oklch(0.205 0 0);
69+
--primary-foreground: oklch(0.985 0 0);
70+
--secondary: oklch(0.97 0 0);
71+
--secondary-foreground: oklch(0.205 0 0);
72+
--muted: oklch(0.97 0 0);
73+
--muted-foreground: oklch(0.556 0 0);
74+
--accent: oklch(0.97 0 0);
75+
--accent-foreground: oklch(0.205 0 0);
76+
--destructive: oklch(0.577 0.245 27.325);
77+
--border: oklch(0.922 0 0);
78+
--input: oklch(0.922 0 0);
79+
--ring: oklch(0.708 0 0);
80+
--chart-1: oklch(0.646 0.222 41.116);
81+
--chart-2: oklch(0.6 0.118 184.704);
82+
--chart-3: oklch(0.398 0.07 227.392);
83+
--chart-4: oklch(0.828 0.189 84.429);
84+
--chart-5: oklch(0.769 0.188 70.08);
85+
--sidebar: oklch(0.985 0 0);
86+
--sidebar-foreground: oklch(0.145 0 0);
87+
--sidebar-primary: oklch(0.205 0 0);
88+
--sidebar-primary-foreground: oklch(0.985 0 0);
89+
--sidebar-accent: oklch(0.97 0 0);
90+
--sidebar-accent-foreground: oklch(0.205 0 0);
91+
--sidebar-border: oklch(0.922 0 0);
92+
--sidebar-ring: oklch(0.708 0 0);
93+
}
94+
95+
.dark {
96+
--background: oklch(0.145 0 0);
97+
--foreground: oklch(0.985 0 0);
98+
--card: oklch(0.205 0 0);
99+
--card-foreground: oklch(0.985 0 0);
100+
--popover: oklch(0.205 0 0);
101+
--popover-foreground: oklch(0.985 0 0);
102+
--primary: oklch(0.922 0 0);
103+
--primary-foreground: oklch(0.205 0 0);
104+
--secondary: oklch(0.269 0 0);
105+
--secondary-foreground: oklch(0.985 0 0);
106+
--muted: oklch(0.269 0 0);
107+
--muted-foreground: oklch(0.708 0 0);
108+
--accent: oklch(0.269 0 0);
109+
--accent-foreground: oklch(0.985 0 0);
110+
--destructive: oklch(0.704 0.191 22.216);
111+
--border: oklch(1 0 0 / 10%);
112+
--input: oklch(1 0 0 / 15%);
113+
--ring: oklch(0.556 0 0);
114+
--chart-1: oklch(0.488 0.243 264.376);
115+
--chart-2: oklch(0.696 0.17 162.48);
116+
--chart-3: oklch(0.769 0.188 70.08);
117+
--chart-4: oklch(0.627 0.265 303.9);
118+
--chart-5: oklch(0.645 0.246 16.439);
119+
--sidebar: oklch(0.205 0 0);
120+
--sidebar-foreground: oklch(0.985 0 0);
121+
--sidebar-primary: oklch(0.488 0.243 264.376);
122+
--sidebar-primary-foreground: oklch(0.985 0 0);
123+
--sidebar-accent: oklch(0.269 0 0);
124+
--sidebar-accent-foreground: oklch(0.985 0 0);
125+
--sidebar-border: oklch(1 0 0 / 10%);
126+
--sidebar-ring: oklch(0.556 0 0);
127+
}
128+
129+
@layer base {
130+
* {
131+
@apply border-border outline-ring/50;
132+
}
133+
body {
134+
@apply bg-background text-foreground;
135+
}
136+
code {
137+
@apply rounded bg-zinc-900 px-[0.3rem] py-[0.2rem] font-mono;
138+
}
139+
}

0 commit comments

Comments
 (0)