TypeScript x Raycast x AIで変える開発者体験

2024/10/02(水)Vue Fes Japan × TSKaigi 合同イベント「次世代フロントエンドツールチェイン」

LT発表として発表した資料です。
Raycast ExtensionでAIを活用し開発者体験を変えるtipsを紹介しました。

Transcript

1. TypeScript x Raycast x AIで変える開発者体験 M Yano Date 2024.10.02
2. アジェンダ Raycastについて Raycast x AIを活用したTipsの紹介 TypeScript x Raycast x AIを活用したTipsの紹介 ※注意事項 発表内容にはRaycastのProプランで使えるを含みます。
 ※本発表の内容にある情報で再現は可能です！
3. 自己紹介 Michitoshi Yano（@nagauta_jp) TypeScript歴：1年 くらい

 Raycast 歴：2年 くらい(最近Raycast Community Japanを始めました)
 所属：株式会社 All Ads（2023/03 に 株式会社 Macbee Planet にM&A） 開発：広告トラッキングシステムなど Intro
4. Raycastについて
5. Raycastとは
6. Raycastとは
7. Raycastとは
8. Raycast Extensionの紹介
9. Raycast AI(Pro only)
10. Raycast AI (Pro only) 色々なアプリを開きながらAIが使える 画像生成もできる ファイルを渡して抽出や分析もできる
11. Raycast AI (Pro only)
12. Raycast AI (Pro only)
13. Raycast AI Command(Pro only) Fix Spelling and Grammer 選択したテキストのスペルや文法を修正してくれる
14. Raycast AI Command(Pro only) Translator Raycastが外国語を翻訳してくれる

 Quicklinksとdeeplinkを組み合わせると
 キーボードで呼び出せる

 ”raycast://extensions/raycast/translator/translate? fallbackText={selection | raw}”
15. Raycast AI Command(Pro only) オリジナルのAIコマンド Chrome extensionと連動し
 Websiteの情報を扱うことできる

 ”{browser-tab}の内容をわかりやすく
 要約してください”
16. TypeScript x AIでRaycastを拡張する
17. TypeScript x AIでRaycastを拡張する TypeScriptで自作するAIコマンド 今開いているページの情報を要約させる
18. TypeScript x AIでRaycastを拡張する TypeScriptで自作するAIコマンド Script Commandという機能で
 好きな言語をRaycastで実行できる

 ちょっとVS Codeに切り替えて補足します...
19. TypeScript x AIでRaycastを拡張する TypeScriptで自作するAIコマンド Apple Scriptで開いているページを取得する

 Playwriteでページのコンテンツを取得する OpenAI APIでChatGPTに要約させる
20. TypeScript x AIでRaycastを拡張する(Pro only) TypeScriptで自作する拡張機能 対象のRepositoryのPRコマンドを提案してもらう
21. TypeScript x AIでRaycastを拡張する(Pro only) TypeScriptで自作する拡張機能 Pro plan向けの公式APIが提供されている
 開発者はこのAPIを使うだけでAIの機能を実装できる
22. TypeScript x AIでRaycastを拡張する(Pro only)
23. 宣伝: 2024/11/23 中島聡さんとAI x Raycastイベント
24. 宣伝: 2024/11/23 中島聡さんとAI x Raycastイベント 募集中です A スポンサ8 A 登壇7 A 参加者 X(Twitter)
25. ありがとうございまし た！
26. Appendix 今回紹介したウェブサイト要約コマンド/拡張機能 Repos
 https://github.com/raycast-jp/typescript-raycast-ai-tips

 今回紹介したAIを活用したPR要約拡張機能 Repos
 https://github.com/raycast/extensions/blob/main/extensions/ai- git-assistant/src/generate-pr-description.tsx#L3-L5

 Raycast日本コミュニティのconnpass
 https://raycast.connpass.com/

 Raycast日本コミュニティのウェブサイト
 https://devx.jp/

 Raycast日本コミュニティのX(Twitter)
 https://x.com/Raycast0731