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!
Top comments (15)
Nice work! Looks great. Sorry, I don't know of a direct way of contacting you, but please take this down asap. You have a security hole, look at the Bearer token you're sending, this exposes your OpenAI account.
Thanks so much, Kevin Naidoo, for spotting the security hole in our project—exposing the OpenAI Bearer token was a big oversight! We’ve successfully revoked the compromised API key and updated our security measures to prevent this moving forward. Really appreciate your sharp eye and help in keeping our project secure!
Cool no problem. Glad I could help.
Innovative Project
thankyou
KendoReact FTW, looks smooth!
KendoReact for the win! Glad you like it! 😎🚀
KendoReact Components Looks Amazing in project 😍
Thanks! KendoReact really shines here! 😊👍
AI + health = future, nice work!
Totally agree—AI is the future! Thanks! 🤖❤️
amazing project
thankyou
Impresive Work
Appreciate it! Hard work paid off! 🙌✨