Hypermode design examples

Hypermode

Sign-in screen where the user authenticates with GitHub or Google to access or create their account.

• Sign In
• Account Setup

Hypermode

Onboarding step where the user names their first workspace to get started in Hypermode.

• Setup Wizard

Hypermode

Onboarding step where the user names their new workspace while the form submits.

• Account Setup
• Loading

Hypermode

AI chat interface where the user starts a new thread with a personal assistant agent, featuring prompt suggestions and an upgrade prompt in the sidebar.

• AI Chat
• AI Assistant

Hypermode

AI chat interface where the user is interacting with a personal assistant agent, currently waiting for a mid-stream response.

• AI Agent
• AI Chat

Hypermode

Detail page where the user chats with a configured AI assistant named Sidekick and can connect it to Google Calendar.

• AI Assistant
• AI Chat

Hypermode

AI chat interface where the user interacts with a personal assistant agent to query calendar events.

• AI Agent
• AI Chat

Hypermode

AI chat interface where the user is conversing with a personal assistant agent to schedule a new meeting.

• AI Assistant
• AI Chat

Hypermode

AI chat interface where the user is interacting with a personal assistant agent to schedule a meeting, showing a Google Calendar tool call in progress.

• AI Chat
• AI Agent

Hypermode

AI chat interface where the user converses with a personal assistant agent about book sales, featuring a web search tool indicator and a pro onboarding upsell in the sidebar.

• AI Chat
• AI Assistant

Hypermode

Home screen where the user can start building by importing a Modus app, launching a graph, or creating an API key.

• Getting Started
• Home

Hypermode

Creation screen where the user names their new app, connects a GitHub repository, and selects a deployment location.

• Import & Export
• Setup Wizard