AnmeldenAPI-Key holen

MCP Apps

MCP Apps: interaktive Karten im Chat

MCP Apps lassen einen MCP-Server in der Unterhaltung eine interaktive Oberfläche statt reinem Text anzeigen. Ein Tool verweist auf eine HTML-Ressource, und die KI-App stellt sie in einem Sandbox-Frame dar.

WebKnox zu Ihrer KI-App hinzufügenBeispiele ansehen
In Ihrer KI-AppMCP App
Ravens vs crows

Ravens are generally larger and heavier-billed than crows. Ravens often have wedge-shaped tails and deeper calls, while crows commonly make a familiar caw. Size: Generally larger (Ravens), Generally smaller (Crows) Bill: Heavier, more curved (Ravens), Usually slimmer (Crows) Tail: Often wedge-shaped (Ravens), Usually fan-shaped (Crows) Call: Deep croak (Ravens), Often a caw (Crows)

Beispiele

Was eine MCP App anzeigen kann

Das sind aufgezeichnete WebKnox-Antworten, dargestellt vom selben <webknox-answer>-Element wie die WebKnox MCP App. Öffnen Sie eine davon im Answer Lab.

12 recipes for chicken pasta. The best matches: Pasta With Chicken and Mushrooms (463 kcal); Penne Pasta With Chicken And Mushrooms (834 kcal); Chicken Ragu w Rigatoni (605 kcal); Chicken Teriyaki with Soba Noodles (696 kcal); Chicken Pasta Primavera - Flower Patch Farmgirl Style (427 kcal).

Chicken pasta recipesDaylight#0e8a63

Ravens are generally larger and heavier-billed than crows. Ravens often have wedge-shaped tails and deeper calls, while crows commonly make a familiar caw. Size: Generally larger (Ravens), Generally smaller (Crows) Bill: Heavier, more curved (Ravens), Usually slimmer (Crows) Tail: Often wedge-shaped (Ravens), Usually fan-shaped (Crows) Call: Deep croak (Ravens), Often a caw (Crows)

Ravens vs crowsPlayful

Here are some pictures of northern lights. 039 Northern lights over Mývatn (Iceland) Photo by Giles Laurent (Giles Laurent, CC BY-SA 4.0): https://commons.wikimedia.org/wiki/File:039_Northern_lights_over_M%C3%BDvatn_(Iceland)_Photo_by_Giles_Laurent.jpg Maardu Northern lights — Estonia, 2022 (Maxim Bilovitskiy, CC BY 4.0): https://commons.wikimedia.org/wiki/File:Maardu_Northern_lights_%E2%80%94_Estonia,_2022.jpg Aurora borealis over Eielson Air Force Base, Alaska (United States Air Force photo by Senior Airman Joshua Strang, Public domain): https://commons.wikimedia.org/wiki/File:Aurora_borealis_over_Eielson_Air_Force_Base,_Alaska.jpg Aurora australis dancing over an LED illuminated igloo (Ross Burgener, Public domain): https://commons.wikimedia.org/wiki/File:Aurora_australis_dancing_over_an_LED_illuminated_igloo.jpg Aurora and perseids (Stephan Sprinz, CC BY 4.0): https://commons.wikimedia.org/wiki/File:Aurora_and_perseids.jpg Multicolored aurora borealis pillar over Brastad (W.carter, CC BY-SA 4.0): https://commons.wikimedia.org/wiki/File:Multicolored_aurora_borealis_pillar_over_Brastad.jpg

Show me pictures of the northern lightsMidnight

703 games for cozy farming. The best matches: Palia (rated 89, free to play); Grimshire (rated 98, $8.46); Wylde Flowers (rated 96, $16.99); Roots of Pacha (rated 90, $14.30); Pumpkin Panic (rated 96, free to play).

Cozy farming gamesKinder-Tablet

23 artworks for ships at sea. The best matches: Ship at Sea (Albert Ernest Markes, 1901); Ships in a Turbulent Sea (Johannes Christiaan Schotel, 1826); Ship (from McGuire Scrapbook) (Edmund C. Coates, 1839); Oorlogsschip met volle zeilen bij een kust (anonymous, 1625); Ships and Sailors (Thomas Rowlandson, 1827).

Show me artworks of ships at seaMagazin
Alle 43 Beispiele ansehen

So funktionieren MCP Apps

Eine MCP App verbindet zwei MCP-Grundbausteine, ein Tool und eine Ressource. MCP Apps sind eine optionale Erweiterung des Protokolls, die KI-App muss sie also unterstützen.

  1. Das Tool benennt eine Ansicht

    Seine Beschreibung enthält _meta.ui.resourceUri, das auf eine ui://-Ressource verweist.

  2. Die App ruft sie ab

    Die KI-App liest diese Ressource von Ihrem Server: eine HTML-Seite, oft mit gebündeltem Skript und Stilen.

  3. Sie läuft in einer Sandbox

    Die Seite wird in der Unterhaltung in einem iframe mit Sandbox dargestellt und kann nicht auf die umgebende App zugreifen.

  4. App und Ansicht tauschen Nachrichten aus

    Über postMessage sendet die App das Ergebnis des Tools an die Ansicht, und die Ansicht kann Tools aufrufen oder eine Nachricht senden.

