Skip to main content

​
Create your Remix

⏰ Estimated time: 1 minute Follow the steps in this guide to create a Remix of the following solar system visualization:
image of the Remix button on the Replit App page
Try the published app at Solar System Visualization Demo Replit App.
1

Remix the app

Open the Solar System Visualization Replit App in your browser and select Remix Template:image of the Remix button on the Replit App page
2

Complete the app details

In the Remix App dialog, select Remix App to continue. You can edit these details later.
image of the Remix App dialog
3

Start the app

Select Run to start the app:image of the Run buttonNavigate to the Preview tab to confirm the app displays animated planets.
animated image of the Preview tab in the Solar System Visualization
4

Interact with the app

You now have a fully functioning Remix that you can interact with and iteratively improve.To interact with the visualization, try the following controls in the Preview tab:
  • Drag to rotate the view
  • Scroll to zoom in and out
  • Click a planet to select it
  • Select Planet info while a planet is selected to view information about it
  • Select Pause Rotation or Start Rotation to toggle the animation
Select Earth and then select Planet Info to read facts about it.

​
Explore

Try the tasks in the following sections to learn how Agent, Replit’s AI-powered tool, can help you build your app. Agent specializes in building projects from scratch and making changes to a Replit App. Use Fast mode for quick, targeted edits.
Agent relies on popular AI models and occasionally produces results that don’t fulfill your request. If you encounter issues, follow up with a prompt that describes the error messages or the incorrect behavior. Alternatively, you can use the Rollback feature to restore your Replit App to a previously known working state.
The following sections show examples of using Agent to enhance this Remix.

​
Add a feature using Agent

Agent is now available on all projects, including Remixes. Use General Agent to work with any framework or project type.
Follow these steps to add a complex feature to your Remix using Agent:
1

Craft a prompt

Navigate to the Agent tab.Enter the following prompt in the text area:
Add a button that toggles an autopilot flyby mode.
After you submit the prompt, Agent might pause and ask for clarification or confirmation. Respond in the text area.
2

Test the feature

Navigate to the Preview tab to see Agent’s updates to the visualization.Try toggling the added autopilot button.Since the initial prompt excluded information such as speed and position of the flyby, the result might not match your expectations.
3

Refine the feature

If the feature differs from your expectations, continue the conversation by entering the following prompt in the Agent text area:
Change the autopilot to slowly and continuously fly between planets.
After Agent completes the feature, the Preview might resemble the following image:
image of the Remix button on the Replit App page
To undo these changes, select Rollback to here in the Checkpoint created immediately after starting the plan for the change in the Agent tab.Learn more about Checkpoints and Rollbacks.

​
Add a feature using Fast mode

Follow these steps to add a quick enhancement to your Remix using Fast mode:
1

Craft a prompt

Switch to Fast mode and enter the following prompt:
Add a button that changes the planet orbit speeds to 0.5x, 1x, and 2x.
After you submit the prompt, Agent describes the changes it wants to make and lets you review the code changes before proceeding. Select Preview code changes to view a comparison of the current code and the updates.
2

Test the feature

Select Apply all and approve any following confirmations to continue.Navigate to the Preview tab to check the result.After Agent completes the feature, the Preview might resemble the following image:
image of the solar system visualization with speed controls
To undo these changes, use the Rollback feature in the Agent tab.

​
Continue your journey

Now that you’ve completed this tutorial, you’re ready to explore more possibilities with your Replit App. Try the following next steps to enhance your skills:
  • Ask Agent to implement a new complex feature or to check the code for bugs.
  • Use Fast mode for quick, targeted edits and code explanations.
  • View and edit the Replit App source code and configuration in the Files tab.
  • Share your Replit App for others to remix. To learn more, see Make your Replit App Public.