Log inGet an API key

MCP Apps

MCP Apps: interactive cards inside the chat

MCP Apps let an MCP server show an interactive interface in the conversation instead of plain text. A tool points to an HTML resource, and the AI app renders it in a sandboxed frame.

Add WebKnox to your AI appSee the examples
In your AI 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)

Examples

What an MCP App can show

These are recorded WebKnox answers, shown by the same <webknox-answer> element as the WebKnox MCP App. Open any of them in the 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 gamesKids' 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 seaMagazine
Browse all 43 examples

How MCP Apps work

An MCP App combines two MCP basics, a tool and a resource. MCP Apps is an optional extension of the protocol, so the AI app has to support it.

  1. The tool names a view

    Its description carries _meta.ui.resourceUri, which points to a ui:// resource.

  2. The app fetches it

    The AI app reads that resource from your server: an HTML page, often with its script and styles bundled in.

  3. It runs in a sandbox

    The page renders in a sandboxed iframe in the conversation and can't reach the app around it.

  4. They talk by messages

    Through postMessage, the app sends the tool's result to the view, and the view can call tools or send a message.

Which AI apps show them

Support differs from app to app and is changing quickly. This is where WebKnox shows its answers today.

AI appWebKnox shows
ClaudeInteractive card
ChatGPTInteractive card
VS CodeInteractive card
GooseInteractive card
Claude CodeText with sources
CodexText with sources

The MCP project keeps a list of the apps that support extensions. Its documentation also names Microsoft 365 Copilot, Postman and MCPJam.

Try one in two minutes

WebKnox is a remote MCP server with free answers every day and no sign-in to start. Add its address to your AI app, then ask for a comparison, a forecast or a recipe.

Server URL
https://mcp.webknox.com/mcp
Add to CursorAdd to VS CodeSteps for every app

Use WebKnox cards in your own MCP App

Building your own MCP server? Let a tool ask the Answers API and return the answer as structuredContent, then show it with the WebKnox element in your view. You get sourced cards without writing the interface.

Your 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,
  };
});
Your view
<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>

Bundle the view into one HTML file, as the official guide does. Answer images load from https://webknox.com, which the resource's security policy allows in the sample.

Questions about MCP Apps

What are MCP Apps?

MCP Apps are an official extension of the Model Context Protocol. They let an MCP server return an interactive HTML interface that the AI app shows in the conversation, instead of only text.

What is the difference between an MCP server and an MCP App?

An MCP server gives an AI app tools and data. An MCP App is an MCP server whose tool also brings a view, so the result appears as an interface people can use.

Do MCP Apps work in Claude and ChatGPT?

Yes. WebKnox's cards show in Claude, ChatGPT, VS Code and Goose. Text-only clients such as Claude Code and Codex get the answer as text with its sources.

Are MCP Apps safe?

They run in a sandboxed frame controlled by the AI app, so they can't read the page around them or its cookies. They reach the app only through messages, and the app decides what they may do.

What does the WebKnox MCP App cost?

Without an account, each person gets 10 answers with a card a day. Claude doesn't tell WebKnox who is asking, so in Claude everyone shares one daily pool, which can run out earlier. After that, sign in with a free WebKnox account for 50 a day, or use a paid plan for more.

Ship your first card this afternoon

Get a free API keyRead the quickstart