⚡ Structured agent-to-UI communication

Agent Interface Protocol
direct component communication

The first protocol for structured agent-to-UI communication. Agents reason about high-level UI components and output structured JSON that renders directly—no interpretation layer.

Get Started ⭐ GitHub 📦 PyPI 📚 Docs

Get started in seconds

Install AgentInterface and build your first agent UI

example.py

from agentinterface import AgentInterface, components

agent_interface = AgentInterface()

def generate_response(query: str):
  return agent_interface.create_response()\
    .add(components.Text("Hello from AgentInterface!"))\
    .add(components.Button("Click me", action="button_clicked"))\
    .to_dict()

$ pip install agentinterface

Key Features

AgentInterface provides a standardized way for agents to describe the UI components they need

Structured Communication

Standardized protocol for agents to communicate UI needs directly to rendering engines

Rich Component Library

Extensive library of UI components that agents can use to create dynamic interfaces

Cross-Platform Support

Works across different platforms and frameworks with consistent behavior

Language Agnostic

Implementations available in multiple languages including Python and JavaScript

Type-Safe

Built with TypeScript for type safety and better developer experience

Interactive Components

Support for interactive components with callbacks and state management

Architecture Overview

How AgentInterface connects AI agents to UI components

					flowchart LR
						Agent[AI Agent] --> Protocol[AgentInterface Protocol]
						Protocol --> Renderer[UI Renderer]
						Renderer --> Components[UI Components]
						
						classDef agent fill:#3b82f6,stroke:#1d4ed8,color:#fff
						classDef protocol fill:#8b5cf6,stroke:#6d28d9,color:#fff
						classDef renderer fill:#10b981,stroke:#059669,color:#fff
						classDef components fill:#f59e0b,stroke:#d97706,color:#fff
						
						class Agent agent
						class Protocol protocol
						class Renderer renderer
						class Components components

Agent-to-UI Communication

AgentInterface provides a standardized protocol for AI agents to communicate their UI needs directly to rendering engines. This eliminates the need for custom interpretation layers and allows agents to reason about high-level UI components.

Structured JSON Output

Agents output structured JSON that describes the UI components they want to render. This JSON is then consumed by the AgentInterface renderer, which transforms it into actual UI components.

Code Examples

See how easy it is to use AgentInterface in your projects

Python

example.py

from agentinterface import AgentInterface, components

# Initialize AgentInterface
agent_interface = AgentInterface()

def generate_response(query: str):
    # Create a response with multiple components
    return agent_interface.create_response() \
        .add(components.Text("Hello! I'm an AI assistant.")) \
        .add(components.Markdown("Here's some **formatted text** with [links](https://example.com)")) \
        .add(components.Image(url="https://example.com/image.png", alt="Example image")) \
        .add(components.Button("Click me", action="button_clicked")) \
        .to_dict()

JavaScript

example.js

import { AgentInterface, components } from 'agentinterface';

// Initialize AgentInterface
const agentInterface = new AgentInterface();

function generateResponse(query) {
  // Create a response with multiple components
  return agentInterface.createResponse()
    .add(new components.Text("Hello! I'm an AI assistant."))
    .add(new components.Markdown("Here's some **formatted text** with [links](https://example.com)"))
    .add(new components.Image({
      url: "https://example.com/image.png", 
      alt: "Example image"
    }))
    .add(new components.Button({
      text: "Click me", 
      action: "button_clicked"
    }))
    .toJSON();
}

React Renderer

ChatInterface.jsx

import { AgentInterfaceRenderer } from 'agentinterface/react';

function ChatInterface() {
  const [messages, setMessages] = useState([]);
  
  const handleSubmit = async (query) => {
    // Get response from your agent
    const response = await fetchAgentResponse(query);
    
    // Add to messages
    setMessages([...messages, response]);
  };
  
  return (
    <div className="chat-container">
      {messages.map((message, index) => (
        <AgentInterfaceRenderer 
          key={index}
          response={message}
          onAction={handleAction}
        />
      ))}
      <ChatInput onSubmit={handleSubmit} />
    </div>
  );
}

Core Primitives

The building blocks of the AgentInterface protocol

Ready to build better agent UIs?

Get started with AgentInterface today and transform how your AI agents communicate with users.

Read the Docs View on GitHub

Agent Interface Protocol direct component communication