GitHub Copilot + Expo

In-app feedback for Expo, fixed by GitHub Copilot

You are building an Expo or React Native app with GitHub Copilot. GitHub Copilot's agent mode in VS Code runs tools and terminal commands from the Chat view. MCP servers come from a mcp.json file in your workspace.

1. Paste one prompt into GitHub Copilot

Open the Chat view in VS Code, choose Agent from the agent picker, and paste the prompt into the chat input.

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

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

The agent runs shell commands in an integrated terminal in VS Code through its built-in terminal tool. Read-only commands run automatically; other commands, such as xcodebuild or npx expo install, show a confirmation dialog where you allow them once, for the session or for the workspace. You can expand the dialog to see the exact command first.

2. What lands in your Expo code

Roughly this. GitHub Copilot writes it, you review it.

Install the packages with Expo's installer so the versions match your SDK, then add the Nitpick package.
Wrap the root layout in NitpickProvider with your public app key.
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 GitHub Copilot the MCP server

VS Code reads MCP servers from .vscode/mcp.json. The file uses a servers object, and a stdio server states its type.

.vscode/mcp.json

{
  "servers": {
    "nitpick": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@nitpickhq/cli", "mcp"]
    }
  }
}

The command palette has MCP: Add Server for a guided setup and MCP: Open User Configuration for a file that applies to all your workspaces.

Send a chat message in agent mode. VS Code asks you to confirm that you trust the server, and then the agent discovers its tools and offers them in chat.

4. Start the dev server with GitHub Copilot

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 and the dev server run in the integrated terminal, where you can read the Expo logs yourself. Allow each command in the confirmation dialog, once or for the session.

5. Let GitHub Copilot fix the reports

In agent mode, ask Copilot to use the Nitpick 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 GitHub Copilot

In the Chat view choose the Local harness and then Agent, because that is the mode that works with tools and runs terminal commands.
Expand the chevron next to the tool name in a confirmation dialog to read, and change, the parameters before you press Allow.
A server added with MCP: Open User Configuration is available in all your workspaces, not only this one.

Good to know for Expo

A ScrollView shows only its visible part in the screenshot, and video, maps and web views can come out empty. Nothing is masked automatically, so wrap sensitive parts in NitpickMask.
This was tested in Expo Go on iOS. A React Native app without Expo modules has not been tested, so this page does not promise it works there.

$9 a month per account. Unlimited apps.

Get started