MCP Server Picker

A catalogue of servers you could install. Installing one is running someone else’s code with your credentials, so the card leads with publisher and verification rather than with the blurb — which is written by the person asking to be trusted.

src/components/ui/mcp-server-picker.tsx

About

From the component's own source, where it was written.

A catalogue of MCP servers you could install.

Installing an MCP server is running someone else's code with your credentials, and the catalogue is where that decision gets made — so the card leads with provenance rather than with the description. Publisher, whether it is a verified listing, and the exact install target are the three facts that matter; the blurb is written by the same person asking you to trust them.

**Already-installed servers stay in the list, marked.** Filtering them out makes the catalogue lie about what exists, and the most common question here after "what is there" is "which of these do I already have".

There is no one-click install. onInstall is a callback the host decides what to do with — usually showing the command rather than running it, because a catalogue that installs on click is a supply-chain problem with a nice UI.

Install

npx astralyx-ui add mcp-server-picker

Usage

import { McpServerPicker } from '@/components/ui/mcp-server-picker'

<McpServerPicker servers={catalogue} onInstall={(server) => showCommand(server)} />

Composer

Change the props and the source below follows.

filesystem
modelcontextprotocol
48.2k
Read, write and search files under a granted root.
npx -y @modelcontextprotocol/server-filesystem <root>
files
Installed
postgres
modelcontextprotocol
21.4k
Schema introspection and read-only queries.
npx -y @modelcontextprotocol/server-postgres <dsn>
database
linear
linear.app
9.8k
Issues, projects and cycles.
https://mcp.linear.app/sse
issues
web-scraper-pro
anon-dev-2024
120
Scrapes any page and returns the text.
npx -y web-scraper-pro
web

Props

No props to configure.

tsx

<McpServerPicker
  servers={catalogue}
  onInstall={(server) => showCommand(server)}
/>

Examples

Three verified publishers and one that is not

tsx

<McpServerPicker servers={catalogue} onInstall={showCommand} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`McpServerPicker`

Extends Omit<ComponentProps<'div'>, 'onSelect'>.

Prop	Type	Default	Description
servers	CatalogueServer[]	required	{ id, name, publisher, description?, target?, verified?, installs?, tags?, installed? }.
onInstall	(server: CatalogueServer) => void	—	A callback, not an installer. A catalogue that installs on click is a supply-chain problem with a nice UI — hosts usually show the command instead.
searchable	boolean	true	—
searchPlaceholder	string	'Search servers…'	—
searchLabel	string	'Search servers'	—
installLabel	string	'Add'	—
installedLabel	string	'Installed'	—
verifiedLabel	string	'Verified publisher'	—
emptyLabel	string	'No servers match'	—
emptyHint	string	'Try a different word, or clear the search.'	—
formatInstalls	(installs: number) => string	(installs) => installs >= 1000 ? `${(installs / 1000).toFixed(1)}k` : String(installs)	—

Types

`CatalogueServer`

A catalogue of MCP servers you could install.

Field	Type	Description
id	string	—
name	string	—
publisher	string	—
description?	ReactNode	—
target?	string	The command or URL that would be added to the config.
verified?	boolean	Listed by a registry that checks publishers.
installs?	number	Popularity, when the registry reports it.
tags?	string[]	—
installed?	boolean	Hiding them makes the catalogue lie about what exists, and “which of these do I already have” is the second question anyone asks.

Behaviour

Topic	Detail	Description
provenance first	layout decision	Publisher and verification sit above the description. The description is marketing copy from the party asking for trust.