リファレンス
デザインシステムとモデル
Vibrで使えるデザインシステム、npmの任意のパッケージを使う方法、各プロバイダーが提供するモデルについて説明します。
組み込みのデザインシステム
| デザインシステム | 種類 | パッケージ |
|---|---|---|
| Material UI (MUI) | React | @mui/material@6, @mui/icons-material@6, Emotion |
| Ant Design | React | antd@5 |
| Fluent UI React | React | @fluentui/react-components@9 |
| Mantine | React | @mantine/core@7, @mantine/hooks@7 |
| Shoelace | Webコンポーネント | @shoelace-style/shoelace@2 |
| Octuple | React | @eightfold.ai/octuple@2 |
下書きは、CDNから読み込んだこれらのパッケージの実際のコンポーネントをインポートし、React 19でレンダリングします。Vibrは構築の前に各パッケージが実際にエクスポートしているコンポーネントを読み取るため、モデルが存在しないコンポーネントを作り出すことはありません。CDN は esm.sh です。応答しなくなった場合、Vibr は今回の利用中、代わりに予備（jsDelivr、または Vibr 独自の Fluent UI のコピー）から下書きを読み込み、そのことをお知らせします。
デザインシステムを変更すると、新しいセッションが始まります。残しておきたいものは先に保存してください。
npmの任意のパッケージを使う
［デザインシステム］の選択メニューで［カスタムnpmパッケージ…］を選び、次の項目を入力します。
| 項目 | 入力する内容 | 例 |
|---|---|---|
| パッケージ（バージョン付き） | パッケージ名とメジャーバージョン。 | @radix-ui/themes@3 |
| CSSのパスまたはURL | 任意。パッケージにスタイルシートがある場合はそのパス。 | @radix-ui/themes@3/styles.css |
| 種類 | ReactまたはWebコンポーネント。 | React |
| 登録モジュール | 任意。登録にローダーが必要なWebコンポーネントの場合に指定します。 | my-ds@1/dist/loader.js |
Vibrは構築の前に、パッケージがnpmに存在するかを確認します。名前やバージョンが間違っている場合は、その旨が表示されます。
Vibrは、何かがパッケージを読み込む前にその内容も確認します。バージョン範囲は、公開から2週間以上経った最新リリースに固定されます（フィールドの@radix-ui/themes@3は、たとえば@radix-ui/themes@3.3.0になります）。これにより、今日公開された問題のあるリリースが使われることはありません。マルウェアとして登録されたパッケージは読み込まれません。フィールドの下には、既知のセキュリティ勧告、非推奨のバージョン、公開から30日未満または先週のダウンロード数が1,000未満のパッケージ、人気パッケージと1〜2文字だけ違う名前が表示されます。これらの確認にはdeps.dev、npm、OSVの公開データを使い、送信するのはパッケージ名とバージョンだけです。
グラフライブラリと表ライブラリも選ぶ方法は、グラフと表を参照してください。
プロバイダーとモデル
| プロバイダー | モデル | 計画に使うモデル |
|---|---|---|
| Google Gemini | gemini-3.5-flash（デフォルト）、gemini-3.7-flash、gemini-flash-latest、gemini-3.1-pro-preview | gemini-3.5-flash |
| OpenAI | gpt-5.5（デフォルト）、gpt-5.4、gpt-5.4-mini | gpt-5.4-mini |
| Anthropic | claude-sonnet-5-5（デフォルト）、claude-opus-5-5 | claude-haiku-5-5 |
| OpenRouter | anthropic/claude-sonnet-5.5（デフォルト）、anthropic/claude-opus-5.5, openai/gpt-5.5, google/gemini-3.5-flash, google/gemini-3.1-pro-preview | anthropic/claude-haiku-5.5 · openai/gpt-5.4-mini · google/gemini-3.5-flash |
OpenRouterなら、1つのキーでClaude、GPT、Geminiの各モデルを使えます。キーを貼り付ける代わりに、キーのダイアログで［OpenRouterでサインイン］を選ぶこともできます。OpenRouterがVibr専用のキーを作成し、OpenRouterのアカウントで確認、上限設定、無効化ができます。
［計画］ステップでは、同じプロバイダーの高速なモデルを使います。キーでそのモデルを使えない場合は、選択したモデルが代わりに計画します。また、各モデルには同じプロバイダーのバックアップモデルがあり、混み合っているときや割り当て上限に達したときに引き継ぎます。実行の仕組みをご覧ください。
Geminiの無料枠はFlashモデルで使用できます。Proモデルを使うには、Google AI Studioで課金を有効にする必要があります。