OpenShift AIとOpenShift Dev Spaces連携～コード生成AIで楽々開発～

1 はじめに
2 OpenShift Dev Spacesについて
3 OpenShift Dev Spaces利用概要
4 OpenShift Dev Space環境構築
5 OpenShift Dev Space利用
- 5.1 ワークスペースの作成
- 5.2 VSCode簡易操作
6 VSCode拡張機能設定
7 Dev SpacesとOpenShift AIの連携
8 おわりに
9 参考

はじめに

こんにちはサイオステクノロジーの小野です。今回はOpenShift AIにデプロイしたLLMをVSCodeと連携させて、コード生成AIを利用する方法について解説します。また、VSCodeはOpenShift上で構築できるOpenShift Dev Spacesを利用します。これにより非接続環境でのコーディングでもAIによるコード支援を受けることができるようになります。

OpenShift Dev Spacesについて

OpenShift上でアプリケーション開発を行う際に便利なツールとして、OpenShift Dev Spacesがあります。

OpenShift Dev SpacesはWeb ベースの統合開発環境 (IDE)です。クラウド上にデプロイされるので、利用するマシンに依存せずにどこでも利用できます。また、Devfileと呼ばれる開発環境を設定するファイルを利用してデプロイされるので、チーム内で開発環境の統合・共有がしやすくなります。

OpenShift Dev Spaces利用概要

本ブログの内容は下記章で構成されます：

OpenShift Dev Spaces環境構築
OpenShift Dev Space利用手順
OpenShift Dev SpaceのVSCode拡張機能設定
OpenShift Dev SpacesとOpenShift AIの連携

最初にOpenShift Dev Spacesの構築手順について解説し、その操作方法について簡単に説明します。その後、Dev Spaces上のVSCodeにContinueという拡張機能を導入します。最後にContinueとOpenShift AIにデプロイしたLLMを連携させてコード支援機能が使えるようにする方法を解説します。

ローカルのVSCodeとOpenShift AIを連携させたい場合はDev Spacesの構築手順をスキップして、Continueの導入部分から参考にしてください。（リンク：Dev SpacesとOpenShift AIの連携）

OpenShift Dev Space環境構築

OpenShift Dev Spacesの構築手順について説明します。

Openshift DevSpace前提条件

OpenShift：4.17
CPUアーキテクチャ：AMD64
OpenShift クラスターにサーバ証明書設定済み

参考：https://docs.redhat.com/ja/documentation/red_hat_openshift_dev_spaces/3.18/html/administration_guide/preparing-the-installation#supported-platforms

Operatorインストール

最初にOpenShift Dev SpacesのOperatorをインストールします。

OperatorHubで「Dev Spaces」と検索してRed Hat OpenShift Dev Spacesをインストールします。

OpenShift Dev Spacesの詳細

インストール時の設定はデフォルトにします。

Operatorのインストール設定。今回はデフォルトでインストールする。

ステータスがSucceededになればインストール完了です。

ステータスがSucceededとなればOperatorインストール完了

CheCluster設定

次にDev spacesのCRを作成します。Red Hat OpenShift Dev Spaces instance Specificationのインスタンスを作成します。

Red Hat OpenShift Dev Spaces instance Specificationの作成

今回はデフォルトで設定します。設定の詳細は公式ドキュメントを参照してください。https://docs.redhat.com/ja/documentation/red_hat_openshift_dev_spaces/3.18/html/administration_guide/configuring-devspaces#configuring-devspaces

CheClusterの作成。今回はデフォルトで作成する。

管理コンソールアクセス

CRが作成できたら、その詳細画面のRed Hat OpenShift Dev Spaces URLから管理コンソール画面に移動できます。

CheClusterの詳細画面から、Dev SpacesのWebコンソールへのURLを開く。

OpenShift Dev Spacesの管理コンソール画面

OpenShift Dev Space利用

ワークスペースの作成

VSCodeの環境を作成します。Select a SampleのEmpty Workspaceを選択します。

Select a SampleのEmpty Workspaceを選択する

作成が完了するまで待ちます。

作成完了まで待つ

作成が完了するとVSCodeの画面が表示されます。このVSCode上で作業を行います。

WorkSpaceの作成が完了するとVSCodeが表示される

VSCode簡易操作

VSCodeの操作についてこれから簡単に説明します。すでに利用したことがある方は飛ばしてください。

