This is a submission for the KendoReact Free Components Challenge.
What I Built
An AI-powered healthcare assistant with a symptom analyzer and chat interface, built using free KendoReact components. Input symptoms and chat about health concerns to get personalized insights displayed in a responsive TileLayout, powered by OpenAI API.
Demo
Live Demo: https://health-ai-assistant-bice.vercel.app/
Code Repository: https://github.com/SumitRaikwar18/HealthAI-Assistant
KendoReact Experience
This project harnesses the power of free KendoReact components to create a seamless and responsive healthcare assistant. Below are the 10 free KendoReact components used, along with their code snippets and locations in the project:
| Component | Code Snippet | Used In |
|---|---|---|
| 1. Button | <Button themeColor="primary">Click Me</Button> |
src/components/KendoButton.tsx |
| 2. Input | <Input value={value} onChange={onChange} /> |
src/components/KendoInput.tsx |
| 3. Label | <Label editorId={htmlFor} className={className}>{text}</Label> |
src/components/KendoLabel.tsx |
| 4. Chip | <Chip text={text} removable={removable} /> |
src/components/KendoChip.tsx |
| 5. Avatar | {src ? <Avatar src={src} alt={alt} /> : <Avatar>{initials}</Avatar>} |
src/components/KendoAvatar.tsx |
| 6. Loader | <Loader size={size} type={type} /> |
src/components/KendoLoader.tsx |
| 7. Switch | <Switch checked={checked} onChange={onChange} /> |
src/components/KendoSwitch.tsx |
| 8. Badge | <Badge themeColor={themeColor} rounded={rounded}>{children}</Badge> |
src/components/KendoBadge.tsx |
| 9. TileLayout | <TileLayout columns={columns} items={items} gap={{ rows: gap, columns: gap }} /> |
src/components/KendoTileLayout.tsx |
| 10. Card | <Card className="shadow-md h-full">{children}</Card> |
src/components/FeatureCard.tsx |
These components work together to provide an intuitive UI: the Form (implied via Input and Label) collects symptoms, TileLayout organizes the layout, Card displays AI responses, and Badge tags insights, all styled with a clean, health-focused aesthetic.
AIm to Impress
HealthAI Assistant integrates the OpenAI API to power its core features:
- Symptom Analysis: Users input symptoms (e.g., "fever, cough") via Input and Chip components, and OpenAI generates instant health insights displayed in a Card. For example, "Fever and cough could suggest a cold—rest and hydrate."
- Healthcare Chat: Users ask health questions (e.g., "What should I do about a headache?") through a chat interface, with responses shown dynamically in a TileLayout. The Loader simulates processing, enhancing the AI experience.
- Privacy Focused: No user data is stored beyond the session, ensuring privacy with client-side API calls.
- 24/7 Availability: Powered by OpenAI, the assistant is always accessible for health queries.
The OpenAI API key is securely stored in a .env file as REACT_APP_OPENAI_API_KEY, driving real-time, personalized responses.
Thank you for the opportunity to showcase HealthAI Assistant in the KendoReact Challenge!
Innovative Project