DEV Community

Cover image for Protocol Launcher Series: One-Click Setup of Cherry Studio MCP Services and AI Models
zhensherlock
zhensherlock

Posted on

Protocol Launcher Series: One-Click Setup of Cherry Studio MCP Services and AI Models

#javascript #typescript #ai #webdev

In the previous article, we introduced how Protocol Launcher generates app-launch links in a type-safe way. Today, we’ll dive into the first stop of this series: Cherry Studio.

Cherry Studio Protocol

Cherry Studio is a powerful desktop AI client. It supports connecting to multiple AI model providers (such as OpenAI, Anthropic, DeepSeek, etc.) and has full support for the MCP (Model Context Protocol).

However, manually configuring an MCP server or AI provider in Cherry Studio often requires filling out a lot of form fields: name, description, command, arguments, environment variables, base URL… A small mistake can easily lead to configuration failures.

Now, with Protocol Launcher, you can wrap all these complex settings into a single URL link and achieve “one-click installation”.

Core Capabilities: installMCP and installProvider

Protocol Launcher provides a dedicated protocol-launcher/cherry-studio module for Cherry Studio with the following core features:

  1. Automatic MCP server configuration: Supports multiple transport protocols such as stdio, sse, and streamableHttp.
  2. Batch installation: Install multiple MCP servers in one go.
  3. One-click import of AI providers: Quickly configure model API keys and proxy/base URLs.

Quick Start

First, make sure you have installed the package in your project:

npm install protocol-launcher
Enter fullscreen mode Exit fullscreen mode

In your code, you can choose between two import styles depending on your needs:

  • On-demand imports (via subpaths) with tree shaking for smaller bundle size.
  • Full imports (from the root package) with simpler syntax but including all supported app logic. 
// ✅ Recommended: load only the Cherry Studio module on demand
import { installMCP, installProvider } from 'protocol-launcher/cherry-studio'

// You can also import from the root package, but this will include all app modules
// import { cherryStudio } from 'protocol-launcher'
Enter fullscreen mode Exit fullscreen mode

Scenario 1: Install an STDIO MCP Service

If you’ve developed a locally running MCP service (for example, one started via npx), you can use the following code to generate an installation link. By adding parameters such as logoUrl, description, and tags, users will see a professional, trustworthy branded card during installation:

import { installMCP } from 'protocol-launcher/cherry-studio'

const url = installMCP({
  name: 'server-everything',
  description:
    'This MCP server tries to exercise all features of the MCP protocol. It is not only a useful server, but also a powerful testing tool for MCP client builders.',
  type: 'stdio',
  command: 'npx',
  args: ['-y', '@modelcontextprotocol/server-everything'],
  registryUrl: 'https://registry.npmmirror.com',
  provider: 'Anthropic',
  providerUrl: 'https://modelcontextprotocol.io/',
  logoUrl: 'https://avatars.githubusercontent.com/u/182288589?s=200&v=4',
})
Enter fullscreen mode Exit fullscreen mode

Scenario 2: Batch Install Multiple MCP Services

For enterprise use cases, you may want to guide users to install a whole toolset at once. By enriching fields like tags and providerUrl, you can achieve better categorization, display, and quick navigation:

import { installMCP } from 'protocol-launcher/cherry-studio'

const url = installMCP({
  mcpServers: {
    'qcc-company-basic': {
      name: 'QCC Company Info MCP',
      description:
        'The Company Info MCP provides comprehensive enterprise profiling and insights, helping you quickly verify business authenticity, assess stability and development trajectory, and provide solid data support for your business decisions.',
      type: 'streamableHttp',
      baseUrl: 'https://mcp.qcc.com/basic/stream',
      headers: {
        Authorization: 'YOUR_TOKEN',
      },
      provider: 'QCC',
      providerUrl: 'https://openapi.qcc.com/mcpTools?service=basic',
      logoUrl: 'https://openapi.qcc.com/favicon.ico',
      tags: ['company-basic', 'enterprise-info'],
      timeout: 30,
    },
    'qcc-company-risk': {
      name: 'QCC Company Risk MCP',
      description:
        'The Company Risk MCP provides a comprehensive enterprise risk scan, identifying credit and compliance issues across legal, administrative, and operational dimensions. It helps you accurately evaluate the reliability of partners and avoid business pitfalls and associated risks.',
      type: 'sse',
      baseUrl: 'https://mcp.qcc.com/basic/sse',
      headers: {
        Authorization: 'YOUR_TOKEN',
      },
      provider: 'QCC',
      providerUrl: 'https://openapi.qcc.com/mcpTools?service=risk',
      logoUrl: 'https://openapi.qcc.com/favicon.ico',
      tags: ['company-risk', 'risk-info'],
      timeout: 30,
    },
  },
})
Enter fullscreen mode Exit fullscreen mode

Scenario 3: Configure an AI Provider

Besides MCP, you can also guide users to configure model providers. For example, configuring DeepSeek:

import { installProvider } from 'protocol-launcher/cherry-studio'

const url = installProvider({
  id: 'deepseek',
  baseUrl: 'https://api.deepseek.com',
  apiKey: 'sk-xxxxxx',
})
Enter fullscreen mode Exit fullscreen mode

Why Protocol Launcher?

  1. Excellent visual presentation: By providing logoUrl, description, and tags, users in Cherry Studio no longer see plain code, but information-rich configuration cards with official branding and clear feature descriptions. This professional look greatly increases user trust and willingness to adopt.

Cherry Studio MCP card display
Image: Cherry Studio MCP card after filling in all parameters — professional and trustworthy

  1. Enhanced interactivity: Parameters such as providerUrl can render shortcut buttons in the app, allowing users to jump to the official website or documentation center with one click.
  2. Type safety: While writing configurations, your IDE can automatically hint which fields are required (for example, stdio must have command, while sse must have baseUrl).
  3. Automatic encoding and Unicode support: You no longer need to manually call encodeURIComponent; Protocol Launcher automatically handles all special characters. More importantly, it fully supports CJK characters. Whether you use Chinese descriptions, Japanese tags, or Korean provider names, you can be sure there will be no garbled text when launching the application.
  4. Extreme tree shaking: Protocol Launcher adopts a modular design and supports tree shaking to minimize bundle size:
    • Recommended: Use subpath imports (such as import { ... } from 'protocol-launcher/cherry-studio'). Build tools will only include the Cherry Studio–related code and will not pull in logic for other apps.
    • Full import: For simple scripts or demos, you can also import from the root package (such as import { cherryStudio } from 'protocol-launcher'), but this includes all supported app modules. For production, it is recommended to use subpath imports.

Conclusion

With Protocol Launcher, developers can dramatically lower the barrier for users to adopt MCP services. Whether you’re adding an “Add to Cherry Studio” button in documentation or distributing configurations via automation scripts, it is the most elegant option.

🔗 Related Links

Top comments (0)