「派手なシェーダー効果を、コンポーネントとして貼るだけ」。Shaders（shaders.com）は、WebGPUのビジュアルエフェクトをReactなどのコンポーネントで使えるライブラリです。ビジュアルエディタで調整してコードを書き出せるほか、MCP対応でAIエージェントから直接呼び出せます。
Shaders とは
Shaders は「モダンなフロントエンドのためのシェーダー・マジック」を掲げる、WebGPUエフェクトのコンポーネントライブラリです。インタラクティブな背景、ロゴシェーダー、画像エフェクトを“数秒で”足せます。<Aurora/> <Glass/> <WaveDistortion/> <ChromaticAberration/> など多数のコンポーネントが用意されています。
使い方①：ビジュアルエディタ → コード書き出し
デザインエディタで効果を視覚的に調整し、本番用のクリーンなコードをコピー＆ペーストで書き出します。フレームワークは React / Vue / Svelte / Solid / vanilla JS から選択可能。デザイナーが触って決め、開発者がそのまま実装に移せます。
使い方②：MCPでAIエージェントから呼ぶ
目玉が Shaders MCP（Pro）。MCP対応のAIエージェントから、プリセットの検索 → 1コマンドでインストール → props（パラメータ）の調整までを、ターミナルを離れずに行えます。
- 保存したシェーダーの一覧・取得（任意のフレームワークのコードで）。
- Proプリセット・コレクションの検索とコード書き出し。
- propsをアプリの状態（reactive state）に接続し、インタラクティブ化。
多くのMCPクライアントはOAuthに対応し、サーバーURLを追加してShaderアカウントでサインインするだけ（APIキー不要）。Claude Code では次のように追加します。
claude mcp add --transport http shaders <サーバーURL>※Shaders MCP の利用には Pro アカウントが必要です。
使いどころ・注意点
- 向く：ヒーローの動く背景、ロゴ/画像の質感づけなど“一段上”の演出を素早く入れたいモダンWeb。
- WebGPU前提：表示環境のWebGPU対応や、エフェクトのパフォーマンス（重い処理）に注意。公式のPerformanceガイドを確認。
- 同社は「design tools / AIサイトビルダー / ビジュアルエディタ」への組み込み連携も提供。
“動きの質”でAIっぽさを脱する発想は Taste Skill とも通じます。
主な情報源
機能・対応フレームワーク・料金は公開時点のものです。収集・要約はAI、公開判断は人。