React Hono AI Chat

A clean AI chat interface built with React, Hono, and a custom AI agent.

Features

Set the AGENT_API_KEY environment variable with your agent's API key
The chat will automatically connect to your agent at: https://abrinz--3be1cc2632ad11f080f5569c3dd06744.web.val.run/

Get a copy of this starter template by clicking the Remix button in the top-right.

The entrypoint is /backend/index.ts. That's the backend HTTP server, which also serves the all the frontend assets.
The client-side entrypoint is /frontend/index.html
- which in turn imports /frontend/index.tsx
- which in turn imports the React app from /frontend/components/App.tsx.
The chat feature uses:
- /frontend/components/Chat.tsx - React component with useChat hook
- /api/chat endpoint in /backend/index.ts - Proxies requests to your agent

The chat interface features:

Centered layout - Takes up 1/2 of screen width and full height
useChat hook from Vercel AI SDK handles message state and streaming
Robust streaming proxy - Properly converts agent's custom format to OpenAI-compatible SSE
Custom agent integration - Seamlessly connects to your agent API with full error handling
Real-time streaming - Word-by-word responses with proper buffering and parsing
Auto-scrolling - Automatically scrolls to show latest messages
Enhanced loading state - Animated dots while AI is thinking
Bottom-anchored input for optimal UX
Locked viewport prevents zooming and jumpiness
Prompt buttons for quick conversation starters
Clean design with Tailwind CSS

The chat sends requests to your agent in this format:

{
  "messages": [
    {"role": "user", "content": "Hello"}
  ],
  "streamResults": true
}

The agent should return either:

Streaming: Custom format (f:, 0:"content", e:/d: markers) which gets converted to OpenAI-compatible text/event-stream
Non-streaming: JSON with content, message, or choices[0].message.content

The backend features a robust streaming proxy that: