はじめに Claude Codeの相棒としてCodex CLIを併用する運用を続けてきましたが、MCPでの連携には大きな課題がありました。 本記事では、MCPからSkillへの移行で得られた改善について共有します。 対象読者 Claude Codeを日常的に使っている開発者 複数のAIツールを組み合わせて使いたい方 MCP（Model Context Protocol）の運用に課題を感じている方 環境 Claude Code Codex CLI なぜCodexと連携するのか Claude Codeは非常に優秀ですが、複雑な問題や長時間の調査が必要なタスクでは、別の視点からのアプローチが有効な場合があります。 Codexをサブエージェント的に活用することで、実装方法の相談や、Claude Codeが行き詰まった問題を解決できることがあります。 MCPでの連携の問題点 当初、CodexをMCP

こんにちは。ダイの大冒険エンジョイ勢のbun913と申します。私はSDET(Software Development Engineer in Test)として、QAチームにいる何でも屋さんとして、私より優秀なみなさんが本質的なことに時間を使えるように日夜改善を考えています。 私は弊QAチームでのMCP活用として以下のような記事を書いておりました。 今回は最近話題の Agent Skills とあらかじめ作っておいたCLIツールを組み合わせて、QAチームが本質的ではない作業にかける時間とトークン消費量を大幅に削減する試みを紹介します。 内容自体はQAチームの取り組みですが、考え方やツールの使い方は他のことに流用できるのではないかと考えています。 先に背景とやったことをざっくり説明 背景: 前回までの取り組み 弊チームでは自動テストに力をいれつつも、手動テストの威力も大事にしています。実際探索

AI コーディングエージェントにフロントエンドのコードを書かせる際、Figma MCP を使用してデザインコンテキストやデザイントークンを提供することで、一貫したデザインガイドラインを遵守させる方法を紹介します。 AI コーディングエージェントにフロントエンドのコードを書かせる際、デザインの正確なコンテキストを提供することが課題の 1 つです。特に何も指定せずにフロントエンドのコードを書かせると、紫色の配色やグラデーションに偏りすぎたり、Inter や Roboto など特定のフォントばかり使用する傾向があります。これは Tailwind UI のような人気の UI フレームワークの初期設定に Indigo（紫色）を採用しており、それが AI モデルの学習データに多く含まれていることが原因と考えられます。 AI によって誰でも一定水準のフロントエンドコードを書けるようになる一方で、画一的な

はじめに 年末年始でPlaywright MCPを触り直しています。きっかけは、MCPがLinux Foundation傘下のAgentic AI Foundationに移管されたというニュースでした。GitHub Starsは23,000を超え、2024年11月のMCP発表からわずか1年。最初は「また新しいツールか」程度に思っていたのですが、触っているうちに、これまで経験してきたブラウザ自動化とは何か違うと感じ始めました。 その違和感を年末年始で整理してみた結果、自分なりに言語化できたのが「Webページの表現方法」の変化という視点です。 PlaywrightとPlaywright MCPは別物である 最初に混乱したポイントを共有します。 PlaywrightとPlaywright MCPは、関連はあるものの根本的に異なるものです。自分は「PlaywrightのMCP対応版」くらいに思って

任意のWebドキュメントをClaude Agent Skills化するツール site2skill を作りました。PAY.JPのドキュメントを例に、Claude Codeがドキュメントを参照しながら開発する流れを説明します。 GitHub - laiso/site2skillContribute to laiso/site2skill development by creating an account on GitHub.GitHublaisoLLMが知らないライブラリを使うときLLMには知識のカットオフ（学習データの期限）があります。新しいライブラリやマイナーなAPIを使おうとすると、LLMは正確な情報を持っていません。例えばClaude Opus 4.5 の知識は2025年8月のものであり、それ以降にリリースされたライブラリや、学習データに含まれていないドキュメントについては、正確な

はじめに MCP（Model Context Protocol）はすでに多くの人が触れ始めていますが、 本当に重要なのは「MCPそのもの」ではなく、Anthropicが示した “Code Execution × MCP” という新しい設計思想です。 MCPは外部ツールの標準化という基礎として重要ですが、Anthropicの最新記事が示したのは明確です。 「ツールを直接叩く時代は終わる。」 「エージェントはコードを書いて実行し、その中でツールを扱う時代になる。」 この記事では、この“設計思想の転換点”を広く浅くまとめます。 1. MCPは“軽く”おさらいだけ MCPは一言でいうと、 AIに“USBポート”のような標準化された外部接続点を生やすプロトコル。 ChatGPT / Claude / Gemini / 自前LLM どれでも扱える DB / SaaS / API / Wiki / ファ

