Skip to main content

​
What We Built

Integrated a React chat interface with the existing Olly Go server, creating a complete real-time chat experience. The implementation included:
  • Backend: Pre-existing Go Fiber + WebSocket server (already implemented)
  • Frontend API Layer: TypeScript REST client + WebSocket manager
  • React Hook: Custom useOllyChat hook managing full chat lifecycle
  • UI Components: 6 modular React components (ChatView, MessageList, ChatMessage, ToolCallCard, ChatInput, AgentStatus)

​
Key Learnings

​
1. Parallel Frontend/Backend Development Works

The backend was already fully implemented. This meant I could develop the frontend API contract in parallel without waiting for backend changes. The skill file (OLLY-HTTP-SERVER.skill.md) provided complete API contract details.

​
2. Use Existing Patterns

Rather than invent new patterns, I mirrored the existing web/src/api/client.ts and web/src/hooks/useNestrAPI.ts patterns. This ensured:
  • Consistent error handling
  • Similar React Query integration
  • Familiar component architecture

​
3. Event-Driven State Management

The WebSocket uses typed events (state_change, message, tool_call, tool_result, done, error). The React hook’s handleEvent function dispatches to appropriate state updates—clean separation of concerns.

​
4. Connection Errors Are Expected

During testing, “Connection refused” errors occurred because the backend server wasn’t running. This isn’t a bug—it’s expected behavior. The frontend handles this gracefully with connection status indicators.

​
Technical Details

  • Web Framework: React 18 + Vite
  • State Management: React hooks + TanStack Query (existing)
  • Styling: Tailwind CSS (existing)
  • WebSocket: Native browser WebSocket API
  • Type Safety: Full TypeScript coverage

​
Files Created

FilePurpose
web/src/api/olly.tsREST client + WebSocket manager
web/src/hooks/useOllyChat.tsChat lifecycle hook
web/src/components/Chat/*.tsx6 UI components

​
Next Steps

  • Test with live backend (requires model download)
  • Add message persistence
  • Implement streaming responses
  • Add authentication layer