DOCSEARCHbyAlgolia
Submit Docs

Agentic UI

repository·main·Indexed 42 days ago

https://github.com/antdigital-ai/agentic-ui

A UI component library designed for AI agents, focusing on visualizing multi-step reasoning, tool calls, and task execution. It provides specialized components such as Bubble.AIBubble for thought chains, ThoughtChainList, TaskList, and a MarkdownEditor with streaming output support. Version 2.32.47.

Tokens
199.1K
Snippets
521
Records
790
Agent score
41%

What's inside Agentic UI

  1. Overview of the Workspace component

    main

    The Workspace component is a powerful tabbed content management interface designed for agentic workflows. It provides a unified environment for users to interact with various content types generated by an AI or system.

    Key capabilities include:

    • Real-time Following: Automatically updates and displays content like shell outputs, markdown, or HTML as they are generated.
    • Task Management: Built-in support for task lists and tracking task states.
    • File Management: Comprehensive support for file previews, downloads, tree views (with lazy loading), and searching.
    • Browser Integration: Ability to embed and preview web content or search results.
    • Customization: High extensibility through custom content rendering and header modifications.

  2. Overview of the agentic-ui technology stack

    main

    The agentic-ui project is a modern Markdown editor built with React 18 and TypeScript 5.x. It uses Slate.js (0.94+) as its core rich-text editor framework and Ant Design 5.x for its UI component library. Styling is handled via CSS-in-JS.

    Core Technologies

    • React 18.x: Utilizes modern features like Hooks and Suspense.
    • TypeScript 5.x: Ensures type safety across the codebase.
    • Slate.js 0.94+: Provides the customizable rich-text editing engine.
    • Ant Design 5.x: Provides enterprise-grade UI components.

  3. Overview of Agentic UI Components

    main
    The @ant-design/agentic-ui library provides specialized components designed for AI-driven interfaces. When building agentic applications, you should always prefer components from @ant-design/agentic-ui over standard components. Because this library is built on top of Ant Design (antd), you can seamlessly mix standard antd components with agentic ones when a specific agentic component is not required for your use case.

  4. Use EditorUtils for Slate editor operations

    main
    EditorUtils is a static utility class that encapsulates common Slate editor operations. It provides a high-level API for path manipulation, node management, text formatting, media handling, selection control, and DOM operations. Most methods include internal error handling to prevent exceptions during execution.

  5. Summary of CSS-in-JS advantages in Agentic UI

    main

    The agentic-ui project utilizes a CSS-in-JS solution to provide a modern, type-safe, and high-performance styling architecture. The core advantages of this approach include:

    • Type Safety: Full TypeScript support with compile-time checks for style properties.
    • Theme Integration: Deep integration with Ant Design, supporting dynamic theme switching.
    • Component Encapsulation: Styles are tightly bound to component logic, improving maintainability.
    • Developer Experience: Support for hot reloading, intelligent IDE hints, and debugging tools.
    • Performance Optimization: Includes style caching, on-demand loading, and rendering optimizations.

  7. Use AILabel to identify AI-generated content

    main

    The AILabel component is used to clearly mark AI-generated content in non-chat interfaces. It provides visual markers, watermarks, or labels to enhance transparency and help users distinguish between human-created and AI-generated content, ensuring compliance.

    Key Features

    • Visual Styles: Choose between standard, emphasized, or watermark styles.
    • Automatic Positioning: When used with children, the label automatically positions itself at the top-right corner of the child element.
    • Customizable Offset: Fine-tune the label's position using pixel offsets.
    • Tooltip Support: Integrate tooltips to provide additional context when users hover over the label.
    import { AILabel } from '@ant-design/agentic-ui';

export default () => (
  <AILabel status="emphasis" tooltip={{ title: 'AI Generated Content' }}>
    <div style={{ padding: '16px', background: '#f5f5f5' }}>
      This content was generated by AI.
    </div>
  </AILabel>
);

  8. Use BoxPlotChart to visualize data distributions

    main

    The BoxPlotChart component is used to display statistical distributions of data. It automatically calculates key statistics including the minimum, Q1 (25th percentile), median, Q3 (75th percentile), maximum, mean, and identifies outliers using the Interquartile Range (IQR) method. It supports multi-series grouping via the type field and category-based filtering via the category field.

    // Example usage concept
<BoxPlotChart 
  title="Data Distribution"
  data={[
    { label: 'Group A', values: [10, 12, 15, 14, 18, 25, 40], type: 'Series 1' },
    { label: 'Group B', values: [5, 7, 8, 9, 10, 11, 12], type: 'Series 2' }
  ]}
/>

  9. Mermaid component features and behavior

    main

    Key Features

    • Error Handling: Automatically detects and displays Mermaid syntax errors with friendly messages.
    • Performance: Uses lazy rendering to optimize performance and avoid frequent re-renders.
    • Responsive Design: Automatically adapts to different screen sizes. On mobile, it enables a responsive layout with 100% width and a maximum height of 400px.
    • Interactivity: Supports chart zooming and dragging.
    • Styling: Provides modern styles and supports customization via CSS variables.
    • Empty States: Gracefully handles empty content states.
    • Uniqueness: Automatically generates unique IDs to prevent conflicts.

  10. Understand the Code Plugin component structure

    main

    The Code Plugin is a modularized system for handling code blocks within the Agentic UI. It is organized into a main entry point and several specialized sub-components and utilities:

    • CodeElement: The primary component responsible for Ace editor initialization, keyboard event handling, Slate editor integration, and code block rendering/interaction.
    • CodeToolbar: A toolbar providing controls such as language selection, copying, full-screen mode, HTML execution (for HTML only), and closing (for formulas and Mermaid).
    • LanguageSelector: A component for searching and selecting programming languages, featuring a search box, language icons, and a Popover interface.
    • LoadImage: A utility component that manages image loading states (hiding the image until successfully loaded and hiding it if loading fails).

    File Structure Overview:

    src/Plugins/code/
├── index.tsx                    # Main file containing CodeElement
├── components/
│   ├── index.ts                # Unified component exports
│   ├── LoadImage.tsx           # Image loading component
│   ├── LanguageSelector.tsx    # Language selector component
│   └── CodeToolbar.tsx         # Code toolbar component
├── utils/
│   ├── index.ts               # Unified utility exports
│   └── langOptions.tsx         # Language options configuration
├── CodeUI/                    # Original code UI components
└── langIconMap.ts             # Language icon mapping

  11. Use AgenticLayout for agentic application layouts

    main

    AgenticLayout is a three-column layout component specifically designed for agentic applications. It supports flexible configuration of left, center, and right regions, featuring built-in sidebar collapsing and right-sidebar width dragging.

    Key Features

    • Three-column layout: Configure left, center, and right content areas.
    • Sidebar Collapsing: Supports both controlled and uncontrolled modes for left and right sidebars.
    • Resizable Right Sidebar: Includes a built-in drag handle to adjust the right sidebar width (constrained between 400px and 70% of the window width).
    • Header Customization: Extensible header with support for titles, share buttons, and extra content slots.
    <AgenticLayout
  left={<LeftContent />}
  center={<MainContent />}
  right={<RightContent />}
/>