Skip to content

Cline + Expo

In-app feedback for Expo, fixed by Cline

You are building an Expo or React Native app with Cline. Cline lives in a panel inside VS Code and asks before it acts, so you watch each step. Its MCP settings are one JSON file that you open from the panel.

1. Paste one prompt into Cline

Open your project in VS Code, open the Cline panel, and paste the prompt into its chat.

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

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

The model marks each command as safe or as needing approval. Under Auto Approve you choose whether Cline runs only the commands marked safe, or all commands, without asking, and a separate setting covers MCP servers.

2. What lands in your Expo code

Roughly this. Cline 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 Cline the MCP server

Cline keeps MCP servers in a settings file that you open from its own panel: the MCP Servers icon, then the Configure tab, then Configure MCP Servers.

MCP settings (opened from the Cline panel)
{
  "mcpServers": {
    "nitpick": {
      "command": "npx",
      "args": ["-y", "@nitpickhq/cli", "mcp"],
      "disabled": false,
      "autoApprove": []
    }
  }
}

Leave autoApprove empty until you have seen what the tools do. You can allow single tools later, such as list_feedback.

Open the MCP Servers icon again. The nitpick entry should be listed there and enabled.

4. Start the dev server with Cline

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

Installs and the dev server start appear as commands in the Cline panel. Approve them one by one at first, then decide whether to let Cline run safe commands on its own.

5. Let Cline fix the reports

In the Cline chat, ask it to use the Nitpick MCP tools: list open feedback, fix each report 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 Cline

Good to know for Expo

$9 a month per account. Unlimited apps.

Get started

Related

Sources