MCP Sunucusu

mdui, yapay zeka ajanlarına bileşenler, simgeler, CSS Custom Property'leri ve dokümantasyon sorgulama yetenekleri sağlamak için yerel olarak kullanılabilen özel bir MCP (Model Context Protocol) sunucusu olan @mdui/mcp sunucusunu sunar.

Claude Code, Cursor, GitHub Copilot gibi geliştirme araçlarıyla birlikte çalışarak kod oluşturulmasına yardımcı olabilir ve mdui'nin bileşenleri ile stillerinin daha iyi kullanılmasını sağlayabilir.

Araçlar

mdui'nin MCP sunucusu, yapay zeka ajanlarına aşağıdaki araçları sunar:

• list_components: Tüm mdui bileşenlerini listeler.
• get_component_metadata: Tek bir bileşenin ayrıntılı API meta verilerini alır.
• list_css_classes: Genel CSS sınıf adlarını listeler.
• list_css_variables: Genel CSS Custom Property'lerini listeler.
• list_documents: Tüm dokümanları listeler.
• get_document: Tek bir dokümanın tam içeriğini alır.
• list_icon_codes: Özniteliklerde veya API'lerde kullanılabilecek simge kodlarını listeler.
• list_icon_components: Bağımsız simge bileşenlerini ve bunların ESM içe aktarma ifadelerini listeler.

Kullanım Şekli

MCP sunucusu yalnızca stdio iletimini destekler. VS Code, Cursor, Claude Code, Windsurf, Zed gibi istemcilerde ve stdio protokolünü destekleyen yapay zeka ajanlarında doğrudan kullanılabilir.

VS Code

GitHub Copilot ve GitHub Copilot Chat eklentilerinin yüklü olduğundan emin olun.

1. Proje kök dizininde .vscode/mcp.json dosyası oluşturun ve aşağıdaki yapılandırmayı ekleyin:

   {
     "servers": {
       "mdui": {
         "command": "npx",
         "args": ["-y", "@mdui/mcp"]
       }
     }
   }
   

2. mcp.json dosyasındaki "Başlat" düğmesine tıklayın.

3. GitHub Copilot Chat'te sohbete başlayın.

Cursor

1. Proje kök dizininde .cursor/mcp.json dosyasını oluşturun veya düzenleyin ve aşağıdaki yapılandırmayı ekleyin:

   {
     "mcpServers": {
       "mdui": {
         "command": "npx",
         "args": ["-y", "@mdui/mcp"]
       }
     }
   }
   

2. Ayarlar > Cursor Ayarları > MCP & Entegrasyonlar bölümüne gidin ve mdui sunucusunu etkinleştirin.

3. Cursor Sohbeti'nde sohbete başlayın.

Claude Code

1. Terminalde aşağıdaki komutu çalıştırarak mdui MCP sunucusunu ekleyin:

   claude mcp add mdui -- npx -y @mdui/mcp
   

2. Ardından claude komutunu çalıştırarak oturumu başlatın.

3. İstemleri kullanmaya başlayın.

Windsurf

1. Ayarlar > Windsurf Ayarları > Cascade bölümüne gidin.

2. MCP'leri Yönet'e tıklayın, ardından "Ham yapılandırmayı görüntüle"ye tıklayın ve yapılandırma dosyasına aşağıdakileri ekleyin:

   {
     "mcpServers": {
       "mdui": {
         "command": "npx",
         "args": ["-y", "@mdui/mcp"]
       }
     }
   }
   

   MCP sunucusu otomatik olarak görünmezse, listeyi yenilemek için Yenile düğmesine tıklayabilirsiniz.

3. İstemleri kullanarak sohbete başlayın.

Zed

1. Ayarlar > Ayarları Aç bölümüne gidin ve settings.json dosyasına aşağıdaki yapılandırmayı ekleyin:

   {
     "context_servers": {
       "mdui": {
         "source": "custom",
         "command": "npx",
         "args": ["-y", "@mdui/mcp"]
       }
     }
   }
   

2. İstemleri kullanmaya başlayın.

Özel MCP İstemcisi

Yerel veya geliştirme ortamında özel bir MCP istemcisi kullanırken, bu sunucuyu istemcinin yapılandırma dosyasına ekleyin. Örneğin:

{
  "mcpServers": {
    "mdui": {
      "command": "npx",
      "args": ["-y", "@mdui/mcp"]
    }
  }
}