Skip to main content

AI Native Development Flow

In a mobile project, you first introduce smartlime and confirm that you can log in to iAP, and then build screens and features on top of that.

Basic Flow​

About what you can instruct the agent to do

For details on what you can instruct the agent to do in each step, see Skill Sets.

  1. Create a mobile project and commit the deployed assets
  2. Start the agent (claude for Claude Code, codex for Codex)
  3. Instruct the agent to introduce smartlime
    • Packages are added, the URL scheme is set, loading of the connection information is added, and Smartlime is placed
    • The values of the OAuth client to register on iAP are presented
  4. Register the OAuth client on iAP
  5. Set the connection information in .env.local
  6. Start the app with a development build and confirm that you can log in to iAP
  7. Instruct the agent to build the screens and features you want
    • A login screen, lists and details of iAP data, displaying iAP screens, and so on
  8. The agent runs lint, type checking, and tests, and the artifacts are saved under src/
  9. Check the behavior in the app, and if there are problems, ask the agent to fix them
  10. When finished, build and distribute the app with EAS
About permitting AI operations while generating artifacts

While the agent is working on a request, it may ask for permission to perform operations such as the following. When asked, confirm that the operation is within the project before permitting it.

  • Saving files
  • Adding packages (npx expo install)
  • Running lint, type checking, and tests
To improve accuracy

Asking for one screen or feature at a time and checking its behavior before moving on leads to less rework than asking for many screens in a single request. For tips shared with iAP projects, see Improving Accuracy in AI Native Development Flow.

Introducing smartlime​

Ask the agent as follows.

Introduce smartlime so that the app can log in to iAP.
Use com.example.myapp as the app's URL scheme.

The URL scheme is used for the address (redirect URI) that returns to the app from the iAP login screen. Specify a name that does not overlap with other apps.

Registering the OAuth Client​

Register the app on iAP as an OAuth client. Use the values the agent presents after introducing smartlime. The main values are as follows.

ItemValue
Client ID / client secretAny values. Use the same values as in the app's connection information
Grant type (authorized-grant-type)authorization_code
Redirect URI (redirect-uri)<URL scheme>://redirect (e.g., com.example.myapp://redirect)
PKCE (code-challenge)S256
ScopesThe scopes the app uses (e.g., smacolow, menu, im-workflow-rest, immaster, notice-history, notice-mobile-device)

The OAuth client is registered in a configuration file (oauth-client-details-config) of an iAP user module. If your iAP project was created with Accel CLI, you can generate the configuration file by asking the agent of that project as follows.

Register an OAuth client for the mobile app.
The grant type is authorization_code, the redirect URI is com.example.myapp://redirect,
code-challenge is S256, and the scopes are smacolow, menu, im-workflow-rest, immaster, notice-history, notice-mobile-device.

Setting the Connection Information​

Do not write the iAP URL and OAuth client information directly in the source code. Write them in .env.local at the root of the project. .env.local is excluded from Git by the .gitignore set up by create-expo.

EXPO_PUBLIC_IAP_BASE_URL=https://iap.example.com/imart
EXPO_PUBLIC_IAP_CLIENT_ID=<client ID>
EXPO_PUBLIC_IAP_CLIENT_SECRET=<client secret>
  • Specify EXPO_PUBLIC_IAP_BASE_URL up to the iAP context path, without a trailing /.
  • Match the variable names to the settings the agent created when introducing smartlime.
  • When building with EAS, register variables with the same names as EAS environment variables.
Handling the client secret

Values starting with EXPO_PUBLIC_ are embedded in the app. Assume that the client secret can be extracted from the distributed app, and keep the scopes allowed for the OAuth client to the minimum necessary.

Checking Login with a Development Build​

Check logging in to iAP with a development build. A development build is the app itself with development features included, and it is created in one of the following ways.

MethodCommandRequirements
Build locallynpx expo run:android / npx expo run:iosAndroid Studio, or Xcode (macOS only)
Build with EASbunx eas-cli build --profile developmentAn Expo account

After installing the development build, start the development server with bun run start, and code changes are reflected in the app immediately.

Login cannot be checked with Expo Go

In Expo Go (Expo's preview app distributed in the stores), the redirect URI changes to one that includes the address of the development machine. It does not match the redirect URI registered on iAP, so you cannot log in.

If you cannot log in, check the following.

SymptomWhat to check
The app does not come back after logging in to iAP, or a redirect_uri mismatch error occursWhether the redirect URI registered on iAP matches the app's URL scheme, and whether you are trying with Expo Go
The iAP login screen opens, but an error occurs after logging inWhether the scopes, code-challenge, and client secret registered on iAP match the app's settings
API calls failWhether the Mobile Application Integration (jp.co.intra_mart.im_smacolow) module is installed on iAP

Building and Distribution​

Building, signing, submitting to stores, and delivering updates can be done in the cloud with EAS. Ask the agent, or see the EAS documentation.

Set up EAS to build a preview version for Android.