AG-UI — Agent-User Interaction Protocol

You are an expert in AGUI (AgentUser Interaction Protocol), the open standard by CopilotKit for connecting AI agents to frontend UIs. You help developers stream agent actions, tool calls, state updates, and text generation to React components in realtime — enabling rich agent UIs where users see what the agent is think

概要

AG-UI (Agent-User Interaction Protocol) is an open standard developed by CopilotKit designed to bridge the gap between AI agents and frontend user interfaces. Hosted within the TerminalSkills/skills repository, this protocol enables developers to stream complex agent behaviors—including tool calls, internal state updates, and text generation—directly to React components in real-time. By providing a structured way for agents to communicate their reasoning process and actions, AG-UI facilitates the creation of highly interactive and transparent AI experiences. It is compatible with major agents like Claude and GitHub Copilot, allowing developers to maintain UI synchronization across various LLM providers using TypeScript and React for robust frontend integration.

ユースケース

Streaming real-time agent tool calls and state transitions to interactive React components.
Building transparent AI interfaces that display an agent's internal reasoning process to users.
Synchronizing frontend UI elements with background AI agent actions via an open-standard protocol.

導入方法

# Review source first
open https://github.com/TerminalSkills/skills/blob/main/skills/ag-ui/SKILL.md

Copy or clone the skill folder into your agent skills directory after reviewing its instructions and scripts.

セキュリティ

Developers should ensure that all agent actions and state updates streamed via the AG-UI protocol are validated on the frontend to prevent unauthorized data exposure. Since this protocol facilitates real-time communication between AI agents and UI components, standard web security practices for API data handling and React component sanitization should be strictly followed.

関連Skills

Constant Time Testing

trailofbits/skills

フロントエンドデザイン

Constant-time testingは、暗号コード内のタイミングサイドチャネルを検出します。暗号実装のタイミング脆弱性を監査する際に使用します。

Claude CodeClaude
securitytesting
6,280 Starsソースあり

Managed Deep Agents

langchain-ai/langchain-skills

フロントエンドデザイン

LangSmithでmda CLIを使用してManaged Deep Agentsを構築、テスト、またはデプロイする際のINVOKE THIS SKILL。コードファーストでファイルベースのプロジェクトレイアウト、define_deep_agent / defineDeepAgent、作成されたツールとミドルウェア、MCPコネクタ、cronスケジュール、スキル、サンドボックス、mda init/dev/deploy、Context Hub、およびPythonとTypeScriptでのヒューマンインザループ(human-in-the-loop)割り込みをカバーしています。

CodexClaude
typescriptpython
1,009 Starsソースあり

GSAP Core

mxyhi/ok-skills

フロントエンドデザイン

コアな API のための公式 GSAP スキル — gsap.to()、from()、fromTo()、easing、duration、stagger、defaults、gsap.matchMedia()(レスポンシブ、prefers-reduced-motion)。ユーザーが JavaScript アニメーションライブラリ、React/Vue/vanilla でのアニメーション、GSAP のトゥイーン、イージング、基本的なアニメーション、レスポンシブまたは reduced-motion を求めた際に使用します。

CodexClaude Code
reactsecurity
423 StarsApache-2.0

花叔Design · Huashu-Design

mxyhi/ok-skills

フロントエンドデザイン

花叔Design——HTMLを使用して、高精度プロトタイプ、インタラクティブデモ、スライド、アニメーション、デザインバリエーションの探索、デザインの方向性に関するアドバイス、専門家によるレビューを提供します。タスクに応じて適切な専門家(UX、アニメーター、スライドデザイナー、プロトタイパー)になりきり、ウェブデザインのありきたりな表現を避けます。トリガーワード:プロトタイプ作成、インタラクティブプロトタイプ、HTMLデモ、アニメーションデモ、デザインバリエーション、hi-fiデザイン、UI mockup、prototype、HTMLページを作成、可視化を作成、アプリプロトタイプ、iOSプロトタイプ、MP4/GIFを書き出し、60fps動画、デザインスタイル、デザインの方向性、カラーパレット、おすすめのスタイル、スタイルを選択、きれいなものを作る、レビュー、見栄えの確認、review this design、解説付きアニメーション、解説動画、長尺の解説動画、voiceover、narration、5分でわかるXの解説

CodexClaude Code
pythonreact
423 StarsApache-2.0

Design Build

tinh2/skills-hub-registry

フロントエンドデザイン

独特でプロダクションレベルのインターフェースを、Ralph Wiggumのようなスピードで構築します。最新の CSS、フルイドタイポグラフィ、意図のあるモーションを駆使し、一般的なAI特有のデザイン感のない、Webまたはモバイルの実用的なコードを提供します。使用場面:'build UI', 'design this', 'create interface', 'make it look good', 'build screen', 'implement design', 'frontend build', 'design build'。

CodexClaude Code
reactdesign
8 Starsソースあり

Design Audit

tinh2/skills-hub-registry

フロントエンドデザイン

アクセシビリティ (WCAG 2.2)、パフォーマンス、テーマ設定、レスポンシブ/アダプティブデザイン、およびアンチパターン検出にわたる包括的な自律型デザイン品質監査。重要度評価と修正案を含む優先順位付けされたレポートを作成します。使用場面: 'audit design', 'check accessibility', 'a11y audit', 'design review', 'UI quality check', 'WCAG audit', 'design quality'。

CodexClaude Code
reactdesign
8 Starsソースあり