MCP の普及に伴い、多数のツール定義が LLM のコンテキストを圧迫する課題が浮上しています。本記事では Progressive disclosure（段階的開示）による最小限の情報提供、MCP を使ったコード実行によるツール呼び出しの効率化、単一の検索ツールによるコンテキスト削減など、実践的な解決策を Claude Skills や Cloudflare Code Mode の事例とともに解説します。 Model Context Protocol (MCP) は登場からおよそ 1 年が経過し、事実的な標準としての地位を確立しつつあります。MCP が普及するにつれて、MCP ツールの課題点も浮き彫りになってきました。その課題の 1 つが、1 つのタスクを達成するために多くのツールが読み込まれ、結果として多くのコンテキストが消費されてしまうという問題です。 前提として、LLM がタスクの達

訂正とお詫び（2025/11/09追記） 記事公開後、Playwright MCPコントリビューターのogadra様より、技術的な誤りをご指摘いただきました。深くお詫び申し上げます。 誤った記述 「Playwright MCPはAIがセレクターを自動生成する」 正しい動作 Playwright MCPもChrome DevTools MCPと同様に、スナップショットに含まれる識別子（ref）を使用して要素を特定します。 LLMはセレクターを生成していません mcp__playwright__browser_fill_formなどの関数呼び出し時、引数としてref（Chrome DevTools MCPのuidに相当）が渡されます 両MCPの要素識別方法に本質的な違いはありません 実際の違い 主な違いは以下の2点です： 操作の実行方法 Chrome DevTools MCP: CDP（Chr

この発表では MCP サーバーの基礎的な知識から入り、ハンズオン形式で実施に MCP サーバーを自分の手で構築する体験を通じて理解を深めていきます。後半パートでは実際に本番レベルで MCP サーバーを開発した経験を元に、実践的な知識や失敗談などを共有します。

Next.js 16からの/_next/mcpエンドポイントにより、AIエージェントは 実行中のアプリケーションの内部状態にリアルタイムでアクセスできる ようになるからです。 How It Works（仕組みの解説） 以下仕組みの解説ですが、少し細かい内容になるので、先に検証結果をみたい方は飛ばして先に検証セクションからご覧ください。 Next.js DevTools MCPがどのように動作しているのか、アーキテクチャを理解しておくと、より効果的に活用できます。 公式ドキュメントによると This package provides a bridge MCP server that connects your coding agent to Next.js development tools: Coding Agent ↓ next-devtools-mcp (this package) ↓

こんにちは、とまだです。 「MCPサーバーを作ってみたけど、ツールが増えるとトークン消費が増え続ける...」と悩んでいませんか? Anthropicが公式エンジニアリングブログで、トークン消費を98.7%削減する「コード実行パターン」を公開しました。 ちょっと難しめの内容ですが、MCPサーバー開発者にとっては非常に有益な内容ですので、今回はこちらを解説します。 なお、この記事は、Anthropicの公式エンジニアリングブログを初心者向けに噛み砕いたものです。 より詳しい技術的背景は、原文も合わせてご参照ください。 （追記：MCPサーバ利用者側というよりは、MCPサーバ開発者に向けた内容です。） 著者について とまだ Claude Code・Cursor・Codex などAI駆動開発の実践者 本業はフリーランスエンジニア、ならびに法人向けAI駆動開発の導入コンサルタント AI駆動開発を学ぶ方

🚀 使い始めたきっかけ 社内運用予定の広告管理システムを開発することになり、TypeScript や React、Hono、TailwindCSS を使うことが決まっていました。 ところが、TypeScript を書いたことがなく、React も Hono も TailwindCSS も触れたことがありません。 そこで、AI にコードを書いてもらう開発をしてみようと思い、Claude Code を使用した開発を行いました。 同期の新卒メンバーも各々、 Claude Code を使って同じ技術スタックで開発を行いました！ 📝 現在の使い方 大まかには以下の流れで使っています。 マークダウンファイルに、やりたいことや要望、決まっている仕様をとにかく書き出す それを元に、Claude Code に仕様書を作成してもらう 仕様書を元に、実装手順書を作成してもらう 実装手順書を元に、コードを書い

AnthropicがClaudeの新機能 Claude Skills （Agent Skills）を追加したと発表しました。Claude Skillsは、Markdownファイルとスクリプトで構成される「スキルフォルダ」を通じて、モデルに特定の機能や知識を拡張できる仕組みです。 Claude Skills: Customize AI for your workflowsBuild custom Skills to teach Claude specialized tasks. Create once, use everywhere—from spreadsheets to coding. Available across Claude.ai, API, and Code.Box logoもともとClaudeは8月にチャットアシスタントからのコード実行環境をアップデートしていました。それまで

作ったもの：claude-ops-mcp Claude Codeの操作履歴をMCPサーバーとして提供するツールです。ClaudeCodeが自分で書いた自分のログを、自身で読み返すためのMCPです。 なぜ作ったか Claude Codeがv2になり /rewind コマンドで会話を巻き戻せるのは便利なのですが、根本的にClaude Codeは自身が行った作業の内容を理解（記憶）していないという問題があります。 「え、ちょっと何したの？」という素朴な質問に、自身のログを遡って確認するという機能はなく、あくまで推論で答えてきます。単純に不便なのと、なんだか気の毒になってきました。AIにも自分の記憶を持つ権利があってもいいんじゃないかと。 仕組み Claude Codeは ~/.claude/projects/<projectHash>/<sessionId>.jsonl にセッションログを記録し

