💻️

ローカル LLM プログラミングの夢を見る(話題の GLM じゃないよ)

に公開
1

内容

ローカルの LLM で開発タスクをこなしたい!という話。
※ 推奨するものではないです。ただの個人的な記録。

zai-org/GLM-4.5-Air はすごい。3 ビットの MLX 版を LM Studio で動かした。ゲームを作らせてみたら、ちょっとバグはあるものの結構な代物を生成してくれる。
でも、それだけだと開発には使えない(個人の感想)。
Claude Code Router で、Claude Code と一緒に使うには、マシンスペックが足りなかった。
そしたら、タイミングよく公開された Qwen3-30B-A3B-Instruct-2507 。Thinking 無しで、ワンショットコーディングの能力が上がっている!と軽く興奮。
で、Cloude Code Router で使用してみる運びに。

環境

設定

Claude Code Router

設定ファイル

~/.claude-code-router/config.json

{
  "Providers": [
    {
      "name": "lm-studio",
      "api_base_url": "http://localhost:1234/v1/chat/completions",
      "api_key": "dummy",
      "models": ["qwen_qwen3-30b-a3b-instruct-2507"]
    }
  ],
  "Router": {
    "default":     "lm-studio,qwen_qwen3-30b-a3b-instruct-2507", 
    "background":  "lm-studio,qwen_qwen3-30b-a3b-instruct-2507",
    "think":       "lm-studio,qwen_qwen3-30b-a3b-instruct-2507",
    "longContext": "lm-studio,qwen_qwen3-30b-a3b-instruct-2507"
  }
}

環境変数

これは無くても良いかも。以前別の検証でタイムアウトした時に必要だった設定。
Claude Code Router ではなく Claude Code を使う時にも影響が出るので注意。デフォルト値は 600000
ccr code での起動時に表示される API timeout の値は変わらないが、動作としてはタイムアウトが設定値になっている(はず)。

API_TIMEOUT_MS=3600000

LM Studio

開発者の画面で、LLM を読み込んだ時の設定値。

  • コンテキスト長: 32768
  • temperature: 0.7
  • Top-K サンプリング: 20
  • 最小Pサンプリング: 0
  • Top-Pサンプリング: 0.8

開発

初回プロンプト

# シンプルなタスク管理アプリを作成する

## 機能

- タスク一覧
    - 追加日で並べ替え可能
    - ステータスでフィルタリング可能
- タスクを追加
- タスクを完了
- タスクを削除

## データストア

- IndexedDB

## ファイル構成

- index.html
- style.css
- app.js

## UI/UX

- モノクローム 
- グリッドシステム
- レスポンシブウェブデザイン

生成されたもの:

https://github.com/high-u/ccr-and-qwen3-30b-a3b-instruct-2507-q4-k-m/blob/feature/create-app/app.js
https://github.com/high-u/ccr-and-qwen3-30b-a3b-instruct-2507-q4-k-m/blob/feature/create-app/index.html
https://github.com/high-u/ccr-and-qwen3-30b-a3b-instruct-2507-q4-k-m/blob/feature/create-app/style.css

最初の画面

UI のバグはあったものの、機能的なバグは無し。指示の実現度も 100% とは言えないものの合格ライン。
タスクの完了をチェックボックスではなく、ボタンにしてくれたのは、自身の好みに合っていて Good 👍️
完了から未完了に戻せない仕様で作られたが指示にも無かったし、この仕様は嫌いじゃない。

バグ改修

フィルターのボタンの文字が読めないバグがあったので、それを修正してもらう。

フィルターのボタンが選択されていない時、文字色と背景色が同一で見えません。選択されていない時は文字色を黒にしてください。

差分を表示して直してくれた。Claude Code が素晴らしいというだけかもしれないが。

> フィルターのボタンが選択されていない時、文字色と背景色が同一で見えません。選択されていない時は文字色を黒にしてください。

⏺ I'll fix the filter button styling issue where unselected buttons are not visible due to matching text and background colors. I'll update the CSS to ensure unselected buttons have black text:

⏺ Update(style.css)

╭────────────────────────────────────────────────────────────────────────────────────────────╮
│ Edit file                                                                                  │
│ ╭────────────────────────────────────────────────────────────────────────────────────────╮ │
│ │ style.css                                                                              │ │
│ │                                                                                        │ │
│ │   81        font-size: 0.9rem;                                                         │ │
│ │   82        border: 1px solid #ccc;                                                    │ │
│ │   83        background-color: #fff;                                                    │ │
│ │   84 +      color: #000; /* Ensure black text for unselected buttons */                │ │
│ │   85        transition: all 0.3s ease;                                                 │ │
│ │   86    }                                                                              │ │
│ │   87                                                                                   │ │
│ ╰────────────────────────────────────────────────────────────────────────────────────────╯ │
│ Do you want to make this edit to style.css?                                                │
│ ❯ 1. Yes                                                                                   │
│   2. Yes, and don't ask again this session (shift+tab)                                     │
│   3. No, and tell Claude what to do differently (esc)                                      │
│                                                                                            │
╰────────────────────────────────────────────────────────────────────────────────────────────╯

