Slide 1

Slide 1 text

提案段階のVS Code チャット エージェントAPIを動かしてみた 株式会社ハウテレビジョン 根本昌也

Slide 2

Slide 2 text

● 名前: 根本 昌也 ● ハウテレビジョンに23卒新卒エンジニアとして入社 ● やっていること ○ 外資就活のNext.js, Goへの書き換えプロジェクト ● twitter @_masa5555 ○ GitHub, Zenn, Qiitaも_以外同名ID  自己紹介

Slide 3

Slide 3 text

 会社紹介

Slide 4

Slide 4 text

1. VS Codeの10月のアップデート内容 2. チャットエージェントAPIとは 3. 実際に動かしてみた手順の紹介  目次

Slide 5

Slide 5 text

Copilot拡張機能のアップデートが追加され、さらに便利に! ● ストリーミングコード提案 ● Commitメッセージの自動生成 ● ターミナル連携 ● チャットエージェント機能の追加 ←これについて 1  10月のVS Codeのアップデート (ver1.84)

Slide 6

Slide 6 text

● GitHub Copilot Chat拡張機能で ○ @メンション ○ /スラッシュコマンド を使って指定でき、前もって設定されたタスクを実行する ● 現状、@workspace, @vscodeというエージェントが利用可能 2  チャットエージェント機能とは

Slide 7

Slide 7 text

● 拡張機能のAPIとして提案中である ○ 近いうちに、OpenAIのGPTsのようなカスタマイズされ た便利な命令をVS Code上で使えるようになるかもしれな い? ● サンプルコードが公開されていたので、ローカルで動かせる 2  チャットエージェント機能とは

Slide 8

Slide 8 text

● VSCode Insiderのインストール ○ 提案中のAPIを動かすために必要 ● ライブラリのインストール ○ 拡張機能がnode.jsで動いてるので、npm install ● VS Code InsiderのRun Extensionを実行 3  実際に動かしてみた手順の紹介

Slide 9

Slide 9 text

● サンプルでは、 Catエージェントが CS用語について説明する teachコマンドが 実装されていた 3  実際に動かしてみた手順の紹介

Slide 10

Slide 10 text

● @catのteachコマンドの実装をみてみる ○ Copilotへのアクセスリクエスト ○ roleとプロンプトを設定 ○ リクエストを投げる ● ChatGPT APIとほぼ同じように使える! 3  実際に動かしてみた手順の紹介

Slide 11

Slide 11 text

● @catエージェントに独自のコマンドの作成 ○ コードの説明が英語で返されるのに困っていた ○ 日本語でコードを説明してくれる /explain_japanese を作成してみる 3  実際に動かしてみた手順の紹介

Slide 12

Slide 12 text

● やったこと ○ 新しいコマンドの条件分岐を追加 ○ プロンプト作成 ○ コマンドの登録 3  実際に動かしてみた手順の紹介

Slide 13

Slide 13 text

実行結果 3  実際に動かしてみた手順の紹介

Slide 14

Slide 14 text

● アップデートでCopilot Chat エージェントが追加された ● 拡張機能APIはまだ提案中で、近いうちに公開されるかも ● ChatGPT APIのような使い方で簡単にカスタマイズコマンド を作れるので便利  まとめ

Slide 15

Slide 15 text

● VS Code October 2023 (version 1.84) ● Pursuit of "wicked smartness" in VS Code  参考にした情報

Slide 16

Slide 16 text

組織拡大のため、ソフトウェアエンジニアを積極採用中です! Zenn publication: https://zenn.dev/p/howtelevision 今回の発表内容はzennの記事としても投稿しています。 はてなブログ: https://blog.howtelevision.co.jp/  最後に