Welche KI-Apps sie anzeigen

Die Unterstützung ist von App zu App verschieden und ändert sich schnell. In diesen Apps zeigt WebKnox seine Antworten heute.

KI-AppWebKnox zeigt
ClaudeInteraktive Karte
ChatGPTInteraktive Karte
VS CodeInteraktive Karte
GooseInteraktive Karte
Claude CodeText mit Quellen
CodexText mit Quellen

Das MCP-Projekt führt eine Liste der Apps, die Erweiterungen unterstützen. Seine Dokumentation nennt außerdem Microsoft 365 Copilot, Postman und MCPJam.

In zwei Minuten ausprobieren

WebKnox ist ein Remote-MCP-Server mit kostenlosen Antworten jeden Tag, ohne Anmeldung zum Start. Fügen Sie seine Adresse Ihrer KI-App hinzu und fragen Sie dann nach einem Vergleich, einer Vorhersage oder einem Rezept.

Server-URL
https://mcp.webknox.com/mcp
Zu Cursor hinzufügenZu VS Code hinzufügenSchritte für jede App

WebKnox-Karten in Ihrer eigenen MCP App nutzen

Sie bauen einen eigenen MCP-Server? Lassen Sie ein Tool die Answers API fragen und die Antwort als structuredContent zurückgeben, und stellen Sie sie dann mit dem WebKnox-Element in Ihrer Ansicht dar. So erhalten Sie Karten mit Quellen, ohne die Oberfläche zu schreiben.

Ihr MCP-Server
import {registerAppTool, registerAppResource, RESOURCE_MIME_TYPE} from '@modelcontextprotocol/ext-apps/server';

const uri = 'ui://my-app/card.html';

registerAppResource(server, uri, uri, {mimeType: RESOURCE_MIME_TYPE}, async () => ({
  contents: [{
    uri,
    mimeType: RESOURCE_MIME_TYPE,
    text: viewHtml, // the bundled view below
    _meta: {ui: {csp: {resourceDomains: ['https://webknox.com']}}},
  }],
}));

registerAppTool(server, 'ask', {
  description: 'Answers with a sourced card.',
  inputSchema: z.object({question: z.string()}),
  _meta: {ui: {resourceUri: uri}},
}, async ({question}) => {
  const answer = await askWebKnox(question); // POST /v2/answers
  return {
    content: [{type: 'text', text: answer.text ?? 'No card for this question.'}],
    structuredContent: answer,
  };
});
Ihre Ansicht
<webknox-answer external-media></webknox-answer>

<script type="module">
  import '@webknox/elements';
  import {App} from '@modelcontextprotocol/ext-apps';

  const card = document.querySelector('webknox-answer');
  const app = new App({name: 'My cards', version: '1.0.0'});

  app.ontoolresult = ({structuredContent}) => {
    card.answer = structuredContent;
  };
  app.connect();
</script>

Bündeln Sie die Ansicht in eine einzige HTML-Datei, wie es die offizielle Anleitung tut. Antwortbilder werden von https://webknox.com geladen, was die Sicherheitsrichtlinie der Ressource im Beispiel erlaubt.

Fragen zu MCP Apps

Was sind MCP Apps?

MCP Apps sind eine offizielle Erweiterung des Model Context Protocol. Sie lassen einen MCP-Server eine interaktive HTML-Oberfläche zurückgeben, die die KI-App in der Unterhaltung anzeigt, statt nur Text.

Was ist der Unterschied zwischen einem MCP-Server und einer MCP App?

Ein MCP-Server gibt einer KI-App Tools und Daten. Eine MCP App ist ein MCP-Server, dessen Tool zusätzlich eine Ansicht mitbringt, sodass das Ergebnis als Oberfläche erscheint, die Menschen bedienen können.

Funktionieren MCP Apps in Claude und ChatGPT?

Ja. Die Karten von WebKnox erscheinen in Claude, ChatGPT, VS Code und Goose. Reine Text-Clients wie Claude Code und Codex erhalten die Antwort als Text mit ihren Quellen.

Sind MCP Apps sicher?

Sie laufen in einem Sandbox-Frame, den die KI-App kontrolliert, und können die umgebende Seite und deren Cookies nicht lesen. Sie erreichen die App nur über Nachrichten, und die App entscheidet, was sie dürfen.

Was kostet die WebKnox MCP App?

Ohne Konto erhält jede Person 10 Antworten mit Karte pro Tag. Claude teilt WebKnox nicht mit, wer fragt, daher teilen sich in Claude alle ein gemeinsames Tageskontingent, das früher aufgebraucht sein kann. Danach melden Sie sich mit einem kostenlosen WebKnox-Konto an und erhalten 50 pro Tag, oder Sie nutzen einen bezahlten Tarif für mehr.

Bringen Sie Ihre erste Karte noch heute live

Kostenlosen API-Key holenZum Schnellstart