Skip to main content
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: 
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: 
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