Microsoft 発 Magentic-One の Cool な人間中心 UI「Magentic-UI」が登場

Microsoft Research が発表したオープンソース研究プロトタイプ Magentic-UI は、Web ブラウジング、Python およびシェルコードの作成と実行、ファイルの理解といったタスクを実行できる Web アプリケーションです。完全な自律性を目指す他のコンピューター使用エージェントとは異なり、Magentic-UI は、単純な Web 検索以上のアクティビティを必要とするアクション指向のタスクに対して、透明性が高く人間が制御可能な検索体験を提供しています。

### 左側にチャット、右側にブラウザを配置した UI
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674344/3651ec2a-336d-48cf-a745-7f7208922768.png)


# 機能紹介
- **ユーザーとの共同計画（Co-Planning）**
Magentic-UI がアクションを実行する前に、ユーザーがプラン エディターを使用して直接プランを変更したり、テキスト フィードバックを提供したりすることができます
- **ユーザーとの共同実行（Co-Tasking）**
ユーザーはシステムを一時停止し、自然言語でフィードバックを提供したり、ブラウザを直接操作してデモンストレーションを行ったりすることができます
- **ヒューマンインザループ（Action Guards）による安全性**
潜在的に取り返しのつかないアクションを実行する前にユーザーの承認を求めます。ユーザーは、Magentic-UIによる承認の頻度を指定できます。さらに、Magentic-UIはブラウザやコードエグゼキューターなどのツールを安全に操作できるようサンドボックス化されています。
- **経験からの学習（Plan Learning）**
過去のインタラクションから計画を学習して保存し、将来のタスクの完了率を向上させることができます。 


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674344/f520fff5-9a39-4fdd-b880-fa089724b3e0.png)


# ユーザーとの共同計画（Co-Planning）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674344/015172c9-fc64-4917-ba3e-273245150f59.png)

Planner がクエリーをサブタスクに分解します。「＋Add Step」によってユーザーがサブタスクを追加することもできます。プランを承認したい場合、「Accept Plan」を押下する必要があります。


### 参考：タスク解決思考のマルチエージェントソリューションアクセラレーター
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674344/a161cf0b-c608-40c7-9659-74a03ef301fa.png)

以前、Microsoft 謹製の[マルチエージェントソリューションアクセラレーター](https://github.com/microsoft/Multi-Agent-Custom-Automation-Engine-Solution-Accelerator)を紹介しましたが、こちらも複雑なタスクを解決するために、AutoGen のプランナーがサブタスクに分解します。プランへの手動介入という点で Magentic-UI が一歩進化しているといえます。



# ユーザーとの共同実行（Co-Tasking）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674344/45be7d96-e3b5-4fdf-bee8-a1d633c4da7a.png)

画面右側の noVNC のコントロールをユーザーが取ることが可能。コントロールを取得したらそのまま Docker 内で起動する Playwright ブラウザを操作することができます。

# ヒューマンインザループ（Action Guards）による安全性
Magentic-UI は、タブを閉じる、副作用のあるボタンをクリックするなど、取り消し不可能と判断されるアクションを実行する前にユーザーの許可を求めます。これを「アクションガード」と呼びます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674344/965c8734-5591-4f32-a119-3250836d8aac.png)


ユーザーは、Magentic-UIのアクションガードを設定することで、あらゆるアクションを実行する前に常に許可を求めるように設定することもできます。ユーザーがリスクのあるアクション（例：アイテムの支払い）と判断した場合は、そのアクションを拒否できます。 

# 経験からの学習（Plan Learning）
Magentic-UI がタスクを完了すると、ユーザーは Magentic-UI にタスクの実行に基づいてプランを学習させるオプションを選択できます。これらのプランはプランギャラリーに保存され、ユーザーと Magentic-UI が将来アクセス可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674344/b322efab-213d-4cfa-87f9-a7cddef843d5.png)



ユーザーは、保存されたプランを表示する「Saved Plans」ボタンをクリックすることで、プランギャラリーからプランを選択できます。または、ユーザーが以前のタスクと類似したタスクを入力する際、ユーザーが入力を完了する前に保存されたプランが表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674344/806d5581-bc55-4c79-9bf9-f5629ee0302a.png)


