Building AI‑Powered Apps with Cursor, MCP, Docs & Rules – A Hands‑On Guide

1. Concept

Model Context Protocol (MCP) provides a standardized way to connect AI models to various data sources and tools, similar to a universal USB‑C port for devices. It defines three core components:

MCP Hosts : Applications that initiate connections to large‑model services (e.g., Claude Desktop, IDEs).

MCP Clients : Components running inside a host that maintain a 1:1 connection with an MCP Server.

MCP Servers : Lightweight programs exposing specific capabilities via MCP, handling client requests and returning JSON‑RPC responses.

Local Data Sources : Files, databases, and services on the user’s machine that servers can securely access.

Remote Services : External APIs or internet resources that servers can call.

Servers can communicate locally via stdio (ideal for same‑machine processes) or remotely using Server‑Sent Events (SSE) over HTTP.

The typical MCP workflow is:

Define tools (name, description, communication method) and inject them into the model’s context.

The model selects the appropriate tool based on the user’s request.

The MCP Client sends a JSON‑RPC request to the server.

The MCP Server executes the tool and returns a JSON‑RPC response.

The model incorporates the result into its final answer.

2. Hands‑on

2.1 Developing an MCP Weather Server with Cursor

After creating a project folder, run cursor . to open Cursor in the current directory. Create two Project Rules (Docs and Rules) and add the MCP documentation as a reference.

Use the following TypeScript code (generated by Cursor) to implement a weather‑service MCP server:

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js");
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js");
import { z } from "zod";

interface WeatherData {
  city: string;
  temperature: number;
  condition: string;
  forecast: { date: string; condition: string; high: number; low: number }[];
  lastUpdated: string;
}

const weatherDatabase: Record<string, WeatherData> = { /* mock data omitted for brevity */ };

const server = new McpServer({ name: "天气服务", version: "1.0.0", description: "提供城市天气信息的MCP服务" });

server.resource("weatherData", "weather://{city}", async (uri) => { /* implementation */ });
server.resource("cityList", "weather://cities", async (uri) => { /* implementation */ });
server.tool("getWeatherForecast", { city: z.string().describe("要查询天气预报的城市名") }, async ({ city }) => { /* implementation */ });
server.tool("updateWeather", { city: z.string().describe("要更新天气的城市名"), temperature: z.number().describe("当前温度(°C)"), condition: z.string().describe("天气状况描述") }, async ({ city, temperature, condition }) => { /* implementation */ });
server.prompt("weatherQuery", { city: z.string().describe("城市名称") }, ({ city }) => ({ messages: [{ role: "user", content: { type: "text", text: `请提供${city}的详细天气信息，包括温度、天气状况和未来几天的预报。` } }] }));
server.prompt("weatherAdvice", { city: z.string().describe("城市名称"), activity: z.string().describe("计划的活动") }, ({ city, activity }) => ({ messages: [{ role: "user", content: { type: "text", text: `请根据${city}的天气情况，给我关于${activity}的建议。考虑温度、天气状况等因素。` } }] }));

async function main() {
  const transport = new StdioServerTransport();
  console.log("天气服务启动中...");
  try {
    await server.connect(transport);
    console.log("天气服务已连接");
  } catch (error) {
    console.error("服务器连接失败:", error);
  }
}

main().catch(console.error);

After building the project (e.g., pnpm init, npm run build), Cursor can automatically add the generated index.js to the MCP server list via Settings → MCP → Add new global MCP Server.

2.2 Developing a Gold‑Price Prediction Project

The author used Cursor to create a more complex application that fetches gold K‑line data, the latest price, and market news, then leverages an AI model to forecast short‑term trends. The development effort split into API debugging (40%), front‑end/back‑end integration (40%), and polishing details (20%).

Key observations:

Cursor can read project files, browse web pages, display images, and execute commands, greatly improving code generation and debugging.

Long conversations may hit token limits; starting a new chat and summarizing previous context helps.

Small bugs can be hard to spot; adding logs and using Git for version control are essential.

3. Reflections & Tips

While Cursor makes AI‑assisted development accessible, non‑trivial projects still require solid knowledge of Node, Python, Linux, and Git. Effective usage tips include:

Clearly describe product functionality before coding.

Ask Cursor for a technical design first, then iterate on code.

Provide demo code for APIs and test them before integration.

Add extensive logging to speed up issue diagnosis.

Leverage Docs and Project Rules to steer the model’s behavior.

Commit frequently with Git to enable quick rollbacks.

Overall, Cursor, combined with MCP, Docs, and Rules, offers a powerful shortcut for front‑end and back‑end developers to build AI‑enhanced applications.