MCP Servers vs MCP Apps

server.tool({
  name: "search_database",
  description: "Search the product database",
  schema: z.object({
    query: z.string(),
    limit: z.number().optional(),
  }),
}, async ({ query, limit = 10 }) => {
  const results = await db.search(query, limit);
  return text(JSON.stringify(results));
});

// Server returns data
return text("Temperature: 72°F");

// Client/AI decides how to display it

server.tool({
  name: "calculate",
  schema: z.object({ expression: z.string() }),
}, async ({ expression }) => {
  const result = eval(expression);
  return text(`Result: ${result}`);
});

server.resource({
  name: "config",
  uri: "app://config",
  title: "Application Configuration",
}, async () => {
  const config = await loadConfig();
  return text(JSON.stringify(config));
});

// resources/weather-display/widget.tsx
import { useWidget } from "mcp-use/react";

export default function WeatherDisplay() {
  const { props } = useWidget<{
    city: string;
    temperature: number;
    condition: string;
  }>();
  
  return (
    <div className="weather-card">
      <h2>{props.city}</h2>
      <div className="temp">{props.temperature}°</div>
      <p>{props.condition}</p>
    </div>
  );
}

server.tool({
  name: "show_weather",
  description: "Display weather widget",
  schema: z.object({ city: z.string() }),
  widget: "weather-display",  // Links to widget
}, async ({ city }) => {
  return widget({
    props: { city, temperature: 72, condition: "Sunny" },
    message: `Weather for ${city}`,
  });
});

export default function TaskManager() {
  const { callTool } = useWidget();
  
  const addTask = async (title: string) => {
    await callTool("create_task", { title });
  };
  
  return (
    <button onClick={() => addTask("New task")}>
      Add Task
    </button>
  );
}

project/
├── src/
│   └── server.ts
└── resources/
    ├── weather-display/
    │   └── widget.tsx
    └── task-list/
        └── widget.tsx