Alvea - Revolutionizing User Interaction with AI

👉 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.

The Problem

Existing AI chat apps, while boosting productivity, fall short in delivering optimal collaborative and informational experiences due to their reliance on text-based communication.

Our Solution

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.

Key Features

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	❌	❌

Example Use Cases

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.

How to use

To run the example locally you need to:

1. Sign up at OpenAI's Developer Platform.
2. Go to OpenAI's dashboard and create an API KEY.
3. Set the required OpenAI environment variable as the token value as shown the example env file but in a new file called .env.local
4. pnpm install to install the required dependencies.
5. pnpm dev to launch the development server.

Built with

• Vercel AI SDK
• Next.js
• OpenAI
• React
• TypeScript
• Tailwind CSS
• React JSON Schema Form
• Leaflet

Learn More

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.