abrinz

abrinz

agent-chat

Remix of std/reactHonoStarter

Unlisted

Val Town is a collaborative website to build and scale JavaScript apps.

Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.

/

Viewing readonly version of main branch: v158

View latest version

Chat Application with Tool Response Parsing

A React-based chat application that parses and displays tool responses as separate chat bubble types.

Features

Regular Chat Messages: Standard user and assistant messages
Tool Call Messages: Special bubbles showing when the assistant is using tools
Tool Response Messages: Dedicated bubbles for tool execution results
Expandable Details: Click to expand/collapse tool call details and responses
Visual Indicators: Different colors and icons for different message types

Message Types

1. Regular Messages

User messages (blue background)
Assistant text responses (gray background)

2. Tool Call Messages

Amber background with wrench icon
Shows which tools are being used
Expandable to show tool parameters
Collapsible for clean interface

3. Tool Response Messages

Green background for successful tool responses
Red background for error responses
Shows tool name and execution status
Expandable to show full response details

Architecture

Frontend (`/frontend/`)

components/Chat.tsx - Main chat interface using Vercel AI SDK
components/MessageBubble.tsx - Handles different message types
components/App.tsx - Root application component

Backend (`/backend/`)

index.ts - Hono server with chat API endpoint
Parses agent responses for tool calls and responses
Converts to appropriate streaming format for frontend

Shared (`/shared/`)

types.ts - TypeScript interfaces for messages and tool calls
utils.ts - Utility functions for parsing and formatting

Tool Call Parsing

The system automatically detects and parses:

XML-style function calls: <function_calls>...</function_calls>
Function results: <function_results>...</function_results>
JSON-formatted tool calls and responses
Structured OpenAI-style tool call format

Usage

Start a conversation in the chat interface
When the assistant uses tools, you'll see:
- A tool call bubble (amber) showing which tools are being used
- Tool response bubbles (green/red) showing the results
Click on any tool bubble to expand and see details
Regular conversation continues normally

Styling

Uses TailwindCSS for styling with:

Responsive design
Color-coded message types
Smooth transitions and hover effects
Accessible icons from Lucide React