利用する前提
- Node.js v16以上
- xAI（Grok）の APIキー
インストール手順
1.インストールコマンド
npm install -g @vibe‑kit/grok-cli
ローカルインストールの場合
git clone <repository>
cd grok-cli
npm install
npm run build
npm link
2.APIKeyのセットアップ
- Grok 4: Now Availableをクリック
- 左上にあるAPIkeysをクリック
- クレジットがない場合は右上にオレンジ色で警告が出るのでクレジットを購入
- APIKeyを作成しコピー
（API キーは再度表示できなくなるため、必ず今すぐコピーしておいてください。）
3.ターミナルにgrokと入力しGrok CLIを起動
初回起動時にAPIKeyの入力が求められるのでコピーしていたAPIKeyをペースト
4.セットアップ完了！
余談：カスタム指示
.grok/GROK.mdプロジェクト ディレクトリにファイルを作成することで、Grok の動作をプロジェクトに合わせてカスタマイズできます。
mkdir .grok
touch .grok/GROK.md
利用したリポジトリ
実際に会話してみる
このようにしっかり返答してくれてます！
自己紹介用のWEBサイトを作成してみてと指示してみる。
特に追加指示を行わないと...
こんな感じのものが出てきました。
中身を見てみると...
なんと画像まで生成してくれている！
しかし上手くサイトに反映されていないため確認してみたら画像はうまく生成できていないみたいです。
出てきたコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自己紹介 - 私のウェブサイト</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<h1>ようこそ、私のウェブサイトへ</h1>
</header>
<main>
<section id="profile">
<h2>プロフィール</h2>
<img src="images/profile.jpg" alt="プロフィール画像" id="profile-img">
<p>はじめまして、私は[あなたの名前]です。興味のあることは[興味のあること]です。</p>
</section>
<section id="about">
<h2>私について</h2>
<p>ここに自己紹介文を記載します。経歴や趣味、特技などを自由に書いてください。</p>
</section>
<section id="contact">
<h2>お問い合わせ</h2>
<p>Email: <a href="mailto:example@email.com">example@email.com</a></p>
</section>
</main>
<footer>
<p>© 2023 [あなたの名前]. All rights reserved.</p>
</footer>
<script src="js/script.js"></script>
</body>
</html>
style.css
/* 基本スタイル */
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
color: #333;
background-color: #f4f4f4;
}
header {
background: #35424a;
color: #ffffff;
text-align: center;
padding: 1em 0;
}
main {
width: 80%;
margin: auto;
overflow: hidden;
padding: 20px 0;
}
section {
margin-bottom: 20px;
background: #ffffff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
#profile-img {
width: 150px;
height: 150px;
border-radius: 50%;
margin-right: 20px;
float: left;
}
footer {
background: #35424a;
color: #ffffff;
text-align: center;
padding: 1em 0;
margin-top: 20px;
}
a {
color: #35424a;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
script.js
// ページが読み込まれたときの処理
document.addEventListener('DOMContentLoaded', function() {
console.log('ウェブサイトが読み込まれました');
// 簡単な挨拶アラート
setTimeout(function() {
alert('ようこそ、私のウェブサイトへ！');
}, 2000);
});
最後に
話題になっていたGrok CLI、せっかくなので早速触ってみました。インストールしてAPIキーを入れるだけですぐに利用できて良かったです。しかしまだ画像生成あたりは不安定な感じもありますが、面白いツールがまた一つ増えました！