| 👉 Demo Video 🎥 |
|---|
 |
| About Alvea | 🥇 1st Place Winning Team |
|---|---|
| Alvea is an innovative application designed to enhance productivity and user experience by leveraging generative user interfaces. Developed during Generative UI hackathon at AGI House SF, Alvea addresses the limitations of existing AI chat applications by offering dynamic, just-in-time user interfaces that adapt to the user's tasks and needs. |
 |
Existing AI chat apps, while boosting productivity, fall short in delivering optimal collaborative and informational experiences due to their reliance on text-based communication.
Alvea emerges as a solution to this problem by integrating AI to develop dynamically rendering user interfaces that are interactive and tailored to the user's current task.
| Feature | Description | Alvea🌟 | Perplexity Copilot | ChatGPT | Specialized Task Apps |
|---|---|---|---|---|---|
| Natural Language Understanding & Response Generation | Effectively understands and generates human-like text responses to user queries. | ✅ | ✅ | ✅ | ❌ |
| Personalized Experience | Tailors experiences based on individual user preferences and tasks. | ✅ | ✅ | ✅ | ❌ |
| Interactive UIs | Offers engaging and adaptable interfaces tailored to user tasks. | ✅ | ✅ | ❌ | ✅ |
| Efficient Data Collection | Streamlines data collection through forms and interactive elements. | ✅ | ✅ | ❌ | ✅ |
| Advanced Visualization & Outcome Previewing | Utilizes complex visuals and previews of outcomes for enhanced comprehension and decision-making. | ✅ | ❌ | ❌ | ✅ |
| Just-in-Time User Interfaces | Generates UI components precisely when needed for the task. | ✅ | 🔶 * Forms only |
❌ | ❌ |
These are the example tasks demonstrated during the hackathon to showcase how Alvea's just-in-time user interfaces can be used to enhance user experiences.
| Trip Planning | Home Theater Setup | |
|---|---|---|
Task:
"I want to plan a trip to lake tahoe for 2" Alvea streamlines trip planning by combining interactive forms for inputting travel preferences with a visual map component, showcasing destinations and points of interest with markers for an intuitive planning experience. |
Task:
"I'm trying to plan my new home theater room, 5.1.2 dolby atmos. Where should I put my speakers?" For home theater enthusiasts, Alvea captures room specifications through a simple form and employs AI code generation to show a 3D visualization of the room, enabling users to virtually place speakers and optimize their audio setup with precision and ease. |
|
|
|
|
To run the example locally you need to:
- Sign up at OpenAI's Developer Platform.
- Go to OpenAI's dashboard and create an API KEY.
- Set the required OpenAI environment variable as the token value as shown the example env file but in a new file called
.env.local pnpm installto install the required dependencies.pnpm devto launch the development server.
To learn more about OpenAI, Next.js, and the Vercel AI SDK take a look at the following resources:
- Vercel AI SDK docs
- Vercel AI Playground
- OpenAI Documentation - learn about OpenAI features and API.
- Next.js Documentation - learn about Next.js features and API.
