steven-tey/chathn
Chat with Hacker News using natural language. Built with OpenAI Functions and Vercel AI SDK.
AI chatbot for querying Hacker News with natural language
User queries flow through OpenAI which calls HN API functions and streams back formatted responses
Under the hood, the system uses 1 feedback loop, 2 data pools, 3 control points to manage its runtime behavior.
Structural Verdict
A 7-component nextjs app with 8 connections. 10 files analyzed. Well-connected — clear data flow between components.
How Data Flows Through the System
User queries flow through OpenAI which calls HN API functions and streams back formatted responses
- User Input — User types natural language query in chat interface
- Rate Check — API route validates request against Redis rate limit (config: KV_REST_API_URL, KV_REST_API_TOKEN)
- OpenAI Processing — OpenAI determines which HN function to call based on user query (config: OPENAI_API_KEY)
- Function Execution — Selected function fetches data from Hacker News Firebase API
- Response Streaming — OpenAI formats and streams response back to client in real-time
System Behavior
How the system actually operates at runtime — where data accumulates, what loops, what waits, and what controls what.
Data Pools
Redis store tracking API request counts per IP address
External Hacker News story and comment data
Feedback Loops
- Chat Conversation Loop (recursive, reinforcing) — Trigger: User sends message. Action: OpenAI processes query and calls functions. Exit: User stops chatting or rate limit hit.
Delays & Async Processing
- Rate Limit Window (rate-limit, ~1 day sliding window) — Blocks requests after 50 per day per IP
- AI Response Streaming (async-processing) — Progressive response rendering as OpenAI generates text
Control Points
- OPENAI_API_KEY (env-var) — Controls: OpenAI API access
- Rate Limit Threshold (threshold) — Controls: Request frequency (50 per day). Default: 50
- NODE_ENV (env-var) — Controls: Rate limiting enable/disable
Technology Stack
React framework with API routes
GPT-4 with function calling for structured interactions
Streaming chat interface and OpenAI integration
Redis-based rate limiting
Key-value store for rate limit data
Utility-first styling
Key Components
- Chat (component) — Main chat interface component using Vercel AI SDK's useChat hook
app/page.tsx - POST (route) — API route that handles chat requests with rate limiting and OpenAI streaming
app/api/chat/route.ts - functions (config) — OpenAI function definitions for HN API operations like get_top_stories and get_story
app/api/chat/functions.ts - get_story (function) — Fetches individual Hacker News story by ID from Firebase API
app/api/chat/functions.ts - runFunction (function) — Dispatcher that executes the appropriate HN API function based on OpenAI's choice
app/api/chat/functions.ts - Ratelimit (middleware) — Redis-based rate limiting using Upstash (50 requests per day per IP)
app/api/chat/route.ts - useChat (hook) — Vercel AI SDK hook managing chat state and streaming responses
app/page.tsx
Explore the interactive analysis
See the full architecture map, data flow, and code patterns visualization.
Analyze on CodeSeaRelated Nextjs App Repositories
Frequently Asked Questions
What is chathn used for?
AI chatbot for querying Hacker News with natural language steven-tey/chathn is a 7-component nextjs app written in TypeScript. Well-connected — clear data flow between components. The codebase contains 10 files.
How is chathn architected?
chathn is organized into 4 architecture layers: UI Layer, API Layer, Function Layer, Infrastructure. Well-connected — clear data flow between components. This layered structure enables tight integration between components.
How does data flow through chathn?
Data moves through 5 stages: User Input → Rate Check → OpenAI Processing → Function Execution → Response Streaming. User queries flow through OpenAI which calls HN API functions and streams back formatted responses This pipeline design reflects a complex multi-stage processing system.
What technologies does chathn use?
The core stack includes Next.js (React framework with API routes), OpenAI (GPT-4 with function calling for structured interactions), Vercel AI SDK (Streaming chat interface and OpenAI integration), Upstash (Redis-based rate limiting), Vercel KV (Key-value store for rate limit data), TailwindCSS (Utility-first styling). A focused set of dependencies that keeps the build manageable.
What system dynamics does chathn have?
chathn exhibits 2 data pools (Rate Limit Store, HN Firebase API), 1 feedback loop, 3 control points, 2 delays. The feedback loops handle recursive. These runtime behaviors shape how the system responds to load, failures, and configuration changes.
What design patterns does chathn use?
3 design patterns detected: Function Calling, Streaming Responses, Edge Runtime.
Analyzed on March 31, 2026 by CodeSea. Written by Karolina Sarna.