Skip to content

Codex + Expo

In-app feedback for Expo, fixed by Codex

You are building an Expo or React Native app with Codex. Codex works from your repository and your terminal, so the same one-line prompt installs the component and later pulls reports through MCP.

1. Paste one prompt into Codex

Run codex in your project folder, sign in on first launch, and paste the prompt into the terminal interface.

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

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

Codex's default Auto preset reads files, edits and runs commands inside the working directory without asking. It asks before it edits outside the workspace or runs a command that needs network access, because network access is off by default in that sandbox.

2. What lands in your Expo code

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

Codex adds a stdio server with a command, or you write the same thing by hand as a table in its TOML configuration.

codex mcp add nitpick -- npx -y @nitpickhq/cli mcp
~/.codex/config.toml
[mcp_servers.nitpick]
command = "npx"
args = ["-y", "@nitpickhq/cli", "mcp"]

Global settings live in ~/.codex/config.toml. A project can carry its own .codex/config.toml with the same table, which Codex reads only when you trust the project.

Run codex mcp list for a summary, or type /mcp in the terminal interface to see the active servers.

4. Start the dev server with Codex

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 npm install need the network, so in the default sandbox Codex stops and asks. Approve the command once, or enable network access in your Codex configuration if you accept that for this project.

5. Let Codex fix the reports

Ask Codex to list the open Nitpick reports for the app, then to fix them one by one and resolve each. 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 Codex

Good to know for Expo

$9 a month per account. Unlimited apps.

Get started

Related

Sources