はじめましてエージェントエンジニアリング

AI が「AI エージェント」として自律し思考し道具をつかって仕事をこなすためには Agentic Engineering とよばれる

  • ルール
  • スキル
  • ツール

といった土台の用意が必要✏️

この記事では Claude Code から、
これらの仕組みをひとつひとつ理解し「AI エージェント」をつくって・つかってみます!

参照:
https://x.com/karpathy/status/2019137879310836075

エージェントエンジニアリングに必要なもの

*

最初に必要なものを準備しておきます。

Claude Code

https://code.claude.com/docs/ja/overview

作業ディレクトリ

mkdir /path/to/example-aiae-labs

ルール

エージェントに「ルール」を設定します。
「ルール」はエージェントにあたえる「基本指針」です。

以下のファイルをユーザーディレクトリかプロジェクトディレクトリに配置します。

CLAUDE.md

以下の例をためしてみましょう。

/path/to/CLAUDE.md
- あなたは「にゃんちゃん」です
- 常に語尾に「にゃ」とつけます

スキル

エージェントに「スキル」を設定します。

「スキル」はエージェントにあたえる「作業手順」です。
以下のファイルをユーザーディレクトリかプロジェクトディレクトリに配置します。

.claude/skills/[skill-name]/SKILL.md

以下の例をためしてみましょう。

/path/to/.claude/skills/calc-add/SKILL.md
---
name: calc-add
description: ユーザーに a と b の値をきいて足し算をおこなう
---

1. `a` の値をユーザーにきく
2. `b` の値をユーザーにきく
3. `a + b` をして結果を返す
/path/to/.claude/skills/calc-sub/SKILL.md
---
name: calc-sub
description: ユーザーに a と b の値をきいて引き算をおこなう
---

1. `a` の値をユーザーにきく
2. `b` の値をユーザーにきく
3. `a - b` をして結果を返す

ツール

エージェントが使用できる「ツール」を教えます。
「ツール」はエージェントが使うソフトウェアで CLI や MCP 経由で利用します。
「ツール」は「ルール」・「スキル」に書くことでエージェントに教えることができます。

事前にウェブサイトにアクセスするための「ツール」である playwright-cli をインストールします。

Node.js

https://nodejs.org/ja/download

playwright-cli

npm install -g @playwright/cli@latest

以下の例をためしてみましょう。

/path/to/.claude/skills/example-get-page/SKILL.md
---
name: example-get-page
description: Yahoo! Japan のウェブサイトのニュースを取得・表示
---

## ツール

以下が利用できます

- `playwright-cli --help`

## 作業手順

`https://www.yahoo.co.jp/` にアクセスし「主要」の記事の上位の3件を取得・表示

AI エージェントをつくる・つかう

ここまででまなんだ「ルール」「スキル」「ツール」の仕組みをつかって複数のステップ(情報の収集・情報の整理・資料ページの作成・問題ページの作成・情報の告知)にまたがる仕事を計画・実行する「AI エージェント」をつくってみましょう。

以下の例をためしてみましょう。
※変更してみましょう

/path/to/.claude/skills/example-workflow/SKILL.md
---
name: example-workflow
description: ウェブページから「説明」と「問題」を作成し案内
---

## ツール

以下が利用できます

- `playwright-cli --help`
- `npx @marp-team/marp-cli@latest --help`

## 作業手順

1. 以下を読む

  - 使用ツール:
    - Playwright
  - 対象:
    - `https://claude.com/blog/common-workflow-patterns-for-ai-agents-and-when-to-use-them`

2. セクションごとの題名と説明を日本語で作成

3. `html` を作成 - 説明

  - 使用ツール:
    - Marp
  - 対象:
    - `example-1.html`
  - 形式:
    - page 1:
      - [タイトル]
    - page 2:
      - [セクション1 題名]
      - [説明]
    - page 3:
      - [セクション2 題名]
      - [説明]
    - ...

4. `html` を作成 - 問題

  - 対象:
    - `example-2.html`
  - 形式:
    - 問題1
      - 質問: 〜でただしいのはどれ?
      - 選択(ラジオボタン)
        - A. [解答選択肢A]
        - B. [解答選択肢B]
        - C. [解答選択肢C]
    - 問題2
      - 質問: 〜でただしいのはどれ?
      - 選択(ラジオボタン)
        - A. [解答選択肢A]
        - B. [解答選択肢B]
        - C. [解答選択肢C]
    ...
    - 「回答」ボタン(クリックで正答を表示)

5. 社内 Slack 向けに「説明」と「問題」の案内文を作成



さいごに

ここまで一緒につくって・まなんでいただきありがとうございました!