本動画では、AIエージェントに新しいスキルを教える革新的なアプローチを実践的に解説している。Anthropicが最近リリースしたエージェントスキル機能を活用し、MCPよりも重要だと評価される理由を明らかにする。具体的には、Agent Development Kitのドキュメントを基にカスタムスキルを作成し、Claude Codeがそれを理解して活用できるようにする過程を紹介する。Next.jsフロントエンド、Clerk認証、マルチエージェントフレームワークを組み合わせたEコマース向けカスタマーサポートシステムの構築を通じて、プロンプトではなくスキルを教えることで、エージェントが未知のパッケージやフレームワークを人間がドキュメントを読むように段階的に学習できることを実証している。
Claudeに新しいスキルを教える実践
エージェント用のスキルを構築し、それをClaude Codeで利用可能にして、未知のパッケージやコーディングフレームワークに対応できるようにする実践的な例を見ていきましょう。Anthropicが数日前にエージェントスキル、つまりClaudeスキルをリリースしました。個人的な意見ですが、これはモデルコンテキストプロトコルよりも重要だと思います。
今回は、フロントエンドと動作するバックエンドを含むフルスタックアプリを実装してみます。ユーザー認証も含みます。簡単に概要を説明すると、Next.jsフロントエンドがあります。それから、Clerkを使ってユーザーを認証します。ユーザーはGmailアカウントを使ってログインできるようになります。
Clerkについては、動画の後半で詳しく説明します。個々のユーザーがログインできるようになったら、Agent Development Kitを使って回答を提供します。これらすべてを、Claudeに提供するカスタムスキルを使って実装していきます。
これは、サブエージェントやMCPとは異なります。なぜなら、必要な情報を段階的に読み込むからです。すべてのツールやサブエージェントのコンテキストをコンテキストウィンドウに一度に投入するわけではありません。これは、人間が新しいパッケージや新しいツールのドキュメントを読む方法と同じです。これについては専用の動画を作成しました。まだご覧になっていない方は、ぜひ視聴することを強くお勧めします。
例として、Agent Development Kitを見ていきましょう。このマルチエージェントフレームワークのドキュメントをスキルの形でClaudeに提供し、それを使ってマルチエージェントシステムを構築してもらいます。
ですから、これはContext 7 MCPのようなものとは大きく異なります。Context 7 MCPは異なるパッケージの最新ドキュメントを検索できますが、ここではClaude Codeが実際にADKの使い方を理解できるようになります。利用可能な異なるツールを見るだけではありません。
カスタムスキルの作成プロセス
Claudeにはすでに多くの異なるスキルが備わっていますが、スキル作成スキルというものが1つあります。何かについてのドキュメントを提供すれば、その特定のスキルを作成してくれます。
ADKの場合、すべてのドキュメントをダウンロードして、zipファイルにまとめました。ここでそのzipファイルを提供し、少しコンテキストを添えて、これはADKのドキュメントですと伝えました。そして、エージェントがADKを使えるように、このスケールを作成してくださいと指示しました。
すると、そのzipファイルの中身を見て、構造を理解しようとしました。これらは基本的にほとんどがHTMLファイルです。そして、独自のスキル作成スキルを使って、新しいスキルの作成を始めました。
このプロセスには少し時間がかかることがありますが、最終的には新しいスキルを含むzipファイルと、その中に何が含まれているかの説明が得られます。
skill.mdファイルがあり、PythonとJavaのクイックスタートガイドや、さまざまなコアコンセプトが提供されています。それからリファレンスファイルがあります。これらは提供されたドキュメントを基に構築されています。そして素晴らしいのは、Claudeが何かを実装する必要がある場合、階層的なアプローチを使って、特定の実装に関連するものだけを探すことです。
異なる例のファイルもいくつかあり、ADK内の異なる機能を実装しています。そして、これがスキルの構造がどのように見えるかの実際のメインの構造です。中核にはskill.mmdファイルがあります。それから、リファレンス、開発、そしてさまざまな例があります。次に、このzipファイルをダウンロードします。
今、Cursorを開いています。Claudeフォルダを作成します。実際、名前を変更しましょう。この中に別のフォルダを作成する必要があります。これはskillsと呼ばれます。同じプロジェクト内に複数の異なるスキルを持つことができます。そして、そのフォルダをコピーしました。
skill.mdをもう一度見ると、初期の説明があり、それからClaudeが実装してくれたクイックスタートガイドがあります。そして、異なるリファレンスを見ることができます。ここにもいくつかの例があります。つまり、ADKの使い方について非常に詳細なドキュメントがあるわけです。
実装開始:カスタマーサポートシステム
次に、Claude Codeを使ってこの新しいスキルで何かを構築していきます。個人的にWarpターミナルが好きなので、それを使います。まず、Claude Codeを更新しましょう。そして、これをYOLOモードで使うのが好きです。
この例では、ADKを使ってカスタマーサポートエージェント用のマルチエージェントフレームワークを構築します。認証にはClerkを使用します。すべてのカスタマーサポート担当者は、ログインして使用できる独自のエージェントセットを持つことになります。
Eコマースウェブサイト用のカスタマーサポートシステムを作成する手助けをしてください。これは、Eコマースウェブサイト用のカスタマーサポートシステムになる予定です。やり取りできるデモデータセットを作成してください。顧客は、異なる製品の価格を調べられるようにする必要があります。また、購入した製品を返品できるようにし、製品や注文のステータスについても問い合わせできるようにする必要があります。
提供した新しいADKスキルのドキュメントを見て、それに基づいてマルチエージェントフレームワークを作成してください。これは、私が作成した音声テキスト変換システムに基づくリアルタイム文字起こしです。興味がある方は、詳細は下の説明欄にあります。
ここで満足していると思いますが、もう少し詳細を追加しましょう。並列エージェントと順次エージェントの両方を使用してください。ADK UIを使用する予定ですが、後で、異なるカスタマーサポートエージェントがアカウントでログインしてこのシステムを使用できるカスタムUIを作成する必要があります。ここで満足していると思います。これを送信しましょう。
最初にやることは、実際にGoogle ADKスキルを見ることです。今、ADKフレームワークを理解したと言っています。データセット、並列エージェント、順次エージェント、適切なADK UI設定を備えた包括的なマルチエージェントサポートカスタマーサポートシステムを作成させてくださいと言っています。では、しばらく調理させて、何を実装したか戻って見てみましょう。
初期実装と問題解決
初期実装が完了しました。特にAPI設定でいくつかの問題が発生しました。モデルとやり取りをして、修正できたようです。今、Google Cloud Vertex AIに依存せずにGemini SDKを使用しています。また、モデルをGemini 2.5 Flashに更新するよう依頼しました。
現時点で、エージェントが利用できるツールは14種類あります。基礎となるデータが何か見てみましょう。それから、エージェントが現在どのように動作しているか、簡単なデモをお見せします。
これが使用していたスキルです。カスタマーサポートエージェントを作成しました。これは、そのエージェント用に実装した異なるツールだと思います。実際のカスタマーサポートデータを見ると、作成した異なる顧客がいます。注文もいくつかあります。これが、カスタマーサポートエージェントが利用できるダミーデータベースの例です。
これがADKインターフェースです。今のところ、カスタマーサポートエージェントは1つだけです。初期要件を満たすことができたため、複数の異なるツールを持つ単一のエージェントを実装することに決めたようです。それでは質問してみましょう。
現在利用可能な異なるヘッドフォンを調べてもらえますか?文字起こしに満足しています。今、検索ツールを使用していて、ヘッドフォンを見つけました。在庫に何個のユニットがありますか?
実際にこれを見ることができると思います。基本的に、アイテムを見つけるために検索ツールを使用しようとしました。Michaelという名前の顧客を見つけて、どんな注文をしたか教えてもらえますか?合計金額はいくらでしたか?ここで満足していると思います。何をするか見てみましょう。
今、Michaelという名前で顧客を見つけようとしています。ここに顧客名があります。合計金額はこちらです。何かを発送しました。さて、もっと複雑な質問をしてみます。どのようなSSDがあるか調べてもらえますか?現在の価格はいくらですか?それから、それらを注文した顧客がいるか確認してもらえますか?見てみましょう。
今、製品検索を探しています。それらを見つけることができました。顧客名で注文を検索して、他のすべての特定のIDを取得できます。顧客IDだけでなく、アイテムごとに注文を見ることができるツールをもっと作成する必要があると思います。
ご覧のとおり、スケールを作成できて、そのスケールを使用して、ClaudeがADKを使用してエージェントシステムを構築できるようになったのは、かなり素晴らしいことでした。
Clerk認証の統合
次に、異なるカスタマーサポート担当者が自分のアカウントにログインできるよう、アプリに認証を追加します。これには、Clerkを使用します。Clerkは、認証とユーザー管理サービスを提供する優れたプラットフォームです。彼らの親切なスポンサーシップにより、この動画も実現しています。
始めることができる寛大な無料プランがあります。まず、プラットフォームでアカウントを作成してください。ダッシュボードに行くと、すでに1つのアプリが実行されていますが、ここに別のアプリを作成する必要があります。アプリへのサインインオプションとして何が必要かを決めてください。
今のところ、メールとGoogleがありますが、選択できる他の多くのオプションがあります。アプリ名を提供できます。agent v2と呼びましょう。これがUI上でどのように見えるかです。アプリを作成します。アプリが作成されたら、APIキーをコピーする必要があります。
すでにavファイルがあります。そこにこれらのキーをコピーします。素晴らしいのは、実際にコピーできる非常に便利なプロンプトがあることです。これをコピーしましょう。このプロンプトをGoogleドキュメントに貼り付けると、提供されるすべての指示が表示されます。
これにより、Next.jsアプリとの統合が可能になります。何をすべきか、何をすべきでないか、すべての指示があります。作成したカスタムスキルと非常に似ていますが、ここにはこの統合を実装するためのClerkからの適切なドキュメントがあります。
Claude Codeに戻って、持っているすべての指示を貼り付けて、Claude Codeにもう一度調理させます。今、Next.jsアプリ内にそれを統合するかどうか尋ねています。実際にNext.jsアプリを実装しました。はいと言って、実装が完了したら戻ってきます。
実装が完了しました。Claudeと少しやり取りをしました。ADK用のAPIの実装方法を修正する必要がありましたが、今ではすべてがうまく機能しているようです。これがどのように見えるか、簡単なデモをお見せしましょう。
最終実装デモ
これがシステムによる最終実装です。これは、AIが情報の取得を支援する、人間のカスタマーサポート担当者が使用するインターフェースになる予定です。これはGoogle ADKによって動力を得ており、認証はClerkによって提供されています。Clerkは非常に簡単にできるので優れたプラットフォームです。
ユーザー管理や認証について心配する必要がありません。また、Superbaseのようなものと統合することもできます。非常に簡単です。今はログインにGoogleを使用しますが、ここでカスタムメールを使用することもできます。自分のアカウントの1つを使用します。
これがカスタマーサポートエージェントに表示されるものです。分析があります。AIチャットアシスタントがあります。すべてはGoogle ADKによって動力を得ています。実際、ここで配色を改善できる可能性があります。メッセージを送信できます。それから、さらなる情報を求めているのが見えます。
これは1人のカスタマーサポートエージェントの1つのアカウントにすぎず、実際にそのカスタマーサポートエージェントのすべての詳細を見ることができます。Clerk上には、アプリケーションに関連する異なる情報を見ることができる非常に優れたダッシュボードがあります。
ユーザー管理と認証を探しているなら、Clerkは優れたアプリケーションです。ぜひチェックしてください。リンクは動画の説明欄にあります。
これが、新しいドキュメントをClaude Codeに提供して機能を実装するためのエージェントスキルの使用方法についての私のアプローチでした。このプロセスは面倒な場合がありますが、初期実装は非常に有望に見えます。
独自のSOPや標準作業手順がある場合、これは非常に役立ちます。たとえば、会社がコードレビューのために特定の標準に従っている場合、それらをClaude Codeに提供できます。エージェントスキルについてもっと知りたい場合は、私の以前の動画もチェックすることを強くお勧めします。リンクは説明欄にあります。
とにかく、この動画が役に立ったことを願っています。ご視聴ありがとうございました。いつものように、次の動画でお会いしましょう。
コメント