mcpField
K
Kinetik UI

Kinetik UI

ローカル
kinetik-ui.dev開発ツール196 日前に更新
リポジトリ公式サイト

Kinetik UI について

Kinetik UIは、React Native向けのアニメーションコンポーネントを検索して追加するCLIです。TypeScriptソースをプロジェクトにコピーでき、MCP経由でAIエージェントにレジストリを提供します。

主な機能

  1. 01名前やカテゴリでコンポーネントを検索
  2. 02コンポーネントと共有コードを追加
  3. 03導入済みコンポーネントとテンプレートを一覧表示
  4. 04ローカルコピーとレジストリを比較
  5. 05プロジェクト設定と依存関係を確認
  6. 06AIエージェントにレジストリを提供

活用シーン

  1. 01Expo画面用のモーションコンポーネントを探す
  2. 02React Nativeプロジェクトにレジストリのコンポーネントを追加
  3. 03コンポーネントの差分をレジストリと確認

MCP 対応

`mcp`コマンドはstdioでMCPサーバーを起動し、コンポーネントの一覧・検索・取得、インストール計画の作成、トークンの取得を行うツールを公開します。

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定
{
  "mcpServers": {
    "nurullahturgut-kinetik-ui": {
      "command": "npx",
      "args": [
        "-y",
        "kinetik-ui"
      ]
    }
  }
}
起動コマンドnpx -y kinetik-ui

ローカルサーバーにはマシン上の実行環境（Node.js 18 以上など）が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ
npmkinetik-ui1.4.2

ツール

5

掲載時のツール一覧 · 1 週間前に更新

パラメーター型必須説明
categoryenumいいえこのカテゴリのみbackground | card | interaction | input | disclosure | overlay | text | navigation | feedback | data | screen

詳細

kinetik-ui

Kinetik UI の CLI：Reanimated 4、Gesture Handler、Skia を基盤とする、Expo 向けのモーションおよびエフェクトコンポーネントです。

React Native の New Architecture が必要です。Expo SDK 54 以降に対応しています。

npx kinetik-ui init
npx kinetik-ui add glint-card deckfall

コンポーネントは TypeScript のソースコードとしてプロジェクトにコピーされるため、ご自身で管理できます。依存関係は npx expo install でインストールされるため、ネイティブのバージョンは Expo SDK と一致します。

コマンド

コマンド説明
initkinetik.json を書き込み、トークンとモーションプリセットをコピーし、Reanimated をインストールします
add <name...>コンポーネントと必要な共有コードをコピーし、expo install を実行します
listすべてのコンポーネントと画面テンプレートを表示します（● はインストール済みを示します）
search <query>名前、カテゴリ、説明でコンポーネントを検索します
diff [name...]コピーしたファイルとレジストリとの差分を表示します
doctorExpo SDK、New Architecture、Babel の設定、依存関係、ファイルを確認します
agents [--skill]AI コーディングエージェント向けの Kinetik ガイダンスを AGENTS.md に追加します（エージェントスキルも追加できます）
mcpModel Context Protocol（stdio）経由で AI エージェントにレジストリを提供します

オプション：--registry <url|dir>、--overwrite、--dry-run、--skip-install、--components-dir、--lib-dir、--json、--cwd。詳しくは npx kinetik-ui --help を実行してください。

AI エージェントでの使用

エージェントの設定に MCP サーバーを追加します。

{ "mcpServers": { "kinetik-ui": { "command": "npx", "args": ["-y", "kinetik-ui", "mcp"] } } }

ツール：list_components、search_components、get_component、get_install_plan、get_tokens。

ライセンス

MIT

コメント

Markdown 対応

MCP は初めてですか？

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。