Replit Product Design Intern (Summer 2024) · UX Design
CONTEXT
Creation with Replit AI Agent, Currently
Replit has recently launched an AI Agent that understands natural language prompts and creates applications from scratch! As of right now, the sole entry point to the AI Agent is via “Create with AI” on the home page. This placement is meant to position the Replit AI Agent as an alternative to manual Repl creation, which also originates from the home page.
Figure 1. Input into “Create with AI” triggers the AI Agent to produce output, streamed live in “Agent view”
Piggy Backing Off Replit Projects
Replit Projects allow for a member of a Replit Team to create a “fork” or different version of the team’s codebase. After experimenting with changes in that dev fork, you can easily merge them back into the main version of the codebase — even without a deep understanding of Git.
Figure 2. Replit Projects video showcase / source: blog post
An Opportunity for AI
Instead of a Replit user creating those changes in a dev fork, the AI Agent can create those changes!
<- -> Diverge in Dev Fork
Firstly, the dev fork serves as a playground for the Agent without interfering with the main version of the codebase — should it create any undesired changes.
-> <- Converge in Main Repl
Secondly, the user can review those changes and merge them back into the main Repl as they would a manually created fork.
DESIGN MILESTONES
M1: Working With Replit Notifications
One paradigm is to use existing notifications infrastructure for any action items on the user’s end that may arise during an asynchronous Agent session.
M2: Something a Little Different
Another paradigm is to carve out a totally different space for agentic creation management, such as a floating action button (FAB). With agentic creation living in a global element, users could more easily start and monitor several active agent sessions.
M1 DESIGN PREVIEW
1/ Entry Point
Initiate a new Autopilot (agentic) fork from the Repl actions menu.
The inputted prompt triggers agentic creation in a separate fork Repl, without exiting the user's current context.
2/ Context Free Actions
Some user actions do not necessitate any knowledge of the Agent's output — such as approving the Agent's plan or inputting a secret (e.g. API) key.
This type of action is embedded into the notification.
3/ Contextual Actions
Other user actions require knowledge of the Agent's output, such as interacting with the app's interface.
This type of action requires a redirect to the fork Repl's Agent view.
4/ Exit Selector
The user may choose to return to either the Repl they came from or the fork Repl itself (default to former).
5/ Code Review
Autopilot summarizes its work for user approval, both broadly and with commit-level granularity.
6/ Representation on the Project Dashboard
Visualize Agent work amongst other Repls in a team's project dashboard.
M2 DESIGN PREVIEW
Here's a look at the design exploration I did for the future of agentic creation, using a FAB to monitor several agent sessions at once. Since it would be much higher (engineering) lift than M1's notification model, these designs remain concept art for now!
REFLECTIONS
Thank You to Everyone at Replit!
I'm very appreciative of this opportunity to explore such a innovation-forward feature branch of Replit! I learned a lot about the intricacies of creating UX for AI — particularly that there are so many unexpected user states that we need to design, many of which are not planned from the beginning but rather discovered through prolonged usage of the Replit AI Agent.