AIエディタの「Cursor」には、エディタ内にチャット機能が搭載されていて、AIとチャットをしたり、作業を依頼することができます。ここでは、そんなCursorのAI機能を実際に使いながら、全体の流れを把握していきましょう。細かなパネルや設定は後ほど解説しますので、まずは操作の雰囲気をつかんでください。

新しいファイルを作成して保存する

Cursorを起動したら、「ファイル→新しいテキストファイル」メニューを選択します。ショートカットキーが割り当たっているので、これを使うと良いでしょう。macOSがCommand+N、WindowsがControl+Nです。

Cursorでファイルを編集する場合は、必ず先に保存しておきましょう。後で紹介する「言語モード」が適切に切り替わり、Cursorの機能を活用することができます。ファイルを保存する場合のショートカットは、macOSはCommand+S、WindowsはControl+Sになります。

適当な場所、例えばデスクトップなどに「cursor」というフォルダを作成し、その中にindex.htmlという名前で保存します。拡張子.htmlを忘れないようにしてください。

プロジェクトフォルダを開こう

また、Cursorはフォルダをエディタ上に開くことができ、便利な操作が行えます。そこで、今作成したフォルダを開いておきましょう。

「ファイル→フォルダを開く」メニューを選択し、先ほど作成した「cursor」フォルダを指定します。

すると、左側のエクスプローラーパネルにフォルダ構造が表示され、index.htmlが確認できます。この状態でエディタ内からファイルを選択・編集できます。

AIの補完機能を使おう

それでは、「index.html」ファイルにHTMLの文書を作成していきましょう。とはいえ、ここではAIに助けてもらいながら作成していきます。

左側のエクスプローラーパネルで、「index.html」をクリックしてエディタで開いたら、「<」を入力します。すると、HTMLタグの候補が表示されます。Cursorではこのように、HTMLタグなどの辞書を持っているので一覧から選ぶだけで入力ができます。

ここでは、一番上の「!DOCTYPE」を選びましょう。

すると今度は、続きの内容が薄いグレーの文字で表示されます。これは、CursorのAI機能が続きを予測して補完してくれています。

AIの提案が適切な場合は、Tabキーを押すると確定されます。受け入れたくない場合は、そのまま文字を入力すると、提案は削除されます。

Cursor Tabの設定と制限

この補完機能は「Cursor Tab」といい、利用するかどうかを制御できます。エディタの右下の「Cursor Tab」というメニューをクリックしましょう。

次の設定ができます。

• Disable globally … AI補完を全ファイルで無効化
• Disable for html … HTMLファイルだけ無効化
• Model … 使用するAIモデルの選択（詳細は別途解説）

無料プランではCursorTabの使用回数に制限があります。上限に達すると補完が停止するため、継続して利用したい場合は有料プランへのアップグレードを検討しましょう。

AI Paneを表示しよう

右上のToggle AI Paneボタンをクリックしましょう。画面の右側にチャットパネルが開きます。

通常のチャットAIサービスと同様に、質問などを入力して会話をすることができます。

モデルを切り替えることもできます。

Sendボタンをクリックすると、回答が確認できます。

コードを生成しよう

Cursorのチャット機能では、会話をするだけではなく、コードを代わりに作ってもらったりもできます。チャットエリアに次のように入力しましょう。

HTMLの基本タグを書きたいです

すると回答するのと同時に、AIがindex.htmlを書き換えてくれます。

背景が緑色の状態では、まだファイル自体には反映されていないので、確認して問題がなければ「Accept file」ボタンをクリックします。とはいえ、ここではもう少し依頼を続けてみましょう。

追加リクエストと修正

例えばここでは、「body」タグ内にサンプルの内容が含まれているので、これを削除してもらいましょう。次のように入力します。

bodyタグの内容は空にしてください

Sendを押します。AIが修正をしてくれるので、Accept fileをクリックし、編集内容を確定しましょう。

インラインチャットを利用しよう

Cursorのチャット機能は、常にファイル全体を書き換えてしまうので、一部だけを書き換えたいという場合には「インラインチャット」機能が便利です。

Cursorで編集していると、薄い文字で次の図のように表示されることがあります。

Cmd+I（Ctrl+I）でチャット、Cmd+K（Ctrl+K）で生成モードでインラインチャットを起動できます。ここでは、Command+K（WindowsはControl+K）でジェネレートを起動しましょう。

入力欄が表示されるので、依頼内容を記述します。ここでは次のように入力してみましょう。

ボタンを作って下さい

「Generate」ボタンをクリックします。

すると、すぐ下の部分でAIがタグを提案します。

また、「Follow-up instructions」というエリアで追加の要望などを入力することもできます。

ここでは、次のように入力してみましょう。

startというid属性をつけてください

「Submit Edit」をクリックしましょう。id=”start”が付与されたタグが再提案されます。

生成内容に問題がなければ、行末のAcceptボタンをクリックするか、Command+Enter／Control+Enterで確定します。不要な場合はRejectで破棄できます。

生成内容を確認しよう

こうして生成されたコードをWebブラウザで確認してみましょう。ファイルを保存して、Webブラウザで開いてみます。次のように、ボタンが表示されることがわかります。

こうして、コードを自動的に生成することができます。

エージェント機能を使ってみよう

続けて、チャット機能でJavaScriptを生成してみましょう。Cursorでは新しいファイルを作成したりすることもできます。この時、Cursorでフォルダを開いておく必要があるので気をつけましょう。

チャット欄に次のように入力します。なお、チャット欄で改行したい場合はCmd+Enter（Ctrl+Enter）を入力します。

main.jsというファイルを作成してください
ボタンをクリックしたらカウントアップするプログラムを作成してください
index.htmlの画面上にカウントを表示するエリアを作ってそこに表示してください

「Send」ボタンをクリックしましょう。すると、自動的に「main.js」というファイルが生成され、中にプログラムが書き込まれます。

また、同時にindex.htmlも修正し、カウント表示用の<p>タグと<script>タグを追加します。なお、背景が赤いエリアは削除を提案している箇所で、緑の箇所が追加を提案している箇所です。それぞれ確認して、問題なければ「Accept file」をクリックしましょう。

また、複数のファイルの変更箇所を一気にすべて承認するには、チャット欄右下のAccept allを選択して一括確定します。

生成された内容をブラウザで確認すると「現在のカウント」という文字とクリックボタンが表示されます。ボタンを押すたびに数字が1ずつ増加し、カウントアップ処理が正しく動作することを確認できます。

このように、作ってほしい内容をチャット欄で伝えるだけで、どんどんコードを生成してくれます。いろいろなコードを生成して使っていきましょう。