Agent Response

A comprehensive component for displaying AI agent responses with support for thinking process, tool usage, artifacts, and interactive actions.

Features

• Rich Message Display: Full markdown support with syntax highlighting
• Thinking Process: Collapsible view of the agent's reasoning
• Tool Call Visualization: Shows function calls with inputs/outputs
• Artifact Display: Renders generated code, files, and data
• Streaming Support: Visual indicator for streaming responses
• Interactive Actions: Regenerate and copy functionality
• Responsive Design: Adapts to different screen sizes

Examples

Basic Response

A simple agent response with markdown formatting and action buttons.

With Tool Usage

Agent response showing thinking process, tool calls, and generated artifacts.

import React, { useState } from 'react'

interface Todo {
  id: string
  text: string
  completed: boolean
}

export function TodoList() {
  const [todos, setTodos] = useState<Todo[]>([])
  const [input, setInput] = useState('')

  const addTodo = () => {
    if (input.trim()) {
      setTodos([...todos, {
        id: Date.now().toString(),
        text: input,
        completed: false
      }])
      setInput('')
    }
  }

  return (
    <div className="todo-list">
      <h2>My Todos</h2>
      <div className="add-todo">
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Add a new todo..."
        />
        <button onClick={addTodo}>Add</button>
      </div>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            {todo.text}
          </li>
        ))}
      </ul>
    </div>
  )
}

Streaming Response

Demonstrates real-time streaming with visual indicator.

Installation

npx shadcn add "https://agents-ui-kit.com/c/agent-response.json"

API Reference

AgentResponse

ToolCall

Artifact