Playwright Agents のセットアップ Playwright Agents は Playwright v1.56 以降で利用可能です。以下のコマンドで Playwright のエージェントの定義を追加します。--loop オプションは使用している AI エージェントの種類に応じて変更してください。 npx playwright init-agents --loop=claude コマンドを実行すると以下のファイルが生成されます。 .claude/agents/playwright-test-generator.md: Claude Code の SubAgents として Playwright Generator エージェントを定義 .claude/agents/playwright-test-healer.md .claude/agents/playwright-test-p

Claude Code は強力なコーディング支援ツールですが、効果的に活用するためには適切な設定が必要です。プラグインを使用することで、スラッシュコマンド、サブエージェント、MCP サーバー、フックなどの設定をパッケージ化し、他のユーザーと簡単に共有できます。この記事では、Claude Code のプラグインの作成方法と利用方法について解説します。 Claude Code を使用してコーディングを行う上では、以下の設定を活用することでより効果的に作業を進めることが期待できます。 スラッシュコマンド: よく使う操作をスラッシュコマンドとして登録し、素早くアクセスできるようにする サブエージェント: 特定のタスクに特化したサブエージェントを作成し、複雑なタスクを分割して処理する MCP サーバー: 外部ツールと連携するための MCP サーバーを設定し、Claude Code の機能を拡張する

Previous slideNext slideToggle fullscreenOpen presenter view 鹿野 壮 Claude Codeにタスク丸投げおじさん（自称） @tonkotsuboy_com 本日の構成 Claude Codeが刷新した開発現場 手数の増加を支えるClaude Codeの機能 人間に残された仕事 まとめ Claude Codeが刷新した開発現場 リリース数の爆増 開発速度が明らかに向上した 2025年5月頃、Claude Codeを全社導入 Claude Codeの全社導入後、 チーム内のPRリリース数は約3倍に増加 Devin、Cursor等もリリースと同時に導入したが、 比べ物にならない上昇幅 コードが民主化された コードの民主化: 職能を超えた開発が日常に 会社全体では、職能を問わず全員がClaude Codeをはじめとする AIエージェン

自律的な AI エージェントを利用したコーディングでは、生成したコードを実行した結果からフィードバックを得て、コードを改善していく反復的なプロセスが重要です。しかし、フロントエンド開発では、生成したコードはブラウザ上で実行されるため、AI エージェントが直接コードを実行したり、ブラウザのコンソールログを取得したりすることは困難です。Chrome DevTools MCP はこの課題を解決するためのツールです。 自律的な AI エージェントを利用したコーディングでは、生成したコードを実行した結果からフィードバックを得て、コードを改善していく反復的なプロセスが重要です。バックエンドや CLI ツールの開発では、生成したコードはターミナル上で実行されログが表示されるため、AI エージェントはコードの実行結果を容易に取得できます。しかし、フロントエンド開発では、生成したコードはブラウザ上で実行され

こんにちは、mayaです！ 最近、Claude Codeでボリュームの大きいタスクを実行していると、途中でAuto Compactが発動してコンテキストが圧縮され、それまでの経緯をClaude Codeが見失ってしまう問題に悩まされていました。 せっかく良い流れで進んでいたのに、突然とんちんかんな作業を始めるあの絶望感、分かる方も多いのではないでしょうか😭 そんな中、Codex CLIがMCPに対応したという情報を見つけて試してみたところ、これが予想以上に良い体験でした！ Claude Codeがタスク管理役、Codexが実行役という役割分担により、コンテキストウィンドウをほとんど消費せずに大規模なタスクを自律的に完遂できるようになりました。 この記事で分かること / 対象読者 Claude Codeのヘビーユーザー向けの内容です コンテキストウィンドウ問題の実践的な解決方法 Claud

こんにちは、アイレット後藤です。 さて、みなさん。朝、PC を開いて最初にやることって何ですか？ 私の場合、これまでは毎朝30分以上かけて、メールチェック、Slack 確認、カレンダー確認、Notion のタスク整理、Backlog の課題確認・・・と、あちこちのツールを行き来していました。 これ、今の自分の役割が広がり複雑化してきているためコントロールしづらく、正直、非常に大変でした。 でも今は違います。「おはよう」の一言で、すべてが3分で完了します。 今回は、Claude Code と MCP サーバーを活用した、新しいタスク管理の仕組みをご紹介します。実際に使ってみて、非常に効果的でしたので共有させていただきます。 なぜ生成 AI によるタスク管理が必要だったのか情報が散らばりすぎ問題現代の、特に IT に関わる現場で働く人が抱える大きな課題のひとつは「情報の分散」だと思います。 私