Skip to content

Cursor + Expo

In-app feedback for Expo, fixed by Cursor

You are building an Expo or React Native app with Cursor. Cursor reads MCP servers from a small JSON file, so adding Nitpick is a paste. The agent in the side pane can then call the tools while it edits your code.

1. Paste one prompt into Cursor

Open your project in Cursor, open the Agent side pane with Cmd+I, and paste the prompt there.

Add Nitpick feedback to this app. Fetch https://nitpickhq.com/install.md and follow every step.

Cursor follows install.md. nitpick login opens your browser, where you create an account and start the subscription, and Cursor waits for that before it adds the component.

Cursor runs the agent's shell commands in the terminal. Your Run Mode decides what happens: in the default Auto-review mode, allowlisted commands run immediately and other shell commands run in the sandbox when possible. The other modes are Allowlist and Run Everything.

2. What lands in your Expo code

Roughly this. Cursor writes it, you review it.

  1. Install the packages with Expo's installer so the versions match your SDK, then add the Nitpick package.
  2. Wrap the root layout in NitpickProvider with your public app key.
  3. Wrap buttons, fields and cards in NitpickElement and give each a name.
npx expo install react-native-view-shot expo-device expo-constants npm install @nitpickhq/react-native
app/_layout.tsx
import { Stack, usePathname } from "expo-router";
import { NitpickProvider, NitpickElement, useNitpickScreen } from "@nitpickhq/react-native";

function ScreenName() {
  useNitpickScreen(usePathname());
  return null;
}

export default function RootLayout() {
  return (
    <NitpickProvider appKey="npk_YOUR_PUBLIC_KEY">
      <ScreenName />
      <Stack />
    </NitpickProvider>
  );
}

// Name what users may point at
<NitpickElement name="Home/StartButton">
  <Pressable onPress={start}><Text>Start</Text></Pressable>
</NitpickElement>

Works in Expo Go. With Expo Router, render a small ScreenName component inside the provider that calls useNitpickScreen(usePathname()). Details in Install for Expo and React Native.

3. Give Cursor the MCP server

Cursor takes MCP servers from an mcp.json file. The command has to be on your system path, which npx is once Node is installed.

.cursor/mcp.json
{
  "mcpServers": {
    "nitpick": { "command": "npx", "args": ["-y", "@nitpickhq/cli", "mcp"] }
  }
}

Put the file in .cursor/ inside your project for this project only, or in ~/.cursor/mcp.json to have it everywhere.

Open the Customize panel in the sidebar. It lists every configured MCP server and lets you switch each one on or off without deleting it.

4. Start the dev server with Cursor

npx expo start runs the dev server that Expo Go connects to. The run commands build the native app locally and need Xcode or Android Studio.

terminal
npx expo start
# or build the native app locally
npx expo run:ios
npx expo run:android

npx expo install needs the network. In the default Auto-review mode it runs in the sandbox when possible; if it is stopped, add the command to your allowlist, then the dev server starts in Cursor's terminal.

5. Let Cursor fix the reports

In the agent chat, ask it to use the Nitpick tools: list open feedback, fix it and mark it resolved. It calls list_feedback, reads each report with its screenshot through get_feedback, and finds the code. An element name such as checkout.pay-button leads to the NitpickElement that has that name, and a screen name is the route path, if you pass usePathname() to useNitpickScreen. When the fix is done it calls resolve_feedback.

Working with Cursor

Good to know for Expo

$9 a month per account. Unlimited apps.

Get started

Related

Sources