Skip to content

Gemini CLI + Expo

In-app feedback for Expo, fixed by Gemini CLI

You are building an Expo or React Native app with Gemini CLI. Gemini CLI is Google's terminal agent. It runs shell commands through its own tool and loads MCP servers from a settings file, so Nitpick fits next to your code like any other server.

1. Paste one prompt into Gemini CLI

Run gemini in your project folder, choose Sign in with Google when it asks, and paste the prompt.

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

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

By default every shell command the agent asks for needs your approval. You can allow it once, allow it always for the rest of the session, or deny it. Starting with gemini --sandbox adds a sandbox on top.

2. What lands in your Expo code

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

Gemini CLI lists MCP servers under mcpServers in its settings file. Use .gemini/settings.json in the project, or ~/.gemini/settings.json for your user.

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

If the file already has settings, add only the mcpServers entry. An optional timeout in milliseconds can sit next to command and args. As an alternative, gemini mcp add nitpick npx -y @nitpickhq/cli@latest mcp writes the entry for you (project scope by default, -s user for your user).

Type /mcp in a running session. It lists the configured servers, their connection status and the tools they offer.

4. Start the dev server with Gemini CLI

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

Expect a prompt for npx expo install, npm install and the dev server start. Allow each one always for the session, and the agent can restart Expo without asking again.

5. Let Gemini CLI fix the reports

Start gemini in your project and ask it to check Nitpick for open feedback, fix what it can and resolve the reports. 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 Gemini CLI

Good to know for Expo

$9 a month per account. Unlimited apps.

Get started

Related

Sources