Open Folderからフォルダを開けます。

Open Folderからフォルダが開ける

左上のメニューからFile > New Fileでファイル作成できます。

File > New Fileでファイル作成できる

左上のメニューからTeminal > New Terminalでターミナルを開くことができます。

Terminal > New Terminalからターミナルを開ける

ターミナルが表示される

VSCode拡張機能設定

普段私たちがデスクトップ上で利用しているVSCodeはMicrosoftがカスタマイズしたVSCodeになっています。しかし、Dev Spaces上のVSCodeはカスタマイズされていないVSCodeなのでいくつかの差異があります。一番の大きな違いとしてMicrosoft Marketplaceが入っていないので拡張機能を自分で導入する必要があります。

導入する手順としては最初にOpenVSXレジストリから自分が利用したい拡張機能のVSIXファイルをダウンロードします。

OpenVSXに公開されているVSCodeの拡張機能

次にダウンロードしたVSIXファイルをワークスペースにアップロードします。

ダウンロードしたファイルをWorkspaceにアップロードする

アップロードされた拡張機能ファイル

アップロードしたら拡張機能のメニューの三点リーダーからInstall from VSIXを選択して、アップロードしたVSIXファイルを選択します。

Install from VSIXから拡張機能をインストール

選択するとアップロードした拡張機能が利用できるようになります。

利用できるようになった拡張機能

拡張機能を実際に利用した様子

Dev SpacesとOpenShift AIの連携

OpenShift AIにデプロイしたLLMを利用して、Dev Spacesにコードアシスタント機能を導入する方法を解説します。

以前の記事を参考にして、OpenShift AIにLLMをデプロイしておいてください。

OpenShift AIにLLMをデプロイしてみた

Continueの導入

VSCode上でコードアシスタント機能を利用するにはContinue拡張機能をインストールする必要があります。Dev SpacesにはデフォルトでContinue拡張機能がインストールできるようになっているので、インストールします。なければ先ほどのようにOpenVSXレジストリからダウンロードしてください。https://open-vsx.org/extension/Continue/continue

Continue拡張機能をインストールする

インストールすると左のメニューにContinueのアイコンが追加されます。

Continue拡張機能のメニュー

ContinueとOpenShift AI連携

下の歯車マークを押すとContinueの設定ファイルが表示されます。

歯車マークから設定を行う

この設定ファイルにOpenShift AIのLLMAPIの情報を記載します。まずmodelsに以下を上書きします。<タイトル名>にはContinueで表示される名前を入力し、<モデル名>にはOpenShift AIにデプロイしたLLMのモデル名を入力し、<APIのエンドポイント>はデプロイしたLLMのExtenalの方のエンドポイントを入力し、<APIのトークン>はデプロイしたLLMのAPIのトークンを入力してください。

{
      "title": "<タイトル名>",
      "model": "<モデル名>",
      "apiBase": "<APIのエンドポイント>/v1/",
      "provider": "openai",
      "apiKey": "<APIのトークン>"
}

また、tabAutocompleteModelに同様の設定を上書きすると、タブ補完でAIチャット機能を利用できるようになります。

modelsとtabAutocompleteModelを編集する

設定できたら、モデルとしてOpenShift AIにデプロイしたLLMが選択肢に出るようになります。

OpenShift AIにデプロイされたLLMが表示される

動作確認

動作確認としてPythonのHello Worldの書き方を聞いてみます。するとこのように回答してくれることが確認できます。

チャットボックスに質問してみた

また、コード生成機能も試してみます。適当なファイルを作成して、Ctrl + Iを押して、どんなプログラムを書いてほしいか入力します。

素数を計算するコードを書いてもらうようにお願いしてみる

すると自動的にコードを作成してくれることが確認できます。

コードを自動生成してくれる

デプロイしたLLMが対応している場合、タブ補完機能も利用できます。

コードを書くと、自動的にコードの続きを提案してくれる

タブ補完を続けると自動的にコードが完成する

おわりに

以上の操作によりOpenShift Dev SpacesのVSCodeでAIによるコード支援を受けることができるようになりました。OpenShift AIにデプロイしたLLMはローカルLLMであるので、コード支援機能に対して秘密情報を入力したとしても外部に漏れる心配はありません。高いセキュリティを保ったままコード支援機能を利用できるのでぜひ構築してみてください。