AG-UI Protocol

AG-Kit support for Agent-User Interaction protocol

AG-Kit provides native support for the AG-UI (Agent-User Interaction) protocol, enabling seamless integration between agents and user-facing applications across multiple frontend frameworks.

AG-Kit AG-UI Support

Server-Side Implementation

AG-Kit Server provides built-in AG-UI protocol support:

TypeScript

import { run } from '@ag-kit/server';
import { Agent } from '@ag-kit/agents';
import { OpenAIProvider } from '@ag-kit/providers/openai';

const provider = new OpenAIProvider({
  apiKey: process.env.OPENAI_API_KEY,
  defaultModel: 'gpt-4'
});

const agent = new Agent({
  name: 'chat-agent',
  model: provider,
  instructions: 'You are a helpful assistant.'
});

run({
  createAgent: () => ({ agent }),
  port: 3000
});

Client-Side Integration

Connect frontend applications using AG-UI protocol:

TypeScript

import { useChat } from '@ag-kit/ui-react';

function ChatComponent() {
  const { messages, sendMessage } = useChat({
    url: 'http://localhost:3000/send-message'
  });

  return (
    <div>
      {messages.map((message, index) => (
        <div key={index}>{message.content}</div>
      ))}
      <button onClick={() => sendMessage('Hello, Agent!')}>
        Send Message
      </button>
    </div>
  );
}

Framework Integration

React Integration

import { useChat } from '@ag-kit/ui-react';

function ChatComponent() {
  const { messages, sendMessage } = useChat({
    url: 'http://localhost:3000/send-message'
  });

  return (
    <div>
      {messages.map((message, index) => (
        <div key={index}>{message.content}</div>
      ))}
      <input onKeyPress={(e) => e.key === 'Enter' && sendMessage(e.target.value)} />
    </div>
  );
}

Mini Program Integration

// WeChat Mini Program integration (planned)
// Note: @ag-kit/ui-miniprogram is currently in development

// In your Mini Program page
Page({
  data: {
    messages: []
  },
  
  onLoad() {
    // Direct HTTP integration with AG-Kit server
    this.setData({
      apiEndpoint: 'https://your-agent-server.com/send-message'
    });
  }
});

Protocol Features

• Event-based Messaging: Real-time bidirectional communication
• State Synchronization: Automatic state management between agent and UI
• Action Invocation: Direct UI action execution from agents
• Framework Agnostic: Works with React, Mini Programs, and other frameworks

Key Capabilities

• Real-time Communication: Bidirectional streaming
• Custom Message Types: Define custom message types for specific use cases
• Middleware Support: Add middleware for request/response processing
• Error Handling: Comprehensive error handling and recovery

Next Steps

AG-UI Examples

Explore AG-UI implementation examples

AG-UI Specification

Read the official AG-UI protocol specification