Quick Start - AgentInterface Documentation

This guide will help you get started with AgentInterface quickly. We'll cover the basics of creating agent responses and rendering them in your application.

Step 1: Installation

First, make sure you have AgentInterface installed. If you haven't installed it yet, check out the Installation guide.

Step 2: Create Agent Responses

Python

agent.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.Button("Click me", action="button_clicked")) \
        .to_dict()

JavaScript

agent.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.Button({
      text: "Click me", 
      action: "button_clicked"
    }))
    .toJSON();
}

Step 3: Render Agent Responses

Now that you have agent responses, you need to render them in your application. AgentInterface provides renderers for various frameworks.

React

ChatInterface.jsx

import { AgentInterfaceRenderer } from 'agentinterface/react';
import { useState } from '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]);
  };
  
  const handleAction = (action, data) => {
    console.log('Action triggered:', action, data);
    // Handle the action here
  };
  
  return (
    <div className="chat-container">
      {messages.map((message, index) => (
        <AgentInterfaceRenderer 
          key={index}
          response={message}
          onAction={handleAction}
        />
      ))}
      <ChatInput onSubmit={handleSubmit} />
    </div>
  );
}

Done

You now have AgentInterface working. That's it. Zero ceremony.