Hello everyone! A professional implementation of the "AI Explore" frontend challenge. This application emulates Server-Sent Events (SSE) data streaming from an LLM, parses Markdown responses in real-time, and renders Vega-Lite charts automatically as soon as a valid specification is detected.
- Smart Streaming Engine: Emulates network latency (50-150ms) to create a realistic text generation effect.
- Resilient Parser: A robust parser that extracts JSON from Markdown code blocks. The application handles partial or malformed JSON chunks gracefully without crashing.
- Live Visualization: Charts are rendered automatically using
vega-embed. - Type Safety: Strict TypeScript implementation with no
anytypes. - Responsive UI: Modern interface built with Tailwind CSS v4, featuring smooth animations and clear state indicators.
- Core: React 18, TypeScript
- Build Tool: Vite
- Styling: Tailwind CSS v4, Lucide React (Icons)
- Visualization: Vega-Embed, Vega-Lite
- Markdown Processing: React-Markdown, Remark-GFM
-
Clone the repository
git clone [https://github.com/azamxvit/vega-stream-processor.git](https://github.com/azamxvit/vega-stream-processor.git) cd vega-stream-processor -
Install dependencies
pnpm install # or npm install -
Start the development server
pnpm dev
-
How to test
- Open
http://localhost:5173. - Click the "Upload Dump" button.
- Select the
dump.jsonlfile (located in the root of this repository). - Click Play.
- Open
useStreamHook: Encapsulates the SSE event processing logic, strictly decoupling business logic from the UI components.extractAndValidateVegaParser: Utilizes regex to locate JSON blocks within Markdown and implements safeJSON.parse. It returns a typedTopLevelSpeconly when validation succeeds.VegaChartComponent: An isolated wrapper aroundvega-embedthat handles the chart lifecycle (mount/unmount) and error boundaries.- Type-Only Imports: Utilized throughout the project to optimize the build process and ensure clean dependency graphs.