UI 調整

ヘッダーの見た目を変えてもらう。
なんだかんだと、4 回投げた。

  1. h1 のフォントサイズを他のフォントと同程度のサイズにしてください。ヘッダーを画面上部と左右に張り付くような帯状の見た目に変更してください。ヘッダーの背景色は黒で、文字色は白にしてください。
  2. タスク入力を行うインプットと、タスク登録を行うボタンが、ヘッダーの下に隠れてしまいました。
  3. h1 の文字をもっと小さくしてください。h1 の上下のスペースを現在の半分程度にしてください。h1 を "TASK MANAGER" に変更してください。
  4. h1 の上下のスペースが変わっていないようです。ヘッダー内部の背景色が黒の部分のスペースです。伝わりますか?
> h1 の文字をもっと小さくしてください。h1 の上下のスペースを現在の半分程度にしてください。h1 を "TASK MANAGER" に変更してください。

⏺ I'll update the h1 styling according to your requirements:

  1. Make the text smaller
  2. Reduce top and bottom spacing to half of current amount
  3. Change text to "TASK MANAGER"

⏺ Update(style.css)
  ⎿  Updated style.css with 4 additions and 2 removals
       35    }
       36
       37    h1 {
       38 -      font-size: 1.5rem; /* Adjusted to match other text sizes */
       38 +      font-size: 1.2rem; /* Reduced size */
       39        font-weight: 600;
       40 -      letter-spacing: -0.3px;
       40 +      letter-spacing: -0.2px;
       41 +      padding-top: 8px; /* Reduced to half of current amount */
       42 +      padding-bottom: 8px; /* Reduced to half of current amount */
       43    }
       44
       45    /* Add task section */

⏺ I'll update the h1 text content to "TASK MANAGER" as requested:

⏺ Update(index.html)

╭────────────────────────────────────────────────────────────────────────────────────────────╮
│ Edit file                                                                                  │
│ ╭────────────────────────────────────────────────────────────────────────────────────────╮ │
│ │ index.html                                                                             │ │
│ │                                                                                        │ │
│ │    9    <body>                                                                         │ │
│ │   10        <div class="container">                                                    │ │
│ │   11            <header>                                                               │ │
│ │   12 -              <h1>タスク管理アプリ</h1>                                          │ │
│ │   12 +              <h1>TASK MANAGER</h1>                                              │ │
│ │   13            </header>                                                              │ │
│ │   14                                                                                   │ │
│ │   15            <section class="add-task">                                             │ │
│ ╰────────────────────────────────────────────────────────────────────────────────────────╯ │
│ Do you want to make this edit to index.html?                                               │
│ ❯ 1. Yes                                                                                   │
│   2. Yes, and don't ask again this session (shift+tab)                                     │
│   3. No, and tell Claude what to do differently (esc)                                      │
│                                                                                            │
╰────────────────────────────────────────────────────────────────────────────────────────────╯

途中、タスク分割して、ファイル毎に修正が行われた。(そりゃそうなのだが)

成果物

Github Pages で 公開 ※ 危険なことは無いはずですが IndexedDB にデータが保存されるので注意

成果物

https://github.com/high-u/ccr-and-qwen3-30b-a3b-instruct-2507-q4-k-m/blob/ui/header-design/app.js
https://github.com/high-u/ccr-and-qwen3-30b-a3b-instruct-2507-q4-k-m/blob/ui/header-design/index.html
https://github.com/high-u/ccr-and-qwen3-30b-a3b-instruct-2507-q4-k-m/blob/ui/header-design/style.css

本家 Claude Code の成果物と比較

もちろんエラーは無い。まぁ、この UI もありかな。ごちゃついている感じが好きではないけど。グリッドシステムやレスポンシブは流石な感じだった。

Claude Code

LM Studio のチャットで出力した成果物と比較

UI だけ比べてもアレだけど。

LM Studio

使用リソース

余計なものは極力動かさない状態でのメモリ使用量。

消費リソース

メモリ 37GB 程度

雑感

つぎの 4 点。

  • 日本語のプロンプトが通じている。
  • 機能的なバグを出さなかった。
  • アクティブパラメーターが 30 億ゆえのスピード感。(とは言っても、「はやっ!」ではなくて、「まぁ、待てる」程度)
  • Claude Code が綺麗に動いた。(モデルのツール利用が優秀)

なんか、これ書いていて、本当に、ローカルだけで動いていたのか?との懸念が。大したことはやっていないが、こんなにも期待通り動くものか?
次は、ネットワークを切ってからやる。何か足元すくわれそう感はある。

今後

  • UI のライブラリやフレームワークの導入
  • MCP サーバーの利用
  • データストアのクラウドへの移行
  • 認証認可の実装
  • クラウドへのデプロイ

複雑なアルゴリズムや計算が必要なものは特に期待しないけど、データ入出力のアプリケーションが作れることが出来たら楽しいな。

最後に

実用性は考えていません。ただの浪漫です。

GitHubで編集を提案

Discussion