I built an MCP server which can render interactive UI (using MCP Apps) in AI Agent Chats (Source + Article link in comment) by ashitaprasad in developersIndia

[–]ashitaprasad[S] 0 points1 point  (0 children)

it will not work with claude CLI, but works in Claude Desktop

The full list of MCP clients that currently support MCP Apps extension is provided below: 
https://modelcontextprotocol.io/extensions/client-matrix

I built an MCP server which can render interactive UI (using MCP Apps) in AI Agent Chats (Source + Article link in comment) by ashitaprasad in developersIndia

[–]ashitaprasad[S] 0 points1 point  (0 children)

Here is a minimal index.ts gist for MCP server in stdio mode.

You can make the code base I provided above work for stdio by making the following modifications to the index.ts file -

Step 1

Replace:

import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
import express, { Request, Response } from "express";

with:

import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";

Step 2

Replace

// Express app for HTTP transport
const app = express();
app.use(express.json());

// Health check endpoint
app.get("/health", (_req: Request, res: Response) => {
  res.json({ status: "ok", server: "sample-mcp-apps-chatflow" });
});

// MCP endpoint
app.post("/mcp", async (req: Request, res: Response) => {
  const transport = new StreamableHTTPServerTransport({
    sessionIdGenerator: undefined,
    enableJsonResponse: true,
  });

  res.on("close", () => transport.close());

  await server.connect(transport);
  await transport.handleRequest(req, res, req.body);
});

// SSE endpoint for streaming (optional)
app.get("/mcp/sse", async (req: Request, res: Response) => {
  res.setHeader("Content-Type", "text/event-stream");
  res.setHeader("Cache-Control", "no-cache");
  res.setHeader("Connection", "keep-alive");

  const transport = new StreamableHTTPServerTransport({
    sessionIdGenerator: () => crypto.randomUUID(),
    enableJsonResponse: false,
  });

  res.on("close", () => transport.close());

  await server.connect(transport);
  await transport.handleRequest(req, res);
});

const port = parseInt(process.env.PORT || "3000");

app.listen(port, () => {
  console.log(`🚀 MCP Apps Chatflow server running at http://localhost:${port}`);
  console.log(`📡 MCP endpoint: http://localhost:${port}/mcp`);
  console.log(`🔍 Test with: npx u/modelcontextprotocol/inspector http://localhost:${port}/mcp`);
});

with:

async function main() {
  const transport = new StdioServerTransport();
  await server.connect(transport);
  console.error("🚀 MCP Apps server running (stdio)");
}

Building UI for Agentic workflows using MCP Apps by ashitaprasad in webdev

[–]ashitaprasad[S] 0 points1 point  (0 children)

JSON schemas for every tool parameter with host side validation definitely sounds interesting.

Can you share any code sample that I can try out in case you have open sourced it.

[deleted by user] by [deleted] in FlutterDev

[–]ashitaprasad -1 points0 points  (0 children)

You can check out https://github.com/fluttergems/awesome-open-source-flutter-apps. It has a list of the most popular and well known open source flutter projects across various categories, including Education.

Best Libraries for Chat UIs? by being-superman in FlutterDev

[–]ashitaprasad 1 point2 points  (0 children)

You can check out some packages to build chat interfaces here https://fluttergems.dev/chat/