0
# Knowledge Tile: @copilotkit/react-ui
1

2
This Knowledge Tile documents the **@copilotkit/react-ui** package (v1.10.6), providing comprehensive API documentation for building AI-powered chat interfaces with CopilotKit.
3

4
## Contents
5

6
- **tile.json**: Package manifest with metadata
7
- **docs/index.md**: Entry-point documentation with overview and capability summaries
8
- **docs/chat-components.md**: CopilotChat, CopilotPopup, CopilotSidebar components
9
- **docs/message-components.md**: Message rendering components (AssistantMessage, UserMessage, etc.)
10
- **docs/customization.md**: Icons, labels, CSS properties, and component customization
11
- **docs/hooks.md**: React hooks (useCopilotChatSuggestions, useChatContext)
12
- **docs/types.md**: Complete TypeScript type definitions
13
- **docs/dev-console.md**: Development console and debugging utilities
14

15
## Package Information
16

17
- **Package**: @copilotkit/react-ui
18
- **Version**: 1.10.6
19
- **Type**: npm
20
- **Language**: TypeScript
21
- **Installation**: `npm install @copilotkit/react-ui`
22

23
## Documentation Structure
24

25
This is a **multi-doc Knowledge Tile** with:
26
- 1 entry-point doc (index.md)
27
- 6 sub-docs organized by capability
28
- 3,449 lines of documentation
29
- 46 API code blocks marked with `{ .api }`
30
- Complete TypeScript type definitions
31
- Practical usage examples throughout
32

33
## API Coverage
34

35
### Components (11)
36
CopilotChat, CopilotPopup, CopilotSidebar, Markdown, AssistantMessage, UserMessage, ImageRenderer, RenderSuggestionsList, RenderSuggestion, CopilotDevConsole, ChatContextProvider
37

38
### Hooks (2)
39
useCopilotChatSuggestions, useChatContext
40

41
### Types & Interfaces (30+)
42
All exported types including props interfaces, customization types, message types, handler types, and context types
43

44
### Utilities (1)
45
shouldShowDevConsole
46

47
## Usage
48

49
Start with **docs/index.md** for an overview and basic usage, then explore sub-docs for detailed API documentation:
50

51
1. **Getting Started**: index.md
52
2. **Chat Components**: chat-components.md
53
3. **Message Rendering**: message-components.md
54
4. **Customization**: customization.md
55
5. **Hooks**: hooks.md
56
6. **Type Definitions**: types.md
57
7. **Development Tools**: dev-console.md
58

59
## Compliance
60

61
This Knowledge Tile follows the official Knowledge Tile specification:
62
- Correct manifest format with purl
63
- Complete API coverage with `{ .api }` markers
64
- Self-contained type definitions
65
- TypeScript examples
66
- Clear capability organization
67
- Practical usage examples
68

69
## Verification
70

71
See **VERIFICATION.md** for a complete verification report documenting coverage, structure, and compliance.
72