1# Tool Components
2
3When adding a new specialized tool component (e.g., `FooTool.tsx`), you must register it in **two places**:
4
51. **ChatInterface.tsx** - Add to the `TOOL_COMPONENTS` map for real-time streaming rendering
62. **Message.tsx** - Add to the switch statements in `renderContent()` for both `tool_use` and `tool_result` cases
7
8If you only add it to one place, the tool will render inconsistently:
9- Missing from `TOOL_COMPONENTS`: Falls back to generic rendering during streaming, but shows specialized widget after page reload
10- Missing from `Message.tsx`: Shows specialized widget during streaming, but falls back to generic after page reload
11
12Both files need the import statement and the rendering logic for the tool.