はじめに
Raycastは、デスクトップ上での作業を迅速化するためのツールであり、SpotlightやAlfredなどのランチャーと同様の機能を提供しています。
特に開発者やエンジニア向けにデザインされており、高いカスタマイズ性と豊富な拡張機能が特長です。
拡張機能をStoreからインストールするだけでなく、Reactを使って独自の拡張機能を開発することも可能です。
詳しい拡張機能の作り方は公式ドキュメントを参照していただければと思います。
今回作成したもの
コーディングをしている時にメソッド名や変数名をChatGPTと対話しながらやっていて、
ブラウザを開かずにできたらいいなと思ったのでChatGPTと組み合わせたものを作ってみました。
下記のような感じです。
- inputにテキストを入力する
- ChatGPTからの回答をoutputへ出力する
以下はその実装例です。
実装について
create Extensionコマンドを実行し、必要な項目を入力するとテンプレートが自動生成されます。
テンプレートをベースにして必要な箇所を書き換えて実装をすることができ、npm run devを実行することで即座に動作確認が可能です！
main.tsx
import React, { useState } from "react";
import { Form, ActionPanel, Action, showToast } from "@raycast/api";
import OpenAI from 'openai';
type Values = {
textfield: string;
textarea: string;
};
const openai = new OpenAI({
apiKey: process.env["OPENAI_API_KEY"],
});
export default function Command() {
const [output, setOutput] = useState<string>('');
async function main(values: Values) {
try {
const chatCompletion = await openai.chat.completions.create({
messages: [{ role: 'user', content: values.textfield + 'を10個出力してください' }],
model: 'gpt-3.5-turbo',
});
const outputContent = chatCompletion.choices[0].message.content;
if (outputContent !== null) {
setOutput(outputContent);
}
} catch (error: any) {
showToast({
title: "Something went wrong",
message: error.message,
});
}
}
function handleSubmit(values: Values) {
main(values);
}
return (
<Form
actions={
<ActionPanel>
<Action.SubmitForm onSubmit={handleSubmit} />
</ActionPanel>
}
>
<Form.TextField id="textfield" title="input"/>
<Form.TextArea id="textarea" title="output" value={output} />
</Form>
);
}
最後に
今回は簡単な拡張機能を作成してみました！
よくする作業の拡張機能を作成して、効率化できたらいいな〜なんて思っています。
MacユーザーでまだRaycastを使用していない方がいれば一度使ってみてはいかがでしょうか。
Discussion