同一のタスクが見つからない場合、Magentic-UI は AutoGen の [Task-Centric Memory](https://qiita.com/nohanaga/items/2443e4ab28fa200680ce) を使用して、類似したタスクのプランを取得できます。Microsoft の予備評価では、この取得は極めて正確であり、保存されたプランを呼び出す速度は新しいプランを生成する速度の約3倍速いことが確認されています。


# アーキテクチャ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674344/659b2008-abd5-421e-bed7-44f547263c4d.png)

Magentic-UI のブラウザアプリ上から Docker 内で起動する Playwright へ接続するためにオープンソースの [noVNC](https://github.com/novnc/noVNC) が組み込まれている。コード実行なども Docker 内にサンドボックス化されている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674344/60f50993-2f96-4fdc-a8fc-530e76032caa.png)

## 処理詳細
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674344/e2fe20e4-21eb-4d73-b083-1bb3eca0a682.png)

基本実装はすでに紹介した [Magentic-One](https://qiita.com/nohanaga/items/28fcf00a23e990ac3551) であり、プランへの手動介入や承認操作などが追加で実装されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674344/71043f07-28e0-4b43-a93e-54896773a15d.png)
<sup>[Magentic-One の優れたメタ認知機能についての解説](https://youtu.be/jHW6zcIzm7g?feature=shared&t=5408)<sup>

https://qiita.com/nohanaga/items/28fcf00a23e990ac3551


# インストール
```bash
python3 -m venv .venv
source .venv/bin/activate
pip install magentic-ui
```

# 起動
```bash
magentic ui --port 8081
```

## Azure OpenAI Config
[Settings]->[Model Configuration] に以下を貼り付け。

```yaml
model_config: &client
  provider: AzureOpenAIChatCompletionClient
  config:
    model: "gpt-4.1-2025-04-14"
    azure_endpoint: "https://<Your-Service>.openai.azure.com/"
    azure_deployment: "gpt-4.1"
    api_version: "2025-03-01-preview"
    api_key: "<Your-Key>"
    max_retries: 10

orchestrator_client: *client
coder_client: *client
web_surfer_client: *client
file_surfer_client: *client
action_guard_client: *client
```

# Magentic-UI の安全策
私もすでに[過去の記事](https://qiita.com/nohanaga/items/28fcf00a23e990ac3551#6-%E6%B3%A8%E6%84%8F%E7%82%B9)で言及しましたが、Magentic-One の挙動を評価した Microsoft Research のチームは論文の中で以下のようなエラー分析を行いました。

>### 6.1.1. 持続的な非効率的行動
>エージェントが同じ失敗を繰り返し、適応できない問題
例：MultimodalWebSurfer が誤った検索クエリを何度も試みる、あるいは不要なデータを何度も取得するケース

>### 6.1.2. 検証不足によるミス
>収集した情報やコードの実行結果を十分に検証しないことで誤った結論を出してしまう
例：ファイルの内容を正しく読み取らないまま次のステップに進んでしまう

>### 6.1.3. ナビゲーションの非効率性
>Web ページやファイルを適切にナビゲートできず、目的の情報に到達できない問題
例：MultimodalWebSurfer が適切なリンクを見つけられない、またはページ内検索に失敗するケース

このようなエラーやセキュリティ上の懸念に対しての改善点として Human-in-the-Loop を強化し、今回「Magentic-UI」の公開に繋がったと考えられます。そして以下のような安全機能を実装しました。

- **許可リスト**: ユーザーは、Magentic-UI がアクセスを許可するウェブサイトのリストを設定できます。
- **いつでも中断可能**: どの時点でもユーザーは Magentic-UI を中断して、保留中のコード実行や Web 閲覧を停止できます。
- **Docker サンドボックス**：Magentic-UI は、Docker コンテナ内で起動されたブラウザを認証情報なしで制御することで、ログインアカウントや認証情報によるリスクを回避します。さらに、コード実行も別の Docker コンテナ内で実行されるため、Magentic-UI が実行されるホスト環境への影響は回避されます。
- **取り消し不可能なエージェントアクションの検出と承認**：ユーザーはアクションガードを設定することで、Magentic-UI がユーザーの承認なしに実行できるアクションを決定できます。ユーザーは各アクションに対して「承認」または「拒否」ボタンをクリックする必要があります。

外界に影響を与える系は徹底的にガードレールを実装した方がいいでしょう。

# 今後
今後使用している検索エンジンや多くの Web サイトがナビゲーション自動化に対する人間確認を実装する時代が来る気がする。。。

<br>
<br>
※当記事の執筆は研究目的であり、人間同席の上、実装・動作させています。

# 参考
https://github.com/microsoft/magentic-ui

https://www.microsoft.com/en-us/research/blog/magentic-ui-an-experimental-human-centered-web-agent/