VS Code を Ollama の GUI として使う (2025年3月)

概要

Ollama と Visual Studio Code (VS Code) を連携し、VS Code を Ollama のフロントエンドとして利用する方法について記載しておきます。

必要なソフトウェア

Windows 上での作業を想定し、以下を準備します。

• Ollama（ローカル LLM 実行環境）
• Visual Studio Code / VS Code（統合開発環境）
• Continue (VS Code 拡張機能)

Ollama および VS Code のインストール

Ollama および VS Code のインストールについては特に難しいことはなく、公式サイトからそれぞれインストーラをダウンロードして実行する形になります。
本稿更新時点で VS Code は バージョン 1.97.2 , Ollama は バージョン 0.5.12 でした。

公式サイト
Visual Studio Code
https://code.visualstudio.com/download

Ollama
https://ollama.com/

それぞれのインストールについて、別の記事で言及したことがあるので必要に応じてご参照ください。

参考

ローカル PC で AI チャットを動かしてみる (Windows 版 Ollama / 2025年2月)

アプリを作りたい

参考

2-6. Visual Studio Code を利用した方法

アプリを作りたい

Continue のインストール

Continue は、オープンソースの AIコードアシスタント で、VS Code や JetBrains などの IDE で利用できる拡張機能です。
公式サイト
https://www.continue.dev/
ドキュメント
https://docs.continue.dev/

VS Code の Continue は、Extensions (拡張機能) からインストールできます。
VS Code – Extensions(拡張機能) – Continue で検索 – [Continue – Codestral, Claude, and more] を選択してインストール

インストール後は、左側に Continue アイコンが追加されます。

公式ドキュメントを見ると、Continue のアイコンを右のサイドバードラックするようにありますので、念のため右に持って行ってみます。(これは任意でよいと思います。)
https://docs.continue.dev/getting-started/install

Ollama と VS Code / Continue の連携方法 (実際にコーディングする場合の AI支援)

せっかくなので、VS Code でコードを記載する際に Continue によって AI 支援を受ける方法についても確認しておきます。
今回はローカルで動作している Ollama と連携させるので、[Or, remain local >] をクリックします。

Ollama がインストール済みで動作していれば、[Ollama is running at http://localhost:11434] に緑色のチェックマークがつきます。

そのまま表示の指示に従って [Download Chat model], [Download Autocomplete model], [Download Embeddings model] のところにある Copy to Terminal のボタンをクリックして、開いたターミナル内で実行し、モデルを pull します。
3つともダウンロードが終わると Connect がクリックできるようになります。

Connect をクリックすると [continue_tutorial.py] が自動で開きます。

このファイルにチュートリアルを進めると、プログラムコードを書きながら Continue と連携する際に便利にな方法が確認できます。

単に Ollama のフロントエンドとして使う場合

単に Ollama の UI として利用する場合は、プロンプトを入力するボックスのところにあるモデル選択のドロップダウンメニューで [Add Chat model] をクリックして、Ollama を追加するだけです。
(Ollama を追加すると config.json のファイルが開きますが、特に変更はしないのでそのまま閉じます。)

Add Chat model の際に Model を Auto detect にしておくと、すべてに Ollama 側で pull 済みのモデルがドロップダウンボックスに表示されるようになります。

Chat の UI として利用するだけであれば、利用したいモデルを選択してプロンプトを入力するだけです。
必要に応じてサイドバーの領域を広くしておくと見やすいです。

新しいモデルを利用したい場合は、Ollama 側で pull した後に、再度 [Add Chat model] から Ollama に Connect すると Auto detect してくれます。
VS Code 内でターミナルは開けますので ( [表示] – [ターミナル] あるいは Ctrl + j ) 、少しだけ手間が減らせるかもしれません。

VS Code + Continue を Ollama のフロントエンドとして利用するメリットとしては以下のあたりでしょうか

• VS Code + Continue の環境自体は、簡単に用意できる。
• Continue のチャットウィンドウ内では Markdown を解釈してくれるので、Ollama をターミナルで利用するのとは異なり、LLM からの応答の装飾がきちんと表示できる。

Ollama 用に、もっとそれらしい フロントエンド/ UI を用意したい場合は、Open WebUI などを利用する形になると思いますが、それはまた別途記載したいと思います。

参考となれば幸いです。