Building apps traditionally requires installing programs, languages, and packages—a time-consuming setup process.
On Replit, the platform configures your environment instantly, so you can start building whether you're a beginner or experienced developer.
You have everything required to create apps from one browser tab—no installation required.
With AI coding tools, real-time collaboration, and instant sharing, Replit gets you from idea to app, fast.
## Quickstart guides
To create your app on Replit, choose the guide that matches your needs:
### Create new apps
Replit AI [Agent](/replitai/agent) and [Assistant](/replitai/assistant) accelerate app creation with the following capabilities:
* Complete app generation and setup from natural language descriptions
* Code suggestions and autocomplete
* Automated error detection and debugging assistance
* Documentation generation for your app
### Share in minutes
Publish your apps in minutes using the following tools:
* App publishing to the cloud in a few clicks
* Database integration and hosting
* Custom domain support and connection encryption for your applications
## Additional information
To learn more about all of Replit's features, see the following resources:
* Learn about the Workspace features from [Workspace Features](/category/workspace-features).
* Learn about the capabilities of the Replit AI-powered features from [Replit Agent](/replitai/agent/) and [Replit Assistant](/replitai/assistant/).
* Learn how to share your creations from [Sharing Your Replit App](/replit-app/collaborate/).
* [Download the mobile app](https://replit.com/mobile/) for iOS or Android devices.
---
### Create a Slack channel summarizer
Source: [https://docs.replit.com/getting-started/quickstarts/ai-slack-channel-summarizer.md](https://docs.replit.com/getting-started/quickstarts/ai-slack-channel-summarizer.md)
# Create a Slack channel summarizer
> Build a Slack bot that summarizes channel activity using GPT-4. Learn how to integrate AI with Slack's API.
Turn your Slack conversations into concise summaries with AI. This guide shows you how to create a bot that summarizes channel activity using GPT-4.
## Features
Example prompts for adding features:
---
### Connect your app to a SQL database
Source: [https://docs.replit.com/getting-started/quickstarts/database-connection.md](https://docs.replit.com/getting-started/quickstarts/database-connection.md)
# Connect your app to a SQL database
> Learn how to connect to your Replit database from your Replit App.
This guide shows you how to connect to your Replit App's database
from your code using the connection methods:
* **Direct connection**: Connection for development and lighter workloads
* **Connection pooling**: Efficient connection management for high-traffic production applications
To determine which type of connection you need, see
Set the App's title in the **Title** field and make sure **Private** is selected. You can modify these values later.
Select **Create App** to proceed.
Select **Apply All** to add the dependency and update the configuration.
Alternatively, select **Open package.json** to open `package.json` in an editor tab, where you can add or edit dependencies.
Select **Apply all** to make the code changes.
Select these to execute the commands to retrieve the current message and update it.
Verify changes to the message by navigating to the **Preview** tab and selecting **Refresh** in the address toolbar.
Select **Install** to add the dependencies, and **Apply All** to update the configuration.
To ensure your App runs using the selected workflow, select **Stop** and then **Run**.
Try making a change to the message returned by the endpoint. After your update, you should see the updated message in the **Preview** tab.
## Export and import process
1. **Export your Bolt project to GitHub** from your Bolt workspace.
2. Navigate to 
## Import your design
1. Navigate to 
2. Select **Figma** from the available import sources.
3. **Connect your Figma account** to authorize access to your designs.
4. **In Figma, select the frame** you want to build in Replit.
5. **Copy the frame URL** from Figma and paste it into the Replit import interface.
6. Select **Import** to start the conversion process.
## What gets imported
During the import process, Replit converts your Figma design into a functional React application:
* **Theme & components**: Design system elements, colors, typography, and reusable components
* **Assets & icons**: Images, icons, and other visual assets from your design
* **App scaffolding**: Basic application structure and layout framework
## Figma design guidelines
To copy the Figma Design frame URL:
1. Right-click the frame
2. Select **Copy/Paste as**
3. Select **Copy link to selection**
For optimal conversion results, ensure your Figma design is well-structured with clear component hierarchies complete with auto layout constraints.
Follow [these guidelines](https://support.animaapp.com/en/articles/6431384-create-responsive-designs-in-figma) for responsive designs in Figma. You can also ask Agent to help you make your design responsive.
### Tips
* Use auto layout constraints to ensure your design is responsive.
* Name your layers something short and meaningful.
* Convert any groups to frames
* Mark image assets for export
## Configure and run your app
During the import process, {setupDescription_0}.
If your app doesn't run as expected, Replit offers the following workspace tools to help you resolve the issues:
* **[Agent](/replitai/agent)**: Use AI to add new features and refine your imported project
* **[Assistant](/replitai/assistant)**: Get help with code questions and debugging
* **[Secrets](/replit-workspace/workspace-features/secrets)**: Add your API keys and environment variables
* **[Workflows](/replit-workspace/workflows)**: Configure the Run button to your preferred command
## Interact in Agent chat (beta)
After importing, you can paste Figma links into Agent chat to explore layers, extract tokens, and request code changes. These Agent chat features require a Figma Dev or Full seat; the initial import does not.
See the guide: [Figma MCP Integration](/replitai/mcp/figma).
## Continue your journey
Now that you've imported your {platform_0} {projectType_0}, learn more about what you can do with your Replit App:
* [Replit Agent](/replitai/agent): Get AI assistance with code review, testing, and feature implementation
* [Make your Replit App Public](/replit-app/collaborate#make-your-replit-app-public): Share your app as a Template for others to remix
* [Replit Deployments](/category/replit-deployments): Publish your app to the cloud with a few clicks
* [Collaborate](/replit-app/collaborate): Work with others on your imported projects
---
### Import from GitHub
Source: [https://docs.replit.com/getting-started/quickstarts/import-from-github.md](https://docs.replit.com/getting-started/quickstarts/import-from-github.md)
# Import from GitHub
> Learn how to import GitHub repositories into Replit using rapid import or guided import methods.
## Import your GitHub repository
⏰ *Estimated time: two minutes*
You can import your GitHub repositories and turn them into Replit Apps to
run, test, and publish your code. This quickstart covers the fastest methods to get your GitHub projects running on Replit.
For comprehensive import options including other platforms like Figma, Bolt, and Lovable, see the [Import feature documentation](/replit-app/import-to-replit).
## Rapid import
Rapid import works instantly with public repositories.
Combine the Replit import URL with your GitHub repository URL to start the import process.
## Export and import process
1. **Export your Lovable project to GitHub** from your Lovable workspace.
2. Navigate to 
## Import process
1. Navigate to 
### Refining with Assistant
Switch to Assistant for targeted improvements. For example, add dark mode:
```text theme={null}
Can we add a dark mode to the app with a toggle button to switch between dark
and light mode?
```
## Publish your app
**Create App** from the home screen.
2. Navigate to the **Choose a Template** tab.
3. Type "TypeScript" in the template search field and select it as shown below:
4. Select 
**Commands** view in the **App Storage** tab.
The installation screen should resemble the following screenshot:
**Files** tool from the left dock.
Select `index.ts` to open it in a file editor.
4. Select 
Navigate to the **Preview** tab to confirm the app displays animated planets.
To undo these changes, select **Undo these changes** in the **Assistant** tab.
## What each feature does
**Dynamic Intelligence** enhances Agent's reasoning in two ways:
* **Extended Thinking** - Agent analyzes your request more thoroughly before coding
* **High Power mode** - Upgrades Agent to our most advanced AI model for maximum capability
**Web Search** lets Agent access current information from the internet, overcoming knowledge cutoffs.
## When to use what
| Feature | Perfect for | Skip for | Cost |
| :-------------------- | :----------------------------------------------------------- | :------------------------------ | :-------------------------------------- |
| **Extended Thinking** | Complex architecture, unfamiliar APIs, edge cases | Simple bug fixes, style changes | {ExtendedThinkingCostMultiple} the cost |
| **High Power mode** | Large codebases, critical business logic, complex algorithms | Basic features, quick fixes | {HighPowerCostMultiple} the cost |
| **Web Search** | Latest packages, current docs, real-time data | Well-known tech, static content | Standard pricing |
## Extended Thinking
Extended Thinking makes Agent pause and think through your request before jumping into code. It's great when you need Agent to consider multiple approaches or handle complex requirements.
**Try it for:**
* Planning app architecture and database design
* Implementing authentication or payment systems
* Building features with lots of edge cases
* Working with APIs you haven't used before
**Example:**
The tutorial will follow largely from the video above, but with some additional context and steps to help you understand the process.
## Prerequisites
To follow this tutorial, you'll need:
* A Replit account
* A Notion account
* Familiarity with basic Replit Agent interactions. If you're new to Agent, check out the [Replit Agent documentation](/replitai/agent).
## Step 1: Prepare your Notion database
Before prompting Agent, set up your content source in Notion. This involves thinking procedurally about what your blog needs, similar to planning a product.
5. Name your integration (e.g., "My Replit Blog Integration").
6. Associate it with your desired workspace.
7. For "Integration type," choose **Internal Integration**.
8. Select **Submit**.
9. Copy your **Internal Integration Secret** (token) and save it securely. This is your Notion API key.
10. Under **Capabilities**, ensure "Read content" is enabled. For this tutorial, reading is sufficient. If you later want to write data to Notion, enable "Insert content" and "Update content."
5. Add a few sample posts. You can use Notion's AI features to help generate content!
3. Select **+ Add connections**.
4. Search for and select the integration you created (e.g., "My Replit Blog Integration").
5. Confirm the connection. This allows Replit (via the integration token) to access this page and its database.
Agent should automatically use these secrets and attempt to connect. The app will likely restart.
Here are common scenarios and how to address them by **debugging methodically**:
### Scenario 1: "Failed to load posts" or property errors
#### Symptom
The app runs but doesn't display posts. Console errors might mention "Could not find sort property with name ID created\_time" or other column mismatches.
#### Cause
Agent might assume column names or properties (e.g., `created_time` for sorting) that don't exist or are named differently in your Notion database.
#### Troubleshooting
1. **Verify Notion Database**: Ensure column names in your database exactly match Agent's expectations or your prompt. If Agent seeks `created_time` and you have `PublishedDate`, it's a mismatch.
2. **Prompt Agent with error (Debug principle)**: Copy the *exact* console error and **select** relevant code snippets if you've identified them. Provide this focused context to Agent:
```text theme={null}
There's an error fetching posts. Console: "Could not find sort property with name ID created_time".
My Notion database uses 'PublishedDate'. Please use this for sorting/fetching. Here's the suspected code from `services/notion.js`: [code snippet]
```
3. **Iterate (Experiment principle)**: If Agent's fix fails, provide more specifics. "Posts still not loading. Error persists. Show me the code for fetching/sorting Notion posts." If you added a column like `created_time` in Notion as a quick fix, you can later ask Agent: "Remove reliance on 'created\_time', use 'PublishedDate' instead." Remember to use Agent's **Checkpoints** to save working states.
### Scenario 2: Incorrect data display or formatting
#### Symptom
Data appears, but incorrectly (e.g., reading time wrong on homepage but right on post page; Markdown rendering issues).
#### Troubleshooting
1. **Be specific (Specify principle)**: Describe the issue and location clearly:
```text theme={null}
On the homepage, post reading time is incorrect, but it's correct on individual post pages.
Also, display 'PublishedDate' on the homepage for each post summary.
```
2. **Markdown issues (Show principle)**: If Notion "Body" Markdown renders incorrectly (e.g., extra spaces, formatting errors):
* Inspect raw content in Notion; its formatting can introduce subtle characters.
* Prompt Agent clearly. You can even **show** an example:
```text theme={null}
Markdown rendering issue: In post X, bold text like '**this**' appears as ' ** this **' and fails to render. Ensure Markdown parsing handles such cases or trims whitespace. Example of correct rendering for bold: **This is bold**.
```
* Testing with known good Markdown (e.g., from ChatGPT pasted into Notion) can isolate if the issue is source data or rendering logic.
### General debugging flow
1. **Observe**: Note the error or incorrect behavior.
2. **High-level prompt (Simplify)**: Describe the problem to Agent clearly.
3. **Check Console/DevTools (Debug)**: Look for detailed errors.
4. **Iterate & provide context (Select, Show)**: If Agent's fix fails, provide more context (error message, relevant code, your goal, attempts made).
5. **Incremental changes (Checkpoint)**: Ask Agent to fix one thing at a time. Use **Checkpoints** in Agent to save progress.
6. **Rollback**: If prompts worsen things, roll back to a working **Checkpoint** and try a new approach.
Replit builds, bundles, and publishes your app to a public URL.
## What you've learned
By following this tutorial, you've learned to:
* Set up Notion as a CMS with an integration and structured database
* Prompt Replit Agent to build a web app connected to Notion, applying principles like **planning, specifying, and simplifying**
* Securely manage API keys using Replit Secrets
* Iteratively debug and refine an AI-generated app using techniques like **providing context, showing examples, and using checkpoints**
* Publish your Notion-powered website on Replit
For detailed information about checkpoints and rollbacks, see [Checkpoints and Rollbacks](/replitai/checkpoints-and-rollbacks).
Building with AI like Replit Agent is collaborative. Procedural thinking, clear instructions, and methodical debugging are crucial for turning ideas into reality, fast.
## Next steps
Continue developing your Notion-powered website:
You can even [monitor your published app](https://docs.replit.com/cloud-services/deployments/monitoring-a-deployment) to see how many people are playing your game and how it's performing.
## Why this matters
This simple demonstration shows how dramatically technology has evolved. Just a few years ago, creating and publishing a game would have required:
* Learning multiple programming languages
* Understanding web servers and hosting
* Dealing with complex publishing processes
Today, you can do it all through conversation with AI and a few clicks. Replit is the fastest way to go from idea to app.
## Take your game further
### Checkpoint: Build incrementally
Instead of asking the AI to build your entire application at once, break the project down into smaller, logical steps. Approach development iteratively, confirming each piece works before moving on. This mirrors traditional development cycles and makes the process more manageable for both you and the AI.
* **Why it matters**: Building step-by-step makes debugging easier and allows the AI to focus its capabilities.
* **How to apply**: Prompt for one feature or component at a time. After each successful step, use **Replit Agent**'s [**Checkpoint**](/replitai/agent#checkpoints) feature (like a `git commit`) to save your progress. If a subsequent step fails, you can easily **Rollback** to a working state and try a different prompt.
* **Less Effective**: "Build a complete e-commerce platform."
* **More Effective**: "Set up a basic full-stack project for an e-commerce site. Include user sign-up and login functionality using a Replit Database." (Followed by prompts for product listings, cart, etc.)
### Debug: Provide contextual clues
When errors pop up, treat the AI like a collaborator who needs information to help. Go beyond saying "it's broken" and provide specific details about the problem, including error messages and the relevant code sections, so the AI can effectively assist in troubleshooting.
* **Why it matters**: The AI needs context to understand the error and suggest a correct fix.
* **How to apply**: Include the *exact* error message, the relevant code snippet(s), the file name(s) where the error occurs, what you were trying to achieve, and any steps you've already tried.
* **Less Effective**: "My login page is broken."
* **More Effective**: "When I try to log in with correct credentials on the `/login` page, I get a 'User not found' error in the browser console. It seems like the check against the database isn't working. Here's the relevant login handling code in `auth.js`."
### Discover: Ask about possibilities
Don't hesitate to ask **Agent** or **Assistant** for advice. If you're unsure about the best library for a task or different ways to approach a feature, ask! This is a great way to learn about new tools or techniques relevant to your project.
* **Why it matters**: You can quickly learn about relevant technologies or techniques you might not be aware of.
* **How to apply**: Frame questions openly. Ask about options, trade-offs, or common practices.
* **Less Effective**: "Add payments."
* **More Effective**: "What are some good options for accepting credit card payments in a web app built on Replit? I need something relatively simple to integrate."
### Experiment: Iterate and refine
Your first prompt might not yield the perfect result, and that's okay. Prompting is a conversation. If the AI's response isn't quite right, try rephrasing your request, adding more detail, or simplifying the language. Small adjustments can lead to significantly better outcomes.
* **Why it matters**: Iteration helps you converge on the desired outcome and learn what prompts work best for specific tasks.
* **How to apply**: If the first response isn't quite right, rephrase your request. Add more detail, provide an example, or simplify the instruction. Try different ways of explaining the same goal.
* **Initial Prompt**: "Create a header for my website."
* **Refined Prompt**: "Create a sticky header component for my website. It should include the site logo on the left and navigation links (Home, About, Contact) on the right."
### Instruct: Use positive and direct language
Clearly state what you want the AI *to do*, rather than listing things to avoid. Positive, direct instructions are easier for the AI to understand and act on, leading to more predictable and useful results.
* **Why it matters**: Positive instructions are less ambiguous and guide the AI more effectively toward the desired action.
* **How to apply**: Frame your requests as clear commands or descriptions of the desired state.
* **Less Effective**: "Don't make the user profile page confusing."
* **More Effective**: "Design a clean user profile page. Display the username prominently, followed by the user's email and join date. Include an 'Edit Profile' button."
### Select: Curate relevant context
Give the AI the specific information it needs for the task at hand, but avoid flooding it with irrelevant details. Use features like file mentioning to focus the AI's attention. If switching to a completely different task, starting a **New chat** can prevent confusion.
* **Why it matters**: Helps the AI focus on the specific problem without getting sidetracked by unrelated details. **Agent** and **Assistant** have features to help manage context, like mentioning specific files or scraping URLs.
* **How to apply**: When asking for changes to specific files (`profile.js`, `profile.html`), mention or attach only those key files. Supplement with specific external context like documentation URLs or design mockups instead of attaching the entire codebase.
* **Less Effective**: (Attaching the whole project) "Implement the user profile page based on our design system."
* **More Effective**: "Create the user profile page. Fetch user data from the server endpoint. Style the page according to the guidelines in the design system documentation: \[URL to design system docs] and match the layout shown in this mockup: \[attach image `profile_mockup.jpg`]."
### Show: Provide examples and demonstrations
Sometimes, the best way to explain what you want is to show an example. Provide code snippets illustrating a style, sample data structures, or even upload screenshots of a UI element you want the AI to replicate. This helps eliminate ambiguity.
* **Why it matters**: Examples reduce ambiguity and give the AI a clear target to aim for. Replit AI supports multimodal input like images.
* **How to apply**: Include code snippets of the desired style, sample input/output data, links to documentation, or even UI mockups/screenshots (which **Agent** can often interpret).
* **Less Effective**: "Make the product cards look better."
* **More Effective**: "Redesign the product cards on the shop page. Each card should display the product image, name, price, and an 'Add to Cart' button, similar to this layout: \[link to example site or attach screenshot]. Use a light gray border for each card."
* **Alternatively**: "Use this JSON structure for representing product data: \[example JSON snippet]. Generate display logic based on this."
### Simplify: Be clear and concise
Communicate with the AI using clear, straightforward language. Avoid unnecessary jargon or overly complex sentences. Breaking down your request into simple steps or bullet points can greatly improve the AI's understanding.
* **Why it matters**: Simple, direct language reduces the chance of misinterpretation.
* **How to apply**: Break down complex requests. Use bullet points for lists of requirements. State the primary goal clearly upfront.
* **Less Effective**: "Implement the necessary server-side infrastructure to facilitate the dynamic generation and retrieval of user-generated content artifacts."
* **More Effective**: "Create the backend functionality for users to submit blog posts. Users should be able to enter a title and body content. Store these posts in the Replit Database."
### Specify: Define outputs and constraints
Be explicit about your requirements and expectations. Define the desired output format, specify any constraints (like using a particular library), and mention important edge cases the AI should consider. The more specific you are, the better the AI can meet your needs.
* **Why it matters**: Reduces ambiguity and ensures the AI's output meets your specific needs.
* **How to apply**: Detail the expected function signature, return types, data formats, error handling behavior, or specific technologies to use.
* **Less Effective**: "Add a contact form."
* **More Effective**: "Create a contact form page at `/contact`. The form should include fields for Name (required), Email (required, must be valid format), and Message (required, min 10 characters). On submit, send the form data to `contact@mydomain.com`."
### Test: Plan before you prompt
Before you start prompting, take a moment to plan. Think through the application's structure, key features, and user flow, much like a product manager or engineer would. Having a clear plan will help you write more targeted and effective prompts.
* **Why it matters**: A clear plan leads to more focused prompts and a more coherent final application.
* **How to apply**: Outline the features, data structures, and user flows before you start prompting **Agent** or **Assistant**. Break the overall goal into logical development stages.
* **Less Effective**: "Build a task manager app."
* **More Effective**: (After planning) "1. Create the basic HTML structure for a task manager with an input field and a task list. 2. Add JavaScript to allow users to add tasks to the list. 3. Use Replit Database to store tasks so they persist. 4. Add functionality to mark tasks as complete..." (Then prompt for each step).
## Summary
Apply these principles: build incrementally, provide clear context, be specific, show examples, and plan ahead. This approach significantly improves collaboration with **Replit Agent** and **Replit Assistant**. This allows developers to leverage the power of AI to build and publish applications faster and more effectively.
---
### Building Mobile Apps with Expo and Replit
Source: [https://docs.replit.com/tutorials/expo-on-replit.md](https://docs.replit.com/tutorials/expo-on-replit.md)
# Building Mobile Apps with Expo and Replit
> Replit is the fastest way to create and publish cross-platform mobile apps using Expo, without any setup or configuration.
export const AuthorCard = ({img = "https://replit.com/cdn-cgi/image/width=256,quality=80,format=auto/https://storage.googleapis.com/replit/images/1730840970400_e885f16578bbbb227adbfeb7b979be34.jpeg", href = "https://youtube.com/@mattpalmer", name = "Matt Palmer", role = "Head of Developer Relations"}) => {
return 
Apps are the new websites, and everyone should be able to create them. By combining Replit's browser-based development environment [with Expo](https://expo.dev/blog/from-idea-to-app-with-replit-and-expo), mobile app creation is now as simple as building a website.
Before writing a single prompt, think through the entire application. This goes beyond basic logical thinking (like knowing the rules of chess) or even computational thinking (like programming a computer to enforce those rules).
Procedural thinking is about understanding how to *excel*—like programming an AI to play chess competitively. It means deeply understanding the problem space, the desired outcome, and the steps to get there.
* **Define the problem space**: What core problem does the app solve? What makes a *successful* app in this context?
* **Plan the MVP**: What are the absolute essential features for the first version? Start small.
* **Break it down**: Define the high-level goals, then break them into smaller, actionable steps or features. Think like both a product manager (defining requirements) and an engineer (planning implementation).
* **Anticipate edge cases**: What could go wrong? How should the app handle unexpected inputs or situations?
* **Consider the User Experience**: What makes a *good* app for this purpose? What data needs to be stored? How should users interact with it?
* **Example**: If building a tip-splitting app, don't just ask for "a tip splitter." Specify how users add friends, input the bill amount, handle taxes/discounts, and share the results. Procedural thinking defines these requirements clearly for the AI.
This might involve drawing a wireframe, writing a doc about the requirements of the app, or even just a list of features.
Use the screenshot from your wireframe to help Agent understand the app. Here's a sample screenshot and prompt from a question asking app.
### Leverage Frameworks
You don't need to build everything from scratch, and often, you shouldn't. Countless frameworks and libraries exist to solve common problems (UI components, animations, data handling, etc.).
* **Ask the AI**: You don't know what you don't know. Ask Agent or Assistant: "What are good options for building a user interface with drag-and-drop features?" or "What's the best way to handle user authentication?"
* **Check Compatibility**: Newer frameworks might not be in the AI's training data. Ask the AI about compatibility or provide documentation links directly in your prompt. Replit Agent and Assistant can often scrape web content for context.
* **Provide Specifics**: If you find a relevant library or code snippet, include it in your prompt. Giving the AI concrete examples of *how* to use a framework is highly effective.
Errors are inevitable. Instead of just pasting the error message back to the AI, approach debugging systematically.
* **Understand the Error**: Read the error message carefully. Where did it occur (`Console`, browser, specific file)? What does it say?
* **Gather Clues**: Look at the code around the error. Check the `Console` for logs. Use the AI Assistant to explain parts of the code you don't understand.
* **Isolate the Problem**: Try to reproduce the error reliably. What specific action triggers it?
* **Provide Contextual Clues**: When asking the AI for help, provide:
* The exact error message.
* The relevant code snippet(s).
* What you were trying to do.
* What you've already tried.
* **Turn it into a Game**: Think of debugging as solving a puzzle. Each clue gets you closer to the solution.
### Master Context
The information (context) you provide the AI dramatically influences the quality of its response. More context isn't always better; *relevant* context is key.
* **Be Selective**: Include only information directly relevant to the current task. Exclude unrelated code, files, or previous instructions if they aren't needed. Think about the AI's limited attention span (context window).
* **Use Multimodal Inputs**: Provide code snippets, file attachments, error messages, URLs for documentation, or even screenshots if they help clarify the request.
* **Structure Prompts Clearly**: State the goal first, then provide supporting context.
* **Start Fresh for New Features**: When starting a significantly new feature, consider using **New chat** in Agent or Assistant to ensure the AI isn't confused by previous, unrelated context.
1. **Think**: Define the next small feature or fix (Procedural Thinking).
2. **Prompt**: Clearly ask the AI, providing relevant frameworks and context (Leveraging Frameworks, Mastering Context).
3. **Test**: Run the code. Does it work?
4. **Error?**:
* **Yes**: Debug systematically, gather clues, and prompt the AI again with specific details. If stuck, consider rolling back to a previous **Checkpoint** and trying a different approach (Debugging Methodically, Building in Checkpoints).
* **No**: Success! Save a **Checkpoint** (Building in Checkpoints).
5. **Repeat**: Move on to the next feature or refinement.
This loop turns AI from a magic black box into a powerful, steerable collaborator.
## What you've learned
Developing these skills transforms how you build software with AI:
* **Build Faster**: Go from idea to functional app more quickly and efficiently.
* **Overcome Roadblocks**: Systematically navigate errors and AI limitations.
* **Tackle Complexity**: Build more sophisticated applications by breaking them down effectively.
* **Improve Clarity**: Enhance your own understanding of the project by thinking procedurally.
* **Unlock Creativity**: Spend less time fighting the tools and more time bringing your vision to life.
MCP is a standardized protocol that allows AI models to:
* Access specialized tools and APIs
* Work with private data sources
* Perform actions in the real world
* Connect to other systems seamlessly
## How MCP works: Understanding the key components
The MCP architecture has three main components:
1. **The Client Side**: AI models like Claude or applications that need to access external tools
2. **The Communication Layer**: The protocol itself that standardizes how requests and responses are formatted
3. **The Server Side**: Programs that provide access to tools, data sources, and specialized capabilities
2. **Visual Preview**: Agent streams a visual preview of the app's UI.
3. **Environment Setup**: Agent configures the development environment, installing necessary languages and packages—no manual setup required.
4. **Building the App**: Agent writes the code for the front end and back end.
5. **Checkpoints**: Agent creates checkpoints ([Git commits](/replit-workspace/workspace-features/version-control)) so you can roll back if something goes wrong.
In the video, Agent identified an issue with parsing the Overpass API response and added robust error handling, which resolved the problem.
Assistant will:
* Read files for context.
* Make changes to necessary files (e.g., theme providers, styles).
* Restart the app to apply changes.
Your published app will have a public URL (e.g., `park-mapper.replit.app`). Changes made in your development environment won't affect the published version until you click **Republish**.
## Recap and next steps
This tutorial went from an idea to a published interactive map application without writing a single line of code manually. Replit Agent was used for the heavy lifting and Replit Assistant for refinements, leveraging domain knowledge and an iterative debugging process.
**Potential Next Steps for the Park Mapper App**:
* Add a [database](category/storage-and-databases) to store park data persistently (avoiding re-fetch on every load).
* Allow users to save or favorite parks.
* Implement advanced filtering.
* Improve styling and add custom icons for map markers.
* Enhance mobile responsiveness (e.g., ensuring filters are accessible on mobile).
Vibe coding is about iterating, experimenting, and guiding AI to bring your ideas to life. Don't be afraid of errors; they are part of the process!
---
## Workspace Features
### Dependency Management
Source: [https://docs.replit.com/replit-workspace/dependency-management.md](https://docs.replit.com/replit-workspace/dependency-management.md)
# Dependency Management
> Replit supports a variety of languages and dependency management systems through the Dependencies tool. This section will cover the different types of dependencies and how to manage them in your Replit App.
## Imported Packages
Packages imported directly from your code are managed in the `Imports` tab. This tab allows you to view and manage the packages grouped by language. Links are also provided to the appropriate packager file, such as `package.json` for Node.js.
### Search and add packages
Clicking on `Add new package` will allow you to search for and install new packages. The language dropdown provides quick access between packagers.
You can view installation progress and relevant errors in the `Console` tab.
### The Universal Package Manager
Replit will install most packages using [the universal package manager](https://blog.replit.com/packager). To see which languages and package managers are supported, please check out [UPM: Supported Languages](https://github.com/replit/upm/#supported-languages).
If you prefer using the CLI, you can still use language-specific package managers such as `poetry` or `npm`. Any changes to the packager files will be reflected in the `Dependencies` tool, but require the respective CLI command or using the **Run** button to properly update.
### Import guessing
As your code evolves, we analyze your project for missing dependencies and automatically guess what needs to be installed to get your code to run. For example, if you add `import flask` to `main.py`, the next time you select **Run**, you'll see a section in the **Console** indicating that the latest version of **Flask** is being installed:
### Guessing failures
This section helps you with the command to run a particular version of your package. If there's a particular version that you need, or we guessed the wrong package entirely, you can run `upm` in the shell to resolve the conflict:
```bash theme={null}
upm add 'flask==2.3.3'
```
To install additional packages in your Workspace, open a new tab by selecting the **+** sign and searching for **Packages**. Select the packages of your choice and select **Install**. Additional options for package guessing can be configured in the [.replit](/replit-app/configuration#replit-file) file.
### Python package managers
When you create a Python Replit App, your package manager will be **poetry** by default. This means that you will not be able to use `pip install` to manage dependencies manually. Instead of running `pip install 
### System Modules
Modules combine support for programming languages, formatters, and packagers. These provide the foundation for your Replit App. If you create a Replit App from a template or GitHub repository, we will automatically install the modules that are required for the languages used.
If you want to start with a blank Replit App, you will need to install a module under **System Modules** before you can use the **Imports** tab. You can also add more modules to support additional languages.
You can further customize modules and other Nix settings using the [.replit](replit-app/configuration#replit-file) file.
### System Dependencies
If you need more specific support for a language or other system-level dependencies, you can add [Nix packages](https://search.nixos.org/packages) under **System Dependencies**. These can also be managed in your [replit.nix](/replit-app/configuration#replit-nix-file) file.
---
### Extensions
Source: [https://docs.replit.com/replit-workspace/extensions.md](https://docs.replit.com/replit-workspace/extensions.md)
# Extensions
> Extensions are applications you can develop to enhance the functionality and tools available within the Replit Workspace.
## What can Extensions do?
### Streamline workflows
Extensions are deeply integrated with Replit, so users can automate actions like reading and editing files, formatting or linting code, and more.
### Add custom apps with tools
Tool Extensions lets you interact with custom experiences and products in the Replit Workspace, similar to the apps you install on your phone or computer.
### Extend native functionality
Extensions can extend and improve the existing functionalities within Replit, like formatting code and editor capabilities.
## Reasons to build an Extension
### Consolidate your tools
Developing an Extension allows you to integrate your preferred tools into the Replit environment, serving your specific workflow preferences.
### Personalize your Workspace
Extensions empower you to customize Replit to suit your needs, creating a sense of empowerment and productivity.
### Expand your software reach
Companies can use Extensions to distribute their products directly to Replit's active Community, accessing a targeted audience within a relevant context.
## Extensions store
The Extensions store allows you to view and install from various Workspace Extensions.
## Access the store
In your Replit App, you can access the Extensions store by navigating to the **Tools** section on the sidebar and selecting **Extensions**.
## Install an Extension
In the Extensions store, choose an Extension and select **Activate Extension for your account**.
Select **Accept and Activate** to start using the Extension.
You'll find installed Extensions in the **Installed** tab alongside the **Store**.
You can use the ellipses next to each Extension to manage them, allowing you to uninstall, unlist, un-bless, feature, or delete them from the store.
---
### Keyboard Shortcuts
Source: [https://docs.replit.com/replit-workspace/keyboard-shortcuts.md](https://docs.replit.com/replit-workspace/keyboard-shortcuts.md)
# Keyboard Shortcuts
> Learn how to view, add, and modify keyboard shortcuts that can boost your productivity in Replit.
Keyboard shortcuts let you run commands, modify text, and navigate the workspace
using configurable key combinations. You can set and use keyboard shortcuts in
the Replit.com web app and desktop app.
## Viewing keyboard shortcuts
**User Settings** tab from 
**All tools** in the dock.
Alternatively, search for "User Settings" using the 
magnifying glass.
3. Select the **Keyboard shortcuts** tab to view the list of commands and their assigned shortcuts.
## Customizing keyboard shortcuts
To add or modify a keyboard shortcut, follow these steps:
1. Select 
pencil icon for assigned commands.
2. When "Recording..." appears next to the command, press the key combination you want to assign.
To cancel recording, click an empty area inside the tab.
3. To revert the shortcut, select the 
rollback icon.
## Removing keyboard shortcuts
To remove a keyboard shortcut, select the 
trash icon next to the command.
## Tab navigation
You can use the browser **Tab** key navigation to navigate between the interactive elements
on a page. However, the File Editor, Console, and Shell tools capture the **Tab** key as
input for purposes including indentation.
To continue cycling through page elements while in these tools, follow these steps:
1. Press **Esc** to release focus from the tools
2. Press **Tab** to move to the next element
---
### Ports
Source: [https://docs.replit.com/replit-workspace/ports.md](https://docs.replit.com/replit-workspace/ports.md)
# Ports
> Learn how ports work in Replit's cloud environment, including port forwarding, configuration, and troubleshooting for your web applications.
Because Replit runs your projects on a cloud environment, ports work differently on Replit than on your local computer. (If you need a more basic explanation of what TCP ports are, [start here](https://www.reddit.com/r/explainlikeimfive/comments/1t9s5a/eli5_what_are_ports_ex_tcp_port/).)
On a computer, you only have one layer of port management: your programs define a port that they listen to, and when traffic hits that port on your computer from the internet, they get routed to the appropriate process.
The `0.0.0.0` part is the address, or host. If a process is listening on `0.0.0.0`, that means it should listen on every network interface — which means that if another computer (on the internet) sends a request to your computer’s IP address, it will see it. So, listening on 0.0.0.0 means those processes are accessible to the public internet (if your computer is connected.)
Most programming frameworks will *not* listen on `0.0.0.0` when you’re developing, because you don’t necessarily want your work exposed to the public while you’re working on it, for privacy & security. Instead, they’ll listen on a different address — `127.0.0.1`, otherwise known as `localhost`. This means only that computer can make requests to that port.
On Replit, for a process you’re running to be accessible in the webview or via an external request, it has to have an **external port** defined. This is because the “internal port” that processes typically use is only visible from inside the sandboxed cloud environment that Replit provides. We have to connect that internal port to an externally accessible port to send the right traffic to your programs. Even if your process listens on a port typically available to the public like 0.0.0.0, we still need to bind that port to an external port.
We do this by binding external ports to specific internal ports — for example, in the diagram above, the external port `:80` is bound to the internal port `:3000`. That means any traffic that Replit App gets on port 80 will go to the internal port 3000.
This configuration is captured in the \[\[ports]] section of the .replit config file.
By default, we will bind the first port you open to the default external port 80, which will allow that process to be available at the domain without a port address (e.g. customdomain.com/ instead of customdomain.com:3000/). Additional internal ports that are opened will be bound to other available external ports (see a full list below.)
## Preview
In the Preview tool, you can change which external port the webview is rendering by clicking the domain and selecting a different port. You can also open the networking tool from the “gear” icon for more details.
## Default port
Port :80 is the “default port” for http traffic, so http traffic sent to the root domain will automatically be routed to port 80. We don’t show the port path in the url for port 80 for that reason. Ports other than :`80` will show up in the domain path (e.g. customdomain.com:4200/). (We provide TLS by default, so it will technically be over port 443, which is the default port for https. For all intents and purposes, you can treat them as interchangeable.)
## Networking tool
For more details about port config and networking, you can open the networking tool. It shows the status of ports open in your Replit App, what external port they’re bound to, and lets you add or remove configuration.
## Publishing
Autoscale and Reserved VM deployments only support a single external port being exposed, and for the corresponding internal port not to be using `localhost`. If you expose more ports, or expose a single port on localhost, your published app will fail. An easy way to make sure your Autoscale deployments work as expected is to remove all the `externalPort` entries for the ports in your config *except* the port for the service you want to interact with from the internet.
## Debugging
A common reason something might not be working as you’d expect is that while your port config looks right, your program is actually looking at a different port. For example, if your config is:
```
[[ports]]
internalPort = 3000
externalPort = 80
```
Then internet traffic to port 80 will go to internal port 3000. However, if your program is actually not listening on port 3000, but rather something else (like 8080), it will appear as if no traffic is getting through. This can happen if you switch the port in your code without switching the corresponding port in your config, or copy-paste config from one project to another.
Each framework has different default ports it listens to — for example, Flask is 5000, react is 3000, and laravel is 8000. Make sure the right port is configured!
## Preferences
We will automatically bind ports that are opened in your Replit App to available external ports when they are opened, and record that binding in the .replit config file.
However, we don’t do this by default for internal ports that open on localhost, because services that usually run on localhost typically assume that they will only be accessible on the same computer as the process that’s running (localhost ports are only visible to the same computer running the process.) This means those services are often not as secure as services built under the assumption that they’ll be available to the public internet.
You can always override this by setting the `exposeLocalhost` config option to `true` for the port you want to expose.
If you want to *always* expose localhost ports by default, you can set your “automatic port forwarding” setting in the User Settings tool to “All ports”.
If you want to *never* create config for ports that are opened, and manually control the port config for all your Replit App, you can set that to “never”.
## Supported ports
Replit App will define port 80 as the external port by default when the first port opens. A Replit App can expose 3000, 3001, 3002, 3003, 4200, 5000, 5173, 6000, 6800, 8000, 8008, 8080, 8081, as extra external ports.
Ports 22 and 8283 are not forwardable, as they are used internally.
## `[[ports]]` .replit config
Type: `{localPort, externalPort, exposeLocalhost}`
The `[[ports]]` config Allows you to configure which HTTP port to expose for your web output. By default, any exposed HTTP port with host 0.0.0.0 will be exposed as your Replit App's web output.
Extra ports can be served without overriding the default port by adding a new \[\[ports]] entry to your .replit file. You are required to specify both a localPort and externalPort entry. You can add multiple extra ports by adding multiple \[\[ports]] entries to your .replit file as defined below.
### localPort
Determines which port Replit will bind to an external port.
### externalPort
Determines which port should be exposed for that local port’s publicly accessible port.
```toml theme={null}
[[ports]]
localPort = 3000
externalPort = 80
```
If you want to *never* expose a particular port, you can leave the `localPort` config but just not add an `externalPort`:
```toml theme={null}
[[ports]]
localPort = 3000
```
### exposeLocalhost
Determines whether an internal port using `localhost` can be bound to an external port. Can be `true`, `false`, or null.
```toml theme={null}
[[ports]]
localPort = 3000
externalPort = 80
exposeLocalhost = true
```
---
### Replit Auth
Source: [https://docs.replit.com/replit-workspace/replit-auth.md](https://docs.replit.com/replit-workspace/replit-auth.md)
# Replit Auth
> Add user accounts, personalized experiences, and secure access control to your app. Enterprise-grade authentication that works with a single Agent prompt.
Replit Auth lets you create personalized user experiences in your app. With user accounts, you can save user preferences, create custom dashboards, build social features, control access to premium content, and track user activity—all the features that make apps engaging and valuable.
Instead of spending months building authentication from scratch, Replit Auth gives you enterprise-grade capabilities with a single Agent prompt. Powered by the same infrastructure as Fortune 500 companies—Firebase, Google Cloud Identity Platform, reCAPTCHA, Stytch, and Clearout—you get professional-level security, fraud prevention, and global scale built in.
## Why use Replit Auth
Authentication is a challenging problem that entire companies dedicate themselves to solving. Your app's primary purpose likely isn't authentication - it's whatever unique idea or solution you're building.
Replit Auth offers:
* **Zero setup** - Add authentication with a single prompt in Agent
* **Built-in security** - Uses Replit's infrastructure with protections against common attacks
* **User management** - Simplified user administration through the Auth pane
* **Database integration** - Automatic user entries in your database
* **Customizable login page** - Personalize the login experience for your app
* **Password reset** - Replit sends password reset emails for you, so you don't need to set up your own email delivery provider
* **Development and Published Apps** - Replit Auth works seamlessly across development (replit.dev), and published apps (replit.app, and custom domains)
## Enterprise-grade infrastructure
Replit Auth is more than simple user management—it's a fully managed authentication solution built on enterprise-grade infrastructure. This powerful combination gives your app the same authentication capabilities used by Fortune 500 companies:
* **Firebase & Google Cloud Identity Platform** - Enterprise-tier SLA with Google's battle-tested authentication infrastructure
* **Advanced security scanning** - Automatic protection against bots and malicious actors with reCAPTCHA integration
* **Fraud prevention** - Email verification and validation powered by Clearout to prevent fake accounts
* **Multi-factor authentication** - Secure login options backed by Stytch's enterprise authentication platform
* **Global scale** - Built to handle millions of users with automatic scaling and reliability
This enterprise foundation means you can focus on building your app's unique features while knowing your authentication is powered by the same infrastructure that secures billion-dollar companies. Instead of spending months integrating multiple services, you get all these capabilities with a single Agent prompt.
## Getting started with Replit Auth
The only way to implement Replit Auth is by using Agent. Simply include a request for Replit Auth in your prompt:
```
Help me create an app that [your app idea] and should feature Replit Auth.
```
Agent will set up all the necessary code and configurations for authentication. Manual implementation is not supported, as Agent handles all the complexity for you.
To learn more about Agent capabilities, see the [Replit Agent documentation](/replitai/agent) and [Agent integrations](/replitai/integrations).
For tips on writing effective prompts, check out [Effective prompting with Replit](/tutorials/effective-prompting).
## Managing users
Replit Auth provides a built-in user management interface accessible through the Auth pane in your Replit workspace.
From this interface, you can:
* View all authenticated users
* Ban users from your application
* View user details
* Track user activity
## Customizing the login page
You can customize the login page to match your app's branding:
1. Navigate to the Auth pane in your Replit workspace
2. Click on **Configure**
3. Customize the following elements:
* App name
* App icon
* Login methods (Google, GitHub, X, Apple, Email)
Your changes will immediately appear on your app's login page.
For more information on databases, see the [Replit Database Documentation](/cloud-services/storage-and-databases/replit-database).
## Security considerations
Replit Auth leverages Replit's infrastructure, providing built-in protections against common security threats. However, you should still follow these best practices:
* Always validate user authentication server-side before performing sensitive operations
* Never store sensitive information like passwords in your code
* Use environment variables for any API keys or secrets
* Implement proper access controls for user data
For more information on security, check out:
* [Replit's built-in security features](/tutorials/vibe-code-securely)
* [Security checklist for vibe coding](/tutorials/vibe-code-security-checklist)
* [Secrets management](/replit-workspace/workspace-features/secrets)
## Referrals
To encourage applications that teach people about Replit, any user that signs up via Replit Auth will automatically be added to your pending Replit Referrals. If they later upgrade to Replit Core, you will receive any referral bonus you are entitled to according to the current terms of the referral program.
## Troubleshooting
### Common issues
1. **User not recognized after login**
* If you're experiencing issues, ask [Replit Assistant](/replitai/assistant) for help debugging your authentication implementation.
2. **Custom icon not displaying**
* Make sure the icon URL is accessible and in a supported format (PNG or JPG).
3. **Newly linked custom domain isn't working**
* Republish to refresh the domain list (REPLIT\_DOMAINS environment variable).
## Additional resources
* [Replit Database Documentation](/cloud-services/storage-and-databases/replit-database)
* [Replit Assistant](/replitai/assistant)
* [Replit Agent](/replitai/agent)
---
### Replit Themes
Source: [https://docs.replit.com/replit-workspace/replit-themes.md](https://docs.replit.com/replit-workspace/replit-themes.md)
# Replit Themes
> Personalize your workspace with custom color schemes, syntax highlighting, and UI preferences, or explore and use themes created by the community.
Themes in Replit allow you to customize the appearance of your workspace, from background colors and UI elements to syntax highlighting for your code. Personalize your development environment for better readability, reduced eye strain, and a more enjoyable coding experience.
## Creating a custom theme
Follow these steps to create and customize your own theme:
1. Navigate to your [account page](https://replit.com/account) and scroll to the **Themes** section
2. Select **Create new theme**
3. Enter a title, select a color scheme (light or dark), and add an optional description
4. Select **Create Theme** to open the Themes Editor
Global theme settings control the overall UI appearance:
* **Background**: Sets the base color for most UI surfaces
* **Outline**: Controls the color of borders and dividers
* **Foreground**: Determines text and icon colors
* **Primary**: Defines the color for buttons and interactive elements
* **Positive**: Applies to success indicators like the **Run** button
* **Negative**: Displays for errors and destructive action warnings
Select **Apply Theme** to start using your custom theme immediately.
## Syntax highlighting
Customize how different code elements appear to improve readability and comprehension.
2. Navigate to the **Keys** tab and select **New SSH key**.
3. In the popup window, enter a **Label** for your key (e.g., my-ssh-key) and paste the public key you copied into the **Key** section.
Select the **Add SSH Key** button. Your key has been added and authorized for use.
### Add the public key directly in your Account
You can also add an SSH key by navigating to your [**Account**](https://replit.com/account#ssh-keys) and selecting **SSH keys**.
Select the **Add SSH key** button and paste in the contents of `replit.pub` that we obtained from the previous section, [Find or create a keypair](#find-or-create-a-keypair).
The [HTML, CSS, JS framework](https://replit.com/@replit/HTML-CSS-JS?v=1#index.html) framework is very popular and can be used as a starting point for creating a vanilla JavaScript project. You can fork the framework to use it.
Other developer frameworks have been created by community members, like this one:
## Creating a developer framework
Public Replit Apps can be published by checking the "Publish as Developer Framework" box in the last step of the Publish this Replit Apps flow.
Before you publish your developer framework, make sure it's as easy to use as possible. It should include all the boiler plate code that is needed to get a project started, and it should work right away when the "Run" button is pressed.
A good developer framework should always include well-commented code, easily editable variables, and a README file. It's always important to comment your code, but it's even more important when others will be using your code for their own projects. In the `README.md` file, add descriptive details about your developer framework, and information about the variables that the user can change. READMEs help users understand how your developer framework works, and if there are any requirements, licensing, or other factors they should be aware of.
The `.md` in `README.md` stands for Markdown, which is a basic text language. READMEs can be written in any text format, but we'll use Markdown as it's the best practice.
Here's an example outline for a README - feel free to use this for your own developer frameworks!
```md theme={null}
# Developer Framework Name
Choose a self-descriptive name, you can also add a simple description about your developer framework.
# Usage
Explain how you can install / use this developer framework. Make sure to provide a detailed explanation and make it easy for people to read. Also, add any code snippets if needed.
# License
This will define how people can use your developer framework. You can visit https://opensource.org/licenses to choose a license.
```
You can also edit your submitted developer framework and share update messages to show how your project has changed over time.
---
### Workflows
Source: [https://docs.replit.com/replit-workspace/workflows.md](https://docs.replit.com/replit-workspace/workflows.md)
# Workflows
> A Workflow is a easily configurable 'Run' button that can run any command(s) you'd like.
export const YouTubeEmbed = ({videoId, title = "YouTube video", startAt}) => {
if (!videoId) {
return null;
}
let url = "https://www.youtube.com/embed/" + videoId;
if (startAt) {
url = url + "?start=" + startAt;
}
return
;
};
It is a reusable, customizable sequence of steps that can be executed within your replit app. They can be as simple as running `python main.py` or as complex as executing a multi-step procedure.
Example Use Cases:
* Run multiple services in parallel (e.g., frontend + backend)
* Execute files or commands sequentially (e.g., run linter → run tests, compile → execute code)
To start [creating workflows](#creating-workflows), go to the Workflows pane by using the tools sidebar menu, or search for the Workflows pane using `Command + K`.
### Install Packages
`Install Packages` utilizes Replit's built-in dependency management system, automatically detecting your project dependencies and installing the necessary packages for your project. See [Dependency Management](../replit-workspace/dependency-management.md#the-universal-package-manager) for more details on how UPM guesses packages to install for your project under the hood.
Example use case:
### Run Workflow
`Run Workflow` allows you to run another workflow from the current workflow. This allows for reusing workflows and combining them to create more complex workflows.
Example use case:
By using this task type for creating dependencies between workflows, you can edit one workflow and have other workflows referencing it automatically use the latest changes. Note that there is a depth limit placed on deeply nested workflow calls.
## Workflow Execution Mode
Workflows offer two different modes of execution: sequential and parallel.
### Sequential
Sequential execution will run each task in the defined order, waiting for each task to finish before moving on to the next step, and stopping execution of the sequence if a task within the workflow failed.
An example of using this mode is for defining commands that are logically connected, such as git commands for fetching the latest changes from your main branch, then rebasing your current branch on the main branch:
### Parallel
Parallel execution will run each task in parallel, such that each task is started and runs independently of other tasks within the workflow. One task failing does not stop the execution of other tasks.
An example of using this mode is running a fullstack project that needs to start both the frontend and the backend server:
## Creating Workflows
Workflows can be created using the workflows pane by clicking on the `+ New Workflow` button. Start by giving your workflow a descriptive name, chose a suitable mode of execution, and start adding tasks. Tasks can be re-ordered by dragging and dropping them into the desired order.
## Assign Workflow to Run Button
A workflow can also be assigned to the run button to replace the default run button behavior (see [Configure a Replit App](/replit-app/configuration)). To keep the default run command configured within `.replit`, select the default "Run Replit App" option within the dropdown.
The selected workflow within the dropdown menu next to the run button will be run when the run button is clicked. Click on your desired workflow within the dropdown menu to change which workflow should be run by the run button.
## Viewing Workflow Outputs
Workflow outputs will be displayed in the `Console` pane. You can toggle the display to only display latest outputs and clear the console altogether.
---
### Console
Source: [https://docs.replit.com/replit-workspace/workspace-features/console.md](https://docs.replit.com/replit-workspace/workspace-features/console.md)
# Console
> Console shows the output of running your Replit App code, informing you of activity and errors.
Console lets you monitor and review logs printed by your running Replit App in real time.
You can use information from current and past runs to understand your app's behavior,
troubleshoot errors, and optimize performance.
## Features
Console provides the following tools to help you understand your app's behavior:
* **Real time logging**: View your app's output as it happens
* **AI assistance**: Receive suggestions to fix errors reported in the logs
* **Run history**: Show logs from prior runs to track changes
## Usage
You can access the Console tool directly in your Replit App workspace.
**Console**.
From the **Search bar**:
1. Select the 
downward arrow to the left of the command name to hide the logs.
* **Clear past runs**: Select this to delete logs of prior runs. This action is irreversible.
### Network availability
You can control the development version of your app's availability online.
To stop serving requests to the development URL, select the 
globe with slash icon
on the right side of the network information line.
To enable it, select the 
globe icon.
To view your development URL, select the `{...}.replit.dev` text in the location bar.
## Viewing previous versions of a file
Once you've opened up File History, you can view previous versions of a file by using the scroll bar, the arrow buttons, or the **left** and **right** arrow keys.
## Comparing previous versions to the current file
Press the Compare Latest toggle in the bottom left hand of the File History pane to see in-line comparisons of your file at that point in time and the latest version.
## Restoring a previous version of a file
If you want to restore a file to a previous version, just press the `Restore` button, which will restore. Don't worry, you won't erase any history. When you restore to a previous version, it is added as a new version to the file's history.
## Viewing File History playback
You can use the playback feature of File History to watch your file change over time like a movie. This can be useful for creating videos of your programming sessions.
---
### Using the Git pane
Source: [https://docs.replit.com/replit-workspace/workspace-features/git-interface.md](https://docs.replit.com/replit-workspace/workspace-features/git-interface.md)
# Using the Git pane
> The Git pane streamlines version control directly in your workspace, making code tracking, branch management, and collaboration seamless.
The Git pane in Replit provides a visual interface for Git operations, eliminating the need to use command-line Git commands. This feature makes version control accessible for beginners while remaining powerful for experienced developers.
## Features
The Git pane offers comprehensive version control capabilities directly in your workspace, with a user-friendly interface that simplifies complex Git operations.
* **Repository management**: Initialize, connect, and manage Git repositories with GitHub integration
* **Commit tracking**: Stage, commit, and view changes across all your files
* **Branch operations**: Create, switch between, and merge branches visually
* **Conflict resolution**: Identify and resolve merge conflicts with visual assistance
* **Shell integration**: Synchronization between Git commands run in Shell and the Git pane
## Usage
### Repository setup
### Change management
### Merge conflict resolution
After resolving a conflicted file, you can remove the conflict markers by removing the lines starting with conflict symbols and save the file.
### Using Git commands in Shell
## Features
Multiplayer includes the following features:
* **Real-time collaboration**: Work on the same Replit App and instantly view changes and workspace runs
* **Shared workspace**: Experience full workspace sharing including Shell and Console output in real time
* **Observation mode**: See collaborators' code changes and file navigation as they happen
## Usage
To start collaborating, open your Replit App and invite collaborators.
The following sections show how to access and use the Multiplayer tool's features.
### Invite collaborators
**Invite**
to open the Multiplayers popup dialog
2. Enter a username or email in the text field and select **Invite** to send an email invitation
To invite users using the private link:
1. Select 
## Features
Preview includes the following functionality to let you seamlessly test and debug your web apps:
* **Live web view**: See your app and interact with it without leaving your browser tab
* **Developer tools**: Use built-in tools to diagnose problems quickly
* **Responsive testing**: View your app in different mobile device screen sizes
## Usage
The Preview tool automatically opens when you run a web app.
You can toggle this behavior in the **User Settings** tool under the **Automatic Preview** setting.
The following instructions explain how to open Preview.
**Preview**.
From the **Search bar**:
1. Select the 
**Devtools**
button at the top of the **Preview** tab to toggle them.
The following sections describe the actions you can perform in each developer tools tab.
### Console
The **Console** tab displays JavaScript logs generated by your application.
In this tab, you can perform the following actions:
* **Clear output**: Remove all console output by selecting the 
circle with slash icon.
* **Filter output**: View console output filtered by type (All, Info, Warning, or Error).
* **Filter matching text**: Show output that matches by selecting the 
filter icon and entering the text.
* **Copy output**: Copy selected console messages by selecting the 
copy button.
* **Run JavaScript code**: Run JavaScript code in your app's context by selecting the 
right angle brace. Enter the expression and select **Execute**.
### Elements
The **Elements** tab lets you inspect and modify the DOM structure of the web page.
* **View element details**: View details about the DOM element and the location in the HTML code
* **Copy output**: Copy selected console messages by selecting the 
arrow selection to toggle selection mode.
After entering selection mode, select an element on the web page.
The HTML and CSS for that element should appear in the Elements tab.
### Network
The **Network** tab monitors requests initiated by the web page.
In this tab, you can perform the following actions:
* **Track requests**: View all network requests initiated by your app. Select a request to view details.
* **Filter**: View matching results by selecting the 
"X" icon.
* **Copy**: Copy storage information by selecting the 
## Features
Secrets include the following features:
* **End-to-end encryption**: Automatically protect your data using AES-256 encryption at rest and TLS encryption in transit
* **App-level secrets**: Store and manage secrets that are specific to a Replit App
* **Account-level secrets**: Store and manage secrets that you can make available across all your Replit Apps
* **Environment variable access**: Access your secrets from your code using environment variables
* **Collaborative access**: Share secrets with collaborators and team members
## Usage
**Secrets**.
From the **Search bar**:
1. Select the 
vertical dots menu next to the secret.
2. Select **Edit** from the contextual menu.
3. Update the text in the **Key** or **Value** field and select **Update Secret** to save changes or **Cancel** to discard changes.
You can also modify the entire list of App Secrets by selecting **Edit as JSON** or **Edit as .env** at the bottom of the tab.
eye icon next to the secret.
To hide the secret, select the 
eye with slash icon.
## Features
You can customize your Replit App creation experience with these settings categories:
* **Theme customization**: Select between light and dark themes for your workspace
* **Code intelligence**: Configure AI-powered features that enhance your app creation experience
* **Editor preferences**: Adjust how the file editor behaves and appears
* **Notification controls**: Manage alert preferences
* **Accessibility options**: Make Replit work better for users with specific needs
* **Keyboard shortcuts**: Set key combinations to run common actions and navigate the GUI
## Usage
and enter the key combination
Use the following actions to manage shortcuts:
* **Add**: Select **Add shortcut**
* **Update**: Select the 
### How version control works on Replit
All four version control options interact with the same underlying Git repository:
1. **Agent Checkpoints** create commits automatically at important milestones when building with [Replit Agent](/replitai/agent). [Learn more about checkpoints and rollbacks](/replitai/checkpoints-and-rollbacks).
2. **Git Pane** provides visual access to the complete Git repository
3. **Git CLI** offers command-line access to all Git functionality
4. **File History** tracks granular changes within individual files
Choose the interface that best matches your needs, with the confidence that everything is backed by Git's robust version control system.
| Feature | Agent Checkpoints | Git Commits | File History |
| -------------------- | ----------------------------- | ----------------------------- | ------------------------ |
| **Creation** | Automatic at logical points | Manual or scheduled | Automatic for user edits |
| **Granularity** | Feature-level changes | Any change size | Character-level changes |
| **Description** | AI-generated summaries | User-written messages | Automatic timestamps |
| **Rollback** | One-click restore | Requires Git knowledge | One-click restore |
| **Git capabilities** | Full Git capabilities | Full Git capabilities | No Git capabilities |
| **GitHub sync** | Full GitHub sync capabilities | Full GitHub sync capabilities | No GitHub sync |
## Getting started
Access version control in your Replit App by adding the Git tool to your workspace:
1. Navigate to the Tools section in your Replit App
2. Select the **+** sign to add new tools
3. Select **Git** from the list of available tools
To import existing projects from GitHub, see [Import from GitHub](/getting-started/quickstarts/import-from-github).
## Version control options
Replit's version control is powered by Git at its core. You have multiple ways to interact with and benefit from version control:
### Automatic version control
### How checkpoints work
Agent checkpoints function as comprehensive snapshots of your entire Replit App state:
* **Automatic creation**: Agent creates checkpoints at logical points during development
* **Complete state capture**: Each checkpoint preserves workspace contents, AI memory, and database states
* **Implementation plans**: Before making changes, Agent presents a plan for your review
* **Complex task tracking**: Multiple checkpoints may be created for larger tasks
### Benefits for AI-assisted development
Agent checkpoints provide unique advantages when building with AI:
* **Safety net**: Experiment confidently knowing you can easily restore previous states across your entire development environment
* **Progress tracking**: See exactly how Agent built your application step by step
* **Logical milestones**: Checkpoints represent complete features rather than arbitrary save points
* **Instant rollback**: Return to any previous state with a single click, including database and AI context restoration
### Add complex integrations
Integrate payment processing, APIs, or advanced features using natural language:
You can also choose to "continue planning" if you want to refine the feature list before building begins.
### Start with a design
Perfect for seeing visual results first:
* **Quick design phase**: Agent creates a clickable front-end prototype in \~3 minutes
* **Visual-first approach**: See how your app will look and feel before building functionality
* **Flexible continuation**: Press "Build functionality" to have Agent complete a full working version of your app
* **User-controlled pacing**: You decide when to move from visual prototyping to a finished application
After the design phase, you'll see options to continue:
### Build the full app
Ideal for comprehensive application development:
* **Complete functionality**: Agent builds out the full functionality of your app from the start
* **Initial build**: Agent creates an initial working application in \~10 minutes
* **Comprehensive scope**: Full-stack development with frontend, backend, and integrations
After the initial build phase, you can:
* **Review the full task list**: See exactly what Agent plans to build next
* **Accept or modify**: Approve the plan or request changes before full implementation
* **Complete the build** (New in Agent 3): Let Agent finish the comprehensive development (can run for up to 200 minutes)
After creating an MVP, you'll see options to continue building:
## Autonomous Features (New in Agent 3)
Agent 3 introduces powerful autonomous capabilities that enable extended, self-supervised development with minimal human intervention.
### App Testing
**Automated browser testing** - Agent tests itself using an actual browser, navigating through your application like a real user would.
**Key capabilities:**
* **Real user simulation**: Agent clicks through your app, testing functionality and user workflows
* **Automatic issue detection**: Identifies problems and fixes them during development
* **Visual feedback**: Provides video replays of testing sessions for review
* **Intelligent timing**: Agent decides when testing would be most valuable
**Usage**: Toggle "App testing" in the Agent Tools panel. When enabled, Agent intelligently decides when testing adds the most value.
Learn more about [App Testing](/replitai/app-testing) capabilities and troubleshooting.
### Max Autonomy (Beta)
**Extended autonomous development** - Agent works for much longer periods with minimal supervision. Learn more about [Autonomy Level settings](/replitai/autonomy-level) and how to choose the right level for your project.
**Key benefits:**
* **Extended work sessions**: Agent can work much longer without requiring input
* **Longer-tasklist handling**: Creates much longer task lists to complete more functionality
* **Reduced supervision**: Agent will supervise itself, so you don't have to (runs up to 200 minutes)
**Usage**: Turn on "Max autonomy" in the Agent Tools panel under the Autonomy Level based on your comfort level with autonomous development. This feature is currently in Beta.
### Agents & Automations
**Beyond traditional apps** - Build intelligent agents, chatbots, and automated workflows that interact with external services.
Learn more about [Agents & Automations](/replitai/agents-and-automations) use cases and setup.
## Usage
You can access Agent in your Replit App workspace by selecting the Agent tool.
**Agent** as shown
in the following animation:
From the **Search bar**:
1. Select the 
menu icon to start or resume a conversation
* **Track usage**: Select the 
usage icon at the top right to view your billing page
* **Reverse changes**: Undo changes made by Agent by selecting 
To communicate your request to Agent, enter a **prompt** in the text area.
A prompt is a natural language instruction that describes the task you want Agent to perform.
In addition to text, you can include the following data in your prompt:
* **File attachments**: Drag a file into the text area or select the 
paperclip icon
* **Web content**: Include text data from a webpage by entering a URL and selecting **Copy page content**
* **Webpage screenshots**: Include a screenshot of a webpage by entering a URL and selecting **Take screenshot**
Agent operates in three distinct modes to support different types of work:
* **Build mode** (default): Agent writes code, modifies files, and implements features directly in your project
* **Plan mode**: Brainstorm ideas, plan development work, and collaborate on project architecture without modifying code. Learn more about [Plan mode](/replitai/plan-mode)
* **Edit mode**: Make targeted changes to specific files or code sections with precise control
**All Agent interactions are billable** - whether Agent responds with text guidance or makes code changes, there is always a charge, though smaller requests cost less.
### Checkpoints
A **checkpoint** is a comprehensive snapshot of your Replit App that captures completed work from Agent, including workspace contents, AI conversation context, and connected databases.
Agent creates checkpoints when it finishes implementing your request, ensuring you only pay for completed functionality.
Pressing "Begin take over" enables you to click into the testing preview, complete the requisite steps, then allow the Agent to continue. You can also press "Skip" to skip take over, ending the App Testing if the Agent cannot proceed without your help. If you do not respond within 10 minutes, the Agent will continue as if you pressed "Skip."
### What to expect
* **Skip option**: Use the skip button to bypass testing if needed and continue with development
* **Interactive video replay**: After testing, click the video to replay the entire testing session
* **Section navigation**: Use the sliders at the bottom to jump to specific sections of the test
The interactive replay interface allows you to review the complete testing session:
## Troubleshooting
**Tests failing unexpectedly**
* Try skipping then prompting again to test
* Check for dynamic content that might affect test timing
* Review test scenarios for accuracy
**Missing test coverage**
* Provide more detailed descriptions of your app's functionality
* Explicitly mention critical user flows that should be tested
**App Testing not working at all?**
* App Testing only works with web applications at this time
## Pricing and usage
App Testing is included as part of Agent's effort-based pricing model with important cost considerations:
* **Usage-based**: Testing is charged based on the effort spent (simpler tests are less expensive)
* **Cost vs. Benefit**: While testing costs money, it can save costs by avoiding additional prompts and extra work from Agent by catching mistakes earlier
* **Efficient Development**: Automated approach reduces the need for manual debugging and rework
*Certain preview elements were inspired by [tweakcn](https://github.com/jnsahaj/tweakcn). Check out the public open-source software repository [here](https://github.com/jnsahaj/tweakcn) from Sahaj Jain.*
## Features
App Themes provides flexible customization options for your app's appearance:
* **Preset themes**: Choose from Replit's collection of professionally designed color schemes available to all users
* **Custom themes**: Create and save your own unique color combinations for future use
* **Real-time preview**: See color changes applied instantly as you customize your app
* **Theme management**: Organize, edit, and delete your saved themes in one central location
## Usage
### Starting a new app with themes
You can start a new app with a theme by selecting a theme from the dropdown on the new prompt page
Once the theme panel is open, you can:
* **Switch themes**: Choose from your saved themes or Replit presets
* **Live color editing**: Modify individual colors and see changes instantly in your app
* **Save changes**: Apply your color adjustments to the current app
* **Publish themes**: Make your custom theme available for use in future apps
**From the Tools dock:**
1. Select 
**Assistant** icon
**From the Search bar:**
1. Select the 
#### Chat prompts
To communicate with Assistant, enter a **prompt** in the text area describing what you need.
Assistant analyzes your Replit App and creates contextually appropriate responses.
Enhance your prompts with additional context:
* **File attachments**: Drag files into the text area or select the 
In Advanced mode, Assistant creates **edit requests** when proposing code changes.
These requests provide transparency and control over modifications to your app:
* **Preview changes**: See exactly what Assistant plans to modify before approval
* **Selective approval**: Choose which changes to apply and which to skip
* **Automatic checkpoints**: Comprehensive snapshots capture workspace contents, AI context, and database states for approved changes
* **Easy rollbacks**: Undo changes or restore to previous states across your entire development environment (databases are restored when selected)
When Assistant suggests changes:
1. Select 
**Preview code changes** to review
2. Select **Apply all** to implement the changes
3. Use **Undo these changes** if you need to reverse the modifications
**Open files**
3. Open a file to view its contents in the editor
4. Select the code you want help with
5. Right-click the selected text or use the icons that appear above the selection
The following image shows the **Explain with Assistant** and **Modify with Assistant** options:
The following animation shows using the **Modify with Assistant** function:
explain icon for detailed breakdowns
* **Code improvements**: Highlight code and select the 
modify icon to request changes (Advanced mode)
* **Error debugging**: Hover over underlined errors and select "Debug with AI" for fix suggestions
### Assistant settings
gear icon in the **Assistant** tab.
You should see a screen that resembles the following screenshot:
## Features
Autonomy Level offers four distinct levels of Agent behavior, each designed for different use cases and workflows:
* **Low autonomy**: Minimal code review with hands-on control, similar to Agent v2
* **Medium autonomy**: Targeted code review on Agent's recent changes with improved accuracy (recommended for legacy projects & imports)
* **High autonomy**: Comprehensive code review on every change with broader context analysis (recommended for all new projects)
* **Max autonomy**: (Beta) Extended autonomous development with detailed task planning and execution
## Usage
Access Autonomy Level setting through Agent's tools interface when working on any project. The setting applies to your current conversation and affects how Agent approaches subsequent tasks.
### Complete state capture
Each checkpoint preserves:
* **Workspace contents**: All files, directories, installed packages, and project configuration
* **AI conversation context**: The complete conversation history and context that led to current state
* **Database states**: Connected databases and their data at the time of checkpoint creation
* **Environment configuration**: Runtime settings, secrets (references), and publishing configurations
* **Agent memory**: The AI's understanding of your project architecture, preferences, and patterns
This comprehensive approach means you can confidently experiment with changes, knowing you can restore not just your code, but your entire development context.
## How rollbacks work
**Rollback** functionality allows you to restore your Replit App to any previous checkpoint state with a single click. This is far more powerful than traditional Git revert operations.
### What gets rolled back
When you perform a rollback, Replit restores:
1. **Complete workspace state**: All files return to their exact state at the selected checkpoint
2. **AI conversation context**: Agent and Assistant conversations are restored to the point of the checkpoint, maintaining context continuity
3. **Database contents (optional)**: Connected databases are restored to their state at checkpoint creation when you select "Restore databases" under "Additional rollback options"
4. **Project configuration**: Environment variables, dependencies, and runtime configurations
5. **Development environment**: Tool configurations and workspace settings
* **Database rollbacks**: You can roll back databases independently from the database pane, giving you granular control over data restoration without affecting your entire workspace
### Rollback safety
Rollbacks are designed to be safe and predictable:
* **Non-destructive preview**: Some interfaces allow you to preview checkpoint states before rolling back
* **Clear boundaries**: Each checkpoint represents a logical development milestone
* **Conversation continuity**: AI context is preserved, so you can continue building from the restored state
* **Immediate effect**: Rollbacks apply instantly across all connected services
## Moving Through Checkpoint History
Checkpoints in Replit work bidirectionally—you can move both backward and forward through your project's history. This gives you complete flexibility to navigate your development timeline without fear of losing work.
### Rolling back
When you roll back to a previous checkpoint, your project returns to that earlier state, including:
* **Code changes**: All files and code modifications
* **File modifications**: New, deleted, or altered files
* **Database state**: Connected database contents (when "Restore databases" is selected)
### Rolling forward
If you've rolled back too far or want to recover changes from a later checkpoint, you can **roll forward** to move ahead in your checkpoint history. This allows you to:
* **Restore code and features**: Recover implementations you had at a later point in time
* **Recover database states**: Restore database contents from after your current checkpoint
* **Navigate freely**: Move through your project's timeline without losing work
To roll forward, access the history view in the Agent tab by clicking the history icon 
, then select a checkpoint that occurs after your current position.
for deeper analysis and High Power 
mode that upgrades Agent to our most advanced AI model. Together, these features help you get first-try correct results on complex builds.
3. Toggle 
General Agent is an advanced feature that allows you to use *any* framework with Replit Agent. That means you can build with your favorite projects or workflows. This comes with some risk: not all projects will work on the first try, but it means that you can now use Agent on any new or existing project that runs on Replit.
## How to access General Agent
You can get General Agent for your project in three ways:
1. **Select "General" before writing a prompt** on the Replit main page
2. **Choose any [Developer Framework](https://replit.com/templates)** - All Developer Frameworks now automatically include General Agent (including historical Apps made from Developer Frameworks)
3. **[Import](/replit-app/import-to-replit) from GitHub** - Projects imported from GitHub that aren't previous Replit, Lovable, or Figma projects automatically get General Agent (including historical GitHub imports)
## What makes General Agent different
capabilities.
Transform your ideas into custom images, illustrations, and graphics that perfectly match your project's needs. Whether you're building a website, mobile app, or any creative project, Agent generates images that bring your vision to life.
Image generation empowers builders to create unique visual content without needing design skills or external tools. Generate everything from icons and illustrations to backgrounds and UI elements directly within your development workflow.
## Features
Build visually compelling applications with Agent's image generation. This eliminates the need for stock photos, external design tools, or hiring designers for basic visual content. Whether you're creating a portfolio website, building a game, or designing a mobile app interface, image generation provides custom visuals tailored to your project.
Agent can perform the following image generation actions:
* **Custom image creation**: Generate images based on detailed descriptions and specifications
* **Style adaptation**: Create images in various artistic styles, from realistic to cartoon-like
* **Project integration**: Seamlessly add generated images directly to your app's codebase
* **Iterative refinement**: Modify and improve images based on your feedback
## Usage
To enable image generation and start creating custom images:
1. Open any Replit App with Agent enabled
2. Look for 
Agent supports three types of integrations so you can go from idea to app, fast:
* Replit managed: Built-in integrations that work automatically. Create an app and your Agent can start using these right away.
* Connectors: First‑party integrations Replit supports. Sign in once, then build with them across your apps.
* External integrations: Trusted third‑party services you can build with. Ask Agent to set them up; you’ll provide API keys.
## Getting started
To use an integration, mention the service or functionality you need. For example:
When you select Connect for a service, Replit redirects you to authenticate with that service and grant permissions for Replit to access your data:
### Example prompts
* "Integrate with Outlook to create an email dashboard"
* "Build a GitHub repository manager using my connected GitHub account"
* "Create a Linear task tracker for my team"
* "Build a Notion-powered website using my connected Workspace"
* "Create a Monday.com project dashboard"
### Work with Figma links
Use link-based workflows to act on precise parts of your design:
1. In Figma, copy the link to any frame or layer.
2. Share the URL with Agent in the chat box and describe what you want.
In Figma, copy a link to the exact frame or layer you want Agent to work with:
Then paste the link into Agent along with a short instruction (for example, “generate React for this frame”):
### View MCP calls
Open the timeline event labeled Used Figma MCP (Beta) to see the underlying requests and responses.
Here is where to expand the timeline event to inspect MCP calls:
---
### Message Queue
Source: [https://docs.replit.com/replitai/message-queue.md](https://docs.replit.com/replitai/message-queue.md)
# Message Queue
> Schedule follow-up tasks for Replit Agent while it's working. Queue messages to be executed in order after each Agent work loop completion.
The Message Queue is a new way of interacting with Replit Agent while it's working.
Instead of interrupting ongoing work, you can schedule follow-up tasks that will be executed in
order after every completion of an Agent work loop.
## How it works
When the Agent is actively handling a request, you can schedule a follow-up task by adding
messages to the Queue. These tasks or requests will be processed in order after every completion of
an Agent work loop. The queue is automatically cleared when Agent finishes all tasks.
All message options are available with the Queue, such as [Visual Editor](/replitai/visual-editor),
file attachments, and [Dynamic Intelligence](/replitai/dynamic-intelligence).
### Immediate interruption
If you need to interrupt Agent and send a message immediately, you can use the **Pause** button
in the status bar. This will stop the current Agent work loop and allow you to send an immediate
message, bypassing any queued messages (if any exist).
## Best practices
### When to use the Message Queue
* **Multi-step workflows**: Queue a series of related tasks that build upon each other
* **Batch operations**: Group similar requests together for efficient processing
* **Follow-up requests**: Add clarifications or additional requirements after the initial task
* **Non-urgent tasks**: Queue lower-priority requests while Agent works on critical tasks
### When to use immediate interruption
* **Urgent changes**: When you need to stop current work immediately
* **Critical errors**: If you notice an issue that needs immediate attention
* **Change of direction**: When you want to completely change what Agent is working on
## Queue behavior
* **Ordered execution**: Messages are processed in the order they were added to the queue
* **Work loop completion**: Each queued message is processed after Agent completes its current work loop
* **Context preservation**: Agent maintains context between queued messages in the same conversation
---
### Plan Mode
Source: [https://docs.replit.com/replitai/plan-mode.md](https://docs.replit.com/replitai/plan-mode.md)
# Plan Mode
> Plan mode allows you to brainstorm ideas, plan work, and collaborate with Replit Agent without editing your app's code or data.
Plan mode introduces a new way of chatting with Replit Agent that focuses on asking questions, brainstorming, and planning your work.
## What is Plan Mode?
Plan mode enables you to:
* **Brainstorm ideas** and explore different approaches to your project
* **Plan development work** with structured task lists
* **Collaborate with AI** on project architecture and feature planning
* **Get strategic guidance** and ask questions without modifying your project's code or data
* **Transition seamlessly** to Build mode when you're ready to implement
The default mode is now referred to as **Build** mode.
Unlike Build mode, Plan mode focuses on planning and ideation, helping you think through projects before writing code.
## Getting Started
### Accessing Plan Mode
Plan mode is available in any Replit App that has Agent enabled. To access it:
1. **Open your Replit App** workspace
2. **Look for the mode selector** at the bottom left of the chat input box
3. **Choose Plan mode** from the dropdown
## Key Features
### Task Planning
Plan mode excels at breaking down complex projects into manageable tasks. Provide the Agent some requirements and it will generate an ordered task list of the development tasks necessary to complete your request.
### Collaborative Brainstorming
Work together with AI to explore different approaches:
* **Multiple solution paths** for complex problems
* **Pros and cons analysis** of different approaches
* **Risk assessment** and mitigation strategies
## Workflow: From Planning to Building
### 1. Planning Phase (Plan Mode)
Start your development process in Plan mode:
* **Define your project scope** and objectives
* **Break down requirements** into specific features
* **Plan your architecture** and technology stack
* **Create a development roadmap** with milestones
### 2. Task Approval
When Agent generates a task list:
* **Review** the proposed tasks
* Select **Start building** to approve the plan
or, keep chatting to refine the plan.
### 3. Transition to Build Mode
When you're ready to start implementing:
* **Click "Start building"** to approve the plan
* **Agent automatically switches** to Build mode
* **Agent begins implementation** of approved tasks
* **Track progress** through the development phase
Plan Mode usage follows the same effort-based pricing as other Agent interactions. You are charged for all Agent work in Plan Mode, including answering questions, providing guidance, and generating task lists. Charges scale up for more complex requests, or requests in longer context conversations.
**All Agent interactions are billable** - whether Agent responds with text guidance or makes code changes, there is always a charge, though smaller requests cost less.
## Use Cases
### Feature Planning
Ideal for adding new functionality:
* **Break down complex features** into implementable tasks
* **Plan database changes** and API modifications
* **Design user interface** and user experience flows
* **Consider edge cases** and error handling
### Learning and Exploration
Excellent for educational purposes:
* **Understand different approaches** to solving problems
* **Learn about new technologies** and frameworks
* **Explore design patterns** and best practices
* **Get guidance** on development methodologies
## Best Practices
### Effective Prompting
To get the most out of Plan mode:
* **Be specific** about your project requirements
* **Ask follow-up questions** to clarify AI suggestions
* **Request examples** when discussing complex concepts
* **Discuss trade-offs** between different approaches
* **Iterate on ideas** before committing to implementation
* **Save important decisions** by referencing them in follow-up conversations
---
### Replit AI Integrations
Source: [https://docs.replit.com/replitai/replit-ai-integrations.md](https://docs.replit.com/replitai/replit-ai-integrations.md)
# Replit AI Integrations
> Use AI models from providers like OpenAI without requiring your own developer account or API key.
export const AiPrompt = ({children}) => {
return 
Click "Approve" to continue with Replit-managed credentials, or "Dismiss" if you prefer to use your own API key.
Your usage is automatically tracked and billed to your Replit account at the public API price.
### Bringing your own API key
If you prefer to use your own OpenAI credentials instead of Replit AI Integrations, you have a few options:
**For initial builds**: Include in your prompt that you want to use your own API key:
## How `replit.md` works
Agent first creates a `replit.md` file in your project's root directory using proven best practices. This file includes:
* Basic project information
* Recommended coding patterns
* Common preferences for your project type
1. **Select an Element**: Click any element in your app's preview to start editing.
2. **Edit Element**: Directly edit text if it's a string in your source code, right from the preview. Or use the editor pane in the chat to update more properties like padding, margin, color, etc.
3. **Preview Changes**: Changes are previewed live in the preview.
4. **Save**: Hit save to update the source code instantly. If it's a simple change, your edits will directly update the source code without consuming AI credits. If there's uncertainty or hidden complexity involved in the edit, Visual Editor seamlessly sends targeted metadata to Agent for accurate assistance.
capabilities.
This feature overcomes knowledge cutoffs by accessing the latest information on the web. When you ask Agent to create something requiring up-to-date information, it searches the web and fetches detailed content to make your app more accurate and useful.
Web Search is valuable for finding the latest packages, tools, and information. This ensures your apps use current best practices and are more accurate.
## Features
Build applications with current information using Agent's Web Search. This eliminates manual research and data gathering. Whether you're creating a dashboard with financial data or building a website showcasing recent startup launches, Web Search ensures your app reflects reality.
Agent can perform the following Web Search actions:
* **Search**: Find current information, latest documentation, and real-time data from the internet
* **Content fetching**: Retrieve detailed information from specific websites and URLs
* **Source citations**: View exactly where Agent found information so you can verify and reference sources
## Usage
Web Search is enabled by default. Include keywords like "search," "research," or "use Web Search" in your prompt to trigger it.
To manually enable Web Search:
1. Open Agent in your Replit App
2. Locate the toggle controls in the chat toolbar 
Agent triggers Web Search when you request information that requires current data:
| Use Case | Example Prompt |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- |
| Finding optimal packages | "I need to build an image editor - research the best libraries for canvas manipulation and build an app" |
| API research | "Build a Discord bot that tracks GitHub commits - find the most reliable Discord.js tutorial and the best way to communicate with GitHub" |
| Framework comparison | "Help me decide how to implement inventory management for my shopping app. Research the best authentication solutions and their trade-offs" |
| Tool discovery | "Create an app with smooth animations - research the best animation libraries" |
| Current market data | "Build a crypto tracker showing today's top 10 coins with real prices" |
| Company research | "Make a portfolio site for Michele Catasta, president of Replit" |
| Documentation updates | "Build a Stripe payment form using their latest API changes" |
| Technology trends | "Create a developer tools dashboard - what are the trending VS Code extensions?" |
### How Web Search enhances your apps
Web Search transforms your applications from using placeholder data to incorporating real, accurate information:
| Benefit | Description |
| ---------------------- | ------------------------------------------------------------------ |
| Up-to-date technology | Your apps use latest information and packages not in training data |
| Best tool selection | Agent researches options to choose optimal packages |
| Current best practices | Access to latest development patterns and security practices |
| Breaking limitations | Overcome knowledge cutoffs to use packages released after training |
| Accurate data | Your apps display current information instead of outdated examples |
| Professional results | Applications that reference real companies appear credible |
| Time-saving | Avoid manually researching packages and gathering data |
### Source citations
When Agent uses Web Search, it provides **source citations** that show exactly where the information came from. Use these citations to:
* **Verify information**: Check the reliability and accuracy of sources
* **Learn more**: Visit the original sources for more context
* **Reference sources**: Include proper attribution in your applications
* **Track research**: Understand what information informed Agent's work
### Content fetching
Agent can fetch detailed content from specific websites to gather comprehensive information for your project. This allows Agent to:
* Read entire web pages to extract relevant details
* Process documentation and reference materials
* Gather specific data points from authoritative sources
* Integrate structured information into your application
### Examples of Web Search in action
**Package discovery for image processing**
## Features
Autoscale Deployment include the following features:
* **Automatic resource scaling**: Automatically adjusts resources based on traffic patterns to optimize costs.
* **Custom domains**: Configure a custom domain or use a `
**Publishing**.
3. Select the **Autoscale** option and then select **Set up your published app**.
From the **Search bar**:
1. Select the 
## Machine power
Select **Edit** to view and set the machine power options. Use the sliders to select the CPU and RAM configuration
for each published app server instance.
View the **compute unit** cost for the configuration in the **Total per machine** row.
A compute unit is a measurement of cloud computing resources based on the memory and CPU configuration of the machine.
To learn more about calculating the cost based on Compute Units, see [Compute Units](/billing/about-usage-based-billing#2-compute-units).
## Max number of machines
Use the slider to adjust the maximum number of machines. This number is the upper limit of server
instances the autoscaling feature can assign when it determines your app is busy.
The bottom row shows the equivalent compute units, calculated by the following formula:
`Number of machines * compute units per machine`
## Next steps
* [Published App Monitoring](/cloud-services/deployments/monitoring-a-deployment/): Learn how to view logs and monitor your published app.
* [Publishing costs](/billing/deployment-pricing): View the costs associated with publishing.
* [Pricing](https://replit.com/pricing/): View the pricing and allowances for each plan type.
* [Usage Allowances](/billing/about-usage-based-billing/): Learn about scheduled deployment usage limits and billing units.
---
### Custom Domains
Source: [https://docs.replit.com/cloud-services/deployments/custom-domains.md](https://docs.replit.com/cloud-services/deployments/custom-domains.md)
# Custom Domains
> Use your domain name for your Replit published apps to showcase your app from a professional, branded web address.
Custom domains let you assign your domain name, such as `www.my-incredible-app.com` to your Replit published app.
While Replit provides a free subdomain in the format `
Load the domain in your browser to verify that it works.
Key capabilities include:
* **Domain search and availability**: Check domain availability across popular extensions like `.com`, `.ai`, and more
* **One-click purchasing**: Buy domains directly through Replit using your account's default payment method
* **Automatic configuration**: Your domain instantly points to your Replit app without manual DNS setup
* **WHOIS privacy protection**: Your personal information stays private in public domain records—included by default with every domain purchase
* **Custom DNS records**: Add custom A, TXT, and MX records to configure email providers and other services
* **Instant publishing**: Your app becomes accessible at your custom domain immediately after purchase
* **Automatic renewals**: Domains renew automatically so your apps stay published without interruption
## Usage
### Purchasing domains
1. Publish your app and navigate to the 
You can perform the following actions from the **Overview** tab:
* **Republish**: Overwrite your current published app with a new snapshot and published app options. You can monitor the status of this published app in this tab.
* **Edit Commands and Secrets**: Modify the public directory, build command, and published app secrets.
* **View publish logs**: Access the logs for your published app.
* **View published app**: Open your published app in a new browser tab.
* **QR code**: Generate a QR code that you can scan with your mobile device to access the published app.
* **Manage**: View or update the published app's settings.
* **See all usage**: View the Usage billing page.
### Logs tab
The **Logs** tab provides real-time logs for your published app. You can filter logs by the following categories:
* **Errors only**: View only error logs
* **Search**: Enter a phrase to search for in the logs
* **Date**: Select a date range
### Resources tab
The **Resources** tab provides a detailed view of your published app's resource usage. It includes the following information:
* **CPU Utilization**: Percentage of CPU usage over time
* **Memory Utilization**: Percentage of memory usage over time
### Analytics tab
view logs icon next to the entry to view log messages.
* **Cancel run**: Select the 
cancel icon next to the entry to stop a run in progress.
* **Start a run**: Select **Run Now** to manually start a run without altering the schedule.
* **Refresh**: Use the 
refresh icon to update the run history.
### Manage tab
The **Manage** tab includes the following published app configuration settings:
* **Resource usage**: View the machine's CPU, RAM, and usage cost for your published app.
* **Domains**: Link a custom domain using the **Link a domain** button.
* **Pause**: Temporarily stop your published app. This action makes your published app inaccessible, but billing continues.
* **Change deployment type**: Switch between different Deployment types. For example, if you initially chose Static Deployment, you can change it to reserved VM Deployments.
* **Shut Down**: Delete your published app and stop its billing cycle. Select **Shut down** to permanently stop your current published app.
## Next steps
* [Mobile app](https://replit.com/mobile/): Publish Replit Apps from your mobile device
* [Publishing](/category/replit-deployments/): Learn more about Replit Deployment types
* [Publishing costs](/billing/deployment-pricing): View the costs for all Deployment types
---
### Private Deployments
Source: [https://docs.replit.com/cloud-services/deployments/private-deployments.md](https://docs.replit.com/cloud-services/deployments/private-deployments.md)
# Private Deployments
> Control access to your published app without any code configuration.
Private published apps add authentication to your Replit Apps without requiring any
code changes. When enabled, Replit restricts access to your app using a Replit login screen.
Only logged in members of your Organization that have access can use the site.
## Features
Private published apps provide the following features:
* **Access Management**: Grant or restrict app access to any users or groups within your Replit Team
* **Zero Code Configuration**: Seamless authentication for your app with no code changes required
## Usage
When publishing your Replit App from a Teams workspace, you can choose between a **Public** or **Private** published app.
The following sections describe how to set up and manage your Private published apps.
5. After setting the publishing options, select **Publish** to confirm the publishing.
## Features
Reserved VM Deployments include the following features:
* **Dedicated resources**: Get consistent app performance on reserved compute resources.
* **Custom domains**: Configure a custom domain or use a `
### Machine configuration
Select the CPU and RAM configuration for the machine that hosts your deployment. You can view the option's cost next to the selected machine size.
### Primary domain
Specify the subdomain part of the hostname for your published app. After you publish, you can access your published app at `https://
## Features
Scheduled deployments include the following features:
* **Automatic scheduling**: Schedule your task, and Replit runs it automatically.
* **Natural language scheduling**: Enter a human-readable description of the schedule, and AI converts it into a cron expression, a computer-readable schedule format.
* **Error alerts**: Receive notifications when your scheduled task fails.
* **Monitoring**: View logs and monitor your scheduled deployment's status.
## Usage
You can access scheduled deployments in the Deployments workspace tool.
The following sections guide you through setting up and managing your scheduled deployments.
### Machine configuration
This field lets you view the machine's CPU, RAM, and usage cost for your scheduled deployment.
### Schedule fields
* **Schedule description**: Enter a natural language description of the schedule, such as "Every Monday and Wednesday at 10 AM" or "March 24th, 2024 at 3 PM."
* **Cron expression**: Optionally, enter a computer-readable string that defines when the task should run.
* **Timezone selection**: Select the timezone for the schedule from the dropdown menu.
When you enter a value in the **Schedule description** or **Cron expression** field, AI translates it automatically to match.
To learn more about cron expressions, see the 
## Features
Static Deployments include the following features:
* **Cost-effective hosting**: Pay only for the amount of data your website serves.
* **HTTP routing options**: Configure response headers, URL rewrites, and redirects.
* **Custom domains**: Configure a custom domain or use a `
### Primary domain
Specify the subdomain part of the hostname for your published app. After you publish, you can access your published app at `https://
**App Storage**.
From the **Search bar**:
1. Select the 
To create additional buckets, open the bucket dropdown menu on the top left of the **App Storage** tab and select **Create new bucket**.
### Access the bucket ID
To view the **Bucket ID** by selecting the **Settings** view from the dropdown at the top of the **App Storage** tab.
The Bucket ID uniquely identifies the bucket, which your code must reference to perform an operation.
If you have multiple buckets, select the correct bucket from the dropdown menu in the top left corner.
The following screenshot shows the Bucket ID for the "FileVault Bucket One" bucket:
### Upload or download objects
To upload an object to the selected bucket:
1. Navigate to the **Objects** view in the **App Storage** tab.
2. Select 
**Upload files**, or 
**Upload folder** to upload all files from a folder.
Then, select one or more files to upload from the file dialog.
Alternatively, drag a file or folder into the area that lists the contents of the bucket.
To download an object from the selected bucket:
1. Navigate to the **Objects** view in the **App Storage** tab.
2. Select the 
download icon to the right of the file to download it.
### Organize objects in folders
To create a folder in the selected bucket:
1. Navigate to the **Objects** view in the **App Storage** tab.
2. Select 
**Create Folder** in the **Objects** view.
3. Enter a name for the folder.
To add objects to a folder in the **Objects** view, drag an object to the destination folder.
To move the object to a parent folder, drag it above the header to the name of the folder above the object list.
The following animation shows moving the "product\_demo.mov" file from the "videos" folder to the parent "Objects" folder:
### Delete objects or buckets
To revoke your Replit App's access to a bucket:
1. Navigate to the **Settings** view in the **App Storage** tab.
2. From the bucket dropdown in the top left of the tab, select the bucket name.
3. Select **Remove Bucket from Repl** and confirm removal in the confirmation dialog.
### Programmatic access to App Storage
To access App Storage from your Replit App, use one of the following libraries:
* Replit App Storage SDK, available for JavaScript and Python
* 
## Features
The Replit Database tool provides the following features:
* **Instant setup**: Add a production-ready SQL database with a single click
* **Database tools**: Run queries, manage database schema, and visualize data with the built-in SQL tools
* **Point-in-time restore**: Restore your database to a specific point in time within your specified retention period
* **Usage-based billing**: Pay only for the storage and data transfer you use
* **Environment variables**: Use environment variables in your Replit App to securely access the database
## Usage
**Database**.
From the **Search bar**:
1. Select the 
### Run database commands
The SQL runner is a Workspace tool that lets you run SQL commands on your database and view the results.
**SQL runner**
run button
as shown below:
### Browse and modify data visually
The Replit Database tool includes 
## Key features
Publishing offers the following convenient features:
* **Multiple publishing options**: Select or update a deployment type that meets your needs in a few clicks.
* **Custom domains**: Serve your app from your web domain.
* **Analytics**: Track visitor data and other metrics for your published app.
* **Monitoring tools**: View your published app status and configuration.
* **Access controls**: Control who can see your app with a single click. Available only for **Teams** members.
## How it works
When you publish your Replit App, Replit creates a snapshot of your app's files and dependencies.
This snapshot is then sent to Replit's cloud infrastructure, where it runs as a separate instance of your app.
To update your published app with the latest changes, publish again to create a fresh snapshot.
### File sharing app
Share large files such as images, videos, and documents using App Storage.
Use the Replit App Storage SDK to upload, download, and move files.
## Next steps
* [Database](/cloud-services/storage-and-databases/sql-database/): Learn about the database workspace tool and how to connect your Replit App to a database
* [App Storage](/cloud-services/storage-and-databases/object-storage/): Learn how to use Replit's App Storage solution
---
## Extensions
### auth API
Source: [https://docs.replit.com/extensions/api/auth.md](https://docs.replit.com/extensions/api/auth.md)
# auth API
> Learn how to authenticate users securely in your Replit extensions using the auth API module. Get and verify JWT tokens for user authentication.
# auth API 
If you do not see this button, make sure your Replit App is [configured to be an Extension](/replit-app/configuration/).
## Developer Tools
The Extension Devtools pane makes it easy to edit your Extension's metadata and manage [Tools](/extensions/basics/key-concepts#tool-extension-ui) and [File Handlers](/extensions/basics/key-concepts#file-handler-file-editors-and-icons).
### Extension Metadata
Click the **Edit** button in the top-right corner of your Extension preview to edit it. See [docs on the manifest file](/extensions/api/manifest).
### File Handlers
Click the "+" Icon next to **File Handlers** or click **New File Handler**. You will then be prompted to fill out the necessary information for the file handler. See [Type Definition](/extensions/api/manifest#filehandler).
To preview a file handler in action, click the **Open** button on the right side of an existing file handler.
### Tools
Click the "+" Icon next to **Tools** or click **New Tool**. You will then be prompted to fill out the necessary information for the new tool. See [Type Definition](/extensions/api/manifest#tool).
To preview a tool in action, click the **Open** button on the right side of an existing tool.
---
### Full-Stack
Source: [https://docs.replit.com/extensions/development/full-stack.md](https://docs.replit.com/extensions/development/full-stack.md)
# Full-Stack
> Learn how to build a full-stack extension by creating a separate backend API server to handle requests from your extension client on Replit.
# Create a full-stack Extension
While full-stack extensions are not supported within a single Replit App (aka a monorepo) at this time, you can always call out from your Extension client Replit App to any outside API endpoints.
Until we have full Deployments support, you can use this simple workaround to create your own server API for your extension:
1. [Create your Extension Client Replit App →](https://replit.com/new/extension)
2. [Create a separate Replit App](https://replit.com/new) for your backend. This should expose an API. For example it could be a [Node](https://replit.com/new/nodejs) or [Ruby](https://replit.com/new/ruby) API server, or even a [Next.js](https://replit.com/new?template=482b2b7d-6b3e-4b9d-863c-d51c1d5cf6f0) site with a serverless function.
3. Make fetch requests from your extension client to your backend\
* "Scripts": This command displays scripts in your package.json file. Selecting the script opens a new shell and invokes that command.
* "Uninstall": This returns all your installed packages. Selecting a package uninstalls it
## Setting up your extension replit app
The first thing you want to do is fork an extension template. We recommend using the [React Extension Template](https://replit.com/@replit/React-Extension?v=1). although we are not going to write any react code in this tutorial.
Add a background script to your extension. You can scaffold a background script by typing in `replkit add background` in the shell. This creates a new folder `src/background`. The `src/background/main.tsx` file here is where we'll be writing our code.
## Adding a root command
Let's add a simple root command to the command bar to contain our subcommands.
```typescript theme={null}
async function main() {
await replit.commands.add({
id: "js-commands",
contributions: [replit.ContributionType.CommandBar],
command: {
label: "JS",
description: "JavaScript Commands",
icon: "js.png",
commands: async () => {
// This is where subcomands go:
return [];
},
},
});
}
main();
```
This adds an empty 'context' command, AKA a command that contains other sub-commands. This is what it looks like:
## Building "Uninstall"
Let's start with Uninstall. This command first figures out what packages you have installed, and then runs `npm uninstall ${package}`
The simplest way to figure out what you have installed is by parsing `package.json`, and looking at the dependencies object. Since this tutorial is focused on commands, here's the code that reads `package.json` and returns an array of installed packages:
```typescript theme={null}
async function getPackageJson() {
// This uses replit's filesystem API to read the package.json file. The command returns an object containing `content` as a string, or an `error` field if something went wrong
const res = await replit.fs.readFile("package.json");
if (res.error) return { error: res.error, result: null };
try {
let packageJsonObject = JSON.parse(res.content);
return { error: null, result: packageJsonObject };
} catch (e) {
return {
error: new Error("Failed to parse package.json: " + e.message),
result: null,
};
}
}
async function getInstalledPackages() {
const packageJsonRes = await getPackageJson();
if (packageJsonRes.error) return packageJsonRes;
// This returns an array of { name, version } objects
const packages = Object.entries(packageJsonRes.result.dependencies).map(([name, version]) => ({
name,
version,
}));
return {
error: null,
result: packages,
}
}
```
Armed with these functions, we can build the uninstall subcommand. The subcommand returns a list of action commands, one per package.
```typescript theme={null}
const uninstallCommand = {
label: "Uninstall",
description: "Uninstall npm packages",
commands: async () => {
const packagesRes = await getInstalledPackages();
if (packagesRes.error) {
return null;
}
return packagesRes.result.map(({ name, version }) => {
return {
label: name,
description: version,
run: async () => {
await replit.exec.exec(`npm uninstall ${name}`);
},
};
});
},
};
```
To add this command to our root command, simply include `uninstallCommand` as one of the commands returned by the root command:
```typescript theme={null}
{
commands: async () => {
// This is where subcomands go:
return [
uninstallCommand,
];
},
}
```
This is what it looks like in our JavaScript command now:
As you can see, the uninstall command lists installed npm packages that you can uninstall
## Building "Scripts"
"Scripts" is very similar to uninstall, except that we need to surface the output from the script. For this, we use an experimental API called execInShell.
Other than that, we can reuse most of the code from "Uninstall"
```typescript theme={null}
async function getScripts() {
const packageJsonRes = await getPackageJson();
if (packageJsonRes.error) return packageJsonRes;
// This returns an array of { name, version } objects
const scripts = Object.entries(packageJsonRes.result.scripts).map(
([name, cmd]) => ({
name,
cmd,
}),
);
return {
error: null,
result: scripts,
};
}
const scriptsCommand = {
label: "Scripts",
description: "Run scripts in your package.json",
commands: async () => {
const scriptsRes = await getScripts();
if (scriptsRes.error) {
return null;
}
return scriptsRes.result.map(({ name, cmd }) => {
return {
label: name,
description: cmd,
run: async () => {
await replit.experimental.execInShell(`npm run ${name}`);
},
};
});
},
};
```
Let's add the scripts command to our root command!
```typescript theme={null}
{
commands: async () => {
// This is where subcomands go:
return [
scriptsCommand,
uninstallCommand,
];
},
}
```
Here's our command!
## Building "Install"
"Install" is somewhat different: we are pulling external data from the npm registry in response to the user typing in a search query. And we only want to explicitly trigger this search when the user has indicated that they want to search for npm packages to install
```typescript theme={null}
async function getNpmPackages(search) {
try {
const res = await fetch(
`https://registry.npmjs.org/-/v1/search?text=${search}`,
);
const json = await res.json();
return { error: null, result: json.objects };
} catch (e) {
return { error: e, result: null };
}
}
const installCommand = {
label: "Install",
description: "Install a package from npm",
commands: async ({ search, active }) => {
// This makes sure we do not perform a search unless someone selects "Install"
if (!active) {
return;
}
const packagesRes = await getNpmPackages();
if (packagesRes.error) {
return null;
}
return packagesRes.result.map((pkg) => {
return {
label: pkg.package.name,
description: pkg.package.description,
run: async () => {
await replit.experimental.execInShell(`npm i ${pkg.package.name}`);
},
};
});
},
};
```
Notice the `search` and `active` parameters?
* `active` is `true` when users have selected the "Install" command (as opposed to the command system merely querying for subcommands in advance). We can check for it to make sure that we only query npm when we know that a user is interested in installing an extension.
* `search` returns what the user has typed into the command bar, which we use for searching the npm registry
This means that extensions can decide which scripts are directly accessible from the root CommandBar. For example, the scripts extension can let users search and trigger scripts immediately after opening the CommandBar:
We are ready to add "Install" to the root command! This is what our root command object looks like now:
```typescript theme={null}
await replit.commands.add({
id: "js-commands",
contributions: [replit.ContributionType.CommandBar],
command: {
label: "JS",
description: "JavaScript Commands",
commands: async () => {
// This is where subcomands go:
return [
installCommand,
scriptsCommand,
uninstallCommand,
];
},
},
});
```
Open the command bar, type in "Install", select your new command, and give it a try!
## Exercises left to the reader
We built a basic version of the JavaScript commands extension. This could be improved quite a bit:
* Did you notice that we only use `npm` in all the examples? JavaScript ecosystem has a plethora of package managers, including yarn, pnpm, and bun. How can we support all of them? And can we do it "magically" where someone using this extension doesn't have to manually select their package manager in our command? (Hint: it involves the lockfiles)
* We can probably cache the npm registry fetch call, so when you backspace through any letters, the results for that search query appear instantly.
* We can debounce npm search requests to prevent hitting npmjs.com excessively while you're typing out the package you're looking for.
* What happens if someone uses this command in a replit app that isn't a JavaScript project? We can probably check for the presence of `package.json` before showing the command. And maybe, if someone doesn't have a `package.json` yet, we can instead show a command to `npm init` their project!
If you just want to look at the solution, see the JavaScript commands extension on the store:
* Here's the link to the [extension](https://replit.com/extension/@ArnavBansal/adccbcd2-c9d6-4778-b0cb-20e1bf289634)
* Here's a link to the extension's [source replit app](https://replit.com/@ArnavBansal/js-commands-extension?v=1)
---
### JSON Editor
Source: [https://docs.replit.com/extensions/examples/json-editor.md](https://docs.replit.com/extensions/examples/json-editor.md)
# JSON Editor
> Build a custom JSON editor extension for Replit using React and react-json-view to enable structured editing and code folding of JSON files.
# Create a JSON editor
In this tutorial, we will create a JSON editor Extension with React and the [react-json-view](https://www.npmjs.com/package/react-json-view) package. Our application will display a JSON file's content and allow users to edit, add or delete properties directly from the editor. When a user finishes editing the JSON, the file will automatically update with the changes.
## Prerequisites
This tutorial assumes that you have a basic knowledge and understanding of web development and React.
## Set up your Replit App
1. Fork the [Replit React Extension Template](https://replit.com/@replit/React-Extension?v=1).
2. Install the `react-json-view` package with `npm install --force react-json-view`. The package uses React 17 as a peer dependency but works fine with React 18 as well.
## Configure the manifest file
Configure the title and description in `public/extension.json` (the Extension [manifest file](../api/manifest)).
```json theme={null}
{
"name": "JSON Editor",
"description": "A viewer/editor for JSON files, providing code folding and structured editing",
"tags": ["editor"]
}
```
Add the `fileHandlers` property to `extension.json` and provide a handler for JSON files. This tells Replit that your extension handles a particular file pattern using a page provided by your extension at the `handler` path. In this case, the handler is `/`, meaning that Replit shows the page at the root as the handler for all `.json` files
```json theme={null}
"fileHandlers": [
{
"glob": "*.json",
"handler": "/"
}
],
```
## Build the JSON editor
Import the following dependencies in `src/App.jsx`.
```js theme={null}
import * as React from "react";
import ReactJson from "react-json-view";
import "./App.css";
import {
useReplit,
useReplitEffect,
useWatchTextFile,
} from "@replit/extensions-react";
```
Remove all the existing code from the `App` function and a state variable `path`, which will point to the JSON file your Extension will render.
```js theme={null}
function App() {
const [path, setPath] = React.useState(null);
return {error.toString()}
Select the **Create with Replit Agent** tab as shown in the following image:
2. Paste the image into Agent text area.
3. Enter the following prompt in the text area:
Leave the additional options unchecked and select **Approve plan & start**.
Since the prompt only includes information about the landing page, Agent might omit content creation for the links on the page.
The next step demonstrates how to use Assistant to add those pages.
Enter the following prompt in the text area and submit it:
If both `path` and `content` are valid strings, render the editor. If not, tell the user to select a file.
```js theme={null}
else if (status === "ready") {
return 
### Style your Extension
Right now, the Extension has barely any styles applied to it. To make it look more polished, paste the following into `App.css`:
```css theme={null}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
display: flex;
font-family: sans-serif;
background: black;
color: white;
}
#root,
main {
flex-grow: 1;
display: flex;
width: 100%;
}
.notice {
flex-grow: 1;
align-self: center;
justify-self: center;
text-align: center;
color: white;
font-size: 24px;
}
```
***
Your Extension is now complete! [Install it](/extensions/development/installation), press the kebab menu on a JSON file in the file tree and then select "Open with JSON Editor" to start editing your JSON files with ease.
[See full solution](https://replit.com/@IroncladDev/JSON-editor-example?v=1).
---
### Snippet Manager
Source: [https://docs.replit.com/extensions/examples/snippet-manager.md](https://docs.replit.com/extensions/examples/snippet-manager.md)
# Snippet Manager
> Learn how to build a snippet manager extension that lets developers store and organize code snippets directly within the Replit workspace.
In this tutorial, we will build a snippet manager extension with React. A snippet manager is a tool used for storing and organizing commonly used pieces of code or text that can be quickly accessed.
## Prerequisites
This tutorial assumes that you have a basic knowledge and understanding of web development and React.
## Set up your Replit App
1. Fork the [Replit React Extension Template](https://replit.com/@replit/React-Extension?v=1).
2. Install the `react-feather` package with `npm install react-feather`.
## Configure the manifest file
Configure the title and description in `public/extension.json` (the Extension [manifest file](../api/manifest)).
```json theme={null}
{
"name": "Snippet Manager",
"description": "Easily access snippets of code directly within the Replit workspace",
"version": "0",
"tags": ["snippet", "manager", "tool"]
}
```
Add the `tools` property to `extension.json` and provide a tool that handles the `/` route of your application. This will allow your extension to appear as a tool in the sidebar.
```json theme={null}
"tools": [
{
"handler": "/",
"name": "Snippet Manager"
}
]
```
## Build the Snippet Manager
Import the following dependencies in `src/App.jsx`
```js theme={null}
import { useReplit, useReplitEffect } from "@replit/extensions-react";
import { replDb } from "@replit/extensions";
import { useState } from "react";
import "./App.css";
```
Remove all the existing code from the `App` function and add state variables `snippets` and `newSnippetValue`. `snippets` will store all of the snippets you've created and `newSnippetValue` will be a string for when you create a new snippet.
```jsx theme={null}
function App() {
const [snippets, setSnippets] = useState([]);
const [newSnippetValue, setNewSnippetValue] = useState("");
return (