opencode + Expo

In-app feedback for Expo, fixed by opencode

You are building an Expo or React Native app with opencode. opencode is an open-source terminal agent with its own interface. It defines MCP servers in opencode.json, and its permission block decides which tools may run without asking.

1. Paste one prompt into opencode

Run opencode in your project folder, connect a model provider with /connect if you have not yet, and paste the prompt in the terminal interface.

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

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

By default all tools are enabled and run without asking. A permission block in opencode.json can set bash to ask, allow or deny, so set it to ask if you want to approve each shell command.

2. What lands in your Expo code

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

opencode lists MCP servers under the mcp key in opencode.json. A local server is a type, a command as one array, and an enabled flag.

opencode.json

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "nitpick": {
      "type": "local",
      "command": ["npx", "-y", "@nitpickhq/cli", "mcp"],
      "enabled": true
    }
  }
}

Note the difference from the other agents: the command and its arguments are one array, not two fields.

Run opencode mcp list to see whether the server is configured, then ask it to list your apps with the nitpick tools. The model can only call them if the server started.

4. Start the dev server with opencode

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

With the default permissions it installs the packages and starts the dev server without asking. Set bash to ask first if you prefer to see each install before it runs.

5. Let opencode fix the reports

In opencode, 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 opencode

Install it with npm install -g opencode-ai, then run opencode in the project folder.
/init lets opencode analyse the project and write an AGENTS.md in the root, which you can commit.
Refer to the server by name in a prompt, such as asking it to use the nitpick tools, to make sure the model reaches for them.

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