こんにちは！テラーノベルでフロントエンドを担当している@kazutoyoです！
こちらはReact Native Advent Calendar 2025の3日目の投稿です。
Hono CLIを参考に、expo-agent-cliというツールを作った
先日、WebフレームワークであるHonoで、Hono CLIというツールが公開されました。
Hono CLIはHonoのためのCLIツールとして、人間とAI Agentに優しいツールになっています。
今回、Hono CLIのExpo版として、expo-agent-cliを作成しました。
このツールの利点
AI AgentにExpoのドキュメントをMarkdown形式で提供することで、コード生成や技術的な質問への回答精度が向上します。
expo-agent-cliを使うと、Expo UIなどの新しく追加されたパッケージや最新のExpo SDKなど、AI Agentの学習データに含まれていない可能性がある情報をAI Agentが参照できるようになります。
Expo MCPサーバとの違い
Expoには公式のMCP（Model Context Protocol）サーバが存在します。
Expo MCPは非常に強力で、ドキュメント参照に加えて以下のような機能を提供します：
- UIの操作
- 実機での検証
- より高度なワークフロー
ただし、Expo MCPを利用するにはEAS有料プラン（月額$19〜）が必要です。
expo-agent-cliは以下のようなケースで有用です。
- EAS Free プランを利用している場合
- EASを使っていない場合
- シンプルなドキュメント参照のみで十分な場合
また、このブログ記事で指摘されているように、MCPサーバによるトークン消費が課題となる場合があります。そのような場合、シンプルなCLIツールの方が効率的なことがあります。
Claude Codeでの実行例
以下は、Claude CodeでExpo UIのドキュメントを取得している例です。
ExpoのドキュメントがMarkdown形式で正確に取得できていることが確認できます。
インストール方法と使い方
インストール方法
グローバルインストール
npm install -g expo-agent-cli
npx経由での実行
npx expo-agent-cli version
コマンド紹介
expo-agent-cliは次の２つのコマンドをサポートします。
expo-agent-cli docs
ExpoのドキュメントをMarkdown形式で出力するコマンドです。
ドキュメントページのパスを指定して実行します。
（以下の例はExpoUIのページ）
# expo-agent-cli docs [path]
expo-agent-cli docs /versions/v54.0.0/sdk/ui/
出力
---
title: Expo UI
sidebar_title: Overview
description: A set of components that allow you to build UIs directly with Jetpack Compose and SwiftUI from React.
sourceCodeUrl: 'https://github.com/expo/expo/tree/main/packages/expo-ui'
packageName: '@expo/ui'
platforms: ['android', 'ios', 'tvos']
hideTOC: true
---
`@expo/ui` is a set of native input components that allows you to build fully native interfaces with Jetpack Compose and SwiftUI. It aims to provide the commonly used features and components that a typical app will need.
## Available platforms
Components are available for the following platforms:
- **[Jetpack Compose](jetpack-compose)**: Build native Android interfaces with Jetpack Compose components
- **[SwiftUI](swift-ui)**: Build native iOS interfaces with SwiftUI components
expo-agent-cli search
Expoのドキュメントを検索するコマンドです。
CLI内のFlexSearchのIndexを使用して全文検索を行います。
# expo-agent-cli search [query]
expo-agent-cli search haptics
出力
{
"query": "haptics",
"total": 5,
"results": [
{
"title": "Haptics",
"category": "SDK Reference > Sdk",
"url": "https://docs.expo.dev/versions/v54.0.0/sdk/haptics",
"path": "versions/v54.0.0/sdk/haptics.mdx"
},
{
"title": "Haptics",
"category": "SDK Reference > Sdk",
"url": "https://docs.expo.dev/versions/v53.0.0/sdk/haptics",
"path": "versions/v53.0.0/sdk/haptics.mdx"
},
{
"title": "Haptics",
"category": "SDK Reference > Sdk",
"url": "https://docs.expo.dev/versions/v52.0.0/sdk/haptics",
"path": "versions/v52.0.0/sdk/haptics.mdx"
},
{
"title": "Haptics",
"category": "SDK Reference > Sdk",
"url": "https://docs.expo.dev/versions/unversioned/sdk/haptics",
"path": "versions/unversioned/sdk/haptics.mdx"
},
{
"title": "Expo Modules API: Overview",
"category": "Modules > Modules",
"url": "https://docs.expo.dev/modules/overview",
"path": "modules/overview.mdx"
}
]
}
コマンドの組み合わせ
searchとdocsを組み合わせることで、検索結果から直接ドキュメントを取得できます。
expo-agent-cli search expo-haptics | jq '.results[0].path' | xargs -I {} expo-agent-cli docs {}
作ってみた感想
今回のツール開発では、大部分をClaude Codeで実装しました。これにより、仕事や子育ての合間という限られた時間でも完成させることができました。
実装の課題
MDXのパース処理
ExpoのドキュメントはMDX形式で記述されており、単純にファイルを取得するだけでは完全な情報を得られませんでした。
Hono CLIの場合、GitHubで管理されているMarkdownファイルをそのまま取得するシンプルな実装でしたが、Expoの場合は以下の対応が必要でした。
- MDX内のReactコンポーネントの処理
- 動的に読み込まれる外部JSONデータの取得と整形
- これらをMarkdown形式で正確に表現するためのパース処理
特に、一部のコンポーネントが別のJSONファイルからデータを取得してレンダリングしている部分の処理に工夫が必要でした。
検索を自前実装
Hono CLIではドキュメントサイトのAlgoliaをそのまま利用していましたが、expo-agent-cliでは外部ツールとして独立させる必要があったため、FlexSearchを使った自前実装を選択しました。
Expoのサイトで使われているAlgoliaより以下の点が劣っているため、今後の改善点としたいです。
- 検索精度の向上
- インデックスの定期更新の自動化
- 検索自体の応答速度の向上
まとめ
expo-agent-cliは、AI AgentとExpoを組み合わせた開発をサポートするツールです。
まだ改善の余地はありますが、Expo開発でAIツールを活用する際の選択肢の一つとしてご活用いただければ幸いです。
ぜひお試しください！
React Native Advent Calendar 2025
Discussion