Quickstart

npx create-mcp-use-app

npx create-mcp-use-app my-server --template mcp-apps

cd my-server
npm run dev

npx mcp-use client connect local http://localhost:3000/mcp
npx mcp-use client local tools list

my-server/
├── views/                      # React MCP App views, auto-discovered
│   └── greeting-card/
│       └── view.tsx
├── public/                     # Static assets (icons, images)
├── index.ts                    # Server entry: tools, resources, prompts
├── mcp-env.d.ts                # Managed server-to-view typing bridge
├── package.json
└── tsconfig.json

export const greetingCard = server.tool(
  {
    name: "greeting-card",
    description: "Create a greeting card for someone",
    inputSchema: z.object({
      name: z.string().describe("Who to greet"),
      message: z.string().describe("The message inside the card"),
    }),
    outputSchema: z.object({
      name: z.string(),
      message: z.string(),
    }),
    view: {
      name: "greeting-card",
      description: "An interactive greeting card",
    },
  },
  async ({ name, message }) => ({
    content: [{ type: "text", text: `Made a card for ${name}` }],
    structuredContent: { name, message },
  }),
);

import { ThemeProvider, useToolContext } from "mcp-use/react";

interface GreetingCardProps {
  name: string;
  message: string;
}

export default function GreetingCard() {
  const view = useToolContext<"greeting-card">();

  if (view.status === "pending") return <p>Designing the card…</p>;
  if (view.status === "error") return <p>{view.error.message}</p>;

  const card = view.toolOutput as GreetingCardProps;

  return (
    <ThemeProvider>
      <div style={{ padding: "2rem", textAlign: "center" }}>
        <h2>Hello, {card.name}!</h2>
        <p>{card.message}</p>
      </div>
    </ThemeProvider>
  );
}

npm run deploy