Raycast Extension開発:AIコマンドをMacのランチャーに追加する方法

Macユーザーの間で、Alfredと並んで(あるいはそれ以上に)支持を集めているランチャーアプリ「Raycast」。その魅力は、Reactを使った拡張機能(Extension)のエコシステムにあります。

今回は、RaycastのAPIを使って、自分だけの「AIコマンド」を作成する方法を解説します。例えば、「選択中のテキストを要約する」「クリップボードの内容をコードレビューする」といった機能を、ショートカット一発で呼び出せるようになります。

開発環境のセットアップ

Raycast Extensionは、Node.js、TypeScript、Reactで開発します。

# プロジェクトの作成
npx @raycast/api@latest create my-ai-extension

# ディレクトリへの移動
cd my-ai-extension

# 開発サーバーの起動
npm run dev

これで、Raycast上で開発中のコマンドが呼び出せるようになります。

実装例:選択テキストをAIで修正するコマンド

「選択中のテキストを取得し、OpenAI APIに送信して、修正結果をクリップボードにコピーする」というシンプルなコマンドを作ってみましょう。

1. 必要なパッケージのインストール

OpenAI公式ライブラリを追加します。

npm install openai

2. コマンドの実装

src/index.tsx を以下のように編集します。

import { getSelectedText, Clipboard, showToast, Toast } from "@raycast/api";
import OpenAI from "openai";

const openai = new OpenAI({
  apiKey: "YOUR_OPENAI_API_KEY", // 本番ではPreferences APIを使用しましょう
});

export default async function Command() {
  try {
    // 1. 選択テキストの取得
    const selectedText = await getSelectedText();
    
    await showToast({
      style: Toast.Style.Animated,
      title: "AI修正中...",
    });

    // 2. AIによる処理
    const completion = await openai.chat.completions.create({
      messages: [
        { role: "system", content: "入力されたテキストの誤字脱字を修正し、自然な日本語にしてください。" },
        { role: "user", content: selectedText },
      ],
      model: "gpt-4-turbo",
    });

    const fixedText = completion.choices[0].message.content;

    // 3. 結果をクリップボードにコピー(または貼り付け)
    if (fixedText) {
      await Clipboard.copy(fixedText);
      await showToast({
        style: Toast.Style.Success,
        title: "修正完了!",
        message: "クリップボードにコピーしました",
      });
    }

  } catch (error) {
    await showToast({
      style: Toast.Style.Failure,
      title: "エラーが発生しました",
      message: String(error),
    });
  }
}

AI機能を強化するTips

Preferences APIの活用

APIキーをコードに直書きするのは危険です。RaycastのPreferences APIを使って、ユーザーに入力させましょう。

package.json に設定項目を追加します。

"preferences": [
  {
    "name": "apiKey",
    "description": "Enter your OpenAI API Key",
    "type": "password",
    "required": true,
    "title": "API Key"
  }
]

コード側では getPreferenceValues で取得できます。

標準AI機能との差別化

Raycastには標準で「Raycast AI」が搭載されています。自作Extensionの強みは、特定のワークフローに特化できることです。

  • 社内APIとの連携: 社内のドキュメント検索APIを叩いて結果を表示する。
  • 複雑なプロンプトチェーン: 複数のAIモデルを順次呼び出して、高度な処理を行う。

ストアへの公開

完成したExtensionは、GitHubリポジトリを通じて公式ストア(Raycast Store)に申請できます。審査は比較的早く、世界中のユーザーに使ってもらえるチャンスです。

自分だけの最強ランチャーを作り上げて、生産性を極限まで高めましょう!