appCN

---

クイックスタート

CLI が NativeWind と Reanimated の連携設定を行い、@app-cn shadcn 名前空間を登録します。セットアップに 1 つ、コンポーネントの追加に 1 つ、コマンドを実行するだけです。

# 1. (Recommended) One-shot project setup
npx @app-cn/cli@latest init

# 2. Add any component by slug
npx @app-cn/cli@latest add voice-sphere

独自のパイプラインを使いたいですか？appcn add は shadcn の薄いラッパーなので、CLI を丸ごと省略できます。

# Copy a single component via shadcn (no setup, one-off)
npx shadcn@latest add https://appcn.vercel.app/r/voice-sphere.json

# Or pull the whole library as a managed dep
npm install @app-cn/ui

AI エージェントを使って開発していますか？appCN の MCP サーバーを追加すると、Claude Code、Cursor、Windsurf がコンポーネントを見つけてインストールできるようになります。また、appCN のモーション／触覚スタイルに沿った新しいコードも作成できます。

# Claude Code
claude mcp add appcn -- npx -y @app-cn/mcp

Cursor／Windsurf／VS Code の設定については、**MCP ドキュメント**をご覧ください。

ステータス：v0.1.0 を npm で公開中。 コンポーネントを 5 つ公開しました。AI コレクションを主力としており、新しい開発を最初に届ける場所です。

---

内容

新着： appCN は実機で利用可能です。Expo Go で QR コードをスキャンすると、コンポーネントギャラリー全体が Android または iPhone に数秒で読み込まれます。 エミュレーターも開発者アカウントも不要です。単体で使える Play ストア APK は審査中で、まもなく公開予定です。

ベース

コンポーネント	使い心地
Button	押すとバネのように 0.96 まで縮小し、140 ms で元に戻ります。ほどよい重みがあり、決してせわしなくありません

AI ネイティブ

コンポーネント	魅力
StreamBubble	3 段階の思考 → トークンストリーム → 完了
PromptInput	送信ボタンが、回転リング付きの停止ボタンに変化します
ReasoningTrace	回答が届いた瞬間に自動で折りたたまれます
VoiceSphere	音声レベルに合わせて呼吸する、反応型の 3D オーブ

すべてのコンポーネントに、インタラクティブな Web プレビュー、Expo Go でスキャンしてスマートフォン上で実際に動かせる QR コード、そして動画があります。どの環境でも同じコードパスを使用します。→ appcn.vercel.app/components

---

appCN を選ぶ理由

• 実機でのプレビュー。 QR コードを Expo Go でスキャンすれば、ネイティブジェスチャーに対応したコンポーネントをお使いのデバイス上で実際に動かせます。エミュレーターを使った面倒な作業は不要です。
• AI ネイティブの主力コレクション。 AI コレクションを強みとし、他では優れた形で提供されていない AI アプリ向けコンポーネントを構築しています。
• 4 つの配布方法。 appcn CLI、shadcn レジストリ、npm の @app-cn/ui、または MCP サーバーを利用できます。MCP サーバーを使えば、AI コーディングエージェントがコンポーネントをインストールします。同じプリミティブを、好きな方法で利用できます。
• モーションを優先した初期設定。 Reanimated と gesture-handler、共通のモーショントークン（duration / easing / spring）、そしてコンポーネントごとに 1 つの魅力的なディテールを備えています。
• ダークモードを優先。 まずダークモード向けにデザインし、そこからライトモード向けに展開しています。プレミアムな印象は、虹色ではなく奥行きで表現します。
• ソースコードはあなたのもの。 コピー＆ペーストの理念により、ロックインはありません。コンポーネントをリポジトリに取り込んだら、自由に編集できます。

---

ドキュメント

提供場所	内容
appcn.vercel.app	ランディングページ、すべてのコンポーネント、ライブプレビューを掲載したドキュメントサイト
CLI ドキュメント	init、add、環境変数、冪等性の仕様
モバイルアプリ	Play ストアと Expo Go のインストール方法、ディープリンクの仕様
CLAUDE.md	アーキテクチャ、モノレポの構成、コマンド、Metro/Reanimated の注意点
DESIGN.md	デザインの基準となるレイヤー — モーションのルール、「1 つの魅力的なディテール」のルール、8 ステップの SOP
CONTRIBUTING.md	開発環境のセットアップ、Changesets によるリリース手順、PR の規約
AGENTS.md	AI コーディングエージェント向けのツール横断ガイド（Claude / Cursor / Windsurf / Codex / Aider）

---

コントリビュート

新しいコンポーネントはすべて、DESIGN.md → コンポーネントのチェックリストに記載された 8 ステップの SOP に沿って公開します。手順を省略しないでください。PR テンプレートで遵守が徹底されており、changeset がないとリリースパイプラインが停止します。

AI エージェントを使って作業していますか？ /new-component Claude スキルを呼び出してください。チェックリストに沿って作業を進め、入力するだけで使える型付きの <slug>.meta.ts テンプレートを用意し、レジストリとショーケースのエントリーを追加して、型チェックとレジストリのビルドで検証します。

詳しいガイド：CONTRIBUTING.md。

---

リリース

リリースには Changesets を使用し、OIDC Trusted Publishing 経由で npm に公開します。長期間有効なシークレットは不要です。

pnpm changeset           # describe what changed + pick a bump
git commit -am "..."     # commit the changeset alongside your code
# Open a PR. After merge to main, a "Version Packages" PR opens automatically.
# Merge that PR → CI publishes via OIDC.

公開されたすべてのバージョンには、npm 上で検証済みのプロベナンスバッジが付きます。

---

デプロイ

1つのモノレポから2つのVercelプロジェクトを運用します。セットアップを表示するにはクリックしてください。

プロジェクト	Vercelのルートディレクトリ	提供する内容
Docs	apps/web	ランディングページ、/components/*、/docs/*、/r/*.json のshadcnレジストリ
Showcase	apps/showcase	ExpoのWebエクスポート — インタラクティブプレビュー用のiframeターゲット

デプロイ順序（重要）：

1. 最初にショーケースをデプロイします（apps/showcase）。これによりURLを取得できます。
2. ドキュメントをデプロイします。NEXT_PUBLIC_SHOWCASE_WEB_URL にそのURLを設定してください。
3. 任意：カスタムドメインを設定します（appcn.vercel.app → ドキュメント、appcn-showcase.vercel.app → ショーケース）。

必須の環境変数（ドキュメントプロジェクト）：

変数	値
NEXT_PUBLIC_SHOWCASE_WEB_URL	https://<showcase-project>.vercel.app
NEXT_PUBLIC_EXPO_URL	(v1では空欄 — QRタブにはEAS Updateが必要です)
NEXT_PUBLIC_REGISTRY_URL	https://<docs-domain>/r

ショーケースプロジェクトに環境変数は不要です。デフォルト値は apps/web/.env.example にあります。

---

謝辞

shadcn/uiのコピー＆ペーストの理念と、 react-native-reusablesの 洗練されたドキュメントサイトに着想を得ています。NativeWind、 Reanimated、および Expoを基盤に構築されています。

---

ライセンス

MIT — コードは自由にご利用いただけます。