raycast-extensions

Raycast 拡張機能の開発

React、TypeScript、Node.js を使用して Raycast 拡張機能を構築します。

クイックスタート

1. 拡張機能を作成：「Create Extension」コマンドを Raycast で実行します
2. インストールして開発：npm install && npm run dev
3. 編集：src/index.tsx を変更すると、変更が自動的にホットリロードされます
4. テスト：拡張機能が Raycast のルート検索の一番上に表示されます

UI プリミティブの選び方

必要な機能	コンポーネント
検索可能な項目のリスト	List
画像ギャラリー／グリッド	Grid
ユーザー入力の収集	Form
リッチコンテンツの表示	Detail
ステータスバーへの表示	MenuBarExtra

判断ツリー

1. ユーザーが検索／フィルターする項目を表示しますか？

   • テキスト中心 → List
   • 画像中心 → Grid

2. ユーザー入力を収集しますか？ → Form

3. 詳細なコンテンツを表示しますか？ → Detail（Markdown とメタデータをサポート）

4. 常に表示されるステータスバーが必要ですか？ → MenuBarExtra

基本パターン

ActionPanel を使った List

import { ActionPanel, Action, List } from "@raycast/api";

export default function Command() {
  return (
    <List>
      <List.Item
        title="Item"
        actions={
          <ActionPanel>
            <Action.CopyToClipboard content="Copied!" />
            <Action.OpenInBrowser url="https://raycast.com" />
          </ActionPanel>
        }
      />
    </List>
  );
}

データ取得

import { List } from "@raycast/api";
import { useFetch } from "@raycast/utils";

export default function Command() {
  const { data, isLoading } = useFetch<Item[]>("https://api.example.com/items");
  
  return (
    <List isLoading={isLoading}>
      {data?.map((item) => <List.Item key={item.id} title={item.name} />)}
    </List>
  );
}

AI の統合

import { AI, Clipboard } from "@raycast/api";

export default async function Command() {
  const answer = await AI.ask("Summarize this text");
  await Clipboard.copy(answer);
}

メモ

AI の利用には Raycast Pro が必要です。environment.canAccess(AI) でアクセス権を確認してください。

リファレンス

詳しいドキュメントについては、以下を参照してください。

• UI コンポーネント：references/ui-components.md - List、Detail、Form、Grid、ActionPanel、MenuBarExtra
• フックとユーティリティ：references/hooks-utilities.md - useFetch、LocalStorage、Clipboard、OAuth、runAppleScript
• AI API：references/ai-api.md - AI.ask、useAI、モデル選択、ストリーミング
• パッケージ構成：references/package-structure.md - manifest、コマンド、設定

例

examples/ に実行可能な例があります。

ファイル	パターン
list-with-actions.tsx	List と ActionPanel の基本
list-with-detail.tsx	詳細パネル付き List
form-with-validation.tsx	Form と useForm による検証
detail-with-metadata.tsx	Detail の Markdown とメタデータ
grid-with-images.tsx	Grid レイアウト
data-fetching.tsx	useFetch のパターン
ai-integration.tsx	ストリーミングを使った AI.ask
menubar-extra.tsx	MenuBarExtra の操作