MCP Apps ile MCP sunucuları oluşturma

MCP Apps, sunucunuzun ajan ve diğer MCP host'larında doğrudan oluşturulan etkileşimli UI'lar döndürmesini sağlayan resmi bir MCP uzantısıdır.

MCP Apps nedir?

MCP Apps, MCP sunucularının düz metin yerine — ajan, Claude Desktop, VS Code vb. host uygulamasında doğrudan oluşturulan — etkileşimli HTML/JavaScript arayüzleri döndürmesini sağlayan Model Context Protocol'ün resmi bir uzantısıdır.

MCP vs MCP Apps Standart MCP araçları metin veya yapılandırılmış veri döndürür. MCP Apps araçları ek olarak sohbet içinde oluşturulan tamamen etkileşimli bir UI — formlar, paneller, görselleştirmeler — döndürebilir.

Nasıl çalışır?

Araç bir UI kaynağı bildirir

Araç tanımınız, MCP sunucunuzun sunduğu bir ui:// kaynağına işaret eden bir _meta.ui.resourceUri içerir. Bu, uyumlu host'lara aracın bir UI bileşeni olduğunu söyler.

Host UI'yı alır ve oluşturur

LLM aracı çağırdığında host sunucunuzdan HTML'i alır ve bir korumalı alan iframe içinde oluşturur. ajan'da iframe, araç çağrısından sonra sohbette bağımsız bir çıktı olarak görünür. Masaüstünde yan panelde açabilir veya sohbette gösterebilirsiniz.

Çift yönlü iletişim

UI ve host postMessage üzerinden JSON-RPC ile iletişim kurar. Uygulamanız sohbetten çıkmadan araç çağrıları isteyebilir, modelin bağlamını güncelleyebilir ve sonuçlar alabilir.

Sohbette MCP Apps görüntüleme

Bir MCP aracı bir UI kaynağı bildirdiğinde ajan, araç bittikten sonra MCP App'i sohbette bağımsız bir çıktı olarak gösterir. Uygulama, araç çağrısı ayrıntılarının dışında görünür. UI kaynağı olmayan standart MCP araçları düzenli çıktılarını göstermeye devam eder.

Masaüstünde uygulamayı sohbete devam ederken yeniden boyutlandırılabilir bir yan panele taşımak için Yan panelde aç'ı seçin. Sohbete geri döndürmek için Sohbette göster'i seçin.

Güvenlik modeli

MCP Apps korumalı bir ortamda çalışır. Host, uygulamanızın neye erişebileceğini kontrol eder:

Katman	Ne yapar
Iframe korumalı alanı	Uygulamayı üst sayfadan ve diğer sekmelerden yalıtır
Uygulama HTML'i	ajan, MCP sunucunuzun döndürdüğü HTML'i incelemeden veya sterilize etmeden doğrudan korumalı alanda oluşturur
Etkin kaynaklar	Uygulamalar yalnızca entegrasyon için etkinleştirilmiş kaynakları okuyabilir
Denetlenebilir JSON-RPC	Tüm uygulama-host iletişimi günlüğe kaydedilebilir
Onay kapısı	Uygulamalar onay gerektiren araçları çağıramaz veya kaynakları okuyamaz

Kendi uygulamanızı oluşturma

Resmi SDK @modelcontextprotocol/ext-apps'tir. React, Vue, Svelte, Solid, Preact ve vanilla JavaScript ile çalışır.

Temel kalıp: bir araç tanımı, sunucunuzun HTML olarak sunduğu bir ui:// kaynağına işaret eden _meta.ui.resourceUri bildirir. ajan bunu alır ve sohbette bağımsız bir çıktı olarak korumalı alan iframe'de oluşturur. Masaüstünde ayrıca yan panelde açabilirsiniz.

typescript

import {
  registerAppResource,
  registerAppTool,
  RESOURCE_MIME_TYPE,
} from "@modelcontextprotocol/ext-apps/server";

const resourceUri = "ui://my-form";

registerAppTool(
  server,
  "render_form",
  {
    inputSchema: {},
    _meta: { ui: { resourceUri } },
  },
  async () => ({
    content: [{ type: "text", text: "Opening form..." }],
  }),
);

registerAppResource(
  server,
  resourceUri,
  resourceUri,
  { mimeType: RESOURCE_MIME_TYPE },
  async () => ({
    contents: [
      {
        uri: resourceUri,
        mimeType: RESOURCE_MIME_TYPE,
        text: "...",
      },
    ],
  }),
);

MCP Apps Dokümantasyonu — Resmi spesifikasyon, SDK başvurusu ve framework rehberleri
ext-apps GitHub — SDK kaynağı, örnekler ve sorun izleyici

Örnek: ServiceNow MCP Server

ajan ServiceNow MCP Server, ajan içinden ServiceNow kayıtları oluşturmak için OAuth Dynamic Client Registration (DCR) ile MCP Apps formlarını nasıl birleştireceğinizi gösteren bir referans uygulamadır.

Dört araç sunar:

Araç	Açıklama
`get_form_fields`	Bir ServiceNow tablosundan kullanılabilir alanları alır
`render_form`	İsteğe bağlı olarak sohbet bağlamından önceden doldurulmuş etkileşimli bir MCP Apps formu döndürür
`submit_form`	Gönderilen form verisinden ServiceNow'da bir kayıt oluşturur
`update_form`	`render_form` çalıştıktan sonra mevcut bir ServiceNow formundaki alanları günceller

servicenow-mcp-server — Referans uygulama — ServiceNow için OAuth DCR + MCP Apps formları

ajan'a bağlanma

MCP sunucunuz çalıştıktan sonra onu herhangi bir MCP sunucusu gibi ajan'a bağlayın. Kurulum talimatları ve kimlik doğrulama seçenekleri dahil için MCP entegrasyon rehberine bakın.

İlgili dokümantasyon

MCP Entegrasyon Rehberi — MCP sunucularını ajan'a nasıl bağlayacağınız
MCP Sunucu Dizini — Bugün bağlayabileceğiniz doğrulanmış uzak MCP sunucuları
A2A Protocol — Ajanlar arası iletişim