HealthAI-Assistant

Sumit Raikwar — Sun, 23 Mar 2025 17:53:44 +0000

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!

Forem: Sumit Raikwar

HealthAI-Assistant

What I Built

Demo

KendoReact Experience

AIm to Impress