# Overview
Source: https://docs.replit.com/category/replit-deployments

Share your Replit Apps with the world in just a few clicks.

Publishing lets you share your Replit App with the world using a simplified process.

<Note>
  The action of making your app live is called "Publishing." This page describes the different types of deployments available.
</Note>

## What is Publishing?

Publishing is a feature that saves a **snapshot** of your Replit App to the cloud,
where everyone can interact with it. A snapshot captures the current state of the files in your
Replit App.

When you publish your Replit App, you create a **published app**. A published app is a running instance
of your app on Replit's cloud infrastructure. This makes the app reliably available on the internet,
separate from the version in your workspace.

<Info>
  Replit's infrastructure is backed by Google Cloud Platform (GCP). All
  published apps are hosted in the United States. Enterprise customers can
  contact sales to request their published apps to be hosted in the European
  Union instead.

  Every individual, organization, and enterprise customer receives a dedicated,
  single-tenant GCP project for their published apps. This means that published
  apps' compute resources, secrets, and storage are fully isolated and never
  shared with other customers' apps.
</Info>

Publishing includes tools to monitor your published app status and view web analytics.

Replit offers the following deployment types:

<CardGroup>
  <Card title="Autoscale Deployment" href="/cloud-services/deployments/autoscale-deployments" icon="layer-group">
    Automatically adjusts resources based on your app's usage.
  </Card>

  <Card title="Static Deployment" href="/cloud-services/deployments/static-deployments" icon="files">
    Provides an affordable way to host websites that don't change based on user input.
  </Card>

  <Card title="Reserved VM Deployment" href="/cloud-services/deployments/reserved-vm-deployments" icon="server">
    Provides a consistent amount of computing resources for your app to run continuously.
  </Card>

  <Card title="Scheduled Deployment" href="/cloud-services/deployments/scheduled-deployments" icon="clock">
    Runs your app at scheduled times that you choose.
  </Card>
</CardGroup>

## Getting started

Follow the steps below to publish your Replit App:

1. From your Replit App workspace, select <img alt="Publish icon" /> **Publish** at the top.
2. In the **Publishing** tab, select your publishing option.
3. If **Add a payment method** appears, follow the prompts to add a payment method.

Replit automatically selects the best publishing option for your app based on the project type and your needs.

However, to choose a different deployment type, consider the following information.

## Choosing the right publishing option

The following video explains how to choose the right publishing option for your app:

<WistiaEmbed title="Replit Deployments Masterclass" />

Use the following decision tree featured in the video to help you choose:

<Frame>
  <img />
</Frame>

## 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.
* **Badge settings**: Core users can manage the "Made with Replit" badge in Publishing settings. If you published an app while on the Starter plan that include the badge, it may take a couple minutes to update your app to remove the badge after you upgrade.
* **Feedback collection**: Enable feedback on your published app to gather insights from your users.

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

<Warning>
  Avoid saving and relying on data written to a published app's filesystem. To
  store data, use a storage or database option such as Replit's [Storage and
  Database](/category/storage-and-databases) offerings.
</Warning>

## Use cases

The following examples show different types of published apps.

### Autoscale deployment: Typing speed assessment app

Let the cloud scale up resources when users take typing tests and reduce them when not in use.

### Static deployment: Solar system simulation

Learn about the planets in a solar system visualization app on the web.
This visualization renders in the browser and doesn't transfer any user input to a server.

### Reserved VM deployment: Discord bot

Run a Discord bot that helps you moderate and onboard members.
It's always online to chat with users and respond to commands with predictable pricing and performance.

### Scheduled deployment: Home automation triggers

Schedule API calls to start and stop your smart home devices at specific times and days.

## Next steps

To learn more about Replit Publishing, see the following resources:

* [Autoscale Deployment](/cloud-services/deployments/autoscale-deployments/): Learn how to set up applications that scale with traffic
* [Static Deployment](/cloud-services/deployments/static-deployments/): Discover how to publish static websites quickly and efficiently
* [Reserved VM Deployment](/cloud-services/deployments/reserved-vm-deployments/): Explore dedicated VM options for specialized use cases
* [Scheduled Deployment](/cloud-services/deployments/scheduled-deployments/): Set up recurring tasks with simple scheduling
* [Custom Domains](/cloud-services/deployments/custom-domains/): Connect your published app to a custom domain


# Storage and Databases
Source: https://docs.replit.com/category/storage-and-databases

Learn about file storage and database options on Replit.

Using Replit's flexible storage solutions, you can quickly add the perfect
data storage your app needs to run. You can use Replit's database or object storage
for apps with the following requirements, and Agent can automatically set up and integrate both solutions:

* A game that needs to save player information such as progress or high scores
* A content platform that manages media files

## What are Replit's storage and database options

Replit offers the following data storage options:

* **Database**: stores structured data such as user profiles, game scores, and product catalogs.
  You can store or retrieve data by attributes and relationships between data points.

* **App Storage**: stores unstructured data such as images, videos, documents.
  You can store and retrieve large files and binary data.

### App Storage and database comparison

|                       | Database                                | App Storage                             |
| --------------------- | :-------------------------------------- | :-------------------------------------- |
| **Ideal data format** | Structured data with relationships      | Large files (images, videos, documents) |
| **Data model**        | Tables, rows, columns                   | Buckets, files                          |
| **Query language**    | SQL                                     | REST API                                |
| **Clients**           | PostgresSQL-compatible clients and ORMs | Replit SDKs and GCS client libraries    |
| **Billing model**     | Pay for compute time and storage space  | Pay for bandwidth and storage space     |

### Workspace tools

Learn more about the following Replit tools to set up and manage your app's data storage:

<CardGroup>
  <Card title="Database" href="/cloud-services/storage-and-databases/sql-database/" icon="database">
    Ideal for structured data and representing data relationships.
    Backed by a fully-managed PostgresSQL database that scales with your app.
  </Card>

  <Card title="App Storage" href="/cloud-services/storage-and-databases/object-storage/" icon="bucket">
    Ideal for unstructured data and large files, such as images, videos, and documents.
    Backed by Google Cloud Storage (GCS) for high availability and scalability. Agent can automatically set up App Storage with advanced authentication and access controls.
  </Card>
</CardGroup>

## Getting started

The quickest way to get started with Replit's storage solutions is to follow one of the tutorials below:

<CardGroup>
  <Card title="Database" href="/getting-started/quickstarts/database-connection/" icon="database">
    Connect your app to a SQL database
  </Card>

  <Card title="App Storage in Python" href="/getting-started/quickstarts/object-storage-python/" icon="python">
    Manage App Storage using the Replit Python SDK
  </Card>

  <Card title="App Storage in JavaScript" href="/getting-started/quickstarts/object-storage-javascript/" icon="js">
    Manage App Storage using the Replit JavaScript SDK
  </Card>
</CardGroup>

## Use cases

The following examples show how the database and object storage tools can support your Replit Apps.

### E-commerce app

Store product information, customer profiles, and order history in the database.
Use SQL queries to filter products by category, search for items, and manage customer orders.

<Frame>
  <img alt="screenshot of an E-commerce app" />
</Frame>

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

<Frame>
  <img alt="screenshot of a file sharing app" />
</Frame>

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


# Autoscale Deployments
Source: https://docs.replit.com/cloud-services/deployments/autoscale-deployments

Learn how Autoscale Deployments automatically adjust capacity based on your app's traffic.

Autoscale Deployments run on cloud computing resources that scale up and down to efficiently handle the
network traffic and workload of your Replit App. When your app is busy, autoscaling adds servers to
manage the load. When your app is idle, it reduces the number to as low as zero to save you money.

Autoscale Deployments are ideal for the following use cases:

* Web applications that handle variable workloads and traffic such as ecommerce sites
* APIs and services

<Frame>
  <img alt="Autoscale Deployment" />
</Frame>

## 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 `<app-name>.replit.app` URL to access your app.
* **Configurable limits**: Set the maximum number of instances your published app can scale to.
* **Flexible machine power**: Choose the CPU and RAM configuration that meets your app's needs.
* **Monitoring**: View logs and monitor your published app's status.

## Usage

You can access Autoscale Deployment in the Publishing workspace tool.

<Accordion title="How to access Autoscale Deployment">
  From the left **Tool dock**:

  1. Select <img alt="All tools icon" /> **All tools** to see a list of workspace tools.
  2. Select <img alt="Publishing icon" /> **Publishing**.
  3. Select the **Autoscale** option and then select **Set up your published app**.

  From the **Search bar**:

  1. Select the <img alt="magnifying glass icon" /> magnifying glass at the top to open the search tool
  2. Type "Publishing" to locate the tool and select it from the results.
  3. Select the **Autoscale** option and then select **Set up your published app**.
</Accordion>

<Frame>
  <img alt="Autoscale publishing options" />
</Frame>

## 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).

<Frame>
  <img alt="screenshot of the machine power configuration" />
</Frame>

## 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`

<Frame>
  <img alt="screenshot of the max number of machines configuration" />
</Frame>

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

Learn how to connect your own domain name to your published Replit app.

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 `<your-live-app-subdomain-name>.replit.app`, using
a custom domain lets you create a more memorable address.

A custom domain name can help brand recognition and trust with your app's users.

Watch the following video for a quick overview of setting up Custom Domains:

<Frame>
  <iframe title="Custom Domains with Publishing" />
</Frame>

## Features

Custom Domains are available for the following Deployment types:

* [Autoscale](/cloud-services/deployments/autoscale-deployments/)
* [Reserved VM](/cloud-services/deployments/reserved-vm-deployments/)
* [Static](/cloud-services/deployments/static-deployments/)

The following table compares Replit's subdomains with custom domains:

| Feature                         | Replit Subdomain   | Custom Domain            |
| :------------------------------ | :----------------- | :----------------------- |
| Hostname customization          | Subdomain only     | Any domain that you own  |
| DNS update time                 | Instant            | Up to 48 hours           |
| Security Certificates (TLS/SSL) | Provided by Replit | Provided by Replit       |
| Price                           | Free               | Pay your domain provider |

## Usage

<Accordion title="How to access Custom Domains">
  1. After publishing your app, navigate to the <img /> **Deployments** tab.
  2. Select the <img /> **Settings** tab.
  3. Select **Link a domain** or **Manually connect from another registrar** as shown in the following screenshot.

  <Frame>
    <img alt="Settings tab" />
  </Frame>
</Accordion>

Follow the steps below to set up your custom domain:

<Warning>
  You might experience setup issues if you have one of the following: - Multiple
  `A` records for the same domain name that point to different servers. - `A`
  and `AAAA` records co-exist for the same domain since Replit only supports `A`
  records. - Cloudflare proxied domain records since Replit cannot automatically
  renew security certificates for that type.
</Warning>

<Steps>
  <Step title="Add your custom domain">
    Enter your custom domain name in the text field. You can use a registered domain or include a subdomain.

    For example, `hat-tip.cc` is the registered domain and `my.hat-tip.cc` includes subdomain `my`.

    <Frame>
      <img alt="screenshot of the DNS settings" />
    </Frame>
  </Step>

  <Step title="Add the DNS records to your domain registrar">
    Replit generates DNS records that you must provide to your **domain registrar**.
    A domain registrar is the service that manages your domain name, such as GoDaddy or Namecheap.

    Copy the `A` and `TXT` record values from Replit and paste them into your domain registrar's
    DNS management section. If your domain registrar does not support `@` as a hostname, use your registered domain name.
  </Step>

  <Step title="Optional: Add a subdomain">
    To add a subdomain to your published app, add a new `A` record with the same IP address
    in your provider's DNS management section.
    For example, if you want to add `my-subdomain.hat-tip.cc`, you must:

    * Copy the `A` and `TXT` record values from Replit to your registrar
    * Add a new `A` record with a hostname value of `my-subdomain` using the same IP address as your primary domain
  </Step>

  <Step title="Wait for DNS propagation to complete">
    After adding the records, you must wait for them to propagate online.
    This can take between a few minutes and 48 hours.

    When the propagation completes, your Domains tab should show the "Verified" status next to the domain name as shown below:

    <Frame>
      <img alt="screenshot of the verified domain status" />
    </Frame>

    Load the domain in your browser to verify that it works.
  </Step>
</Steps>


# Domain Purchasing
Source: https://docs.replit.com/cloud-services/deployments/domain-purchasing

Learn how to purchase a domain and connect it to your published app directly from Replit.

Turn your apps into live, professional websites with custom domain names.

Domain Purchasing lets you search, buy, and connect domains for your Replit published apps—all from within the platform. Go from published app to professional web presence in minutes.

That means you can buy a site, like `my-app.com`, and have it automatically point to your app.

<Frame>
  <img alt="Domain search interface showing available domains with extensions like .com and .ai" />
</Frame>

<Note>
  Domain Purchasing is available as an early beta feature. We're eager to hear
  your feedback on how we can improve the experience!
</Note>

## Features

Domain Purchasing streamlines the process of giving your apps professional web addresses. Instead of juggling multiple services, you can complete your entire web presence setup within Replit.

<Frame>
  <img alt="Domain management interface showing purchased domains and their connection status" />
</Frame>

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 <img alt="Publish icon" /> **Publishing** tab
2. Select the **Domains** tab
3. Choose **Buy a domain** to start the search process
4. Enter your desired domain name in the search bar
5. Review available options across different extensions
6. Select your preferred domain and complete the purchase

When you purchase a domain, it automatically configures to point to your Replit app. Your app becomes accessible at the custom domain instantly, with no additional setup required.

You will be billed for the domain purchase through your Replit account, deducted from your account balance then applied to your usage.

### Managing purchased domains

Your domains integrate seamlessly with your published apps:

* **Automatic renewals**: Domains renew automatically to keep your apps published
* **Integrated billing**: Domain costs appear on your Replit billing alongside other services
* **Transfer support**: Move domains between Replit accounts or to external registrars when needed

### Custom DNS records

For domains purchased through Replit, you can add custom DNS records to configure additional services like email providers. The following DNS record types are supported:

* **A records**: Point your domain or subdomain to a specific IP address
* **TXT records**: Add text-based verification records for services like email authentication (SPF, DKIM, DMARC)
* **MX records**: MX (Mail Exchange) records tell email servers where to deliver email for your domain. Setting up MX records allows you to use your custom domain for email addresses like `hello@yourdomain.com`.

To manage DNS records for your purchased domain:

1. Navigate to the **Domains** tab in your Publishing <img alt="Publish icon" />
2. Find the domain you want to configure
3. Select the **Edit** <img alt="pencil icon" /> icon
4. Choose **Add DNS Record**
5. Enter the record type, name, value, and TTL as required by your service provider

This short video walks through finding the management page for your domain DNS records:

<Frame>
  <video />
</Frame>

<Note>
  DNS changes can take up to 48 hours to propagate globally. Your app will
  continue to work normally during this propagation period.
</Note>

### Supported deployment types

Domain Purchasing works with these Deployment types:

* **[Autoscale Deployments](/cloud-services/deployments/autoscale-deployments/)**
* **[Reserved VM Deployments](/cloud-services/deployments/reserved-vm-deployments/)**
* **[Static Deployments](/cloud-services/deployments/static-deployments/)**

Currently, you can purchase domains for your personal account published apps. Domain purchasing for Replit Teams is coming soon.

## FAQ

<AccordionGroup>
  <Accordion title="How much does it cost?">
    Domain purchasing includes two costs:

    * **Registration fee**: The initial cost for one year of domain ownership (two years for `.ai` domains)
    * **Renewal price**: Automatically charged after the initial registration period

    Replit doesn't charge additional fees for domain purchases. Domain registration fees are non-refundable.
  </Accordion>

  <Accordion title="How do I renew my domain?">
    Replit automatically renews your domain to keep your app accessible. If you
    prefer not to renew, contact Replit Support during the beta period.
  </Accordion>

  <Accordion title="What if I want to leave Replit?">
    You can transfer your domain to another registrar by contacting Replit
    Support. ICANN rules require a 60-day waiting period after purchase before
    domains can be transferred to external registrars.
  </Accordion>

  <Accordion title="Can I transfer domains between Replit accounts?">
    Yes, contact Replit Support to transfer domains between Replit accounts. This
    process doesn't require the 60-day waiting period.
  </Accordion>

  <Accordion title="Can I buy domains for my organization?">
    Domain Purchasing for Replit Pro and Enterprise plans is coming after the
    initial beta period.
  </Accordion>

  <Accordion title="Can I add custom DNS records to my domain?">
    Yes! You can add custom DNS records to domains purchased through Replit. Currently supported record types include:

    * **A records**: Point your domain or subdomain to specific IP addresses
    * **TXT records**: Add text-based verification records for email authentication and other services
    * **MX records**: Configure mail servers to handle email for your domain

    Navigate to the Domains tab in your Publishing to configure these records. For detailed instructions on setting up MX records for email, see the [Custom DNS records](#custom-dns-records) section above.
  </Accordion>

  <Accordion title="What domain extensions are supported?">
    We support all common top-level domains (TLDs). We cannot support TLDs with
    special geographic or other restrictions.
  </Accordion>

  <Accordion title="What is WHOIS privacy protection?">
    When you register a domain, your contact information (name, address, phone number, and email) is normally published in a public database called WHOIS that anyone can search. WHOIS privacy protection replaces your personal details with generic information from the registrar, keeping your information private while still meeting legal requirements.

    All domains purchased through Replit include WHOIS privacy protection by default at no extra cost. This means your personal information stays hidden from spammers, marketers, and anyone else who might search for domain owner details.
  </Accordion>

  <Accordion title="What if I already have a domain?">
    To connect an existing domain to your Replit app, see our [Custom Domains](/cloud-services/deployments/custom-domains/) documentation.
  </Accordion>
</AccordionGroup>


# Enable Feedback Widget
Source: https://docs.replit.com/cloud-services/deployments/enable-feedback

Learn how to collect feedback from visitors on your published app.

Feedback collection can be activated on your published apps to gather insights directly from visitors and send directly to Agent. When feedback is enabled, visitors can submit feedback, including screenshots and files, which you can manage through your Inbox.

## Enabling feedback

<Warning>
  You can enable feedback on web apps only. You won't be able to enable this for other kinds of apps, like automations or mobile apps.
</Warning>

When publishing a new app, toggle on the **Enable Feedback** setting in the publish dialog. If your app has already been published, you can enable feedback by republishing:

1. Open the Publishing tool
2. Select **Advanced Settings**
3. Toggle on **Enable Feedback**
4. Republish your app

<Frame>
  <img alt="Enable Feedback toggle in publish dialog" />
</Frame>

<Warning>
  If you don't see the feedback widget in your published app, try refreshing the page
</Warning>

## Submitting feedback

When feedback is enabled on a published app, visitors can submit feedback directly from the app. Users can:

* Sign in to leave feedback
* Leave text feedback describing their experience or suggestions
* Select elements to illustrate issues or features
* Upload files to provide additional context

<Frame>
  <img alt="End-user feedback form with text input, screenshot upload, and file upload options" />
</Frame>

## Managing feedback in your Inbox

All feedback submitted by visitors appears in your Inbox, accessible from inside your workspace. From the Inbox, you can:

* **Add to Chat**: Send feedback to your chat with Agent, to add context before submitting
* **Send to Agent**: Immediately send feedback to Agent and start work right away
* **Resolve**: Mark feedback as resolved once it has been addressed
* **Delete**: Remove feedback that's no longer needed

You can also use filters to organize and find specific feedback entries.

<Frame>
  <img alt="Inbox interface showing feedback with actions and filters" />
</Frame>

## Republishing with updated feedback settings

After your app is published, you can enable or disable the feedback widget at any time by republishing with updated settings:

1. Open the **Overview** tab on the Publishing tool
2. Select **Advanced Settings**
3. Toggle **Enable Feedback** on or off
4. Republish your app to apply the changes

Any changes to the feedback setting take effect once the app is republished.

## Next steps

To learn more about publishing your apps, see the following resources:

* [Publishing overview](/category/replit-deployments): Learn about different deployment types
* [Published App Monitoring](/cloud-services/deployments/monitoring-a-deployment): View logs and monitor your published app


# Published App Monitoring
Source: https://docs.replit.com/cloud-services/deployments/monitoring-a-deployment

Learn how to monitor your published app's performance and activity in real time.

Published app monitoring lets you track performance metrics, modify settings, and ensure your published apps run optimally.

## Features

* **Real-time tracking**: View published app status, analytics, and configuration details
* **Performance analytics**: Monitor page views, response times, and user engagement metrics
* **Configuration management**: Update commands, secrets, and published app options with just a few clicks

## Usage

You can access monitoring tools in the Publishing tab.

<Accordion title="How to access Publishing">
  From the left **Tool dock**:

  1. Select <img alt="All tools icon" /> **All tools** to see a list of workspace tools.
  2. Select Publishing <img alt="Publishing icon" /> **Publishing**.
  3. Select **Overview** at the top.

  From the **Search bar**:

  1. Select the <img alt="magnifying glass icon" /> magnifying glass at the top to open the search tool
  2. Type "Publishing" to locate the tool and select it from the results.
  3. Select **Overview** at the top.
</Accordion>

### Overview tab

The **Overview** tab lets you keep track of your published app's status and configuration. It provides the following details:

* **Status**: Status of the Replit published app, providing insights into the various stages of the process.
* **Domain**: URL where you can access your Replit App
* **Deployment Type**: Autoscale, Reserved VM, Static, or Scheduled

<Frame>
  <img alt="Published App Overview tab" />
</Frame>

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. Replit retains logs for 7 days.

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

<Frame>
  <img alt="Published App Logs tab" />
</Frame>

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

<Frame>
  <img alt="Published App Resources tab" />
</Frame>

### Analytics tab

<Note>
  Analytics are available for Autoscale, Static, and Reserved VM Deployments.
</Note>

The **Analytics** tab shows statistics regarding visits to web pages in your published app.
You can customize the time period using the date selector at the top.
The analytics metrics include the following:

* **Page Views**: Number of HTTP requests your Replit App receives per hour
* **Top URLs**: Most frequently visited URL paths
* **Top Referrers**: Traffic sources directing users to your website
* **HTTP Statuses**: HTTP response codes served by your Replit App
* **Request Durations**: Server-side load times
* **Top Browsers**: Browser usage among your users
* **Top Devices**: Operating systems and devices used to access your Replit App
* **Top Countries**: Geographic distribution of your users

### Schedule tab

<Note>Schedules are available only for Scheduled Deployments.</Note>

The **Schedule** tab lets you view the published app's run history, and includes the following information:

* Time since the last run
* Date and time the run started
* Amount of time the run took
* Run status

You can perform the following actions in the **Schedule** tab:

* **View logs**: Select the <img alt="menu icon" /> view logs icon next to the entry to view log messages.
* **Cancel run**: Select the <img alt="cancel icon" /> 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 <img alt="refresh icon" /> 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

Learn how to restrict access to your published app without writing any code.

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.

<Note>
  Private Deployments are available only to Teams subscribers. Your Replit App
  must be in a Team workspace to use Private Deployments.
</Note>

Restricted app access is useful for project types including the following:

* Internal tools
* Apps in the beta testing phase
* Apps that access sensitive information

<Frame>
  <img alt="screenshot of a Private Deployment login page" />
</Frame>

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

<Info>
  Scheduled Jobs omit this option because they do not listen for incoming
  traffic.
</Info>

<Accordion title="Create a Private Published App">
  1. Select the user menu at the top left of the Home screen to view your workspaces.
  2. Verify or select the Team workspace in which to publish your Replit App.
  3. Open the Replit App you want to publish.
  4. Toggle the **Private Deployment** option to the "on" position as shown below:
     <img alt="Private Deployment toggle in the on position" />
  5. After setting the publishing options, select **Publish** to confirm the publishing.
</Accordion>

<Accordion title="View your Private Published Apps">
  1. Select the user menu at the top left of the Home screen to view your workspaces.
  2. Verify or select the Team workspace in which to publish your Replit App.
  3. From the Home screen, select <img alt="Deployments icon" /> **Deployments** from the left dock.
     You should see a list of the Team's published apps similar to the screenshot below:

     <img alt="List of Private Deployments" />
</Accordion>

<Accordion title="Edit existing published app visibility">
  1. Select the published app and open the Deployment tool.
  2. In the Deployment tab, select **Edit commands and secrets**, toggle the setting on or off.
  3. Select **Publish** to confirm the publishing.
</Accordion>

## Next steps

To learn more about Private published apps, see the following resources:

* [Replit App Access Management](/teams/identity-and-access-management/repl-access-management): Manage access to your Private published app
* [Billing for Teams](/billing/teams-billing/overview): View pricing for Replit Teams


# Publishing Geography
Source: https://docs.replit.com/cloud-services/deployments/publishing-geography

Choose where your published project runs and stores data by selecting a publishing geography.

When you publish a Replit project, you can choose the geographic region where your project's compute and storage resources are hosted. By default, Replit recommends the geography closest to you. This is useful for reducing latency for your end users and meeting data residency requirements.

<Note>
  Publishing geography selection is available to builders on Core, Pro, and Enterprise plans.
  Free plan builders publish to the North America geography by default.
</Note>

## Available geographies

Replit currently supports the following publishing geographies:

| Geography         | Description                              |
| :---------------- | :--------------------------------------- |
| **North America** | Hosts your project in North America      |
| **Europe**        | Hosts your project in the European Union |
| **South America** | Hosts your project in South America      |
| **Australia**     | Hosts your project in Australia          |
| **Asia**          | Hosts your project in Asia               |

When you select a geography, all published artifacts for your project (such as compute, database, and Object Storage) are automatically colocated in the same region.

## Selecting a geography

By default, Replit recommends the geography closest to you. To choose a different geography:

<Steps>
  <Step>
    Open the **Publishing** tool in your Replit project.
  </Step>

  <Step>
    Expand the **Advanced** settings.
  </Step>

  <Step>
    Select your preferred geography from the **Geography** dropdown.
  </Step>

  <Step>
    Select **Publish** to publish your project to the selected geography.
  </Step>
</Steps>

## Enforcing a geography on published projects

Enterprise admins can enforce a publishing geography for all projects across their organization. When a policy is set, builders in the organization publish to the configured geography. This policy applies only to projects that have not yet been published — projects already published to a different geography are not affected.

<Note>
  Enforcing a publishing geography is an Enterprise feature. To learn more about Enterprise plans, see [Pricing](https://replit.com/pricing/).
</Note>

<Steps>
  <Step>
    Navigate to your **Account settings**.
  </Step>

  <Step>
    Select **Advanced**.
  </Step>

  <Step>
    Choose the geography that all projects published for the first time must use.
  </Step>
</Steps>

## Limitations

Before selecting a geography, keep the following limitations in mind:

* **Geography cannot be changed after publishing.** Once you publish your project to a geography, that selection is permanent. You cannot migrate a published project to a different geography.
* **Development environment artifacts may not match your published geography.** Resources such as Object Storage can be created before you publish. All development environments currently run in North America. Support for hosting your development environment in the nearest publishing region is coming soon.

## Next steps

* [Autoscale Deployments](/cloud-services/deployments/autoscale-deployments/): Learn how autoscaling adjusts capacity based on traffic.
* [Reserved VM Deployments](/cloud-services/deployments/reserved-vm-deployments/): Publish your project to a dedicated virtual machine.
* [Published App Monitoring](/cloud-services/deployments/monitoring-a-deployment/): View logs and monitor your published project.

To learn more about how Replit handles data processing, see the [Data Processing Addendum](https://replit.com/dpa).


# Reserved VM Deployments
Source: https://docs.replit.com/cloud-services/deployments/reserved-vm-deployments

Learn how to publish your app to an always-on cloud server with Reserved VM Deployments.

A Reserved VM deployment runs on a virtual machine (VM) which provides dedicated computing resources for
your app. This deployment type offers predictable costs and performance without interruptions.

They are ideal for the following use cases:

* Memory-intensive background tasks
* Chat app bots that must stay connected
* Always-on API servers

<Frame>
  <img alt="Reserved VM Deployments" />
</Frame>

## 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 `<app-name>.replit.app` URL to access your app.
* **Computing resource options**: Choose the VM option that meets your app's performance needs.
* **Configurable port mappings**: Define which ports your app exposes to the internet.
* **Monitoring**: View logs and monitor your published app's status.

## Usage

You can access Reserved VM Deployments in the Deployments workspace tool.

<Accordion title="How to access Reserved VM Deployments">
  From the left **Tool dock**:

  1. Select <img alt="All tools icon" /> **All tools** to see a list of workspace tools.
  2. Select <img alt="Deployments icon" /> **Deployments**.
  3. Select the **Reserved VM** option and then select **Set up your published app**.

  From the **Search bar**:

  1. Select the <img alt="magnifying glass icon" /> magnifying glass at the top to open the search tool
  2. Type "Deployments" to locate the tool and select it from the results.
  3. Select the **Reserved VM** option and then select **Set up your published app**.
</Accordion>

<Frame>
  <img alt="Reserved VM publishing options" />
</Frame>

### 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://<subdomain>.replit.app`.

To learn how to use a custom domain, see [Custom Domains](cloud-services/deployments/custom-domains/).

### Private deployment

<Info>
  The private published app feature is available for Pro and Enterprise plans
  only.
</Info>

Private published apps grant permission to your app only to members of your team or organization.
This control lets you toggle whether to make your published app private.

To learn how to set up a private deployment, see [Private Deployments](/cloud-services/deployments/private-deployments/).

### Build command

Enter the shell command that compiles or sets up your app before running the Run command in the **Build command** field.
For example, to optimize your JavaScript app for a production environment using Vite, you might add the `vite build` command.

### Run command

Enter the shell command that launches your task in the **Run command** field. This command should be similar to the one
you use for your workflow. For example, to start a Flask app called "myApp", you might add the `flask --app myApp run` command.

### Published app secrets

Select **Add published app secret** to add environment variables or secrets your app needs to run securely.

If your Replit App has environment variables or secrets, the Deployment tool adds them to the list automatically.

### App type options

Select one of the following options:

* **Web server**: Select this option if publishing a web app or an app that users can connect to on the internet.
* **Background worker**: Select this option if your app does not listen on a port or start a server.

When you select **Web Server**, you can customize which ports to expose by performing the following actions:

1. Expand the **Port configuration** section.
2. Select **Networking pane to configure** to open the **Networking** tab, where you can manage the port mappings.

For more information on configuring ports, see [Ports](/core-concepts/workspace/app-setup/ports/).

## Next steps

To learn more about publishing, see the following resources:

* [Published App Monitoring](/cloud-services/deployments/monitoring-a-deployment/): Learn how to view logs and monitor your scheduled deployment.
* [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.


# Scheduled Deployments
Source: https://docs.replit.com/cloud-services/deployments/scheduled-deployments

Learn how to run tasks on a schedule with Scheduled Deployments.

Define a command-line operation and a schedule, and Replit runs it automatically
in your Replit App's environment. After completion, the operation terminates until the
next scheduled run.

Scheduled deployments, also known as scheduled jobs, work best for handling periodic tasks
such as checking status, sending notifications, and starting backups. They are not designed
for continuous or long-running tasks such as web applications.

<Frame>
  <img alt="Scheduled Deployments" />
</Frame>

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

<Accordion title="How to access Scheduled Deployments">
  From the left **Tool dock**:

  1. Select <img alt="All tools icon" /> **All tools** to see a list of workspace tools.
  2. Select <img alt="Deployments icon" /> **Deployments**.
  3. Select the **Scheduled** option and then select **Set up your published app**.

  From the **Search bar**:

  1. Select the <img alt="magnifying glass icon" /> magnifying glass at the top to open the search tool
  2. Type "Deployments" to locate the tool and select it from the results.
  3. Select the **Scheduled** option and then select **Set up your published app**.
</Accordion>

<Frame>
  <img alt="Scheduled Deployment options" />
</Frame>

### 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 <a href="https://en.wikipedia.org/wiki/Cron">cron</a> Wikipedia page.

### Job timeout

Enter the maximum amount of time the job can run before the scheduler terminates it. Select either "minutes" or "hours from the time unit dropdown.

<Tip>
  Scheduled jobs may run slower than in the Replit App workspace. Test the
  deployment and adjust the timeout accordingly.
</Tip>

### Build command

Enter the shell command that compiles or sets up your app before running the Run command in the **Build command** field.
For example, to install your Node.js app dependencies, you might add the `npm install` build command.

The build command time does not count toward your usage and is not counted against the job timeout.

### Run command

Enter the shell command that launches your task in the **Run command** field.
For example, to run a Python script, you might add `python app.py` as the run command.

The Replit scheduler executes the run command at the scheduled times.
The time it takes to run the command counts toward your usage. For more information on usage billing,
see the [Scheduled Deployments section](/billing/deployment-pricing#scheduled-deployments) in our pricing documentation.

### Deployment secrets

Select **Add deployment secret** to add environment variables or secrets your app needs to run securely.

If your Replit App has environment variables or secrets, the Deployment tool adds them to the list automatically.

To edit the values of an environment variable select the

<img alt="three vertical dots icon" /> vertical dots and choose **Edit** from the menu. The Secrets manager only applies
value to the deployment and does not change environment variables defined in your
Replit App.

## Next steps

To learn more about deployments, see the following resources:

* [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.
* [Create a HackerNews Slack bot](https://docs.replit.com/getting-started/quickstarts/webscrape-and-slack-notifications): Learn how to create a Slack bot that checks a website for new content and sends you notifications on a schedule.


# Static Deployments
Source: https://docs.replit.com/cloud-services/deployments/static-deployments

Learn how to publish static websites and frontend apps with Static Deployments.

Static Deployments host your Replit App's static files, such as HTML, CSS, and JavaScript
on a cloud server. The server automatically uses caching and scaling strategies to deliver
your content quickly and economically.

Static Deployments are ideal for the following use cases:

* Marketing landing pages
* Portfolio websites
* Product and API documentation sites

<Note>
  Static Deployments are not compatible with Replit Apps created using Agent.
  Agent automatically creates full-stack apps that require a backend server. For
  Agent-generated apps, use one of the following deployment types: - [Autoscale
  Deployment](/cloud-services/deployments/autoscale-deployments) - [Reserved VM
  Deployment](/cloud-services/deployments/reserved-vm-deployments)
</Note>

<Frame>
  <img alt="screenshot of the Publishing workspace tool" />
</Frame>

## 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 `<app-name>.replit.app` URL to access your app.
* **Custom error pages**: Create and serve a custom 404 error page.
* **Monitoring**: View logs and monitor your published app's status.

## Usage

You can access Static Deployments in the Deployments workspace tool.

<Accordion title="How to access Static Deployments">
  From the left **Tool dock**:

  1. Select <img alt="All tools icon" /> **All tools** to see a list of workspace tools.
  2. Select <img alt="Deployments icon" /> **Deployments**.
  3. Select the **Static** option and then select **Set up your published app**.

  From the **Search bar**:

  1. Select the <img alt="magnifying glass icon" /> magnifying glass at the top to open the search tool
  2. Type "Deployments" to locate the tool and select it from the results.
  3. Select the **Static** option and then select **Set up your published app**.
</Accordion>

<Frame title="Static Deployment configuration screen in the Deployments tool">
  <img alt="Static Deployment options screen" />
</Frame>

### Primary domain

Specify the subdomain part of the hostname for your published app. After you publish, you can access your published app at `https://<subdomain>.replit.app`.

To learn how to use a custom domain, see [Custom Domains](cloud-services/deployments/custom-domains/).

### Private deployment

<Info>
  The private published app feature is available for Pro and Enterprise plans
  only.
</Info>

Private published apps grant permission to your app only to members of your team or organization.
This control lets you toggle whether to make your published app private.

To learn how to set up a private deployment, see [Private Deployments](/cloud-services/deployments/private-deployments/).

### Public directory

Specify the base directory path in your Replit App that contains the static files you want to serve publicly.
After you deploy, the cloud host serves all pages and assets in that directory.

The default value, `/`, is the root directory of your Replit App.

### Build command

Specify a build command to run in your Replit App's shell when you create your Deployment.

For example, if you generate a static site using <a href="https://gohugo.io/">Hugo</a>,
you might use the command `hugo --minify` to generate the files and optimize asset file sizes.

### Deployment secrets

Select **Add deployment secret** to add environment variables or secrets your build command needs to run securely.

For example, if your site generator requires an API key to create your static site, you might pass it
`API_KEY=<your secret name>`.

## Next steps

* [Static Deployment Configuration](/cloud-services/deployments/static-deployments-advanced): Configure HTTP headers, a custom 404 page, and URL rewrites
* [Published App Monitoring](/cloud-services/deployments/monitoring-a-deployment): 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


# Static Deployment Configuration
Source: https://docs.replit.com/cloud-services/deployments/static-deployments-advanced

Learn how to configure HTTP headers, routing rules, and URL rewrites for static deployments.

This guide covers the following web server-level configurations:

* [Add response headers](#add-response-headers)
* [Create a custom 404 page](#create-a-custom-404-page)
* [Define URL path rewrites](#define-url-path-rewrites)

## Add response headers

Custom **response headers** let you add HTTP header instructions to requests that match specific paths.
A response header is a name-value pair that provides instructions to browsers on how
to interact with the requested content.

For example, you can specify the `Access-Control-Allow-Origin` header to specify which domains the browser can access for that page.
To create this entry, add the following to the `.replit` file in your Replit App's root directory:

```
[[deployment.responseHeaders]]
path = "/*"
name = "Access-Control-Allow-Origin"
value = "origin"
```

This response header includes the following parameters:

* **path**: URL path pattern that matches requested resources
* **name**: HTTP header name
* **value**: Value of the HTTP header

You can add multiple `deployment.responseHeaders` entries to the `.replit` file.

To apply configuration updates, republish your Replit App.

#### Reserved headers

Replit reserves the following HTTP headers and does not allow you to configure them.

```text [expandable] theme={null}
Accept-Ranges
Age
Allow
Alt-Svc
Connection
Content-Encoding
Content-Length
Content-Range
Date
Location
Server
Set-Cookie
Trailer
Transfer-Encoding
Upgrade
```

<Tip>
  To learn more about HTTP headers, see

  <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers">
    HTTP headers
  </a>

  in the MDN web documentation.
</Tip>

## Create a custom 404 page

A custom 404 page displays when users request URL paths that don't match any files or rules in your published app.

To add a custom 404 page, create the page content in a file named `404.html` in the root directory of your Replit App.

When users attempt to access a URL path that doesn't exist, they see the rendered HTML of the custom 404 page.

## Define URL path rewrites

You can define URL rewrites to change the URL path of a request before your Replit App processes it.
The original URL remains visible in the browser, but the server loads the resource defined in the rewrite rule.

For example, you can specify all requests that start with `/app` load the contents of the `/app/index.html` file.
To create this entry, add the following to the `.replit` file in your Replit App's root directory:

```
[[deployment.rewrites]]
from = "/app/*"
to = "/app/index.html"
```

* **from**: URL path pattern that matches requested resources
* **to**: Rewritten path, which corresponds to a file in your Static Deployment.

You can add multiple `deployment.rewrites` entries to the `.replit` file.
The server interprets the entries in the listed order and ignores duplicates.

To apply configuration updates, you must republish your Replit App.

The following sections describe URL rewrite rule constraints.

### Path matching

The following constraints apply to the `from` and `to` parameters in rewrite rules:

* Matches must be exact unless a `*` is present
* A `*` matches the remainder of a path
* A `*` is only valid at the end of the path
* When including `*` in the `from` parameter, you can include it in the `to` parameter to represent the matching section of the path

For example, if your `.replit` file contains the following rewrite:

```
[[deployment.rewrites]]
from = "/v1/*"
to = "/v2/*"
```

When a user visits the path `/v1/about-us.html`, the rewrite serves the file located at `/v2/about-us.html`.

### Shadowing

Shadowing occurs when a rewrite matches a URL path that also matches a file in your Static Deployment.
When this occurs, the cloud server ignores the rewrite and serves the file directly.

For example, suppose your published app contains the following files:

* `index.html`
* `about.html`

The `.replit` file contains the following rewrite:

```
[[deployment.rewrites]]
from = "/*"
to = "/index.html"
```

When a user visits `/register.html`, the server rewrites the request to `/index.html` and serves that file.
However, if a user visits `/about.html`, the server ignores the rewrite and serves the `about.html` file since it exists in your Static Deployment.

### Domain restrictions

Rewrites only work for requests to your Static Deployment's primary domain and can
only redirect to files within your Static Deployment.


# Troubleshoot publishing
Source: https://docs.replit.com/cloud-services/deployments/troubleshooting

Learn how to troubleshoot common issues when publishing your app.

This page covers common issues you may encounter when publishing your app and how to resolve them.

## Common publishing issues

### Your app doesn't work in the Workspace

Before publishing, verify your app runs correctly. Select the **Run** button at the top of the Workspace. If Preview doesn't display your app with a `replit.dev` URL, your code has an issue that needs fixing before you can publish.

### Your program exits instead of running continuously

Published apps expect your program to run indefinitely. If your program executes a function and exits, the platform restarts it automatically. Make sure your application starts a long-running process such as a web server.

### Your server isn't listening on `0.0.0.0`

If you're running a web server, Deployments can automatically detect which port your server uses—but only if the server listens on `0.0.0.0`. Listening on `localhost` or `127.0.0.1` doesn't work.

### Your application has errors

Check the **Logs** tab at the top of the **Deployments** pane to view your application's output. Look for stack traces or exceptions—these indicate code errors such as uninitialized variables or missing packages.

### Your run or build commands are incorrect

Common mistakes include typos, incorrect flags, or specifying the wrong file or directory. Double-check your commands in the **Deployments** pane and correct any issues.

### Your Secrets aren't configured for publishing

Secrets you set in the Workspace don't automatically carry over to your published app. Add all production Secrets and environment variables in the **Deployments** pane. Missing Secrets can cause your app to fail during initialization with errors about undefined values.

### Your Replit App exceeds the size limit

Reserved VM and Autoscale Deployments support Replit Apps up to 8 GB. Static Deployments support up to 1 GB. To reduce your app's size, delete unnecessary files or use an external datastore like [SQL Database](/cloud-services/storage-and-databases/sql-database/).

### Your homepage takes too long to load

Before marking your published app as live, a health check sends an HTTP request to your app. If your homepage takes more than five seconds to respond, the health check times out and publishing fails at the final step.

### Your port configuration is incorrect

If you have [ports specified in your `.replit` config](/core-concepts/workspace/app-setup/configuration), automatic port detection is disabled. You must specify a port with `externalPort` set to `80` for the promotion step to pass. Verify your server listens on the specified `localPort`.

### Your static deployment isn't working

This issue typically occurs when you specify an incorrect public directory or when your app isn't suited for Static Deployments. A Static Deployment serves static files such as HTML, CSS, and JavaScript.

If your app includes any server-side behavior, it isn't a good candidate for Static Deployments. Change the deployment type to Autoscale in the **Deployments** pane instead.

<Warning>
  The file system in published apps is not persistent and resets every time you publish. For data persistence, use a database such as [SQL Database](/cloud-services/storage-and-databases/sql-database).
</Warning>

## Access issues with `replit.app` and `replit.dev` URLs

If you have trouble accessing your app at its `replit.app` or `replit.dev` domain—either in Preview or in a separate browser window—web filters or network restrictions may be the cause.

Try using public DNS resolvers like Google DNS (`8.8.8.8`) or Cloudflare DNS (`1.1.1.1`) to resolve these issues.

### Change DNS settings

<Tabs>
  <Tab title="Windows">
    1. Open the **Control Panel**.
    2. Go to **Network and Sharing Center**.
    3. Select **Change adapter settings** on the left.
    4. Right-click your active network connection and select **Properties**.
    5. Select **Internet Protocol Version 4 (TCP/IPv4)** and select **Properties**.
    6. Choose **Use the following DNS server addresses**.
    7. Enter a public DNS server IP address (for example, `8.8.8.8` for Google DNS or `1.1.1.1` for Cloudflare DNS) in the **Preferred DNS server** and **Alternate DNS server** fields.
    8. Select **OK** to save your changes.

    For more detailed instructions, refer to the [Microsoft DNS configuration guide](https://support.microsoft.com/en-us/windows/change-tcp-ip-settings-bd0a07af-15f5-cd6a-363f-ca2b6f391ace).
  </Tab>

  <Tab title="macOS">
    1. Open **System Preferences**.
    2. Select **Network**.
    3. Select your active network connection on the left.
    4. Select **Advanced** in the lower-right corner.
    5. Go to the **DNS** tab.
    6. Select the **+** button to add a DNS server.
    7. Enter a public DNS server IP address (for example, `8.8.8.8` for Google DNS or `1.1.1.1` for Cloudflare DNS).
    8. Select **OK** and then **Apply**.

    For more detailed instructions, refer to the [Apple DNS configuration guide](https://support.apple.com/guide/mac-help/change-dns-settings-on-mac-mh14127/mac).
  </Tab>

  <Tab title="Linux">
    1. Edit the `/etc/resolv.conf` file to add public DNS servers. The exact method varies by distribution.
    2. Add the following lines:

    ```
    nameserver 8.8.8.8
    nameserver 1.1.1.1
    ```

    For more information on configuring DNS across different distributions, refer to the [Debian Wiki network configuration guide](https://wiki.debian.org/NetworkConfiguration#Defining_the_.28DNS.29_Nameservers).
  </Tab>
</Tabs>

### Clear DNS cache

After changing DNS settings, clear the DNS cache to apply the new configuration:

* **Windows**: Run `ipconfig /flushdns` in Command Prompt
* **macOS and Linux**: Run `sudo systemctl restart NetworkManager` in Terminal (the exact command may vary by distribution)

<Note>
  To enhance regional performance and stability, `replit.dev` URLs for your
  Replit Apps may occasionally change during cluster migrations. Once migration
  is complete, URLs remain stable for approximately one year unless you
  explicitly request a location change between North America and Asia.
</Note>

## Publish a Streamlit application

Streamlit applications work with Replit Deployments. The easiest way to get started is with the [Streamlit template](https://replit.com/@replit/Streamlit?v=1).

Alternatively, set the run command for publishing to:

```bash theme={null}
streamlit run --server.address 0.0.0.0 --server.headless true --server.enableCORS=false --server.enableWebsocketCompression=false main.py
```

If your application uses a different entry file, replace `main.py` with your filename.

***

If you need additional help after trying these steps, visit the [Replit Community Hub](https://replit.com/community) for more resources.


# Database Upgrade
Source: https://docs.replit.com/cloud-services/storage-and-databases/database-upgrade

Learn about the automatic upgrade of your development database from Neon to Helium and what to expect during the process.

Replit is upgrading development databases from [Neon](https://neon.tech) (a third-party serverless PostgreSQL provider) to **Helium**, Replit's own managed PostgreSQL infrastructure. This upgrade is automatic, runs once per app, and preserves all your data.

<Note>
  This upgrade only applies to **development databases**. Production databases
  used by your deployed apps are not affected in most cases. However, if your
  deployed app shares a development database with another app (common in older
  forked or remixed apps), see [Fix a published app using a shared
  database](/cloud-services/storage-and-databases/shared-database-migration)
  for important steps.
</Note>

## What's changing

The upgrade moves your development database from Neon's infrastructure to Helium, which runs directly on Replit's platform. Here's what that means for you:

* **Lower latency**: Your database runs on Replit infrastructure alongside your app, reducing connection times
* **More storage**: Your storage limit increases from 10 GB to 20 GB
* **Same database engine**: Helium uses PostgreSQL 16, the same version as Neon — your queries, schemas, and data work the same way
* **Seamless connection**: Your `DATABASE_URL` environment variable is automatically updated to point to Helium
* **Neon connection saved**: Your previous Neon connection string is saved as `NEON_DATABASE_URL` in your Secrets for reference. The old Neon database is no longer used by your app after the upgrade and is scheduled for removal after a temporary grace period.

For a full comparison between the legacy Neon database and the new Replit database — including differences in billing, restore capabilities, connection security, and remixing behavior — see [Legacy Development Database](/cloud-services/storage-and-databases/sql-database#legacy-development-database).

## What to expect during the upgrade

The upgrade runs automatically when you open your Replit App in the Workspace.

1. A progress screen appears with the message **"Upgrading your database"**
2. Your data is securely copied from Neon to Helium. No data is changed or lost during transfer.
3. The duration depends on your database size — it can take anywhere from a few minutes to a few hours for large databases
4. You can keep the tab open or close it and come back later
5. When the upgrade completes, a confirmation dialog appears: **"We've upgraded your database!"**

<Info>
  If the upgrade encounters an issue, it is automatically skipped so you can
  keep working. The upgrade will retry the next time you open your app.
</Info>

## What to do after the upgrade

For most builders, no action is required. Your app continues to work as before.

<Tip>
  If your code connects to the database using the `DATABASE_URL` environment
  variable, no changes are needed. The variable is automatically updated to
  point to your new Helium database.
</Tip>

Review the following if any apply to your app:

* **Hardcoded Neon connection strings**: If your code directly references a `neon.tech` connection string, update it to use the `DATABASE_URL` environment variable instead — `process.env.DATABASE_URL` in JavaScript or `os.environ['DATABASE_URL']` in Python. See [Connect your app to a SQL database](/getting-started/quickstarts/database-connection) for examples.

* **Custom PostgreSQL roles**: If you created custom database roles on Neon, those roles and their permissions are migrated automatically. However, role passwords cannot be copied — you will need to reset passwords for any custom roles on the new Helium database.

* **Individual PG environment variables**: The `PGHOST`, `PGPORT`, `PGUSER`, and `PGPASSWORD` environment variables are removed after the upgrade. Use the `DATABASE_URL` connection string instead, which contains all the information needed to connect.

## Troubleshooting

### SSL connection errors after the upgrade

After the upgrade, you may see connection errors like `The server does not support SSL connections` or the socket disconnecting unexpectedly. This happens when your database connection code forces an SSL handshake. Neon required SSL for all connections, but Helium runs locally alongside your app and does not use SSL.

To fix this, make the SSL setting in your database connection conditional on the environment. This ensures your app connects without SSL in development (Helium) and with SSL in production (where your production database may still require it).

<CodeGroup>
  ```js JavaScript theme={null}
  // Before (breaks after upgrade)
  const pool = new Pool({
    connectionString: process.env.DATABASE_URL,
    ssl: { rejectUnauthorized: false },
  });

  // After (works in both development and production)
  const pool = new Pool({
    connectionString: process.env.DATABASE_URL,
    ssl:
      process.env.NODE_ENV === "production"
        ? { rejectUnauthorized: false }
        : false,
  });
  ```
</CodeGroup>

<Tip>
  If you use an ORM like Drizzle, Prisma, or Sequelize, check its documentation
  for how to configure SSL settings conditionally. The same principle applies —
  disable SSL for the development database and enable it for production.
</Tip>

## Deployed app using a shared database

Older apps that were forked or remixed on Replit may share a development database with the original app. Under the legacy Neon system, forking an app copied the original app's `DATABASE_URL`, which meant both apps and their published versions connected to the same database.

After the database upgrade, the original app's Neon database is disabled. If your published app still uses that shared database URL, your published app may stop working or lose access to its data.

<Warning>
  The shared database will be shut down on **April 30**. Update your published
  app before then to avoid permanent data loss.
</Warning>

### What to do next

If your published app is affected, follow the dedicated step-by-step guide:

* [Fix a published app using a shared database](/cloud-services/storage-and-databases/shared-database-migration)

That guide covers:

* How to confirm whether your published app is still using the old Neon connection
* When to use **Publish** or **Republish** with **Create production database**
* How to manually export and import data if your published app still depends on the old shared database
* Important cautions about downtime, active writes, and custom PostgreSQL roles

## Frequently asked questions

<Accordion title="Is my data safe during the upgrade?">
  Yes. Your data is copied from Neon to Helium — it is not moved or deleted
  during the transfer. The original Neon database is preserved until the upgrade
  completes successfully. No data is changed or lost.
</Accordion>

<Accordion title="Can I skip or delay the upgrade?">
  The upgrade runs automatically when you open your Replit App. If it encounters
  any issue, it is automatically skipped and you can continue working normally.
  The upgrade will be retried the next time you open the app.
</Accordion>

<Accordion title="The upgrade failed. What should I do?">
  If the upgrade fails, it is automatically skipped so you can keep using your
  app with the existing Neon database. The system will retry the upgrade the
  next time you open your app. If the issue persists across multiple attempts,
  [contact support](https://replit.com/support) for assistance.
</Accordion>

<Accordion title="Why did my environment variables change?">
  After the upgrade, `DATABASE_URL` points to your new Helium database instead
  of Neon. Your previous Neon connection string is saved as `NEON_DATABASE_URL`
  in your app's Secrets. If your code uses `DATABASE_URL` to connect, no changes
  are needed — the variable is updated automatically.
</Accordion>

<Accordion title="What happened to PGHOST, PGPORT, PGUSER, and PGPASSWORD?">
  These individual environment variables are removed after the upgrade. Helium
  provides your connection details through the `DATABASE_URL` environment
  variable, which contains all the information your app needs to connect. Update
  any code that references these individual variables to use `DATABASE_URL`
  instead.
</Accordion>

<Accordion title="Can I still access my old Neon database?">
  Your previous Neon connection string is saved as `NEON_DATABASE_URL` in your
  app's Secrets for reference. In most cases, the old Neon database is no longer
  used after the upgrade and is scheduled for removal on **April 30**.

  If your deployed app was using an older shared Neon database from a forked or
  remixed app, that Neon database may still be temporarily available so you can
  export data and move to your own production database. This access is temporary,
  and the shared database will still be removed on **April 30**, so update your
  published app as soon as possible.

  If `NEON_DATABASE_URL` is not available in your Secrets and you need help
  retrieving the old connection string, [contact
  support](https://replit.com/support).
</Accordion>

<Accordion title="Does this affect my deployed or production app?">
  In most cases, no — production databases are managed separately and are not
  part of this upgrade. However, if your published app uses the development
  database URL directly (instead of a separate production database), the upgrade
  may affect your published app. This is most common in older apps that were forked
  or remixed, where the fork shared the original app's database. See [Fix a
  published app using a shared
  database](/cloud-services/storage-and-databases/shared-database-migration) for
  how to fix this.
</Accordion>

## Next steps

* [Database](/cloud-services/storage-and-databases/sql-database): Learn about the Replit Database tool and how to manage your database
* [Production Databases](/cloud-services/storage-and-databases/production-databases): Understand how production databases differ from development databases
* [Connect your app to a SQL database](/getting-started/quickstarts/database-connection): Code examples for connecting to your database


# App Storage
Source: https://docs.replit.com/cloud-services/storage-and-databases/object-storage

Learn how to use App Storage to host and manage file uploads like images, videos, and documents.

App Storage is Replit's built-in object storage that lets your app easily host and save uploads like images, videos, and documents.
Buckets are containers for storing objects such as files. They include access policies to limit what actions users or applications can perform on their contents.

<Info>
  We've renamed <strong>Object Storage</strong> to <strong>App Storage</strong>. Functionality has not changes and your existing buckets, permissions, and programmatic access should continue to work.
</Info>

With App Storage, you can build apps like:

* **Photo sharing platforms**: Let builders upload, store, and display images
* **Video streaming services**: Handle video uploads and serve content to viewers
* **Document management systems**: Store and organize builder files with secure access
* **Portfolio sites**: Showcase work with media files that load reliably
* **File backup services**: Provide builders with cloud storage for their important files

<Frame>
  <img alt="screenshot of the App Storage tool" />
</Frame>

<Note>
  Ask **Agent** to add App Storage to your app with details on what types of files your app should handle. Agent will set up the integration, create the necessary buckets, and update your app to upload, store, and retrieve files with advanced features like authentication and access controls.
</Note>

The App Storage tool lets you seamlessly share data between your
development and production environments or with other Replit Apps.

## Features

<Info>
  App Storage is powered by Google Cloud Storage (GCS).
  This means you receive the benefits of industry-leading uptime,
  availability, and security.
</Info>

App Storage provides the following features for your Replit Apps:

* **Persistent cloud storage**: Store files that remain accessible to your published app and users
* **Scalable file handling**: Handle growing data needs without worrying about storage limits
* **Cross-app data sharing**: Share buckets across multiple Replit Apps for distributed architectures
* **Programmatic access**: Upload, download, and manage files using intuitive APIs
* **Enhanced Agent integration**: Let Agent set up App Storage with advanced configurations, inspect existing setups, and generate complete backend and frontend code with authentication and access controls

Here are a few ways you can use App Storage in your Replit Apps:

* Store builder profile pictures and media uploads
* Serve product images for e-commerce sites
* Handle document uploads for form submissions
* Create file sharing and collaboration features
* Build content management systems with media libraries

<Tip>
  **Enhanced Agent Integration**: You can prompt [Replit Agent](/core-concepts/agent) to automatically add App Storage to your apps! Agent can now set up object storage, inspect configurations, and generate complete backend and frontend code with advanced features like authentication and access controls. Simply mention "App Storage" or "file storage" in your prompt.

  <AiPrompt>Add App Storage to my app to store files</AiPrompt>
  <AiPrompt>Create a photo gallery app with App Storage for images</AiPrompt>
  <AiPrompt>Set up App Storage with authentication for user file uploads</AiPrompt>

  Learn more about [Agent integrations](/replitai/integrations#data-storage--management) and see all available App Storage prompts.
</Tip>

## Usage

<Note>
  Your Replit App must authenticate with Google Cloud Storage to access a bucket and its objects.
  Use the official Replit App Storage client libraries to automatically authenticate.
</Note>

You can access the App Storage tool directly in your Replit App workspace.

<Accordion title="How to access the App Storage tool">
  From the left **Tool dock**:

  1. Select <img alt="All tools icon" /> **All tools** to see a list of workspace tools.
  2. Select <img alt="App Storage icon" /> **App Storage**.

  From the **Search bar**:

  1. Select the <img alt="magnifying glass icon" /> magnifying glass at the top to open the search tool.
  2. Type "App Storage" to locate the tool and select it from the results.
</Accordion>

To associate a new storage bucket with your Replit App, create a bucket.

<Accordion title="How to create a bucket">
  From the **App Storage** tool:

  1. Click on **Create new bucket**.
  2. Enter a name for the bucket in the **Name** field and select **Create bucket**.

  The App Storage tab should resemble the following screenshot:

  <Frame>
    <img alt="screenshot of the App Storage tool" />
  </Frame>

  To create additional buckets, open the bucket dropdown menu on the top left of the **App Storage** tab and select **Create new bucket**.
</Accordion>

The following sections explain the bucket and object management options in the App Storage tool.

### Select a bucket

To switch between your storage buckets, select the dropdown menu in the top left corner of the **App Storage** tab.

The selected bucket displays a check mark next to its name, as shown in the screenshot below:

<Frame>
  <img alt="screenshot of bucket selection menu" />
</Frame>

### 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:

<Frame>
  <img alt="screenshot of the App Storage tool" />
</Frame>

### 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 <img alt="upload file icon" /> **Upload files**, or <img alt="upload folder icon" /> **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 <img alt="download icon" /> 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 <img alt="create folder icon" /> **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:

<Frame>
  <img alt="animation showing moving a file to a parent folder" />
</Frame>

### Delete objects or buckets

<Warning>
  The delete action is irreversible. Make sure to back up any essential data before proceeding.
</Warning>

To delete an object forever:

1. Navigate to the **Objects** view in the **App Storage** tab.
2. Select the <img alt="trash icon" /> trash icon
   next to the object you want to delete.
3. Confirm the deletion in the confirmation dialog.

To delete a bucket and all the objects it contains:

1. Navigate to the **Settings** view in the **App Storage** tab.
2. Make sure you select the bucket you want to delete in the top left bucket dropdown menu.
3. Select <img alt="trash icon" /> **Delete Bucket**.
4. Confirm the deletion in the confirmation dialog.

### Bucket access management

Replit connects all buckets you create to your account and makes them available to
all your Replit Apps. The Replit App from which you create the bucket automatically
receives access.

You can control which of your Replit Apps have access to a specific bucket, which lets you
share data efficiently and securely.

To grant your Replit App access to a bucket from another app on your account:

1. Select <img alt="magnifying glass icon" />
   **Add an existing bucket** from the bucket menu at the top left of the App Storage tab.
2. In the **Choose a Bucket** dialog, choose the bucket you want to add and select **Add Bucket to Repl**.

<Frame>
  <img alt="screenshot of the choose bucket dialog" />
</Frame>

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
* <a href="https://cloud.google.com/storage/docs/reference/libraries">Google Cloud Storage client library</a>

For instructions on how to use the client libraries, see the following resources:

* [JavaScript App Storage tutorial](/getting-started/quickstarts/object-storage-javascript/): Learn how to use the Replit JavaScript App Storage client
* [JavaScript App Storage SDK](/reference/object-storage-javascript-sdk/): Client reference for the JavaScript SDK
* [Python App Storage tutorial](/getting-started/quickstarts/object-storage-python/): Learn how to use the Replit Python App Storage client
* [Python App Storage SDK](/reference/object-storage-python-sdk/): Client reference for the Python SDK
* [Google Cloud Python SDK example app](https://replit.com/@matt/GCS-Python-Uploads?v=1): Remix this app to manage objects using the Google Cloud Python SDK

## Billing and resource usage

To monitor your App Storage usage, navigate to the <a href="https://replit.com/usage/">Usage</a> page.

To learn more about App Storage pricing, see [App Storage Billing](/billing/object-storage-billing).


# Production Databases
Source: https://docs.replit.com/cloud-services/storage-and-databases/production-databases

Learn how to safely manage and publish database changes in production environments.

Production databases are dedicated for your live data that powers your published Replit Apps. Unlike development databases where you experiment and build features, production databases keep your real-world data safe while you continue building, ensuring reliability, and performance.

Understanding how to work with production databases is essential for building robust applications that can evolve and scale without disrupting your users.

<Frame>
  <img alt="Production database management interface" />
</Frame>

## What are Production Databases?

Production databases are the live, operational databases that serve real users and their data. They differ significantly from development databases in several key ways:

### Production vs Development Databases

| Aspect          | Development Database                     | Production Database                                                  |
| --------------- | ---------------------------------------- | -------------------------------------------------------------------- |
| **Purpose**     | Experimentation and feature development  | Serving real users and storing business data                         |
| **Data**        | Test data, dummy records, small datasets | Real user data, business-critical information                        |
| **Performance** | Optimized for development speed          | Optimized for reliability and user experience                        |
| **Changes**     | Frequent schema changes, rapid iteration | Careful, planned changes via data migrations and rollback strategies |
| **Downtime**    | Acceptable during development            | Must be minimized or eliminated                                      |
| **Backup**      | Optional for testing                     | Critical for business continuity                                     |

<Note>
  Agent is not able to modify the production database, this restriction is in place so that your production database stays safe.

  Agent can make edits to your development database. At the time of publishing, any changes you’ve made with the agent to the structure of your development database (i.e. adding and deleting columns / tables) will be applied over to your production database.

  You are manually able to edit your production data at anytime by going to database pane > production database > My data and toggling **Edit**
</Note>

## Database Technology and Infrastructure

Production databases in Replit are built on the same robust foundation as our standard [SQL Database](/cloud-services/storage-and-databases/sql-database) offering. They use PostgreSQL 16 hosted on [Neon](https://neon.tech), providing enterprise-grade reliability and performance.

### Relationship to Replit SQL Database

Production databases share the same core technology stack as Replit's SQL Database:

* **PostgreSQL 16**: Industry-standard relational database with advanced features
* **Neon Infrastructure**: Serverless database platform that provides automatic scaling and cost optimization
* **Built-in Tools**: Access to SQL runner, Drizzle Studio, and visual data management tools
* **Environment Variables**: Secure connection management through automatically generated credentials

<Info>
  For detailed information about database features, connection setup, and
  technical specifications, see the [SQL
  Database](/cloud-services/storage-and-databases/sql-database) documentation.
</Info>

## Making safe changes to your production database

When you publish updates to your Replit App that include database changes, you may encounter scenarios where careful planning is essential to avoid downtime or data loss.

### Non-Backward Compatible Changes

Some database changes can break compatibility with your existing application code. These changes require special handling to ensure smooth deployments.

<Info>
  You may notice a brief downtime for your published app during publishing. This downtime occurs because database changes sometimes require stopping your app temporarily to prevent conflicts and ensure safe updates. Stopping the app during these updates helps protect your data from loss or corruption while the changes are applied.
</Info>

### Common Non-Backward Compatible Changes

The following types of changes typically require careful publishing strategies:

* **Removing database columns** that your application code still references
* **Changing column data types** in ways that existing code cannot handle
* **Adding required fields** without default values to existing tables
* **Renaming tables or columns** that break existing queries
* **Modifying constraints** that could reject existing application logic

## Deployment Previews

Before publishing database changes to production, Replit provides tools to test your changes safely in a preview environment.

A deployment preview is a temporary, isolated copy of your production environment where you can test database changes and application updates before they affect real users.
This preview environment mirrors your production setup but operates independently.
It can help you catch potential issues early and ensure your changes work correctly before going live.

Testing your deployment in the preview environment is crucial for identifying issues before they impact your users. Follow these steps to ensure your database changes work correctly:

**1. Functional Testing**

* Verify that your app still works properly with the database changes applied
* Test all major user flows to ensure functionality remains intact
* Check that data displays correctly after the schema modifications

**2. Data Integrity Verification**

* Confirm that existing data has been properly migrated or transformed
* Verify that new fields contain expected values or appropriate defaults
* Test edge cases where data might not conform to new constraints

**3. Performance Validation**

* Monitor query response times in the preview environment
* Check that new indexes are being used effectively
* Verify that the changes don't introduce performance regressions

## Point-in-time restore

For production databases, you can restore your database to a specific point in time using the point-in-time restore feature.

<Frame>
  <img alt="Database rollbacks interface showing rollback options" />
</Frame>

Note that this will only restore your production database to the state it was at the time of the checkpoint. It will not restore your app to the state it was at the time of the checkpoint.

To restore your app to the state it was at the time of the checkpoint, you will need to roll back to the checkpoint using the [rollback feature](/core-concepts/agent/checkpoints-and-rollbacks/) and republish your app.

## Billing and resource usage

Production databases are billed based on usage through Neon, a serverless database provider.

Neon's serverless capabilities include the following:

* Zero infrastructure setup or maintenance
* Automatic scaling to handle your usage needs
* Compute time billing only when the database is active

The database enters an idle state after five minutes of inactivity, pausing compute time billing.
It instantly reactivates when it receives a query.

<Tip>
  To learn more about this serverless database technology, see the
  <a href="https://neon.tech/docs/introduction/compute-lifecycle">Neon Compute lifecycle</a> documentation.
</Tip>

Replit provides real-time tracking of your database usage.
You can view the breakdown of compute time and storage usage for the current Replit App
or for each Replit App on your account.

<Accordion title="How to access database usage">
  To view your database compute time and storage usage for the current billing period, follow the steps below:

  From the **Replit Database** tool:

  1. Navigate to the <img alt="PostgresSQL database icon" /> **Replit Database** tool in your workspace
  2. In the database dropdown menu, select **Production**
  3. Select the <img alt="gear icon" /> **Settings** tab
  4. The **Storage Used** section shows the total storage used by your database for the current billing period.

  To view for every Replit App from **Settings** → **Account** → **Account usage**, follow the steps below:

  1. Open **Settings** and go to **Account** → **Account usage** (or **View account resource limits** / **Usage**).
  2. Scroll to the **Resource usage** section.
  3. Expand the **PostgresSQL Storage** and **PostgresSQL Compute** rows for details on each Replit App.
</Accordion>

To learn how Replit charges for database usage, see [Deployments and Database Billing](/billing/about-usage-based-billing#databases).

## Troubleshooting Common Issues

### Publishing Failures

If your publishing fails due to database issues:

1. **Check the publishing logs** for specific error messages about database connectivity or schema conflicts
2. **Verify your database connection credentials** are correct and accessible from the published app environment
3. **Review recent schema changes** for potential conflicts with existing application code
4. **Test your changes in a preview environment** before attempting to republish

## Removing a production database

<Warning>
  The remove action is irreversible after a retention period of 7 days. Make sure to back up any important data before proceeding.
  Databases have a 7 soft delete period where databases can be restored. Reach out to support if you need assistance. After 7 days, the database is hard deleted and will be unrecoverable.
</Warning>

If you no longer need a database for your Replit App, you can remove it and all its data.

<Accordion title="How to remove a database">
  From the **Replit Database** tool:

  1. Select the <img alt="gear icon" /> **Settings** tab
  2. Select **Remove database** and confirm by selecting **Yes, Remove database**
</Accordion>

## Next Steps

To learn more about database management on Replit:

* [SQL Database](/cloud-services/storage-and-databases/sql-database): Learn about Replit's managed PostgreSQL database service
* [Deployments](/cloud-services/deployments/about-deployments): Understand how deployments work with database changes
* [Object Storage](/cloud-services/storage-and-databases/object-storage): Learn about storing files and assets in the cloud


# Fix a published app using a shared database
Source: https://docs.replit.com/cloud-services/storage-and-databases/shared-database-migration

Step-by-step instructions for updating a published app that still uses a database originally created for another app.

Some older published apps may still be connected to a development database that was originally created for a different app.

This can happen with older apps that were forked or remixed on Replit. Under the legacy Neon setup, a fork could keep using the original app's database connection. As part of Replit's move to fully isolate development and production databases, older shared development databases are being removed and published apps need to move to their own production databases.

Use this guide if your published app is showing database connection errors, or if `DATABASE_URL` in Secrets panel still points to `neon.tech`.

<Warning>
  The older shared database will be shut down on **April 30**. Update your
  published app before then to avoid downtime or permanent data loss.
</Warning>

## Before you start

Your published app needs its own **production database**. The development database shown in the **Database** panel should not be used directly by published apps.

<Frame>
  <img alt="Database panel showing Development database" />
</Frame>

To fix this, first figure out which situation you are in:

* **Case 1:** The data you want is already present in the database shown in the **Database** panel for your app.
* **Case 2:** The **Database** panel does not show the data you need, because your published app is still using the older shared development database.

## How to tell if your published app is using a shared database?

Your published app is affected if any of the following are true:

* Your published app shows database connection errors after the database upgrade
* Your app was remixed from another app that had a database **before January 9, 2026**

## How to check if your published app is using the shared database from the source app?

### Step 1: Open the Database panel in the source app

<Frame>
  <img alt="Secret panel showing DATABASE_URL" />
</Frame>

Get the value from `NEON_DATABASE_URL` or from `DATABASE_URL` if `NEON_DATABASE_URL` does not exist.

<Info>
  Not every affected app will have `NEON_DATABASE_URL`. If it is missing, that
  usually means you should use the current `DATABASE_URL` from the published
  app's Secrets if it still points to `neon.tech`.
</Info>

### Step 2: Open the Publish panel in the published app

<Frame>
  <img alt="Published app secrets showing DATABASE_URL" />
</Frame>

To check the database URL for your published app:

1. Open your app in Replit
2. Open **Publishing** panel
3. Open **Adjust Settings**
4. Open **Secrets**
5. Look for `DATABASE_URL`

### Step 3: Compare the database url from the source app in Step 1 and the remix app in Step 2

If they are the same, your published app is using a shared Neon development database from the source app.

## How to copy data from source app to the published app?

After confirming that your published app is using the shared development database from the source app, the next step is to transfer the necessary data to the published app. There are two scenarios to consider:

* Case 1: The Database panel in the published app already contains the required data.
* Case 2: The Database panel in the published app does not contain the required data.

### Case 1: The Database panel already shows the data you need

This is the easiest path if the data you need is already visible in the **Database** panel for your app.

#### Step 1: Confirm the data is present

<Frame>
  <img alt="Database l showing my data rows" />
</Frame>

Open the **Database** panel in the published app and make sure the tables and data you need are there.

If you don't see the data you need in the Database panel, pause here. You'll want to follow the steps in [Case 2](#case-2-the-database-panel-does-not-show-the-data-you-need) to migrate your data properly.

#### Step 2: Publish or republish with a production database

1. Open your app in the Workspace
2. Select **Publish** or **Republish**
3. Turn on **Create production database**
4. Turn on **Set up your production database with your current development data**
5. Complete the publish flow

Publishing creates a new version of your published app and automatically sets its `DATABASE_URL` to the new production database. You do not need to update that secret manually during this flow.

<Frame>
  <img alt="Publish settings showing Create production database options" />
</Frame>

<Warning>
  Copying to production overwrites any existing production data. See [Production
  Databases](/cloud-services/storage-and-databases/production-databases) for
  more details about restoring or managing your production database.
</Warning>

#### Step 3: Verify the published app

Open your published app and confirm that your data is accessible and the app works correctly.

### Case 2: The Database panel in the published app does not show the data you need

Follow these steps to export the data if you do not see the needed data in your published app's **Database** panel.

If your published app is still connected to a database from another app, you’ll see an "external database detected" warning in the Database panel.

<Frame>
  <img alt="Database panel showing external database detected" />
</Frame>

<Warning>
  If people are still using your app and saving new data, plan a short
  maintenance window before exporting data.
</Warning>

#### Step 1: Export the data from the old database

<Frame>
  <img alt="pg_dump example" />
</Frame>

Open the **Shell** in your Workspace and run:

```bash theme={null}
pg_dump -Fc "database_url" --no-owner --no-privileges -f backup.dump
```

`database_url` is the database URL obtained from [Step 1: Open the Database panel in the source app](#step-1-open-the-database-panel-in-the-source-app).

### Step 2: Remove the old `DATABASE_URL` from your app's Secrets

<Frame>
  <img alt="secret pane example" />
</Frame>

1. Open the **Secrets** tool in the Workspace
2. Find the old `DATABASE_URL`
3. Delete it
4. Refresh the page or reopen the **Database** panel

After this, your app should stop pointing at the old shared database and use its current development database again.

### Step 3: Import the data into your app's current development database

<Frame>
  <img alt="pg_restore example" />
</Frame>

Once the old `DATABASE_URL` secret is removed, your app's current development database should be available again as `$DATABASE_URL` in the Workspace.

Return to the **Shell** in the Workspace and run:

```bash theme={null}
pg_restore --clean --if-exists --single-transaction --no-owner --no-privileges --exit-on-error -d "$DATABASE_URL" backup.dump
```

This loads the exported data into your app's current development database.

### Step 5: Follow Case 1 to publish or republish with a production database

Once the **Database** panel shows the correct data, follow [Case 1](#case-1-the-database-panel-already-shows-the-data-you-need) to publish or republish with **Create production database** and copy that data into production.

### Step 6: Verify the published app

<Frame>
  <img alt="successful export" />
</Frame>

Open your published app and confirm that your data is accessible and the app works correctly.

## Troubleshooting

### The import fails because tables already exist

The `pg_restore --clean --if-exists` command above drops and recreates matching objects from the dump before restoring them.

### The import fails with role or policy errors

If your database uses custom PostgreSQL roles or role-based policies, the import may fail because those roles do not exist in the new database yet.

Replit's automatic Helium migration attempts to recreate role stubs before restoring, but the manual process above does not. If you run into role-related errors during `pg_restore`, [contact support](https://replit.com/support) for help.

### I already fixed the app

If your published app already has its own production database and is working correctly, you do not need to do anything else.

## Need more help?

If you are unsure which case applies to your app, or if you run into problems during the migration, [contact support](https://replit.com/support).

## Related docs

* [Database upgrade](/cloud-services/storage-and-databases/database-upgrade)
* [Production databases](/cloud-services/storage-and-databases/production-databases)
* [Database](/cloud-services/storage-and-databases/sql-database)


# Database
Source: https://docs.replit.com/cloud-services/storage-and-databases/sql-database

Learn how to use Replit's built-in SQL database to store and retrieve data for your app.

Replit Database uses a fully-managed SQL database that lets you add persistent data storage to your Replit App from the Workspace.

<Note>
  The fastest way to get started is to ask **Agent** to add a database to your app. Agent will set up the integration, create the database schema, and update your app to store and retrieve data.
</Note>

<Frame>
  <img alt="screenshot of the database editor" />
</Frame>

## Features

The Replit Database tool provides the following features:

* **Database tools**: Run queries, manage database schema, and visualize data with the built-in SQL tools
* **Time travel**: Restore your database to any **Agent** checkpoint using the [rollback feature](/core-concepts/agent/checkpoints-and-rollbacks/)
* **Free storage**: Includes 10GB of free storage for every Replit App.
* **Environment variables**: Use environment variables in your Replit App to securely access the database

<Info>
  Prior to December 4th, 2025, the development database was hosted on Neon and has a few crucial differences.
  See the [Legacy Neon Development Database](#legacy-development-database) section for more details.
</Info>

## Usage

<WistiaEmbed title="How to use Databases on Replit" />

You can access the Replit Database tool directly in your Replit App Workspace.
The following sections guide you through setting up and managing your Database.

<Accordion title="How to access the Replit Database tool">
  From the left **Tool dock**:

  1. Select <img alt="All tools icon" /> **All tools** to see a list of workspace tools.
  2. Select <img alt="PostgresSQL database icon" /> **Database**.

  From the **Search bar**:

  1. Select the <img alt="magnifying glass icon" /> magnifying glass at the top to open the search tool
  2. Type "Replit Database" to locate the tool and select it from the results.
</Accordion>

### Add a database

All Replit Apps come with a database by default. You can access it by selecting the <img alt="PostgresSQL database icon" /> **Database** tool in your workspace.

You can integrate the database with your Replit App by asking the **Agent** to add a PostgreSQL database to your Replit App,
including details on what data your Replit App should store. The Agent will create the database schema
and update your app to communicate with the database.

### Restore your database to a previous state

You can revert your app and database to a previous state using the [rollback feature](/core-concepts/agent/checkpoints-and-rollbacks/).
This feature allows you to restore your database to any checkpoint created by **Agent**.

<Frame>
  <img alt="Checkpoint rollback interface showing rollback options" />
</Frame>

<Info>
  Make sure to select "Database" under "Additional rollback options" when restoring to the state of a checkpoint. This will restore your database to the state it was at the time of the checkpoint.
</Info>

### Run database commands

The SQL runner is a Workspace tool that lets you run SQL commands on your database and view the results.

<Accordion title="How to access SQL runner">
  From the **Replit Database** tool:

  1. Select the **My Data** tab
  2. Select <img alt="SQL runner icon" /> **SQL runner**
</Accordion>

To run a query, enter the SQL statement in the text area and select the
adjacent <img alt="sql run icon" /> run button
as shown below:

<Frame>
  <img alt="screenshot of the SQL runner and run button" />
</Frame>

### Browse and modify data visually

The Replit Database tool includes <a href="https://orm.drizzle.team/drizzle-studio/overview">Drizzle Studio</a>,
a tool that lets you browse and modify data visually.

These visual tools help you avoid syntax errors and offer the following functionality:

* Filter and sort data to focus on specific information
* Export data to a file for external use
* Insert or modify row data
* Create and manage schema, tables, views, and enums

You can access these tools in the **My Data** tab in the **Replit Database** tool.

The following image shows a view from the Drizzle Studio builder interface:

<Frame>
  <img alt="image of the table structure editor" />
</Frame>

<Tip>
  You can connect to your database using any PostgresSQL-compatible SQL client using the connection string
  found in your [environment variables](#environment-variables).
</Tip>

### View connection credentials and usage

Your database connection credentials are stored as environment variables in your Replit App.
These credentials are used by your app to securely connect to the database and run commands.

<Accordion title="How to access your database connection credentials">
  1. Navigate to the <img alt="PostgresSQL database icon" /> **Replit Database** tool in your workspace
  2. Select either the Development or Production database
  3. Select the <img alt="gear icon" /> **Settings** tab (the gear icon). This tab shows the connection credentials and storage usage for your database.
</Accordion>

#### Environment variables

The following environment variables are available:

* `DATABASE_URL`: how to connect and authenticate to the database
* `PGHOST`: database hostname
* `PGUSER`: database username
* `PGPASSWORD`: database password
* `PGDATABASE`: database name
* `PGPORT`: database port

This `DATABASE_URL` can only be used by your app and even if leaked, it cannot be used by anyone else to access and modify your database.

To learn how to use these credentials in your code, see [Connect your app to a SQL database](/getting-started/quickstarts/database-connection/).

<Info>
  Because this `DATABASE_URL` is scoped to your app, your development database cannot be accessed by other apps, even ones you own or external database viewers.
  This separation follows security best practices and prevents unauthorized access to your database.

  If you need multiple Replit Apps to share a single database, you can expose it as a REST API. See the tutorial on [sharing a database across multiple apps](/tutorials/share-database-across-apps) to learn how to set up a secure database API service.
</Info>

<Warning>
  If you are still on the [legacy Neon development database](#legacy-development-database), do not share your `DATABASE_URL`.
  It contains your database credentials which could be used by anyone to access and modify your database.
  Never paste it in public places or support tickets.
</Warning>

### Security features

When you add a database integration using **Agent**, it adds an Object-Relational Mapper (ORM)
that handles all database communications with built-in security.

This ORM layer, combined with Agent's security best practice implementation, protects your app from
exploits through the following features:

* **Schema validation**: Verifies data conforms to expected formats
* **Data sanitization**: Automatically cleans up builder input to prevent SQL injection attacks

## Legacy Development Database

Prior to December 4th, 2025, the development database was hosted on <a href="https://neon.com/">Neon</a>.
This database is now deprecated and all new development databases are hosted on Replit's own database infrastructure.

You can see if your development database is hosted on Neon by checking the `DATABASE_URL` [environment variable](#view-connection-credentials-and-usage).

<Info>
  If `DATABASE_URL` contains `neon.tech/neondb`, then your development database is still hosted on Neon.
  Otherwise if it contains `helium/heliumdb` then your development database is now hosted on Replit.
</Info>

The following are the key differences between the legacy Neon development database and the new Replit development database:

| **Feature**             | **Replit (current)**                                                                                                                                              | **Neon (legacy)**                                                                                                          |
| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| **Hosting**             | Hosted on Replit's own infrastructure                                                                                                                             | Hosted on Neon (third-party provider)                                                                                      |
| **Billing**             | Included for free with every Replit App                                                                                                                           | Usage-based billing. See [Publishing and Database Billing](/billing/about-usage-based-billing#databases) for more details. |
| **Restore capability**  | Restore your database to any checkpoint using the [rollback feature](/core-concepts/agent/checkpoints-and-rollbacks/)                                             | Point-in-time restore (PITR)—recover to any point within backup retention window.                                          |
| **Connection security** | Only accessible from within your app; never exposed publicly.                                                                                                     | Used a full connection string—if leaked, anyone could access and modify your database.                                     |
| **Remixing behavior**   | [Remixing](/getting-started/quickstarts/remix-an-app) creates a new development database with copied data for isolation and security.                             | Remixing reuses the same database for all copies, so changes in remixes could affect the original app.                     |
| **Database creation**   | Automatically created for each Replit App.                                                                                                                        | Required explicit setup.                                                                                                   |
| **Publishing workflow** | Deploying or publishing requires creating a [production database](/cloud-services/storage-and-databases/production-databases) for isolation between environments. | Development and production shared the same database, so unintended development changes could affect production apps.       |

<Warning>
  If your app was forked or remixed while using the legacy Neon database, your published app may still reference the original app's database URL. After the [database upgrade](/cloud-services/storage-and-databases/database-upgrade), this shared connection will stop working. See [Fix a published app using a shared database](/cloud-services/storage-and-databases/shared-database-migration) for how to update your published app.
</Warning>


# Replit Agent
Source: https://docs.replit.com/core-concepts/agent

Replit Agent turns your ideas into apps, designs, slides, and more, all from plain language. No coding required.

<WistiaEmbed title="Introducing Replit Agent 4" />

## What is Replit Agent?

Agent is your creative partner. Agent takes your ideas, helps you refine them, and then makes them real. Unlike a chatbot that only answers questions, Agent takes action: it sets up your project, creates applications, checks its work, and fixes problems along the way.

Describe what you want in everyday language. No code or technical knowledge required. Agent handles the rest, from planning to deployment.

## How to use Replit Agent

### Getting started

<Steps>
  <Step title="Describe what you want">
    In your [Replit Workspace](/core-concepts/workspace), just start chatting. Describe an app you want to build, ask a question, research a topic, or pull data from [connected services](/core-concepts/agent/general-agent) like BigQuery, Slack, or Notion. There are no constraints. Replit Agent handles whatever you throw at it.

    <AgentInput />
  </Step>

  <Step title="Choose what to build">
    Optionally, select a project type: web app, mobile app, slides, design, data visualization, and more. If you already described what you want in step 1, Agent figures out the right setup automatically.

    <AgentCarousel />
  </Step>

  <Step title="Agent builds it">
    Agent writes code, sets up infrastructure, and tests the result. Once you're in your project, you can switch between [Agent modes](#agent-modes) to control how it builds.
  </Step>

  <Step title="Iterate, test, deploy">
    Chat with Agent to refine your project, then publish when you're ready. All artifacts deploy together.
  </Step>
</Steps>

<Note>You're not locked into one type. Start with a web app and add a mobile app, slides, or a video later — all in the same project.</Note>

### Plan mode

Enable Plan mode to brainstorm, ask questions, and map out your project before Agent changes any code or data. In Plan mode, Agent will:

* **Break down complex projects** into ordered task lists
* **Explore different approaches** and weigh trade-offs
* **Review and refine** before any code is written

Click "Plan" in the chat input — or simply ask Agent — to switch to Plan mode. Example: "Create a plan to build a project tracker for my team"

<AgentInput />

Agent creates an ordered task list you can review and refine. When you're happy with the plan, approve it and Agent starts building.

<Frame>
  <img alt="Task plans created dialog showing four proposed tasks with Accept tasks and Revise plan options" />
</Frame>

Learn more in the [Plan mode guide](/core-concepts/agent/plan-mode).

### Agent modes

Choose how Agent builds your project:

<AgentModes />

* **Lite**: Make lightweight, inexpensive changes quickly. Lite mode is ideal for visual tweaks, bug fixes, and scoped features.
* **Economy**: Use Agent's cost-optimized models for everyday tasks. Expand **Advanced settings** to manage features like App Testing and Code Optimizations.
* **Power**: Use Agent's most capable models for harder problems, larger changes, and longer builds. In **Advanced settings**, you can also turn on **Turbo** for up to 2.5x faster builds at higher cost (Pro only).

<Note>Tip: You can also enable **[Plan mode](/core-concepts/agent/plan-mode)** to review and iterate on Agent's plan before building begins. Max mode is no longer available; use Power for the most capable standard builds.</Note>

## What you can build with the Replit Agent

* **Web apps, mobile apps, data dashboards, and AI-powered tools**
* **Visual designs and prototypes** — explore mockups on the [Design Canvas](/replitai/canvas) before committing to code
* **Multiple outputs in one project** — web apps, mobile apps, slides, and videos sharing the same backend
* **Files and documents** — CSVs, PDFs, PowerPoint files, Markdown docs
* **Connected service queries** — pull data from BigQuery, Linear, Slack, Notion, and more directly from chat

<Card title="Start building now" icon="arrow-up-right" href="https://replit.com">
  Describe your idea and let Agent bring it to life — no setup required.
</Card>

## Frequently asked questions

<Accordion title="Do I need to know how to code?">
  No. Agent handles all the technical work — writing code, setting up infrastructure, configuring databases. You describe what you want in plain language and Agent builds it.
</Accordion>

<Accordion title="What's the difference between Lite, Economy, and Power?">
  **Lite** is for quick, targeted changes (10-60 seconds) such as visual tweaks, bug fixes, and scoped features. **Economy** is the best default for most builds when you want to balance cost and quality. **Power** uses the most capable models for harder tasks, and **Turbo** is an optional Power-only toggle in Advanced settings when you need the fastest runs.
</Accordion>

<Accordion title="Can I build more than one thing in a project?">
  Yes. You can add web apps, mobile apps, slides, videos, and data visualizations to the [same project](/replitai/artifacts#multiple-artifacts-in-one-project) — all sharing the same backend and data.
</Accordion>

<Accordion title="What happens if Agent makes a mistake?">
  Agent tests its own work on a regular basis. Agent also creates checkpoints as it works, so you can roll back to any previous state. You can also chat with Agent to describe what went wrong and it will fix the issue.
</Accordion>

## Availability

| Capability              | Core | Pro |
| ----------------------- | ---- | --- |
| Agent chat and building | ✅    | ✅   |
| Lite mode               | ✅    | ✅   |
| Economy mode            | ✅    | ✅   |
| Power mode              | ✅    | ✅   |
| Design Canvas           | ✅    | ✅   |
| Multi-Artifacts         | ✅    | ✅   |
| Active background tasks | 1    | 10  |
| Turbo                   | ❌    | ✅   |

For detailed pricing, see [Agent billing](/billing/ai-billing#agent-billing).

## Next steps

<CardGroup>
  <Card title="Build in parallel" icon="list-check" href="/core-concepts/agent/task-system">
    Kanban planning, background tasks, and changes applied back to the main version.
  </Card>

  <Card title="Design Canvas" icon="paintbrush" href="/replitai/canvas">
    Visual mockups and the hands-on visual editor.
  </Card>

  <Card title="Connectors" icon="plug" href="/core-concepts/agent/general-agent">
    Connect BigQuery, Linear, Slack, Notion, and more.
  </Card>

  <Card title="Billing" icon="credit-card" href="/billing/ai-billing#agent-billing">
    Agent pricing, plan comparison, and spending management.
  </Card>

  <Card title="Vibe coding guide" icon="wand-magic-sparkles" href="/tutorials/how-to-vibe-code">
    Tips for effective prompting and building with AI.
  </Card>
</CardGroup>


# Agent Modes
Source: https://docs.replit.com/core-concepts/agent/agent-modes

Learn how to choose between Lite, Economy, and Power, and when to use Advanced settings and Turbo.

Agent modes let you control the balance between speed, cost, and capability when using Agent. Use the top-level mode selector in the Agent settings dropdown to switch between **Lite**, **Economy**, and **Power**. Expand **Advanced settings** when you want more control over testing, code review, and Turbo.

<Note>Max mode is no longer available. Use Power for the most capable standard builds, and turn on Turbo in Advanced settings when you need the fastest runs.</Note>

## Lite mode

**Optimized for quick edits.** Lite uses fast, lightweight models for visual tweaks, bug fixes, and other small, scoped changes.

<Frame>
  <img alt="Agent modes dropdown with Lite selected" />
</Frame>

**Best for:** Quick fixes, UI polish, and short iteration loops while you stay at your keyboard.

**Keep in mind:** Lite works best in existing apps when you already know what you want to change. If you're starting from scratch, making large architectural changes, adding a new integration, or changing a database schema, switch to Economy or Power.

**Cost:** Lite uses the same effort-based pricing model as the other build modes, but focused requests often cost less than Economy or Power for the same targeted edit.

## Economy mode

**Optimized for cost.** Economy uses fewer credits per task and is the best default when you want strong results without paying for the most capable models.

<Frame>
  <img alt="Agent modes dropdown with Economy selected and Advanced settings expanded" />
</Frame>

**Best for:** Everyday builds, learning, and cost-conscious work across an existing project.

## Power mode

**Optimized for capability.** Power uses more capable models for complex tasks, larger codebases, and harder problems.

<Frame>
  <img alt="Agent modes dropdown with Power selected and Advanced settings expanded" />
</Frame>

**Best for:** Production-grade projects, complex features, and when you want the best results from Agent.

## Advanced settings

Expand **Advanced settings** in the dropdown to manage the rest of Agent's build controls:

* **App Testing** lets Agent test your app automatically in a browser.
* **Code Optimizations** lets Agent review and improve its own code as it works.
* **Turbo** gives you the fastest available models when you're in Power mode.

Lite keeps App Testing and Code Optimizations off, and Turbo is only available while Power is selected.

## Turbo mode

**Turbo is a separate toggle inside Advanced settings.** Turn it on in Power mode when you want **2.5x faster** responses using the fastest models. Requests can cost up to 6x more than Power, so Turbo is best when speed matters more than efficiency.

<Frame>
  <img alt="Agent modes dropdown with Power selected and Turbo enabled in Advanced settings" />
</Frame>

**Availability:** **Pro and Enterprise only.**

**Best for:** When you need the fastest possible Agent response and are on a Pro or Enterprise plan.

## Which mode should I use?

Use the following as a guide:

| Goal                                       | Recommended mode               |
| ------------------------------------------ | ------------------------------ |
| Small, scoped edits and quick iterations   | Lite                           |
| Maximize number of prompts per credit      | Economy                        |
| Balance cost and quality for most projects | Power                          |
| Fastest response on bigger tasks           | Power + Turbo (Pro/Enterprise) |

You can change modes at any time from the Agent settings dropdown in the chat input. Choose Lite, Economy, or Power from the top-level control, then expand Advanced settings when you want more control over testing, code review, or Turbo. No single mode is always best—pick the one that fits the task in front of you.

## Related

* [Code Optimizations](/core-concepts/agent/code-optimizations): Control how Agent reviews its own code (separate from mode and Turbo).
* [Managing your spend](/billing/managing-spend): Set alerts, budgets, and use Plan Mode for cost control.
* [Replit Pro](/billing/plans/replit-pro): Unlock Turbo mode and tiered credits.


# Agents & Automations
Source: https://docs.replit.com/core-concepts/agent/agents-and-automations

Build intelligent agents, chatbots, and automated workflows using Replit Agent. Connect Linear, Jira, Gmail, Slack, Discord, and more with event-driven or scheduled automations.

<Frame>
  <img alt="Replit homepage showing Agents & Automations selection with Beta label and prompt input area" />
</Frame>

<Warning>
  **Beta Feature**: Agents & Automations is currently in beta. Features and
  functionality may change. Some limitations apply, and not all use cases are
  fully supported yet.
</Warning>

## Features

### Supported use cases

**Currently available:**

* **Slack Agent** - Create intelligent Slackbots that can answer questions, integrate with APIs, and automate tasks
* **Telegram Agent** - Build Telegram bots for customer service, scheduling, entertainment, and more
* **Timed Automation** - Set up scheduled workflows that run automatically at specified times

**Coming soon:**

* **Custom webhook triggers**: Respond to any external event or API call using a webhook URL
* **Additional pre-built triggers**: Discord, WhatsApp, and more

### Additional functionality

* **Rich integrations**: Connect with Outlook, Spotify, Notion, Linear, GitHub, and more
* **Testing environment**: Test your agents and visualize workflows before deployment
* **Cloud deployment**: Automatically configured for 24/7 availability with Autoscale or Scheduled deployments

## How to get started

### Step 1: Select Agents & Automations

From the Replit homepage after logging in, **select "Agents & Automations"** from the app type selector on the homepage.

<Frame>
  <img alt="Replit homepage showing Agents & Automations selection with Beta label and prompt input area" />
</Frame>

### Step 2: Choose your trigger type

Next, you'll see a trigger type selector. Choose from the supported options:

* **Slack** - Create intelligent Slackbots that integrate with your workspace
* **Telegram** - Build Telegram bots for various use cases
* **Timed Automation** - Set up scheduled workflows that run automatically

### Step 3: Enter your prompt

**Enter your prompt** describing what you want your agent to do.

### Step 4: Let Agent build your automation

Agent will create your automation based on your prompt and selected trigger type, including all necessary integrations and deployment configuration.

<Frame>
  <img alt="Agent testing environment showing a StockReporter automation with workflow visualization and testing interface" />
</Frame>

<Accordion title="Accessing the Agents & Automations pane">
  Once your project is created, you'll find a dedicated **Agents & Automations pane** in your workspace:

  * **Location**: Opens under the preview area in your workspace
  * **Functions**:
    * View and interact with your agent
    * Test chatbot functionality before deployment
    * Visualize automation workflows
    * Monitor logs and debug issues
  * **Testing**: Chat with your agent directly in the pane to test responses and behavior
</Accordion>

### Deployment Requirement

<Warning>
  **Deployment Required**: Your agent or automation must be deployed to function
  with external triggers like Slack, Telegram, or scheduled automations. The
  testing pane works for development and testing, but live triggers require
  deployment.
</Warning>

Agent will automatically prompt you to deploy your project when it's ready. Choose the appropriate deployment type:

* **Autoscale deployments** - For chatbots and event-driven workflows
* **Scheduled deployments** - For time-based automations

## Supported use cases and examples

### Slack Agent examples

**Research assistant with Perplexity integration**

<AiPrompt>
  Create an AI Slackbot assistant that can answer research questions using the
  Perplexity API. When someone asks a question in the #research channel, it
  should search for current information and provide comprehensive answers with
  sources.
</AiPrompt>

**Codebase Q\&A with GitHub integration**

<AiPrompt>
  Create an AI Slackbot that can answer questions about my codebase using a
  GitHub integration. It should be able to explain functions, find files, and
  help with debugging by analyzing our repository.
</AiPrompt>

**Email assistant with Outlook integration**

<AiPrompt>
  Create an AI Slackbot that can answer questions about my Outlook emails. It
  should help me find specific emails, summarize conversations, and provide
  quick responses to common email queries.
</AiPrompt>

### Telegram Agent examples

**Business assistant with calendar scheduling**

<AiPrompt>
  Create an AI business assistant that can schedule emails on my Outlook
  calendar. Users should be able to request meeting times and the bot will find
  available slots and send calendar invites.
</AiPrompt>

**Music recommendation bot with Spotify**

<AiPrompt>
  Make a fun AI chatbot that can return a Spotify song for any message I send
  describing the vibe I want. It should understand mood descriptions and suggest
  perfect tracks.
</AiPrompt>

**Fictional character bot**

<AiPrompt>
  Make an AI bot that is a fictional character - specifically Sherlock Holmes.
  It should respond to messages in character, solve puzzles, and engage in
  detective-style conversations.
</AiPrompt>

### Timed Automation examples

**Daily Linear task summary**

<AiPrompt>
  Send me an email every morning summarizing my new tasks from Linear. Include
  task priorities, due dates, and project context to help me plan my day.
</AiPrompt>

**Email digest automation**

<AiPrompt>
  Send me an email every 6hrs with a summary of all my emails. Group them by
  importance and highlight any urgent messages that need immediate attention.
</AiPrompt>

**Weekly competitor analysis**

<AiPrompt>
  Every week at 8am on Monday, send me a summary of any news about my
  competitors using web search. Focus on product updates, funding news, and
  market developments.
</AiPrompt>

## Next steps

**Quick start ideas:**

* **Slack**: Build a research assistant or codebase Q\&A bot
* **Telegram**: Create a scheduling assistant or entertainment bot
* **Timed**: Set up daily summaries or weekly reports

<CardGroup>
  <Card title="Automation examples" icon="bolt" href="/core-concepts/agent/automation-examples">
    Browse real-world automations connecting Linear, Jira, Gmail, Slack, Discord, HubSpot, and more.
  </Card>

  <Card title="Connectors" icon="plug" href="/replitai/integrations">
    See all available integrations you can use in your automations.
  </Card>
</CardGroup>

<Note>
  Want to be notified when new triggers become available? Follow
  [@Replit](https://twitter.com/replit) for the latest updates on Agents &
  Automations.
</Note>

Learn more about [Replit Agent](/core-concepts/agent) and other [Agent 3 autonomous features](/core-concepts/agent#autonomous-features-new-in-agent-3), or explore additional [AI-powered features](/core-concepts/how-replit-works).


# App Testing
Source: https://docs.replit.com/core-concepts/agent/app-testing

Learn how Agent tests your app in a real browser and automatically fixes issues it finds.

**App Testing is a powerful new feature in Agent 3** that allows Agent to test itself using an actual browser. Agent tests the apps it builds by navigating through your application like a real user would, clicking around and validating functionality. This self-testing capability helps ensure your app works correctly and allows Agent to catch and fix issues automatically.

<Info>
  **New in Agent 3**: App Testing represents a major advancement in Agent's autonomous capabilities, enabling more reliable and higher-quality app development.
</Info>

## How App Testing works

Watch App Testing in action as Agent navigates through your app:

<Frame>
  <video />
</Frame>

When App Testing is enabled, Agent will periodically decide to test itself when it thinks enough has changed to deem it necessary. Agent doesn't test after 100% of user messages, but intelligently determines when testing would be most valuable.

<Note>
  At this time, App Testing is available for Full Stack JavaScript and Streamlit Python web applications.
</Note>

### Key Benefits

* **Extended Autonomy**: Enables Agent to work for longer periods without requiring human intervention
* **Higher Quality**: Produces apps with fewer mistakes by identifying and addressing issues early
* **Cost Efficiency**: Prevents the need for additional debugging sessions by catching problems during development
* **Interactive Review**: Provides video replays and section-by-section navigation for thorough result analysis

### The Testing Process

When Agent decides to test itself, here's what happens:

1. **Browser Preview**: You'll see a browser preview within the Agent pane
2. **Visual Testing**: Watch Agent's cursor as it clicks around your app, testing functionality
3. **Real User Simulation**: Agent navigates through your application just like a real user would, entering mock data when necessary
4. **Automatic Analysis**: Agent analyzes the test results and identifies any issues
5. **Self-Correction**: Agent reports back with a summary of its tests and automatically fixes any issues that crop up

## Key capabilities

Agent intelligently tests your application by navigating through it like a real user would, covering:

* **User interface validation**: Buttons, forms, navigation, and visual elements
* **Functionality verification**: Core features and user workflows
* **Integration testing**: API calls, database interactions, and third-party services
* **Performance and accessibility**: Load times, responsiveness, and accessibility standards

## Usage

App Testing lives in **Advanced settings** inside the Agent settings dropdown in your chat input. Turn it on when you're using Economy or Power mode. Lite mode keeps App Testing off.

<Note>
  App Testing is part of Agent 3's autonomous capabilities. Learn more about [Code Optimizations](/core-concepts/agent/code-optimizations) and other [Agent
  features](/core-concepts/agent).
</Note>

## Take over

Sometimes the Agent will encounter a roadblock during testing that it needs your help with to continue. Most commonly this involves logging in to a user account (e.g. Gmail). In these cases, the Agent will pop up with a button to "Begin take over."

<Frame>
  <img alt="App Testing take over interface showing Skip and Begin take over buttons with instructions for handling errors and CAPTCHAs" />
</Frame>

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:

<Frame>
  <img alt="Interactive video replay interface showing the testing session with navigation controls" />
</Frame>

## 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[\*](#how-app-testing-works) 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

<Tip>
  **Cost-Effective Testing**: Although App Testing adds to your usage costs, it often saves money overall by preventing the need for additional Agent sessions to fix issues that could have been caught during testing.
</Tip>

## Next steps

Ready to use App Testing with your projects?

1. **Start Building**: Create an app with Agent and let testing activate automatically
2. **Review Results**: Examine test reports and implement suggested improvements
3. **Iterate**: Use test feedback to refine your application
4. **Scale Up**: Apply App Testing to larger, more complex projects

Learn more about [Replit Agent](/core-concepts/agent) and other [Agent 3 autonomous features](/core-concepts/agent#autonomous-features-new-in-agent-3).


# Automation examples
Source: https://docs.replit.com/core-concepts/agent/automation-examples

Real-world automation examples built with Replit Agent using connectors like Linear, Jira, Gmail, Slack, Discord, and more.

Replit Agent can build full-stack automations that connect your tools, react to events, and run on a schedule — all from a single prompt. Combined with [Connectors](/replitai/integrations) and [Deployments](/category/replit-deployments), you can replace fragile glue code and expensive no-code platforms with real applications you own and control.

## What you can automate

Automations on Replit go beyond simple triggers. Because Agent builds real applications with full code, you can:

* **React to events** from any service with webhook support (Linear, Jira, GitHub, Confluence, Discord, and more)
* **Run on a schedule** with cron-based automations (daily digests, weekly reports, periodic syncing)
* **Chain multiple services** together in a single automation (Jira event triggers an SMS via Twilio, Google Drive file creates a Notion page)
* **Add AI processing** to any workflow — summarize, classify, extract, or generate content using built-in AI integrations
* **Deploy and forget** — automations run 24/7 on Replit's cloud infrastructure with no servers to manage

The key difference from traditional automation platforms: you get the full source code. You can customize logic, add error handling, extend functionality, and version control your automations like any other software project.

## How automations work

Most automations follow a simple pattern:

1. **Trigger** — An event happens (webhook, cron schedule, or API poll)
2. **Process** — Your app receives the event, applies logic, and optionally calls AI for summarization or analysis
3. **Action** — Your app calls another service to send a message, create a record, or update data

Agent handles the entire build process: setting up webhook endpoints, configuring cron schedules, authenticating with services through [Connectors](/replitai/integrations), and deploying your automation.

<Tip>
  To get started, select **Agents & Automations** from the Replit homepage and describe what you want to automate. See the [getting started guide](/core-concepts/agent/agents-and-automations) for a walkthrough.
</Tip>

## Examples by integration

The following are real automations built and running on Replit. Use these as inspiration or as starting prompts for your own automations.

### Project management

<AccordionGroup>
  <Accordion title="Linear: Email notifications for issue comments" icon="diagram-project">
    When a comment is added to a Linear issue assigned to you, receive an email notification so you never miss feedback on your tasks.

    **Services:** Linear, Email

    <AiPrompt>
      When a comment is added to a Linear issue assigned to me, email me
    </AiPrompt>
  </Accordion>

  <Accordion title="Jira: AI-powered email digest for new issues" icon="jira">
    When an issue is created in your Jira workspace, receive an email with an AI-generated summary highlighting the key details and context.

    **Services:** Jira, Email, AI

    <AiPrompt>
      When an issue is created in my workspace, email me with an AI summary
    </AiPrompt>
  </Accordion>

  <Accordion title="Jira + Twilio: SMS alerts for critical issues" icon="message-sms">
    When a critical Jira issue is created, receive an immediate SMS notification via Twilio so you can respond to urgent issues even when away from your desk.

    **Services:** Jira, Twilio

    <AiPrompt>
      When a critical Jira issue is created, send me an SMS via Twilio
    </AiPrompt>

    <Note>
      This automation uses a Jira webhook pointing to your app's webhook URL. Agent sets up the endpoint — you configure the Jira webhook to point to it.
    </Note>
  </Accordion>

  <Accordion title="Asana + Slack: Due date notifications" icon="list-check">
    When an Asana task is assigned to you with a due date this week, automatically send a Slack notification to keep your team informed.

    **Services:** Asana, Slack

    <AiPrompt>
      When an Asana task is assigned to me with a due date this week, send a Slack notification
    </AiPrompt>
  </Accordion>

  <Accordion title="Todoist + Google Sheets: Productivity logging" icon="table">
    When you complete a Todoist task, automatically log it to a Google Sheet to track your productivity over time.

    **Services:** Todoist, Google Sheets

    <AiPrompt>
      When I complete a Todoist task, log it to my productivity Google Sheet
    </AiPrompt>

    <Note>
      This is a cron-based automation that periodically checks for completed tasks and logs them.
    </Note>
  </Accordion>
</AccordionGroup>

### Communication and notifications

<AccordionGroup>
  <Accordion title="Gmail + Google Calendar: Daily motivation and agenda" icon="calendar">
    Every morning at 7am, receive a Gmail email with a motivational quote and your full agenda for the day — a personal briefing to start your morning.

    **Services:** Gmail, Google Calendar

    <AiPrompt>
      Build me an automation that every day at 7am sends me a Gmail email with a motivational quote and my agenda for the day
    </AiPrompt>
  </Accordion>

  <Accordion title="Confluence + Slack: Page update notifications" icon="file-lines">
    When a Confluence page in a specific space is updated, automatically notify your team on Slack so everyone stays in sync on spec changes.

    **Services:** Confluence, Slack

    <AiPrompt>
      When a Confluence page in "Product Specs" is updated, notify the product team on Slack
    </AiPrompt>
  </Accordion>

  <Accordion title="Discord: Welcome DM for new members" icon="discord">
    When a new member joins your Discord server, automatically send them a welcome DM with onboarding resources and getting-started links.

    **Services:** Discord

    <AiPrompt>
      When a new member joins my Discord server, send them a welcome DM with onboarding resources
    </AiPrompt>
  </Accordion>

  <Accordion title="Spotify + Discord: Playlist sharing" icon="spotify">
    When you create a new Spotify playlist, automatically share it to your Discord server so your community discovers your latest music picks.

    **Services:** Spotify, Discord

    <AiPrompt>
      When I create a new Spotify playlist, share it to my Discord server
    </AiPrompt>
  </Accordion>
</AccordionGroup>

### Documents and file management

<AccordionGroup>
  <Accordion title="Google Drive + Notion: Shared document to notes" icon="google-drive">
    When a document is shared with you in Google Drive, automatically create a Notion page with AI-extracted key points and highlights.

    **Services:** Google Drive, Notion, AI

    <AiPrompt>
      When a document is shared with me in Google Drive, create a Notion page with key points
    </AiPrompt>

    <Note>
      This is a cron-based automation that periodically checks for newly shared documents.
    </Note>
  </Accordion>

  <Accordion title="Box: Email highlights for shared documents" icon="box">
    When a document is shared or a note is created in Box, receive an email with AI-generated key highlights so you can quickly assess whether it needs your attention.

    **Services:** Box, Email, AI

    <AiPrompt>
      When a document is shared or a Note is created in Box, email me the key highlights
    </AiPrompt>
  </Accordion>

  <Accordion title="Dropbox: Email summary for shared files" icon="dropbox">
    When a file is shared with you in Dropbox, receive an email summary with key points extracted by AI.

    **Services:** Dropbox, Email, AI

    <AiPrompt>
      When a file is shared with me in Dropbox, email me a summary with key points
    </AiPrompt>

    <Note>
      This is a cron-based automation that periodically checks for newly shared files.
    </Note>
  </Accordion>
</AccordionGroup>

### CRM and customer support

<AccordionGroup>
  <Accordion title="HubSpot: AI insights for new contacts" icon="hubspot">
    When a new contact is created in HubSpot, receive an email with AI-generated insights about the contact to help you prepare for outreach.

    **Services:** HubSpot, Email, AI

    <AiPrompt>
      When a HubSpot contact is created, email me with AI insights
    </AiPrompt>
  </Accordion>

  <Accordion title="Zendesk: Email summary for assigned tickets" icon="ticket">
    When a Zendesk ticket is assigned to you, receive an email summary with the key details so you can prioritize and respond faster.

    **Services:** Zendesk, Email

    <AiPrompt>
      When a ticket is assigned to me, send me an email summary
    </AiPrompt>
  </Accordion>
</AccordionGroup>

## Building your own automations

These examples are starting points. Because Agent builds real applications, you can combine any services and add custom logic:

* **Multi-step workflows**: Chain three or more services together (e.g., Jira issue created → AI summarizes → Slack notification → Google Sheet log)
* **Conditional logic**: Add filters and conditions (e.g., only notify for high-priority issues, only log tasks from specific projects)
* **AI-enhanced processing**: Add summarization, classification, sentiment analysis, or content generation to any automation
* **Custom schedules**: Run automations every hour, every day at a specific time, weekly, or on any cron schedule

<AiPrompt>
  When a high-priority Jira issue is created in the "Backend" project, summarize it with AI, send a Slack notification to #engineering, and log it to a Google Sheet
</AiPrompt>

## Supported services

Automations work with any service available through [Connectors](/replitai/integrations), including:

<CardGroup>
  <Card title="Project management" icon="diagram-project">
    Linear, Jira, Asana, Todoist
  </Card>

  <Card title="Communication" icon="comments">
    Slack, Discord, Twilio, Gmail, Outlook
  </Card>

  <Card title="Documents" icon="file">
    Google Drive, Google Docs, Notion, Confluence, Box, Dropbox
  </Card>

  <Card title="CRM & support" icon="building">
    HubSpot, Salesforce, Zendesk
  </Card>

  <Card title="Productivity" icon="table">
    Google Sheets, Google Calendar, Spotify
  </Card>

  <Card title="AI providers" icon="wand-magic-sparkles">
    OpenAI, Anthropic, Gemini, Perplexity
  </Card>
</CardGroup>

You can also connect to any service with a public API by using [external integrations](/replitai/integrations#external-integrations) with API keys.

## Next steps

* [Get started with Agents & Automations](/core-concepts/agent/agents-and-automations) — set up your first automation
* [Browse available Connectors](/replitai/integrations) — see all the services you can connect
* [Learn about Deployments](/category/replit-deployments) — understand how automations run 24/7
* [Explore Agent features](/core-concepts/agent) — see what else Agent can build for you


# Efficient Prompting
Source: https://docs.replit.com/core-concepts/agent/best-practices

Learn principles and see examples for writing effective prompts when using Replit Agent.

Effective prompting starts with the outcome you want. Guide [**Agent**](/core-concepts/agent) with clear, simple requests, and you'll go from idea to app faster.

<WistiaEmbed title="10 tips for better vibe coding" />

## Quick examples

See the difference between vague and effective prompts:

<AccordionGroup>
  <Accordion title="Fixing code" icon="bug">
    **Vague:** "Fix my code."

    **Effective:** "The sign-in form fails even with the right password. Fix the login flow."

    Start with the broken outcome. Then add the error or file if Agent needs more context.
  </Accordion>

  <Accordion title="Building features" icon="hammer">
    **Vague:** "Make a website."

    **Effective:** "Build a simple portfolio site with Home, About, and Contact pages."

    Focus on the result you want, plus the few details that matter most.
  </Accordion>

  <Accordion title="Performance improvements" icon="gauge-high">
    **Vague:** "Don't make it slow."

    **Effective:** "Make the dashboard load faster when there are lots of orders."

    Describe the improvement you want. Let Agent choose the implementation unless you have a strong preference.
  </Accordion>

  <Accordion title="UI changes" icon="paintbrush">
    **Vague:** "Add animation."

    **Effective:** "Add a subtle fade-in to the hero image when the page loads."

    Name the part of the app and the effect you want.
  </Accordion>

  <Accordion title="Complex systems" icon="server">
    **Vague:** "Build the backend."

    **Effective:** "Add sign-in, profiles, and a way for people to save their progress."

    Ask for the product outcome first. Add technical details only if they are important.
  </Accordion>
</AccordionGroup>

## Core principles

<Frame>
  <img alt="Ten tips for effective prompting with Replit Agent" />
</Frame>

### Plan first

<Tip>Before you prompt, decide what success looks like. A simple plan leads to better prompts.</Tip>

Write down the main outcome, then the next few milestones.

**Instead of:** "Build a task manager app."

**Try:** "Build a simple task manager where I can add, complete, and delete tasks."

Then use follow-up prompts to refine it.

### Build incrementally

[**Checkpoints**](/core-concepts/agent/checkpoints-and-rollbacks) happen automatically as Agent works. If something breaks, you can roll back and try a different approach.

**Instead of:** "Build a complete e-commerce platform."

**Try:** "Start with a simple online store with sign-in and product pages." Then add cart, checkout, and admin tools in follow-up prompts.

### Be specific

Say what you want to happen and include the details that change the result.

**Instead of:** "Add a contact form."

**Try:** "Add a contact page with name, email, and message fields. Send submissions to my email."

### Use positive language

State what you *want*, not what to avoid.

**Instead of:** "Don't make the user profile page confusing."

**Try:** "Make the profile page clean and easy to scan. Show the name, email, join date, and an Edit profile button."

### Keep it simple

Use short, direct language. Add implementation details only when they matter.

**Instead of:** "Implement the necessary server-side infrastructure to facilitate the dynamic generation and retrieval of user-generated content artifacts."

**Try:** "Let people write and publish blog posts."

## Working with context

### Provide relevant files

Share only the files or references Agent needs.

**Instead of:** (Attaching everything) "Implement the user profile page based on our design system."

**Try:** "Create the user profile page and match this mockup: \[attach `profile_mockup.jpg`]. Use the colors from our design doc: \[URL]."

<Tip>Start a new chat when switching to unrelated tasks. This prevents confusion from accumulated context.</Tip>

### Show examples

Reduce ambiguity with examples, screenshots, or sample data.

**Instead of:** "Make the product cards look better."

**Try:** "Make the product cards look like this screenshot: image, name, price, and an Add to cart button."

## Debugging effectively

When something breaks, include:

* The **exact** error message
* Relevant code snippets
* File names where the error occurs
* What you were trying to achieve
* Steps you've already tried

**Instead of:** "My login page is broken."

**Try:** "The login page shows 'User not found' even with valid credentials. It happens on `/login`. Please fix it."

## Ask for guidance

<Tip>Switch to Plan mode to explore options before building. Ask Agent about libraries, approaches, and trade-offs.</Tip>

**Instead of:** "Add payments."

**Try:** "What's the simplest way to add credit card payments to my app on Replit?"

## Iterate on your prompts

Your first prompt might not be perfect. If the result isn't right:

* Add more detail
* Provide an example
* Simplify the instruction
* Try a different way of explaining

**Initial:** "Add a header to my site."

**Refined:** "Create a sticky header component with the site logo on the left and navigation links (Home, About, Contact) on the right."

## Summary

Effective prompting comes down to:

* **Planning** before you prompt
* **Building** incrementally — checkpoints happen automatically as Agent works
* **Describing outcomes** clearly
* **Providing context** through examples and relevant files
* **Iterating** when results aren't quite right

Keep prompts short, outcome-focused, and easy to follow, and you'll build faster with Agent.


# Checkpoints and Rollbacks
Source: https://docs.replit.com/core-concepts/agent/checkpoints-and-rollbacks

Learn how checkpoints automatically save your work and how rollbacks let you undo changes.

With Replit, you never have to worry about losing your work.

Replit's checkpoint and rollback system provides comprehensive version control and state management for your entire development environment.

When you use Replit Agent, checkpoints automatically capture your complete project state. This includes not just your code changes, but workspace contents, AI conversation context, and connected databases.

## What are checkpoints?

A **checkpoint** is a complete snapshot of your Replit App state created automatically by Agent at key development milestones. Unlike traditional version control that only tracks code changes, Replit checkpoints capture your entire development context.

Think of checkpoints as save points in a video game - you can always go back to a working version of your app.

<Frame>
  <img alt="Agent checkpoint interface showing rollback options" />
</Frame>

### 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
* **Environment configuration**: Runtime settings and publishing configurations
* **Agent memory**: The AI's understanding of your project architecture, preferences, and patterns
* **Database contents**: The data and schema of your database at the time of checkpoint creation

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.

<Frame>
  <img alt="Checkpoint rollback interface showing rollback options" />
</Frame>

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 your entire development environment

### Rolling back

When you roll back to a previous checkpoint, your project returns to that earlier state, including:

1. **Complete workspace state**: All files in your workspace return to their exact state at the selected checkpoint
2. **AI conversation context**: Agent conversations are restored to the point of the checkpoint, maintaining context continuity
3. **Project configuration**: Dependencies, packages, and runtime configurations
4. **Development environment**: Tool configurations and workspace settings
5. **Database contents (optional)**: When selected, your database will be restored to the state it was at the time of the checkpoint

<Info>
  By default, rollbacks do not change your database. To include your development database in a rollback, select "Database" in "Additional rollback options."

  Note that restoring your **[production database](/cloud-services/storage-and-databases/production-databases)** is not performed automatically through this rollback feature.
  To learn how to restore your production database to an earlier moment in time, see [the documentation for how to perform a point-in-time restore](/cloud-services/storage-and-databases/production-databases/#point-in-time-restore).
</Info>

<Warning>
  When you use the rollback feature, you restore the Replit App to a previous state. This removes all changes made after that point, including code edits. Database changes are also reverted if you choose to restore your database.
</Warning>

### Rolling forward

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.

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 navigate freely through your project's timeline without losing work.

To roll forward, access the history view in the Agent tab by clicking the history icon <img alt="history icon" />, then select a checkpoint that occurs after your current position.

<Info>
  Rolling forward is only possible if you have checkpoints ahead of your current position in the timeline. Once you make new changes after a rollback, those future checkpoints become part of an alternate branch of history.
</Info>

This bidirectional navigation gives you complete control over your project's timeline, ensuring your work is always recoverable.

## Checkpoint creation

Checkpoints are created automatically by Replit's AI tools at strategic moments during development.

### Agent checkpoints

[Replit Agent](/core-concepts/agent) creates checkpoints when:

* **Feature completion**: After successfully implementing a requested feature or functionality
* **Major milestones**: When significant progress is made on complex tasks
* **Stable states**: After testing and validation of implemented changes
* **Error recovery**: Before attempting fixes for critical issues

### Checkpoint characteristics

Every checkpoint includes:

* **AI-generated descriptions**: Clear, descriptive summaries of what was accomplished
* **Timestamp information**: Precise creation time for easy identification
* **Change scope**: Indication of files, features, or systems modified
* **Billing information**: For Agent, transparent cost tracking per checkpoint

## Using checkpoints and rollbacks

### Finding checkpoints

Checkpoints appear in multiple locations throughout your Replit workspace:

**Agent tab**: View all Agent-created checkpoints with descriptions and rollback options
**Git pane**: See checkpoints as Git commits with full version control integration
**History view**: In Agent chat, click the history icon <img alt="history icon" /> to access a complete timeline of all checkpoints and their progression

### Performing rollbacks

The rollback process varies slightly depending on where you initiate it:

#### From Agent tab

<Steps>
  <Step title="Navigate to Agent">
    Open the **Agent** tab in your workspace to view all Agent-created checkpoints.
  </Step>

  <Step title="Select checkpoint">
    Locate the checkpoint you want to restore and select **Rollback to here**.
  </Step>

  <Step title="Confirm rollback">
    Review the rollback warning and confirm to restore your app to the selected state.
  </Step>

  <Step title="Verify restoration">
    Check that your workspace, database, and AI context match the restored checkpoint state.
  </Step>
</Steps>

### Best practices

**Use checkpoints strategically**:

* Test your app after each major checkpoint to ensure stability
* Create manual Git commits for long-term version tracking alongside automatic checkpoints
* Review checkpoint descriptions to understand what changed

**Rollback considerations**:

* Always verify the scope of changes before rolling back
* Consider the impact on your database and external integrations
* Communicate rollbacks to collaborators to maintain team awareness

**Iterative development**:

* Build incrementally to take advantage of frequent checkpoints
* Use rollbacks to explore different implementation approaches safely
* Leverage AI context preservation to continue conversations after rollbacks

## Integration with version control

Checkpoints work seamlessly with Replit's broader version control ecosystem:

### Git integration

* **Git commit generation**: Each checkpoint creates a corresponding Git commit
* **Branch compatibility**: Checkpoints respect branch structure and merging workflows
* **Remote sync**: GitHub integration maintains checkpoint synchronization
* **Command line access**: Full Git functionality remains available alongside checkpoints

### Collaboration features

* **Team visibility**: Checkpoints are visible to all project collaborators
* **Merge conflict prevention**: Checkpoint timing reduces likelihood of conflicts
* **Shared context**: AI conversation context helps team members understand changes
* **Real-time updates**: Collaborators see checkpoint creation in real-time

## Advanced features

### Checkpoint previews

Some interfaces support checkpoint preview functionality:

* **Visual comparison**: See your app's appearance at different checkpoint states
* **Non-destructive exploration**: Preview without actually rolling back
* **Progress tracking**: Understand how your app evolved over time
* **Iteration comparison**: Compare different implementation approaches

### Cross-session rollbacks

For advanced builders and team administrators:

* **Extended history**: Access checkpoints across multiple development sessions
* **Administrative control**: Team admins can perform rollbacks across user sessions
* **Audit trails**: Complete history of checkpoint creation and rollback actions

## Use cases

### Experimental development

Checkpoints enable fearless experimentation:

* Try new features knowing you can easily revert
* Test different architectural approaches
* Explore alternative UI designs or user flows
* Implement complex integrations with safety nets

### Debugging and recovery

When issues arise, checkpoints provide reliable recovery:

* Roll back to working states when bugs are introduced
* Isolate problems by comparing checkpoint states
* Restore database integrity after data corruption
* Recover from accidental deletions or modifications

### Learning and iteration

Checkpoints support educational development:

* Compare different implementation strategies
* Learn from AI decision-making process through checkpoint progression
* Build understanding by exploring how features evolved
* Practice new techniques with rollback safety

## Next steps

To learn more about related Replit features, explore:

* [Replit Agent](/core-concepts/agent): Learn about AI-powered app development and checkpoint creation
* [Agent modes](/core-concepts/agent/agent-modes): Discover Lite, Economy, Power, and Turbo for targeted or larger builds
* [Version Control](/core-concepts/workspace/version-control): Understand Git integration and broader version control options
* [File History](/core-concepts/workspace/version-control/file-history): Explore granular file-level change tracking
* [Effective Prompting](/tutorials/effective-prompting): Master techniques for checkpoint-driven development


# Code Optimizations
Source: https://docs.replit.com/core-concepts/agent/code-optimizations

Learn how to control whether Agent reviews and simplifies its own code after building.

**Code Optimizations** (formerly Autonomy Level) is an on/off setting in **Advanced settings** within the Agent settings dropdown. When **on**, Agent reviews its own code and simplifies future work—improving accuracy and saving costs by avoiding mistakes. When **off**, you get minimal or no AI code review and maximum hands-on control. Available on [paid plans](https://replit.com/pricing).

We recommend turning Code Optimizations **on** for most projects to get better code quality and fewer costly rework cycles.

## Usage

Access Code Optimizations through the Agent settings dropdown while working on any project. The setting applies to your current conversation, affects how Agent approaches subsequent tasks, and is available when you're using Economy or Power mode.

<Accordion title="How to access Code Optimizations">
  1. Open Agent in your project workspace
  2. Open the Agent settings dropdown in the chat input
  3. Expand **Advanced settings** and locate **Code Optimizations**
  4. Turn it **on** or **off** based on your preference
</Accordion>

<WistiaEmbed title="Code Optimizations overview" />

### When to use it

* **On**: Recommended for most work. Agent reviews its own code, catches mistakes, and can reduce rework. Slightly longer per task but better quality.
* **Off**: Use when you want the fastest, most hands-on experience—e.g. quick edits or when you prefer to review every change yourself.

Learn more about other [Agent features](/core-concepts/agent) and [App Testing](/core-concepts/agent/app-testing).


# General Agent
Source: https://docs.replit.com/core-concepts/agent/general-agent

Learn how General Agent lets you work with any framework, create any output type, and read and write to connected services.

## What is General Agent?

General Agent is the most flexible way to work with Replit Agent. You don't need to pre-select an artifact type or commit to building something specific. Just start chatting — create a CSV, generate a PDF, research a topic, or build a full app when you're ready.

Key concepts:

* **No pre-selection**: Start working without choosing an artifact type upfront
* **Any output**: Generate files (CSV, PDF, docs), do research, or build apps
* **Connectors**: Read and write to external services like BigQuery, Linear, Slack, Notion, Amplitude, Segment, Hex, and more
* **Progressive disclosure**: Start with a lightweight chat and escalate to a full app build naturally

## How to access General Agent

You can access General Agent in several ways:

1. **Select "General" before writing a prompt** on the Replit home page
2. **Open any existing project** and start chatting with Agent directly
3. **Choose any [Developer Framework](https://replit.com/templates)** — all Developer Frameworks automatically include General Agent
4. **[Import](/core-concepts/workspace/app-setup/import) from GitHub** — Projects imported from GitHub automatically get General Agent

## How to use General Agent

### Just start chatting

Open a project and start talking. You don't need to commit to building anything specific — Agent works within your current project context and can handle whatever you throw at it.

**Example prompts:**

* "Summarize the key points from this document"
* "Create a CSV of the top 100 companies by revenue"
* "What are my top five Linear tickets?"
* "Set up a Vue.js project with TypeScript"

Agent can work with files created during the session, generate single-file outputs, and execute code as part of its reasoning — all before you decide to build anything.

### Connecting external services

Connect your tools so Agent can read and write data directly:

1. Go to **Connectors** in your project settings
2. Connect your services (BigQuery, Linear, Slack, Notion, Amplitude, Segment, Hex, and more)
3. Ask Agent to read or write data through them

**Example prompts with connectors:**

* "What are the open tickets in Linear?"
* "Summarize today's Slack messages in #engineering"
* "Pull last month's sales data from BigQuery"
* "Show me upcoming events from my calendar"
* "Create a new ticket in Linear for the onboarding bug"
* "Send a summary to #engineering in Slack"

### From chat to full app

When you're ready to build, just say so. Agent transitions from lightweight chat into building your app seamlessly — no need to start over or switch contexts.

* "Turn this into a web app"
* "Build an app based on this data"
* "Create a dashboard for these metrics"
* "Set up a Rust CLI tool"

You can start casually — research a topic, generate a report, explore some data — and escalate to a full application build when the moment is right.

## What you can build

* **Knowledge work**: Research, summarize, and analyze without building an app
* **Single-file outputs**: CSVs, PDFs, documents, data exports, and formatted reports
* **Data applications**: Query connected services and visualize results in dashboards
* **Any framework or language**: Angular, Vue, Svelte, Rust, Go, C#, Python tkinter, Godot games, CLI tools, and more
* **Full-stack apps**: When you're ready, build a complete application from your chat context

## What to expect

General Agent offers more power and flexibility, which comes with some variability:

* **Single-shot setup**: Sometimes Agent configures everything in one go
* **Iterative collaboration**: Complex setups may require multiple rounds of refinement
* **Technology limitations**: Some technologies may not be fully supported in the Nix environment

<Note>
  Unlike standard Agent with pre-configured environments, General Agent sets up its own environment and run commands based on your request. You may need to ask it to configure publishing when you're ready to deploy.
</Note>

## Frequently asked questions

<Accordion title="Can the agent see my other projects?">
  No. Each chat is contained within a single project. You can't have Project A and Project B talk to each other.
</Accordion>

<Accordion title="Why can't it access my external tool yet?">
  You need to connect your services first through Connectors. Once connected, Agent can read and write to them, but it doesn't have access by default.
</Accordion>

<Accordion title="What connectors are available?">
  Currently supported: BigQuery, Linear, Slack, Notion, Amplitude, Segment, Hex, and more. Additional connectors are being added regularly.
</Accordion>

<Accordion title="Do I need connectors to use General Agent?">
  No. Connectors are optional. You can use General Agent for knowledge work, file generation, and building apps without any external connections.
</Accordion>

## Availability

| Capability      | Core | Pro |
| --------------- | ---- | --- |
| General Agent   | ✅    | ✅   |
| Any framework   | ✅    | ✅   |
| Knowledge work  | ✅    | ✅   |
| File generation | ✅    | ✅   |
| Connectors      | ✅    | ✅   |
| Build apps      | ✅    | ✅   |

General Agent is available to all users.


# Image Generation
Source: https://docs.replit.com/core-concepts/agent/image-generation

Learn how to generate AI images and add them to your projects with Agent.

Create visual content for your applications using Agent's image generation <img alt="Image generation icon" /> 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.

<Frame>
  <img alt="Agent generating AI images for app development" />
</Frame>

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. Open the <img alt="Agent settings icon" /> **Agent settings** dropdown in the bottom right of the chat input
3. Enable <img alt="Image generation icon" /> **Image generation**
4. Chat with Agent and ask it to generate images for your project

Agent automatically determines when to use image generation based on your requests. Describe the visual content you need, and Agent creates custom images that match your specifications.

### When Agent uses image generation

Agent triggers image generation when you request visual content for your projects:

| Use Case                | Example Prompt                                                |
| ----------------------- | ------------------------------------------------------------- |
| **App icons and logos** | "Generate a modern logo for my fitness tracking app"          |
| **Website backgrounds** | "Create a subtle gradient background for my portfolio site"   |
| **Game assets**         | "Generate pixel art sprites for my platformer game"           |
| **UI illustrations**    | "Create an illustration for my app's empty state screen"      |
| **Marketing visuals**   | "Generate a hero image for my landing page"                   |
| **Product mockups**     | "Create mockup images of my app running on different devices" |

### Best practices for image generation

Follow these guidelines to get the best results from Agent's image generation:

**Be specific and descriptive**

* Include details about style, colors, composition, and mood
* Specify dimensions or aspect ratios when relevant
* Mention the intended use (icon, background, illustration, etc.)

**Iterate and refine**

* Start with a basic description and refine based on results
* Ask Agent to modify specific aspects of generated images
* Request variations to explore different creative directions

**Consider your project's style**

* Maintain visual consistency across your app
* Specify style preferences that match your brand or design system
* Ask for images that complement your existing visual elements

### Example prompts

Try these example prompts to get started with image generation:

<AiPrompt>
  Generate a clean, modern icon for my task management app.
  The icon should be circular with a gradient background from blue to purple,
  featuring a simple checkmark symbol in white.
  Make it suitable for use as an app icon.
</AiPrompt>

<AiPrompt>
  Create a hero illustration for my coding tutorial website.
  Show a friendly cartoon character sitting at a computer with code on the screen.
  Use a warm color palette with blues and oranges.
  The style should be approachable and encouraging for beginners.
</AiPrompt>

<AiPrompt>
  Generate a set of pixel art enemies for my retro-style platformer game.
  I need a flying bat, a walking mushroom, and a jumping slime.
  Each should be 32x32 pixels with a limited color palette of 8 colors.
  Make them cute but slightly menacing.
</AiPrompt>

### Project integration

Agent seamlessly integrates generated images into your codebase:

* **Automatic file creation**: Generated images are saved directly to your project files
* **Code updates**: Agent updates your code to reference the new image files
* **Asset organization**: Images are placed in logical directories within your project structure

This streamlined workflow means you can generate and implement visual content without leaving your development environment.

<Note>
  Replit's image generation is powered by [Google's Imagen 4](https://deepmind.google/models/imagen/), a state-of-the-art text-to-image model that excels at creating high-quality, photorealistic images with fine details and improved text rendering capabilities.
</Note>

Learn more about [working with Agent](/core-concepts/agent) or explore other [AI tools](/core-concepts/how-replit-works).


# Message Queue
Source: https://docs.replit.com/core-concepts/agent/message-queue

Learn how to queue follow-up messages for Agent so it handles them in order after finishing its current task.

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.

<Frame>
  <img alt="Message Queue interface showing queued messages in the chat UI" />
</Frame>

## 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)
and file attachments.

<Info>
  Queued messages will only be processed automatically while you have an active
  workspace connected to the Agent (either on desktop or mobile).
</Info>

## Using the Message Queue

### When the Queue appears

The Message Queue appears automatically as a drawer above the chat input when you submit a message
while Agent is working. It closes once all queued messages are processed.

### Managing queued messages

When the queue drawer is open, you can:

* **Edit messages**: Click the edit icon to modify a queued message before it's processed
* **Delete messages**: Remove unwanted tasks from the queue
* **Reorder items**: Drag and drop to change the execution order of queued messages
* **Add more messages**: Continue adding new tasks to the queue via the chat input

<Frame>
  <img alt="Message Queue edit interaction" />
</Frame>

<Frame>
  <img alt="Message Queue reordering interaction" />
</Frame>

### 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).

<Frame>
  <img alt="Agent status bar showing the Pause button for immediate interruption" />
</Frame>

## 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/core-concepts/agent/plan-mode

Learn how to use Plan mode to brainstorm and plan with Agent without changing 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.

<Frame>
  <img alt="Agent chat interface in Plan mode" />
</Frame>

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

<Frame>
  <img alt="Mode selector showing Plan mode and Build mode options" />
</Frame>

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

<Frame>
  <img alt="Generated task list with priorities and dependencies" />
</Frame>

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

<Frame>
  <img alt="Planning phase showing project scope and requirements discussion" />
</Frame>

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

<Frame>
  <img alt="Asking questions to Agent in Plan mode" />
</Frame>

## 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.md
Source: https://docs.replit.com/core-concepts/agent/replit-dot-md

Learn how to use replit.md to customize Agent's behavior, coding style, and project context.

Agent automatically creates this file in your project's root directory using proven best practices. Agent includes its contents in the context to help it understand your preferences, project structure, and coding style.

<Frame>
  <img alt="Agent using replit.md to build a project" />
</Frame>

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

<WistiaEmbed title="Customize how Replit Agent responds" />

When Agent processes your requests, it automatically reads your `replit.md` file and uses its contents to:

* Understand your project's architecture and conventions
* Follow your preferred coding patterns and style
* Use your specified package managers and dependencies

Agent can also update your `replit.md` file as it learns more about your project and makes changes to your application.

<Note>
  You can edit the `replit.md` file to customize Agent's behavior.
</Note>

## Setting up `replit.md`

### Automatic generation

When you create a new project with Agent, it automatically generates a `replit.md` file using proven best practices. This file appears in your project's root directory and includes:

* Basic project information
* Recommended coding patterns
* Common preferences for your project type

### Manual creation

You can create your own `replit.md` file by adding a new file named `replit.md` in your project's root directory. Agent will automatically detect and use this file in future conversations.

<Note>
  `replit.md` must be located in your project's root directory to work properly.
</Note>

### Regenerating `replit.md`

If your `replit.md` file becomes corrupted or you want to start fresh:

1. Delete the existing `replit.md` file from your project root
2. Start a new conversation with Agent
3. Agent will automatically generate a new `replit.md` file based on your current project

## Best practices

### Be specific and clear

Write clear, specific instructions that help Agent understand exactly what you want:

```markdown theme={null}
## Coding Style

- Use TypeScript for all new JavaScript files
- Prefer functional components with hooks over class components
- Use Tailwind CSS for styling, avoid inline styles
- Always include TypeScript types for function parameters and return values
```

For a more detailed guide on prompt formatting, check out the [Anthropic prompt engineering guide](https://docs.anthropic.com/en/docs/build-with-claude/prompt-engineering/use-xml-tags).

### Use examples

Examples help Agent understand your preferences better than abstract descriptions:

````markdown theme={null}
## API Error Handling

When creating API endpoints, always use this error handling pattern:

```javascript
app.get('/api/users', async (req, res) => {
  try {
    const users = await getUsersFromDatabase();
    res.json({ success: true, data: users });
  } catch (error) {
    console.error('Error fetching users:', error);
    res.status(500).json({ 
      success: false, 
      error: 'Failed to fetch users' 
    });
  }
});
````

### Define communication preferences

Tell Agent how you prefer to receive information and updates:

```markdown theme={null}
## Communication Style

- Before implementing changes, explain what you're going to do and why
- Break down complex tasks into clear steps
- Ask for clarification if requirements are unclear
- Provide brief explanations for technical decisions
```

### Specify project context

Help Agent understand your project's purpose and constraints:

```markdown theme={null}
## Project Context

This is a social media app for book lovers where users can:
- Create reading lists and share book recommendations
- Follow other readers and see their updates
- Rate and review books they've read

Target audience: Casual readers aged 25-45
Tech stack: React frontend, Node.js backend, PostgreSQL database
```

## Example `replit.md` configurations

### Web application project

```markdown theme={null}
# MyApp Project Guidelines

## Project Overview
A task management web application built with React and Express.js.

## Technology Preferences
- Frontend: React with TypeScript, Tailwind CSS
- Backend: Express.js with TypeScript
- Database: Neon PostgreSQL with Drizzle ORM
- Package Manager: npm (not yarn or pnpm)

## Coding Standards
- Use functional components with hooks
- Implement proper error boundaries
- Follow REST API conventions for endpoints
- Use descriptive variable and function names

## Communication Style
- Explain your approach before making changes
- Provide code comments for complex logic
- Ask questions if requirements are ambiguous
```

### Data analysis project

```markdown theme={null}
# Data Analysis Project Guidelines

## Project Context
Analyzing customer behavior data to identify trends and insights.

## Technology Preferences
- Python with Streamlit for interactive web applications
- pandas, numpy, and matplotlib for data analysis

## Analysis Standards
- Include clear documentation for all analysis steps
- Create interactive visualizations with Streamlit components
- Validate data quality before analysis
- Export results to CSV format and display in Streamlit tables

## Communication Style
- Explain statistical methods and assumptions
- Provide context for findings and recommendations
- Use clear, non-technical language for business insights
- Create interactive dashboards for stakeholder presentations
```

### API development project

```markdown theme={null}
# API Development Guidelines

## Project Overview
Building a RESTful API for a mobile app backend.

## Technology Stack
- Node.js with Express.js
- MongoDB with Mongoose
- JWT for authentication
- Package manager: npm

## API Standards
- Use semantic HTTP status codes
- Implement proper input validation
- Include rate limiting on public endpoints
- Follow OpenAPI specification for documentation

## Security Requirements
- Validate all user inputs
- Use environment variables for sensitive data
- Implement proper CORS policies
- Include request logging for debugging

## Testing Approach
- Write unit tests for all endpoints
- Include integration tests for critical flows
- Use Jest as the testing framework
```

## Advanced usage

### Dynamic project guidance

Update your `replit.md` file as your project evolves to provide current context:

```markdown theme={null}
## Current Development Phase
The team is currently focused on implementing user authentication.
Priority features:
1. User registration and login
2. Password reset functionality  
3. Email verification

## Recent Decisions
- Switched from local authentication to OAuth with Google
- Added Redux for state management
- Decided to use Material-UI for consistent styling
```

### Integration with external tools

Reference external documentation and tools in your `replit.md`:

```markdown theme={null}
## External Resources
- Design system: Follow the Figma design system at [link]
- API documentation: Reference our internal API docs
- Coding standards: Follow the team style guide in our wiki

## Deployment Process
- Test changes in development environment first
- Use the CI/CD pipeline for staging published apps
- Require code review before production releases
```

## Combining web search with `replit.md`

Agent can perform web searches to find current information, libraries, and solutions. When combined with your `replit.md` file, you get both up-to-date knowledge and project-specific guidance.

### Best practices for web search integration

**Be specific about what you want Agent to research:**

```markdown theme={null}
## Research Preferences
- Always check for the latest versions of dependencies before suggesting updates
- Research current best practices for security implementations
- Look up recent performance optimization techniques for our tech stack
```

**Guide Agent on how to apply external knowledge:**

```markdown theme={null}
## External Research Guidelines
- When suggesting new libraries, ensure compatibility with our existing stack
- Adapt external examples to match our coding standards and project structure  
- Verify that suggested solutions work with our publishing environment
```

**Example request that leverages both:**
"Research the latest React 18 performance optimization techniques and implement them following the component patterns defined in `replit.md`"

This approach gives you solutions that are both current and tailored to your specific project needs.

## Limitations

### File size and content limits

While there's no strict character limit for `replit.md`, extremely large files may not be fully processed. Keep your `replit.md` focused and concise for best results.

### Root directory requirement

`replit.md` must exist in your project's root directory. Agent won't automatically detect files in subdirectories.

### Context scope

`replit.md` provides context for Agent conversations but doesn't automatically apply to other AI tools.

## Next steps

Ready to customize Agent for your project?

1. **Start simple**: Create a basic `replit.md` with your key preferences
2. **Iterate and improve**: Update your `replit.md` as you work with Agent
3. **Share patterns**: Use successful `replit.md` configurations across similar projects
4. **Monitor effectiveness**: Pay attention to how well Agent follows your guidelines and adjust accordingly

Learn more about [working with Agent](/core-concepts/agent) or explore other [AI tools](/core-concepts/how-replit-works).

**Enterprise**: Pre-configure `replit.md` in [custom templates](/teams/custom-templates) to give every builder in your organization a consistent starting context. For design-specific guidance, see [setting up a design system](/teams/custom-design-system).


# Agent Skills
Source: https://docs.replit.com/core-concepts/agent/skills

Learn how to extend Agent with reusable skills that automate tasks and add specialized functionality.

Teach Agent how you want to build. Skills let you share your preferences, patterns, and expertise with Agent—whether you're starting a new project or building on existing work.

<WistiaEmbed title="Agent Skills overview" />

<Frame>
  <img alt="Agent Skills pane showing installed skills" />
</Frame>

## What are skills

Skills teach Agent how you work. As you build together, you create useful context about your project, but that context normally disappears when the chat ends. Skills preserve what you've learned so Agent can apply it consistently. Tasks that were previously inconsistent become more reliable, producing better results each time.

For example, a design system skill ensures Agent uses your exact colors and spacing rules. A bug fix skill captures solutions so Agent remembers them for next time.

## When to use skills

You can create skills for anything, from how you structure your code to how you write your docs. Here are some examples to get you started:

| Use Case                        | Example Scenario                                                                                                      |
| ------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| **Design systems**              | Create a skill for your design system so Agent uses consistent colors, spacing, and components                        |
| **New frameworks**              | Add a skill for Remotion when building video features or other specialized libraries                                  |
| **Media creation**              | Teach Agent photography principles for AI-generated images                                                            |
| **Learning how your app works** | After fixing a complex bug together, create a skill that captures what you both learned about your app's architecture |

## Adding skills to your project

Skills become part of your project once they're added to the `/.agents/skills` directory. You can create skills naturally through conversation with Agent, install pre-built skills from the community, or write custom skills for specialized needs.

### Create with Agent

The most natural way to create skills is through conversation. After solving a problem together, ask Agent to capture what it learned. The skill writes itself from shared context.

```
Create a skill for my design system using these color palettes and spacing rules
```

You can also ask Agent to research and create skills for new domains:

```
Research best practices for video generation with Remotion and create a skill
```

### Upload and manage custom skills

You can upload and manage skills directly through the Workspace. Open the Skills pane to view installed skills, upload custom skill files, or remove skills you no longer need.

<Frame>
  <img alt="Agent Skills pane showing installed skills" />
</Frame>

For advanced use cases, write your own skills following the [Agent Skills specification](https://agentskills.io/specification). This gives you complete control over Agent's behavior for specific scenarios.

### Install from the skills directory

The [Agent Skills directory](https://skills.sh) offers community-contributed skills you can install directly. Replit supports installation via the [npx skills CLI](https://github.com/vercel-labs/skills):

```bash theme={null}
npx skills <skill> -a replit
```

This installs the skill into your project's `/.agents/skills` directory.

<Warning>
  Skills contain arbitrary content and code. Always review the source before
  installing a skill from external sources.
</Warning>

## Technical reference

Skills are stored in your project's `/.agents/skills` directory. Each skill follows the [Agent Skills specification](https://agentskills.io/specification), which defines the structure and format for skill files.

Agent reads all skills in this directory and considers them when working on tasks. Skills persist in your project, so they remain available across Agent sessions and can be committed to version control for team sharing.

Skills can be scoped to different levels:

* **Project-level**: Specific to one codebase, versioned with your code in `/.agents/skills`
* **User-level**: Your personal toolkit that follows you across projects
* **Enterprise**: Company-wide standards baked into [custom templates](/teams/custom-templates) that are pinned to the Agent input box for your organization

<Note>
  Skills work best when they capture specific, repeatable patterns rather than
  general guidance. Focus on concrete workflows, established conventions, and
  proven solutions from your project.
</Note>

## Working with other AI coding tools

<Accordion title="Import skills from other AI coding tools">
  If you work across multiple AI coding tools, [rulesync](https://github.com/dyoshikawa/rulesync) has Replit support and helps you maintain consistent configurations.

  You can import skills from other AI coding assistants:

  ```bash theme={null}
  npx rulesync init
  npx rulesync import --targets claudecode --features skills
  npx rulesync generate --targets replit --features skills
  ```

  This allows you to maintain a single set of skills that work across different development environments.
</Accordion>

## Next steps

Skills complement Agent's core capabilities by adding project-specific knowledge:

* Learn more about [Agent](/core-concepts/agent) and how it builds applications
* Explore other [AI-powered features](/core-concepts/how-replit-works) available in Replit
* Review the [Agent Skills specification](https://agentskills.io/specification) to understand skill structure
* For examples of custom skills, see [Anthropic's skills repository](https://github.com/anthropics/skills)
* Browse community skills at [skills.sh](https://skills.sh)
* **Enterprise**: Learn how to include skills in [custom templates](/teams/custom-templates) and [design systems](/teams/custom-design-system) for your organization


# Build in Parallel
Source: https://docs.replit.com/core-concepts/agent/task-system

Agent breaks work into tasks you can review, run in the background, and apply back to your main version.

## What is the task system?

A **task** is a unit of work that Agent can plan and execute. Each task runs in its own **thread** — a separate conversation where Agent works independently. You can follow along, give feedback, or let it run in the background.

The task system is how Agent breaks work into manageable chunks. When you describe what you want to build, Agent splits your request into discrete tasks and organizes them on a board with columns: **Drafts**, **Active**, **Ready**, and **Done**.

<Frame>
  <img alt="Task board showing tasks organized in Drafts, Active, Ready, and Done columns" />
</Frame>

Each task moves from left to right as it progresses, so you can see at a glance what's planned, what Agent is working on, what's ready for your review, and what's finished. Background tasks queue automatically based on your plan, so work keeps moving without crowding your main thread.

When a task is ready, you review the changes and apply them back to your main version — or dismiss them if they're not what you wanted.

## How background tasks work

<Steps>
  <Step title="Plan your tasks">
    Start a conversation in the main thread, or create a new thread and plan there. Agent reviews your project, identifies what would have the most impact, and writes up a detailed plan for each task — including what it will do and what "done" looks like.

    <Frame>
      <img alt="Describing what to build in the main thread, with Agent proposing and running tasks" />
    </Frame>
  </Step>

  <Step title="Review and accept">
    Agent proposes a set of tasks — each with a title, description, and a detailed plan you can inspect with **View plan**. Review the full list, then choose:

    * **Accept tasks** — Start all tasks and send them to the background
    * **Revise plan** — Ask Agent to adjust the tasks before starting

    <Frame>
      <img alt="Task plans created dialog showing four proposed tasks with Accept tasks and Revise plan options" />
    </Frame>
  </Step>

  <Step title="Tasks start running">
    Once accepted, tasks start running in isolated copies of your project. Core runs 1 background task at a time, while Pro supports up to 10 concurrent background tasks. Your main version stays untouched until you choose to apply changes. You can track progress in two ways:

    * **Thread view** — Each task runs in its own thread with a live status indicator, so you can follow along or jump into any task's conversation

    <Frame>
      <img alt="Thread view showing multiple tasks running in parallel with status indicators" />
    </Frame>

    * **Board view** — A column-based board showing all tasks organized by status: **Drafts**, **Active**, **Ready**, and **Done**

    <Frame>
      <img alt="Board view showing tasks organized in Drafts, Active, Ready, and Done columns" />
    </Frame>
  </Step>

  <Step title="Review and apply">
    When a task finishes, Agent shows you what it did — the work log, test results, and a live preview of the changes. You decide what happens next:

    * **Apply changes to main version** — Merge the task's work into your project
    * **Dismiss** — Discard the changes if they're not what you wanted

    Agent handles conflict resolution automatically when applying changes from multiple tasks.

    <Frame>
      <img alt="Task review screen showing Agent's work log, test results, and Apply changes button" />
    </Frame>
  </Step>
</Steps>

### Task states

Every task goes through a series of stages: from an idea to part of your app. Each stage has its own icon so you can tell what's happening at a glance.

<div>
  <div>
    <TaskCard title="Add gift flow for family and friends" description="Let parents create a story for someone else's child and send it as a gift." />

    <span><strong>Draft</strong>: Agent has proposed this task. It has a plan ready for your review.</span>
  </div>

  <div>
    <TaskCard title="Story continuations — sequels" description="Adding a 'Continue the Adventure' button generates a sequel that picks up where the last one left off." />

    <span><strong>Active</strong>: Agent is building this task right now. It runs in its own copy of your project so your main version stays safe.</span>
  </div>

  <div>
    <TaskCard title="Add gift flow for family and friends" description="Let parents create a story for someone else's child and send it as a gift." />

    <span><strong>Queued</strong>: This task is approved but waiting for a slot to open up before it can start building.</span>
  </div>

  <div>
    <TaskCard title="Bedtime mode with dark theme" description="A dedicated bedtime mode with a warm-toned dark theme and ambient sounds." />

    <span><strong>Ready</strong>: This task is complete. You can review the changes and apply them to your main version whenever you're ready.</span>
  </div>

  <div>
    <TaskCard title="Shareable links with OG previews" description="Adding public shareable links is the single biggest growth lever." />

    <span><strong>Applying</strong>: The changes from this task are being applied to your main version right now.</span>
  </div>

  <div>
    <TaskCard title="Read-aloud with word highlighting" description="Text-to-speech lets kids enjoy stories independently while following along with highlighted words." />

    <span><strong>Done</strong>: This task is finished and its changes are part of your main version.</span>
  </div>
</div>

### The task board

All your tasks live on a board organized into columns. Here's how the board looks as tasks move through each stage.

#### Drafts and Active

When you describe what you want to build, Agent creates **draft** tasks — each with a title, description, and a step-by-step plan. You can review the plan, ask Agent to adjust it, or accept it as-is.

Once you accept, tasks move to the **Active** column and Agent starts building them. Each task runs in its own isolated copy of your project, so nothing changes in your main version until you say so.

Some tasks depend on others — for example, a task that builds a dashboard needs the database to be set up first. These tasks wait as **queued** until their dependencies finish. Tasks also queue if you've reached your plan's limit for active background tasks.

<KanbanColumns />

#### Ready and Done

When a task finishes building, it moves to **Ready**. This means the work is complete, but nothing has changed in your main version yet — you're in control.

You can apply changes in two ways:

* **From the thread** — Open the task's thread and you'll see a review prompt like the one below. Press **Apply changes to main version** to bring the work into your project, or **Dismiss** to discard it.

<TaskReviewDrawer />

* **From the board** — Click the three-dot menu on any Ready task card to see your options, then press **Apply changes**

Once applied, the task card moves to the **Done** column.

<KanbanColumns />

Agent handles conflicts automatically when you apply changes from multiple tasks. If something doesn't look right, you can always ask Agent to fix it.

## What you can build

The task system works for any project. Here are a few patterns where it shines:

* **Ship large features in smaller pieces** — Split authentication, a dashboard, and an API layer into separate tasks so Agent can work through them cleanly
* **Plan complex projects** — Break a large feature into well-scoped tasks with dependencies, then execute with confidence
* **Compare different design directions** — Use separate tasks to try multiple UI approaches, then pick the best result

## Frequently asked questions

<Accordion title="Do I need to change how I build?">
  No. The main thread works exactly the same. Agent automatically creates tasks behind the scenes when it helps. You can also use [Plan mode](/core-concepts/agent/plan-mode) to see and manage tasks explicitly.
</Accordion>

<Accordion title="Why are my tasks running one at a time?">
  Core runs 1 background task at a time. Pro supports up to 10 concurrent background tasks. Once you hit your plan's limit, additional tasks queue and start as slots open up.
</Accordion>

<Accordion title="How does Agent handle conflicts when applying background tasks?">
  Agent uses AI-assisted conflict resolution. It understands what each task was trying to accomplish and applies the changes intelligently. If something looks off, you can ask Agent to fix it in the thread.
</Accordion>

<Accordion title="Can tasks depend on each other?">
  Yes. Agent automatically detects dependencies — for example, a task that builds a dashboard depends on the task that creates the database schema. Dependent tasks wait until their prerequisites complete.
</Accordion>

## Availability

| Capability              | Core | Pro |
| ----------------------- | ---- | --- |
| Task planning           | ✅    | ✅   |
| Background tasks        | ✅    | ✅   |
| Active background tasks | 1    | 10  |


# Web Search
Source: https://docs.replit.com/core-concepts/agent/web-search

Learn how Agent searches the web to build apps with up-to-date information and the latest documentation.

Build applications with current, real-world data using Agent's Web Search <img alt="Web Search icon" /> 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.

<Frame>
  <img alt="Agent performing Web Search to gather current information for app development" />
</Frame>

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 <img alt="Agent settings icon" />
3. Toggle <img alt="Web Search icon" /> **Web Search** on
4. Send your prompt

Agent automatically determines when to use Web Search based on your requests. Describe what you want to build, and Agent searches for current information when necessary.

### When Agent uses Web Search <img alt="Web Search icon" />

<Frame>
  <img alt="Agent interface showing Web Search results and source citations for app development" />
</Frame>

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

<AiPrompt>
  Build a React app that lets people apply filters to photos. Research the best image processing libraries for React and implement blur, sharpen, and vintage effects
</AiPrompt>

Agent searches for current image processing libraries, compares their features and performance, then builds the app using the most suitable tools.

<Tip>
  Web Search works best with specific, detailed requests. For technology discovery, mention your specific requirements
</Tip>

**Latest framework features**

<AiPrompt>
  Do research to understand the latest security best practices for authentication and authorization. Implement those best practices in my app.
</AiPrompt>

Agent researches the latest security best practices for authentication and authorization and implements them in your app.

**Modern API integration**

<AiPrompt>
  Build a weather app that uses the most reliable and feature-rich weather API available
</AiPrompt>

Agent researches current weather APIs, compares their features, reliability, and pricing to select the best option for your needs.

**Startup showcase website**

<AiPrompt>
  Build a website showcasing the latest Y Combinator batch startups
</AiPrompt>

Agent searches for current YC batch information and creates a site with real startup data, logos, and descriptions.

**Personal portfolio site**

<AiPrompt>
  Create a personal website for Michele Catasta, a former researcher at Stanford and President of Replit.
</AiPrompt>

Agent searches for professional information and creates an authentic portfolio with relevant experience and background.

**Travel planning app**

<AiPrompt>
  Build a trip planner for Japan with current prices and recommendations
</AiPrompt>

Agent finds up-to-date travel costs, attractions, and planning information to create a realistic travel application.

**Financial comparison dashboard**

<AiPrompt>
  Create a dashboard comparing the latest quarterly earnings of major cloud providers
</AiPrompt>

Agent searches for recent financial reports and builds a dashboard with current, accurate data visualizations.

<Warning>
  Always verify information from Web Search results, especially for critical applications. While Agent searches reputable sources, confirm important details for production applications.
</Warning>

## Next steps

Combine Web Search with other Agent features for maximum impact:

* Learn about [Agent](/core-concepts/agent) capabilities for building apps
* Explore [Replit AI tools](/core-concepts/how-replit-works) for more development features


# How Replit works
Source: https://docs.replit.com/core-concepts/how-replit-works

Learn how Replit's AI tools help you turn ideas into production-ready apps.

Replit is an all-in-one platform for creating your ideas with AI. At the center is **Agent**, an AI development partner that coordinates everything, from helping you design a prototype, to adding features, and launching your application.

## How Replit fits together

<MentalModelDiagram />

* **[Agent](/core-concepts/agent)** orchestrates the entire workflow, from generating code to setting up databases and deploying your app.
* **[Workspace](/core-concepts/workspace)** is your browser-based IDE where you and Agent write, debug, and preview code.
* **[Design Canvas](/replitai/canvas)** is a visual editing surface for designing and refining your projects: edit layouts, styles, and content directly.
* **[Projects](/replitai/projects)** — your project is everything you build — web apps, mobile apps, slides, videos, and more.
* **[Storage](/category/storage-and-databases)** covers databases (SQL) and object storage (files, images) that Agent provisions automatically.
* **[Integrations](/replitai/integrations)** connect your app to external services like Stripe, APIs, and MCP servers.

## Getting started

The fastest way to experience Replit is to describe what you want to build. Agent takes it from there, setting up your project, writing code, and deploying a live app. Follow the [Create with AI quickstart](/getting-started/quickstarts/ask-ai/) to build your first app in minutes.

## Next steps

<CardGroup>
  <Card title="Agent" href="/core-concepts/agent" icon="robot">
    Build complete apps from natural language descriptions
  </Card>

  <Card title="Workspace" href="/core-concepts/workspace" icon="laptop-code">
    Explore your cloud IDE with real-time preview and debugging
  </Card>

  <Card title="Design Canvas" href="/replitai/canvas" icon="palette">
    Visually design and refine layouts, styles, and content
  </Card>

  <Card title="Projects" href="/replitai/projects" icon="rocket">
    Web apps, mobile apps, slides, videos, and more
  </Card>

  <Card title="Storage" href="/category/storage-and-databases" icon="database">
    Provision databases and object storage for your app
  </Card>

  <Card title="Integrations" href="/replitai/integrations" icon="plug">
    Connect to external APIs, payments, and MCP servers
  </Card>
</CardGroup>


# Workspace
Source: https://docs.replit.com/core-concepts/workspace

Learn what the Workspace is — your home base on Replit where you talk to Agent, see your app take shape, and manage everything.

<Frame>
  <img alt="The Replit Workspace home screen showing the prompt input where you describe what you want to build" />
</Frame>

## What is the Workspace?

The Workspace is your home base on Replit — the environment where you start building, manage your projects, and see your apps come to life. From here, you can describe what you want to build, and [Agent](/core-concepts/agent) takes it from there — writing code, setting up your project, and showing you a live preview in real time.

## Getting started

Type what you want to build into the prompt box. Describe your idea in plain language — "a budget tracker that charts my spending", "a landing page for my coffee shop", "an AI comic book generator for kids" — and Agent handles the rest.

<AgentInput />

You can also select a project type from the carousel to tell Agent what kind of output you want — web app, mobile app, slides, design, and more. Or skip the selection entirely and just describe your idea; Agent figures out the right setup automatically.

<AgentCarousel />

To jump right in, follow the [Create with AI quickstart](/getting-started/quickstarts/ask-ai/).

## Plan mode

Plan mode allows you to brainstorm, ask questions, and map out your project. Agent creates an ordered task list you can review and refine — when you're happy with the plan, approve it and Agent starts building. You can also use Plan mode to ask questions or explore ideas; Agent won't make any changes until you exit.

<AgentInput />

Toggle Plan mode from the button at the bottom of the input. Learn more in the [Plan mode guide](/core-concepts/agent/plan-mode).

## What you can build

Select a project type to tell Agent what you want, or just describe your idea and let Agent pick the right setup.

* **Web apps** — Dashboards, internal tools, SaaS products, landing pages
* **Mobile apps** — iOS and Android apps from a single prompt
* **Slides and presentations** — Generate decks with rich layouts
* **Animations** — Interactive walkthroughs and motion graphics
* **Designs** — Visual mockups and prototypes on the [Design Canvas](/replitai/canvas)
* **Data visualizations** — Charts, dashboards, and database-backed tools
* **Documents** — CSVs, PDFs, PowerPoint files, Markdown docs
* **Spreadsheets** — Data tables and structured outputs

## The Editor

Once Agent starts building, the Editor is where you see your project take shape. It's split into panels — your conversation with Agent on one side, and a live preview of your app on the other.

### Threads

Every conversation with Agent happens in a thread. Your main thread is where you describe what you want and watch Agent build it. When you use the [task system](/core-concepts/agent/task-system), each background task gets its own thread — so Agent can keep task work isolated without mixing up the conversations.

<Frame>
  <img alt="A thread showing the user's prompt and Agent building the project" />
</Frame>

### Task board

The task board organizes your work into columns — **Drafts**, **Active**, **Ready**, and **Done**. Each task moves from left to right as it progresses, so you can see at a glance what's planned, what Agent is working on, and what's finished. Learn more in [Build in parallel](/core-concepts/agent/task-system).

<Frame>
  <img alt="Task board showing tasks organized in Drafts, Active, Ready, and Done columns" />
</Frame>

### Design Canvas

The Design Canvas is a visual editor where you can create and refine mockups before committing to code. Drag elements, adjust layouts, and iterate on your design — then let Agent turn it into a working app. Learn more in [Design Canvas](/replitai/canvas).

## Collaboration

Create a team Workspace to build together. Invite teammates, share projects, and work on the same app in real time. See [Team workspaces](/core-concepts/workspace/team-workspaces) for workspace setup and [Invite teammates](/replitai/invite-teammates) for project-level collaboration.

## Import code and design

Already have a project? Bring it into Replit from GitHub, Figma, or upload files directly. Agent can pick up where you left off and continue building from your existing code or design. See [Import to Replit](/core-concepts/workspace/app-setup/import).

## Next steps

<CardGroup>
  <Card title="Editor & tools" href="/core-concepts/workspace/editor-and-tools" icon="window-restore">
    The main panels where you see your app's preview, console output, and other tools
  </Card>

  <Card title="App setup" href="/core-concepts/workspace/app-setup/configuration" icon="gear">
    Configure your app's settings, dependencies, secrets, and environment
  </Card>

  <Card title="Version control" href="/core-concepts/workspace/version-control" icon="clock-rotate-left">
    Track changes, roll back to earlier versions, and manage your app's history
  </Card>

  <Card title="Publishing" href="/category/replit-deployments" icon="rocket">
    Deploy your app to a live URL so anyone can use it
  </Card>
</CardGroup>

## Frequently asked questions

<Accordion title="Do I need to know how to code?">
  No. Describe what you want in plain language and Agent handles the technical details. You can also make direct edits if you want to.
</Accordion>

<Accordion title="What happens when I close my browser?">
  Your Workspace is saved in the cloud. Come back any time and pick up right where you left off — your files, history, and running app are all preserved.
</Accordion>

<Accordion title="Can I work with other people?">
  Yes. You can invite collaborators to a specific project or create a team Workspace where members access all projects. See [Team workspaces](/core-concepts/workspace/team-workspaces) and [Invite teammates](/replitai/invite-teammates).
</Accordion>

<Accordion title="How do I publish my app?">
  When your app is ready, deploy it to a live URL directly from the Workspace. See [Deployments](/category/replit-deployments).
</Accordion>

## Availability

The Workspace is available on all plans. Some features like increased compute and always-on deployments require a paid plan. See [Billing](/billing/ai-billing) for details.


# Replit App Configuration
Source: https://docs.replit.com/core-concepts/workspace/app-setup/configuration

Learn how to configure your Replit app using .replit and replit.nix files.

Replit Apps are configured with two files: the `.replit` and `replit.nix`. They affect how your Replit App behaves, from code execution to development tools and languages.

These configuration files are hidden by default. Show them in your Replit App by selecting "Show hidden files" from the filetree menu.

<Frame>
  <img alt="image" />
</Frame>

## `replit.nix` file

Replit uses `Nix` to manage packages and environments. The `replit.nix` file is used for:

**Specifying system dependencies:** Define exactly what software packages your Replit App requires, managed through Nix, a package manager.

**Creating reproducible environments:** Ensure your development environment is consistent and reproducible, ideal for collaborative projects and testing across multiple systems.

You can manage Nix packages visually through the `Dependencies` tool. Learn more in the [System Dependencies](/core-concepts/workspace/app-setup/dependency-management#system-dependencies) guide.

To configure packages with the `replit.nix` file, you can list [Nix packages](https://search.nixos.org/packages) in the `deps` array, prefixed with `pkgs.`. Any changes will be synced after your shell is reloaded.

```nix theme={null}
{ pkgs }: {
  deps = [
    pkgs.nodejs-19_x
    pkgs.nodePackages.typescript-language-server
    pkgs.yarn
    pkgs.replitPackages.jest
  ];
}
```

## `.replit` file

The `.replit` file controls your Replit App's behavior. It uses the `toml` [configuration format](https://toml.io/en/). Here are some of the key aspects that can be configured:

**Run command:** Specify the command that executes when the Run button is selected. Each template has a default run command to allow code execution immediately. For more customized and complex apps, use [Workflows](/core-concepts/workspace/app-setup/workflows).

**Language Server Protocol (LSP)**: Provides features like auto-complete, code navigation, code highlighting, and real-time linting and errors.

**Environment variables:** Set and manage environment variables essential for your applications to run correctly.

**Dependencies and packages:** Manage package installations and configurations directly through the `.replit` file, ensuring your Replit App has all the necessary tools ready upon startup. You can manage dependencies visually through the `Dependencies` tool. Learn more in the [System Modules](/core-concepts/workspace/app-setup/dependency-management#advanced-configuration) guide.

For Python applications, the default `.replit` file looks like:

```toml theme={null}
entrypoint = "main.py"
modules = ["python-3.10:v18-20230807-322e88b"]

[nix]
channel = "stable-23_05"

[unitTest]
language = "python3"

[gitHubImport]
requiredFiles = [".replit", "replit.nix"]

[deployment]
run = ["python3", "main.py"]
deploymentTarget = "cloudrun"
```

The following table provides a view of each setting within the `.replit` file, explaining what each configuration does and its impact on the Replit App environment.

| **Configuration key**                           | **Value/Example**                      | **Description**                                                                                                                                                                                               |
| ----------------------------------------------- | -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <a name="entrypoint" />`entrypoint`             | `main.py`                              | Specifies the main file to be executed and displayed by default when the editor is opened. You can rename the file name based on your application.                                                            |
| <a name="modules" />`modules`                   | `["python-3.10:v18-20230807-322e88b"]` | Defines specific versions of programming languages or other major dependencies supported by Replit.                                                                                                           |
| <a name="nix" />`[nix]`                         |                                        | Specifies settings for using Nix, a package manager, to manage system dependencies. Refer to [Dependency Management](/core-concepts/workspace/app-setup/dependency-management) document for more information. |
| <a name="channel" />`channel`                   | `stable-23_05`                         | Indicates the Nix channel to use, which affects the versions of system dependencies available.                                                                                                                |
| <a name="packages" />`packages`                 | `["cowsay", "htop"]`                   | Specifies some Nix packages to install. For more fine-grained control you can also use `replit.nix`.                                                                                                          |
| <a name="unitTest" />`[unitTest]`               |                                        | Configures settings related to unit testing within the Replit App.                                                                                                                                            |
| <a name="language" />`language`                 | `python3`                              | Specifies the language used for unit testing, indicating that Python 3 is used for writing tests.                                                                                                             |
| <a name="gitHubImport" />`[gitHubImport]`       |                                        | Settings that affect how projects are imported from GitHub, specifically which files must be included.                                                                                                        |
| <a name="requiredFiles" />`requiredFiles`       | `[".replit", "replit.nix"]`            | Lists the files that must be present when importing the project to ensure it functions correctly.                                                                                                             |
| <a name="deployment" />`[deployment]`           |                                        | Contains settings for deploying the application from the Replit App to a live environment.                                                                                                                    |
| <a name="run" />`run`                           | `["python3", "main.py"]`               | Command executed to start the application during deployment.                                                                                                                                                  |
| <a name="deploymentTarget" />`deploymentTarget` | `cloudrun`                             | Specifies the deployment target platform for hosting the application.                                                                                                                                         |

Now that you have an idea of the default configurations of the `.replit` file use the next sections to understand how to configure basic and advanced settings for your Replit App.

## Configuring basic settings

### Entrypoint

This is the main file of your project. If you do not define a `run` property, `entrypoint` is the file that gets executed by the runtime.

```toml theme={null}
entrypoint = "<file-name>.py"
```

### `Run` command

The `run` property in the `.replit` file is a key feature that determines the initial command or series of commands executed when the `Run` button is selected in a Replit environment. The `Run` command can be specified either as a string representing the command to execute, or an array of strings representing the command and individual arguments to that command.

Some common ways to configure the `Run` command:

* **Single command:**
  This example shows how to pass single command to execute directly in the Replit App. With this in your `.replit` file, pressing the `Run` button will display a greeting in the `Console` pane:
  **Example:** `run = "echo 'Hello, Replit!'"`

* **Explicit arguments:**
  In some situations it may be beneficial to be more explicit, avoiding the need for parsing quotes or shell interpolation rules. You can rewrite the above example to separate the arguments.
  Note, you no longer need both `'` and `"`, since you are explicitly passing the greeting as the first and only argument to `echo`:
  **Example:** `run = ["echo", "Hello, Replit!"]`

* **Multiple commands:**
  This example shows how to run multiple processes, such as a frontend and a backend, simultaneously. This could be useful if developing a python backend and a typescript frontend, where each server binds to a different port:
  **Example:** `run = "python -m app & npm run start & wait"`

#### Process management

While multiple commands can be simultaneously run with `&`, you may want a better experience distinguishing logs between services. You can [add system dependencies](/core-concepts/workspace/app-setup/dependency-management#system-dependencies) like [`process-compose`](https://github.com/F1bonacc1/process-compose) to better orchestrate multiple processes.

#### `Build` phase

For some languages or runtimes, there is a separate compilation phase before code can be `run`. This covers both compiled languages like TypeScript, Golang, or Java, or offering a parameter you can use to reset your environment, data, or configuration before the next `run` is invoked.

* **Compiling:**
  In a TypeScript repository, you may find yourself needing to run `tsc` prior to executing your code.
  **Example:**

```toml theme={null}
build = "tsc app.ts"
run = "node app.js"
```

#### Including environment variables

To supply environment variables to your service before execution, you can expand the `run` property into a [table](https://toml.io/en/v1.0.0#table).

This is a more involved change, and likely requires moving where your `run = "..."` property is located inside your `.replit` file.

The following diff shows supplying the command by way of `[run]`'s `args`, as well as the variable `NAME` supplied in `[run.env]`:

```diff theme={null}
-run = ["bash", "-c", "echo \"Hello, $NAME!\""]

 modules = ["nodejs-20"]

 hidden = [".pythonlibs"]

+# We need to move our new [run] down past all the
+# top-level properties that do not start with a `[`!
+[run]
+args = ["bash", "-c", "echo \"Hello, $NAME!\""]
+
+[run.env]
+NAME="Replit"

 [nix]
 channel = "stable-23_11"
```

#### Interactivity

Interactive programs can also be launched by way of the `Run` button, offering a way to distinguish your development environment from the terminal where your program is running.
Consider the following tally script:

**Example**

```toml theme={null}
[run]
args = ["bash", "-c", """
count=0
while read -p "$PROMPT" -r next && [ -n "$next" ]; do
    count=$((count+next))
done
echo "The numbers you entered sum to $count!"
"""]

[run.env]
PROMPT = "Next number ([Enter] to end): "
```

## Advanced configuration options

Explore the detailed configuration options available for your Replit App. You can customize your development environment, manage run commands, integrate language services, and handle dependencies.

| **Configuration** | **Key**                             | **Value/Example**                           | **Description**                                                                  |
| ----------------- | ----------------------------------- | ------------------------------------------- | -------------------------------------------------------------------------------- |
| onBoot            | <a name="onBoot" />`onBoot`         | `onBoot = "npm install"`                    | Command that executes when the Replit App boots up.                              |
| compile           | <a name="compile" />`compile`       | (No default example)                        | Command that runs before the `run` command, used in compiled languages like C++. |
| language          | <a name="language" />`language`     | `language = "javascript"`                   | Specifies the language during a GitHub import or when creating a Replit App.     |
| entrypoint        | <a name="entrypoint" />`entrypoint` | `entrypoint = "index.js"`                   | Main file to run and display when opening the editor.                            |
| hidden            | <a name="hidden" />`hidden`         | `hidden = [".config", "package-lock.json"]` | Files or folders to hide by default in the side file tree.                       |
| audio             | <a name="audio" />`audio`           | `audio = true`                              | Enables System-Wide Audio when set to `true`.                                    |

### Notes about System-Wide Audio

When setting `audio = true` in your `.replit` file, you may need to run `kill 1` in a shell to force the new setting to take effect.

When running a graphical application, you will see a pair of headphones with a checkbox in the lower right of the `Output` pane.
Due to browser restrictions, this will need to be enabled every time you refresh.

```toml theme={null}
# Ensure this is at the top of your `.replit` file, outside of any `[`-bracketed section
audio = true
```

## Packager configuration

| **Configuration** | **Key**                                           | **Value/Example**                             | **Description**                                                              |
| ----------------- | ------------------------------------------------- | --------------------------------------------- | ---------------------------------------------------------------------------- |
| packager          | <a name="language" />`language`                   | `packager.language = "python3"`               | Language used for package operations.                                        |
| packager features | <a name="guessImports" />`guessImports`           | `packager.features.guessImports = true`       | Automatically guess packages to install prior to running the Replit App.     |
| packager features | <a name="packageSearch" />`packageSearch`         | `packager.features.packageSearch = true`      | Enables support for the packager when set to `true`.                         |
| packager features | <a name="enabledForHosting" />`enabledForHosting` | `packager.features.enabledForHosting = false` | Sets whether hosting the Replit App requires running a package installation. |
| packager          | <a name="afterInstall" />`afterInstall`           | `afterInstall = "echo 'package installed'"`   | Command executed after a new package is installed via the packager.          |
| packager          | <a name="ignoredPaths" />`ignoredPaths`           | `ignoredPaths = [".git"]`                     | Paths to ignore while attempting to guess packages.                          |
| packager          | <a name="ignoredPackages" />`ignoredPackages`     | `ignoredPackages = ["twitter", "discord"]`    | Modules should never attempt to guess a package during installation.         |

### Example `.replit` configuration for packager configuration

```toml theme={null}
# Define the language for the Replit App
packager.language = "python3"

# Enable features for automatic package management
[packager.features]
guessImports = true
packageSearch = true
enabledForHosting = false

# Command to run after each package installation
packager.afterInstall = "echo 'Package installed successfully'"

# Define paths and packages that should be ignored by the package manager
packager.ignoredPaths = [".git", "node_modules"]
packager.ignoredPackages = ["twitter", "discord"]

# Additional deployment settings
[deployment]
run = ["python3", "app.py"]
```

## Deployment configuration

| **Configuration** | **Key**                               | **Value/Example**                    | **Description**                                                   |
| ----------------- | ------------------------------------- | ------------------------------------ | ----------------------------------------------------------------- |
| deployment        | <a name="run" />`run`                 | `deployment.run = "npm start"`       | Command that executes when a Deployment container starts.         |
| deployment        | <a name="build" />`build`             | `deployment.build = "npm run build"` | Command that executes before running a Deployment.                |
| deployment        | <a name="ignorePorts" />`ignorePorts` | `deployment.ignorePorts = true`      | If `true`, deployment success doesn't require an open port check. |

### Example `.replit` configuration for deployment configuration

```toml theme={null}

# Specifies the main entry point for the project
entrypoint = "app.js"

# Configuration settings for deploying the application
[deployment]
run = "npm start"
build = "npm run build"
ignorePorts = true
```

<Note>
  **Interpreter configuration** has been deprecated and is no longer available in Replit. Instead, you are encouraged to use the `Run` commands to configure how scripts and applications are executed within your Replit App environment.
</Note>

## Port configuration

| **Configuration** | **Key**                                 | **Value/Example**   | **Description**                                     |
| ----------------- | --------------------------------------- | ------------------- | --------------------------------------------------- |
| ports             | <a name="localPort" />`localPort`       | `localPort = 3000`  | Port that Replit binds to an external port.         |
| ports             | <a name="externalPort" />`externalPort` | `externalPort = 80` | Publicly accessible port linked to the `localPort`. |

### Example `.replit` configuration file for managing ports

```toml theme={null}
# Networking configuration to expose your application on specific ports
[[ports]]
localPort = 3000
externalPort = 80
```

## Accessing Replit App environment metadata

### Node.js

To access all environment variables:

`console.log(process.env);`

To access a single variable (REPL\_SLUG):

`console.log(process.env.REPL_SLUG);`

### Python

To access all environment variables:

```python theme={null}
import os
print(os.environ)
```

To access a single variable (REPL\_SLUG):

```python theme={null}
import os
variable = os.environ.get('REPL_SLUG')
print(variable)
```

### Rust

To access all environment variables:

```rust theme={null}
use std::env;
fn main() {
    for (key, value) in env::vars() {
        println!("{}: {}", key, value);
    }
}
```

To access a single variable (REPL\_SLUG):

```rust theme={null}
use std::env;
fn main() {
    let variable = env::var("REPL_SLUG").unwrap();
    println!("{}", variable);
}
```

## Environment variables

Following are the environment variables accessible from within your Replit App:

| key                                               | description                                                                                                                                                                          |
| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <a name="REPL_OWNER" />`REPL_OWNER`               | The username of the owner of the Replit App. If your Replit App is text-based and has no webserver, `REPL_OWNER` will reflect the value of the current user accessing the Replit App |
| <a name="REPL_ID" />`REPL_ID`                     | The unique UUID string of your Replit App                                                                                                                                            |
| <a name="HOME" />`HOME`                           | The home path of your Replit App                                                                                                                                                     |
| <a name="system" />`system`                       | The operating system running on your Replit App                                                                                                                                      |
| <a name="LANG" />`LANG`                           | Sets the language and character encoding for your Replit App, affecting how text is processed and displayed                                                                          |
| <a name="REPL_IMAGE" />`REPL_IMAGE`               | The docker image that corresponds to your Replit App                                                                                                                                 |
| <a name="REPL_LANGUAGE" />`REPL_LANGUAGE`         | The programming language configured for your Replit App, used to determine the runtime environment and tooling                                                                       |
| <a name="REPL_PUBKEYS" />`REPL_PUBKEYS`           | A stringified JSON object containing different public API keys                                                                                                                       |
| <a name="REPL_SLUG" />`REPL_SLUG`                 | A simplified, machine-readable version of the name of the Replit App, suitable for use in URLs and file names                                                                        |
| <a name="PRYBAR_FILE" />`PRYBAR_FILE`             | The main/entrypoint file of your Replit App                                                                                                                                          |
| <a name="REPLIT_DEV_DOMAIN" />`REPLIT_DEV_DOMAIN` | Provides the `replit.dev` URL for your Replit App in the Workspace. Note that this environment variable is not available in Deployments                                              |


# Dependency Management
Source: https://docs.replit.com/core-concepts/workspace/app-setup/dependency-management

Learn how to install and manage dependencies for your Replit app across different languages.

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

<Frame>
  <img alt="Imports tab for a project using Node.js and Python" />
</Frame>

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

<Frame>
  <img alt="Node.js package search for 'React'" />
</Frame>

You can view installation progress and relevant errors in the `Console` tab.

<Frame>
  <img alt="Example console output for an uninstalled package" />
</Frame>

### 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, Replit analyzes your project for missing dependencies and automatically guesses 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:

<Frame>
  <img alt="upm output showing packages being installed" />
</Frame>

### 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 the wrong package was guessed 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](/core-concepts/workspace/app-setup/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 <package>`, you can instead run `poetry add <package>` or `upm add <package>`, which will do the same thing.

`pip` is one of the earliest, and consequently most popular, package managers for Python. You can use `pip` as your Replit App's package manager instead of `poetry`.
Follow the steps below:

1. In the Tools pane, select the **Shell** tab to add the common `requirements.txt` file using the following command:

```bash theme={null}
touch requirements.txt
```

2. Delete the `poetry.lock` file.

3. Move your dependencies from `[tool.poetry.dependencies]` to `requirements.txt`. Note that the `flask = "^3.0.2"` in `pyproject.toml`'s `[tool.poetry.dependencies]` section would become `flask>=3.0.2,<4` in `requirements.txt`.

4. Finally, delete the other `[tool.poetry...]` sections from `pyproject.toml`.

After the above changes, the packaging infrastructure will use `pip` for all future operations.

Now, as you add code to your `main.py` file, any time you select **Run**, [upm](https://github.com/replit/upm/) will determine whether there are any missing packages for your imports, find the latest versions of packages that provide those imports, and install them automatically.

## Advanced Configuration

Replit supports all programming languages through integration with [Nix](https://nixos.org/). Nix is a tool for managing software packages and system configurations. The **System (Advanced)** tab provides quick access to Nix support for your Replit App.

<Frame>
  <img alt="System (Advanced) tab for a project using Node.js and Python" />
</Frame>

### 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, Replit automatically installs 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](/core-concepts/workspace/app-setup/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](/core-concepts/workspace/app-setup/configuration#replit-nix-file) file.


# Developer Frameworks
Source: https://docs.replit.com/core-concepts/workspace/app-setup/developer-frameworks

Learn how to use and create developer frameworks — reusable starting points for new Replit projects.

## What is a developer framework?

Developer frameworks are published Replit Apps that can be used to build upon. The official developer frameworks, made by Replit, have a checkbox next to the name of the framework:

<Frame>
  <img alt="Official Replit developer frameworks" />
</Frame>

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:

<Frame>
  <img alt="Community developer frameworks" />
</Frame>

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

<Frame>
  <img alt="Publish button" />
</Frame>

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.

## Enterprise custom templates

Enterprise organizations can create [custom templates](/teams/custom-templates) that appear as selectable options in the Agent input box for all org members. Custom templates go beyond developer frameworks by including company-specific Agent instructions, skills, and pre-configured project context. See the [custom templates guide](/teams/custom-templates) for details.


# Development URLs
Source: https://docs.replit.com/core-concepts/workspace/app-setup/development-urls

Learn how to use development URLs to preview and share your in-progress app.

Development URLs allow you to preview and test your applications while building them. These URLs follow the format `UUID.servername.replit.dev` and provide a live preview of your app as you develop.

<Frame>
  <img alt="Development URL shown in the location bar" />
</Frame>

To view your development URL, click the `{...}.replit.dev` text in the location bar.

## Understanding development URLs

Development URLs are only live while you actively work on a Replit App. The URL can change each time you reopen the app. Development URLs allow you to view your work in a browser as you build and test.

By default, development URLs are public to the web. Anyone with the URL can view your app while you're building it. This makes it easy to share your work-in-progress with collaborators, testers, or stakeholders.

<Warning>
  Development URLs are temporary and intended for testing only. For sharing applications with others, it's recommended to [publish your app](/category/replit-deployments) instead.
</Warning>

### Educational banner

When you open a development preview in a new tab, an educational banner appears at the top of the page. This banner helps you understand the purpose of `.replit.dev` URLs as you build and test your applications. The banner provides context about development URLs and their intended use during the development process.

## Making development URLs private

You can restrict access to your development URL to keep your in-progress work secure.

To make your development URL private:

1. Open **Developer tools** in your Workspace.
2. Select the **Networking** tab.
3. Enable the **Private development URL** toggle.

When enabled, your development URL requires authentication to access. Only you and authorized team members can view your in-progress work.

<Note>
  Enterprise customers can require private development URLs for all projects, enhancing security by ensuring development work remains protected within the organization's environment.
</Note>

## Best practices

* **Use private URLs** for sensitive or proprietary applications during development
* **Use public URLs** to share your work with external stakeholders while you are actively building or when you want to test your app in a different browser


# Import
Source: https://docs.replit.com/core-concepts/workspace/app-setup/import

Learn how to import projects and designs from other tools into Replit.

Import lets you bring existing code or designs into Replit Apps and continue building with Agent.

## Supported sources

| Source  | What you provide                             | Best for                              |
| ------- | -------------------------------------------- | ------------------------------------- |
| GitHub  | Repository URL or repository picker          | Public and private repository imports |
| Vercel  | GitHub repository behind your Vercel project | Migrating Vercel apps                 |
| Figma   | Frame URL                                    | Turning designs into React apps       |
| Bolt    | GitHub repository exported from Bolt         | Migrating Bolt projects               |
| Lovable | GitHub repository exported from Lovable      | Migrating Lovable projects            |
| ZIP     | `.zip` file upload                           | Importing local project archives      |

<Note>Replit validates compatibility before import starts.</Note>

## Quickstart guides

<CardGroup>
  <Card title="Import from GitHub" icon="github" href="/getting-started/quickstarts/import-from-github">
    ⏰ *2 minutes*

    Import a GitHub repository into Replit.
  </Card>

  <Card title="Import from Figma" icon="figma" href="/getting-started/quickstarts/import-from-figma">
    ⏱️ *3 minutes*

    Convert a Figma frame into a React app.
  </Card>

  <Card title="Import from Vercel" icon="triangle" href="/getting-started/quickstarts/import-from-vercel">
    ⏱️ *3 minutes*

    Import the GitHub repository behind a Vercel project.
  </Card>

  <Card title="Import from Bolt" icon="bolt" href="/getting-started/quickstarts/import-from-bolt">
    ⏱️ *4 minutes*

    Export from Bolt, then import in Replit.
  </Card>

  <Card title="Import from Lovable" icon="heart" href="/getting-started/quickstarts/import-from-lovable">
    ⏱️ *4 minutes*

    Export from Lovable, then import in Replit.
  </Card>

  <Card title="Import from ZIP" icon="file-zip" href="/getting-started/quickstarts/import-from-zip">
    ⏱️ *3 minutes*

    Upload a `.zip` archive and continue with Agent.
  </Card>
</CardGroup>

## Standard import flow

1. Open [replit.com/import](https://replit.com/import).
2. Select an import source.
3. Connect any required accounts.
4. Provide a repository URL, frame URL, or `.zip` file.
5. Add requested secrets or environment variables.
6. Select **Import** and review the generated app.

## Source notes

### GitHub

* Use rapid import for public repositories with `https://replit.com/github.com/<owner>/<repo>`.
* Use guided import for public and private repositories.
* If your repository is an exported Agent App, Replit preserves Agent-specific structure during import.

### Figma

* Import a single Figma frame URL.
* Replit generates React code, then Agent helps refine it.
* For better results, use frames, auto layout, and clear layer names.

### Vercel

* Select the GitHub repository behind your Vercel project.
* Replit imports project code and configuration defaults.
* Add environment variable values during import.

### Bolt

* Export your Bolt project to GitHub before importing.
* Replit imports code, UI styles, assets, backend logic (if present), and database schema (if present).
* Supabase data and secret values are not imported.
* After import, ask Agent to add secrets and recreate database data.

### Lovable

* Export your Lovable project to GitHub before importing.
* Replit imports code, UI styles, assets, backend logic (if present), and database schema (if present).
* Supabase data and secret values are not imported.
* After import, ask Agent to add secrets and recreate database data.

### ZIP

* Upload a `.zip` file with a clear project root.
* Replit imports files, dependencies, and common run defaults.
* Existing secret values, domains, and database data are not imported.

## Limitations

* Existing database data is not migrated.
* Some complex or proprietary dependencies may need manual setup.
* Large projects can take longer to process.

## Best practices

* Remove sensitive credentials before import.
* Keep your source project structure clean.
* Verify dependencies and run commands after import.
* Test core flows before publishing.

## Troubleshooting

If import fails, check these areas first:

* **Compatibility errors**: Verify required project files and supported frameworks.
* **Access errors**: Confirm repository or source permissions.
* **Processing errors**: Retry after simplifying project structure or reducing size.

If issues continue, visit the [Replit Community Hub](https://replit.com/community) or [contact Support](https://replit.com/support).

## Billing

Imports that require Agent migration work can consume credits. Credit usage depends on project complexity.


# Ports
Source: https://docs.replit.com/core-concepts/workspace/app-setup/ports

Learn how to configure and manage network ports in your Replit app.

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.

<Frame>
  <img alt="computer" />
</Frame>

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.

<Frame>
  <img alt="Localhost ports are only visible on the computer that is hosting them." />
</Frame>

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. That internal port must be connected 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, it still needs to be bound to an external port.

<Frame>
  <img alt="External ports forward traffic to internal ports, which programs listen to." />
</Frame>

Replit does 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, Replit binds the first port you open to the default external port 80, which allows 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 are 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.

<Frame>
  <img alt="Clicking the domain in the webview will let you choose what port to view." />
</Frame>

## 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. The port path is not shown 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/). (Replit provides 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.

<Frame>
  <img alt="The networking tool shows your port configuration." />
</Frame>

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

<Frame>
  <img alt="Programs can change the ports they listen to." />
</Frame>

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

Replit automatically binds ports that are opened in your Replit App to available external ports when they are opened, and records that binding in the .replit config file.

However, this does not happen 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
```


# Secrets
Source: https://docs.replit.com/core-concepts/workspace/app-setup/secrets

Learn how to store API keys and other sensitive information securely as encrypted environment variables.

The Secrets tool stores and encrypts **secrets**, your Replit App's sensitive information, such as API keys, authentication tokens, and database connection strings.

When you add a secret, the tool automatically encrypts the data and makes it available to your Replit App as an environment variable.
This approach lets you eliminate hard-coding secrets in your code and reduce the risk of exposing them.

<Frame>
  <iframe title="Secrets workspace tool" />
</Frame>

Hard-coding secrets in your codebase can lead to accidental exposure in the following scenarios:

* Sharing your code with others through a public Replit App or copy-paste
* Checking your code into version control in a public repository
* Live streaming or screen sharing your code

Use the Secrets tool to confidently share your code without worrying about exposing credentials.

<Frame>
  <img alt="screenshot of the Secrets tool" />
</Frame>

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

<Note>
  Secrets are available for all deployment types except Static Deployments.
</Note>

You can access Secrets in the Secrets workspace tool.

<Accordion title="How to access Secrets">
  From the left **Tool dock**:

  1. Select <img alt="All tools icon" /> **All tools** to see a list of workspace tools.
  2. Select <img alt="Secrets icon" /> **Secrets**.

  From the **Search bar**:

  1. Select the <img alt="magnifying glass icon" /> magnifying glass at the top to open the search tool
  2. Type "Secrets" to locate the tool and select it from the results.
</Accordion>

### Manage App Secrets

You can manage your app-level secrets in the **App Secrets** tab in the **Secrets** pane.
This tab displays a list of all secrets associated with your Replit App.

<Accordion title="Add App Secrets">
  To add a secret:

  1. Select **New Secret**.
  2. Enter a **Key**, the name of the secret, and a **Value**, the secret itself.
  3. Select **Add Secret** to save the entry.
</Accordion>

<Accordion title="Edit App Secrets">
  To edit a secret:

  1. Select the <img alt="three vertical dots icon" /> 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.
</Accordion>

<Accordion title="View App Secrets">
  To view a secret, select the <img alt="eye icon" /> eye icon next to the secret.

  To hide the secret, select the <img alt="eye with a slash icon" /> eye with slash icon.
</Accordion>

<Accordion title="Delete App Secrets">
  To delete a secret, select the <img alt="three vertical dots icon" /> vertical dots menu next to the secret and select **Delete**.
</Accordion>

### Manage Account Secrets

You can manage your account-level secrets in the **Account Secrets** tab in the **Secrets** pane.
This tab displays a list of only secrets associated with your Replit account.

<Accordion title="Add Account Secrets">
  To add an account-level secret:

  1. Navigate to the **Account Secrets** tab.
  2. Select the <img alt="gear icon" /> icon to open **Settings** and manage account-level secrets.
  3. Select **New Secret** to add a secret.
  4. Enter a **Key**, the name of the secret, and a **Value**, the secret itself.
  5. Select **Save** to save the entry.
</Accordion>

<Accordion title="Edit Account Secrets">
  To edit a secret:

  1. Select the <img alt="pencil icon" /> pencil icon next to the secret.
  2. Update the text in the **Key** or **Value** field and select **Save** to save changes or **Cancel** to discard changes.
</Accordion>

<Accordion title="View Account Secrets">
  To view a secret, select the <img alt="eye icon" /> eye icon next to the secret.

  To hide the secret, select the <img alt="eye with a slash icon" /> eye with slash icon.
</Accordion>

<Accordion title="Link Account Secrets">
  To use an account-level secret in a Replit App, you must link it to the app.
  To link an account-level secret:

  1. Navigate to the **App Secrets** tab.
  2. Select the checkbox to the left of the secret.
  3. Select **Link to this App**.

  To unlink a secret:

  1. Navigate to the **App Secrets** tab.
  2. Select the <img alt="three vertical dots icon" /> vertical dots menu next to the secret.
  3. Select **Unlink**.
</Accordion>

<Accordion title="Delete Account Secrets">
  1. Select the <img alt="pencil icon" /> pencil icon next to the secret.
  2. Select **Delete**.
</Accordion>

### Access secrets in your code

<CodeGroup>
  ```python Python theme={null}
  import os
  print(os.getenv("MY_SECRET"))
  ```

  ```javascript JavaScript theme={null}
  console.log(process.env.MY_SECRET);
  ```

  ```java Java theme={null}
  System.out.println(System.getenv("MY_SECRET"))
  ```

  ```csharp C# theme={null}
  using System;
  Console.WriteLine(Environment.GetEnvironmentVariable("MY_SECRET"));
  ```

  ```go Go theme={null}
  package main
  import (
      "fmt"
      "os"
  )
  func main() {
      fmt.Println(os.Getenv("MY_SECRET"))
  }
  ```

  ```ruby Ruby theme={null}
  puts ENV["MY_SECRET"]
  ```
</CodeGroup>

### Managing secrets visibility

Secrets visibility depends on your access to a Replit App and whether you authored it.

You can use one of the options to share your Replit App:

* **Multiplayer**: Invite Replit users to collaborate in real-time
* **Cover page**: Show a preview of your Replit App with the option to remix it
* **Remix**: Make your individual or organization's Replit App public so others can create their version

The following table shows secret name and value visibility in the different scenarios:

| Access Method      | Who                                        | Can See Names | Can See Values |
| ------------------ | ------------------------------------------ | ------------- | -------------- |
| Multiplayer        | Multiplayer collaborator                   | ✓             | ✓              |
| Multiplayer        | Organization member (Owner role)           | ✓             | ✓              |
| Multiplayer        | Organization member (Non-owner)            | ✓             |                |
| Cover Page         | Any visitor                                |               |                |
| Remix              | Owner/collaborator remixing own Replit App | ✓             | ✓              |
| Remix              | Non-owner/collaborator remixing Replit App | ✓             |                |
| Remix              | Anyone remixing from cover page            | ✓             |                |
| Organization Remix | Organization member with Owner role        | ✓             | ✓              |
| Organization Remix | Organization member without Owner role     | ✓             |                |

<Warning>
  Organization members without the Owner role cannot view secret values in a Replit App, but can access their values by printing the environment variables.
</Warning>

## Database and storage related secrets

When you add Replit's database or object storage, the workspace automatically creates the following secrets:

| Secret         | Description                    |
| -------------- | ------------------------------ |
| `DATABASE_URL` | SQL database connection string |
| `PGHOST`       | PostgreSQL hostname            |
| `PGUSER`       | PostgreSQL username            |
| `PGPASSWORD`   | PostgreSQL password            |
| `PGDATABASE`   | PostgreSQL database name       |
| `PGPORT`       | PostgreSQL port                |

To view all environment variables in your Replit App, run `printenv` in the Shell workspace tool or print them from your code.

## Predefined environment variables

Replit automatically sets the following environment variables that you can access from your app:

| Environment Variable | Description                                                                            |
| -------------------- | -------------------------------------------------------------------------------------- |
| `REPLIT_DOMAINS`     | Comma-separated list of all domains associated with your Replit App                    |
| `REPLIT_USER`        | Username of the current editor, which may vary in Multiplayer sessions                 |
| `REPLIT_DEPLOYMENT`  | Set to `1` if the code is running in a published app, unset otherwise                  |
| `REPLIT_DEV_DOMAIN`  | Development URL on the `replit.dev` domain, which is different from the Deployment URL |

These are not listed in the Secrets tool, but you can access them in your code using the `os.environ` object or running `printenv` in the Shell.


# SSH
Source: https://docs.replit.com/core-concepts/workspace/app-setup/ssh

Learn how to set up and use SSH to connect your local development environment to Replit Apps for secure remote access and file synchronization.

## What is SSH?

SSH, which stands for Secure Shell, is a secure protocol that facilitates remote access to your Replit App's command line interface. With SSH, you can seamlessly transfer files and leverage your preferred local Integrated Development Environment (IDE) for editing code on Replit, enhancing collaboration and productivity in your development workflow.

SSH functionality is available for Core, Pro, and all other paid plans.

Here's an overview of the process:

* Generate an SSH keypair on your local machine
* Add that SSH key to the **SSH** pane inside any Replit App
* Connect using an SSH client or an editor which can work over SSH (like [VSCode](https://code.visualstudio.com/) or [Cursor](https://www.cursor.com/))

<Note>
  SSH keys are associated with your account, not a particular Replit App. This means that you only need to add a public key once, after which you can connect to any Replit App you have access to.
</Note>

## Why use SSH?

* **Automatic updates between Replit App and editor**: Any changes made in the Replit App are reflected in your editor instantly, and any modifications in the editor are updated in the Replit App. This seamless synchronization ensures that your codebase is always up-to-date across platforms.

* **File management synchronization**: Whether you add, delete, or update files, these changes are synchronized in real time between your editor and the Replit App. This feature ensures that your project structure remains consistent, regardless of where the changes are initiated.

* **Folder management and file moving**: Moving files across folders is also synchronized between your editors and the Replit App. This ensures that organizational changes made in one environment are accurately reflected in the other, maintaining the integrity and structure of your project.

## Find or create a keypair

To configure SSH for your account, you'll need your SSH public key.

### Figuring out if you already have a keypair

You can check if you already have a public key by running the following command in a Terminal on your local computer:

<Tabs>
  <Tab title="Mac/Linux">
    ```sh theme={null}
    ls -l ~/.ssh
    ```
  </Tab>

  <Tab title="Windows">
    ```sh theme={null}
    dir %HOMEPATH%\.ssh
    ```
  </Tab>
</Tabs>

If you get an error, that's OK, proceed to [Generating a new keypair](#generating-a-new-keypair).
If you see a file called `replit.pub`, please proceed to [Get the contents of your public key](#get-the-contents-of-your-public-key).

### Generating a new keypair

On your machine, open a Terminal (or Command Prompt) window and paste the following command:

<Tabs>
  <Tab title="Mac/Linux">
    ```bash theme={null}
    ssh-keygen -t ed25519 -f ~/.ssh/replit -q -N ""
    ```
  </Tab>

  <Tab title="Windows">
    ```sh theme={null}
    ssh-keygen -t ed25519 -f %HOMEPATH%\.ssh\replit -q -N ""
    ```
  </Tab>
</Tabs>

This command checks if a specific SSH public key file already exists. If not, it creates a new SSH key with some sensible parameters.

### Get the contents of your public key

Once you have either confirmed you have a keypair or created one, display the contents of the public key (one of the two similarly named files, suffixed with `.pub`), as we'll need that for later.

<Tabs>
  <Tab title="Mac/Linux">
    ```sh theme={null}
    cat ~/.ssh/replit.pub
    ```
  </Tab>

  <Tab title="Windows">
    ```sh theme={null}
    notepad %HOMEPATH%\.ssh\replit.pub
    ```
  </Tab>
</Tabs>

Save the contents of `replit.pub` to use later in this article and proceed to [add the SSH key to your account](#add-the-ssh-key-to-your-account).

## Add the SSH key to your account

### Add the public key directly in a Replit App, using the SSH pane

1. In your Replit App on any window, select the **+** button, then search for **SSH**.

<Frame>
  <img alt="SSH tool button in the Replit interface" />
</Frame>

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.

<Frame>
  <img alt="Add SSH key dialog with label and key fields filled in" />
</Frame>

### Add the public key directly in Settings

You can also add an SSH key by opening **Settings** and, under **Account**, selecting **Advanced** (or the **SSH keys** option). Select **Add SSH key** and paste in the contents of `replit.pub` from the previous section, [Find or create a keypair](#find-or-create-a-keypair).

<Note>
  When you have multiple public keys on your machine, it's important to ensure that you use the correct combination of private and public keys for your SSH configuration.
</Note>

## Connecting to your Replit App

### Configure your SSH config

1. In a terminal, ensure the `~/.ssh` directory and `~/.ssh/config` file exist:

<Tabs>
  <Tab title="Mac/Linux">
    ```sh theme={null}
    mkdir -p ~/.ssh && chmod 700 ~/.ssh && touch ~/.ssh/config && chmod 600 ~/.ssh/config
    open -a 'TextEdit' ~/.ssh/config || nano ~/.ssh/config
    ```
  </Tab>

  <Tab title="Windows">
    ```sh theme={null}
    if not exist %HOMEPATH%\.ssh mkdir %HOMEPATH%\.ssh && type \NUL > %HOMEPATH%\.ssh\config
    notepad %HOMEPATH%\.ssh\config
    ```
  </Tab>
</Tabs>

2. Add a configuration block to use the `replit` keypair for all \*.replit.dev domains:

<Tabs>
  <Tab title="Mac/Linux/Windows">
    ```
    Host *.replit.dev
        Port 22
        IdentityFile ~/.ssh/replit
        StrictHostKeyChecking accept-new
    ```
  </Tab>
</Tabs>

### Connect from VSCode or Cursor

1. From a Replit App, open the **SSH** pane

2. In the SSH pane, navigate to the **Connect** tab and select **Launch VS Code**.

<Tabs>
  <Tab title="Connect with VSCode">
    <img alt="SSH connect tab showing Launch VS Code option" />
  </Tab>
</Tabs>

3. If you are prompted to fill out `~/.ssh/config`, enter the following:

   ```
   Host *.replit.dev
       Port 22
       IdentityFile ~/.ssh/replit
       StrictHostKeyChecking accept-new
   ```

   <Note>
     Adding SSH configuration is only prompted the first time you are trying to connect to VS Code or another editor. To return to the configuration file, you will need to select **Configure SSH Hosts...**.
   </Note>

4. If prompted by an external application warning, select **Yes** to confirm you want to open your project in your preferred editor or VS Code.

5. You may be asked to install or update SSH extensions periodically. Replit will endeavor to be compatible with the latest versions of these IDEs, and you may get important security updates as well.

### Connect manually

At the bottom of the **SSH** pane's "Connect" tab, you will find "Connect manually".

Copy that command, paste it into either a local Terminal (Mac or Linux) or local Command Prompt (Windows) in order to connect directly.

This is also a good way to debug connection issues with IDEs, as well as to collect valuable "verbose" connection information when reporting bugs to Replit Support.

**An error indicating we are attempting to connect with a nonexistent private key**:

```
$ ssh -i ~/.ssh/replit -p 22 c96b6ade-d5e4-4f7a-bc5b-52334509b2a3@c96b6ade-d5e4-4f7a-bc5b-52334509b2a3-00-16nh2hskw3ql8.riker.replit.dev
Warning: Identity file /Users/user/.ssh/replit not accessible: No such file or directory.
```

**Full debug logs of an SSH connection attempt, to include with a bug report**:

```
$ ssh -vvv -i ~/.ssh/replit -p 22 c96b6ade-d5e4-4f7a-bc5b-52334509b2a3@c96b6ade-d5e4-4f7a-bc5b-52334509b2a3-00-16nh2hskw3ql8.riker.replit.dev
OpenSSH_9.6p1, LibreSSL 3.3.6
debug1: Reading configuration data /Users/.../.ssh/config
debug1: /Users/.../.ssh/config line 1: Applying options for *
debug1: /Users/.../.ssh/config line 4: Applying options for *.replit.dev
debug3: channel_clear_timeouts: clearing
debug1: Connecting to c96b6ade-d5e4-4f7a-bc5b-52334509b2a3-00-16nh2hskw3ql8.riker.replit.dev port 22.
debug1: Connection established.
debug1: identity file /Users/dstewart/.ssh/replit type 3
debug1: Local version string SSH-2.0-OpenSSH_9.6
debug1: Remote protocol version 2.0, remote software version Replit-SSH-Proxy
debug1: compat_banner: no match: Replit-SSH-Proxy
debug3: fd 5 is O_NONBLOCK
...
Welcome to the Replit SSH Proxy.

Visit https:/.replit.com/replit-workspace/ssh to learn more about SSH on Replit.
debug3: receive packet: type 51
debug1: Authentications that can continue: password,publickey
debug3: start over, passed a different list password,publickey
debug3: preferred publickey,keyboard-interactive,password
debug3: authmethod_lookup publickey
debug3: remaining preferred: keyboard-interactive,password
debug3: authmethod_is_enabled publickey
debug1: Next authentication method: publickey
...
debug2: we did not send a packet, disable method
debug3: authmethod_lookup password
debug3: remaining preferred: ,password
debug3: authmethod_is_enabled password
debug1: Next authentication method: password
```

### Connect via a tool not listed here

There are many SSH clients available for different platforms and operating systems, many offering different features or integrations.

You can always break down the command displayed in "Connect Manually" into its constituent components to determine how to configure each client:

```sh theme={null}
ssh -i ~/.ssh/replit -p 22  c96b6ade-d5e4-4f7a-bc5b-52334509b2a3@c96b6ade-d5e4-4f7a-bc5b-52334509b2a3-00-16nh2hskw3ql8.riker.replit.dev
       ^-----v-----^    ^^  ^-----------------v----------------^ ^------------------------------v-------------------------------------^
        Private Key   Port                   User               @                           Hostname
```

**Hostname**: `<your_hostname>.<cluster>.replit.dev`
**Port**: `<port_number>`
**User**: `Username`
**Private Key**: Path to the private key file on your computer. Usually next to `replit.pub`.


# Replit App Visibility
Source: https://docs.replit.com/core-concepts/workspace/app-setup/visibility

Learn how to control who can see your Replit app — public, private, and team visibility settings.

With a free Replit account, personal Replit App are public by default.

As an individual, you can make your Replit App private by subscribing to our [Replit Core membership](https://replit.com/pricing) (previously Hacker or Pro) that comes with unlimited private Replit App.

Teams Pro accounts come with the ability to make any Team Replit App private.

Private Replit App can only be accessed by directly invited guests or by team members.

## Creating a private Replit App

You can make a Replit App private by toggling the Replit App to Private when you're making a new Replit App from a Template or forking an existing Replit App.

<Frame>
  <img alt="Creating a Private Replit App" />
</Frame>

## Making an existing Replit App private

### From the Workspace

You can make any public Replit App private by toggling it on from the Workspace.

1. Navigate to your Replit App
2. Open the info panel by clicking on your Replit App's name in the navbar
3. Make your Replit App private by pressing the Private toggle

<Frame>
  <img alt="Making a Replit App private from the Workspace" />
</Frame>

### From the My Replit App page

You can also make any of your public Replit App private from the My Replit App page.

1. Navigate to the My Replit App page from the left sidebar
2. Hover over the "Public" copy on the card of the Replit App you want to make private
3. Press the "Make private" button

<Frame>
  <img alt="Making a Replit App private from the My Replit App page" />
</Frame>


# Workflows
Source: https://docs.replit.com/core-concepts/workspace/app-setup/workflows

Learn how to set up Workflows — configurable run buttons that execute any commands you choose.

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.

<Frame>
  <img alt="image" />
</Frame>

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

<WistiaEmbed title="Workflows on Replit" />

## Available Task Types

There are current 3 type of tasks available, `Execute Shell Command`, `Install Packages`, and `Run Workflow`.

### Execute Shell Command

`Execute Shell Command` stores a shell command and executes it using the same environment as the Shell pane. This task type offers a wide range of use-cases, from running individual files:

```text theme={null}
python main.py
```

to executing complex stored database query commands:

```text theme={null}
psql -h 0.0.0.0 -U your_username -d your_database -c "SELECT * FROM your_table;"
```

Example use case:

<Frame>
  <img alt="image" />
</Frame>

### 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](/core-concepts/workspace/app-setup/dependency-management#the-universal-package-manager) for more details on how UPM guesses packages to install for your project under the hood.

Example use case:

<Frame>
  <img alt="image" />
</Frame>

### 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:

<Frame>
  <img alt="image" />
</Frame>

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:

<Frame>
  <img alt="image" />
</Frame>

### 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:

<Frame>
  <img alt="image" />
</Frame>

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

<Frame>
  <img alt="image" />
</Frame>

## 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](/core-concepts/workspace/app-setup/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.

<Frame>
  <img alt="image" />
</Frame>

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

<Frame>
  <img alt="image" />
</Frame>


# Replit Auth
Source: https://docs.replit.com/core-concepts/workspace/auth-and-security/authentication

Learn how to add user authentication to your app with Replit Auth — users sign in with their Replit accounts, with zero setup required.

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.

Replit Auth uses Replit's own login system — when someone signs in to your app, they are creating or using an existing **Replit account**. The login page is Replit-branded, and the sign-in flow is the same one used across replit.com.

<Note>
  **Replit Auth vs. Clerk Auth** — Replit offers two authentication options. **Replit Auth** (this page) uses Replit's own login system, so your app's users sign in with Replit accounts and see Replit-branded login pages. **[Clerk Auth](/core-concepts/workspace/auth-and-security/clerk-auth)** gives your app its own dedicated authentication tenant powered by Clerk, with fully customizable branding and user accounts that are independent of Replit. Choose Clerk Auth if you need your own brand on the login experience or want user accounts that are not tied to Replit.
</Note>

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.

<Frame>
  <img alt="Auth configuration" />
</Frame>

## 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
* **Replit account integration** — Users sign in with their existing Replit accounts, so there is no separate account creation step
* **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 (with Replit branding)
* **Password reset** — Replit sends password reset emails for you, so you don't need to set up your own email delivery provider
* **Referral program** — Users who sign up via Replit Auth are added to your pending Replit Referrals
* **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.

<Frame>
  <iframe />
</Frame>

To learn more about Agent capabilities, see the [Replit Agent documentation](/core-concepts/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.

<Frame>
  <img alt="Auth management pane" />
</Frame>

From this interface, you can:

* View all authenticated users
* Ban users from your application
* View user details
* Track user activity

## Customizing the login page

<Frame>
  <img alt="Auth configuration" />
</Frame>

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.

<Frame>
  <img alt="Auth configuration" />
</Frame>

## Connecting user data with your database

Replit Auth automatically creates user entries in your database. This makes it easy to store user-specific data. Agent will guide you on properly connecting user data with your database.

<Frame>
  <img alt="Auth database" />
</Frame>

For more information on databases, see the [Replit Database documentation](/cloud-services/storage-and-databases/sql-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](/core-concepts/workspace/app-setup/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 Agent](/core-concepts/agent) 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/sql-database)
* [Replit Agent](/core-concepts/agent)


# Clerk Auth
Source: https://docs.replit.com/core-concepts/workspace/auth-and-security/clerk-auth

Learn how Clerk Auth gives your Replit app its own dedicated authentication system with customizable branding, independent user accounts, and SSO providers.

Clerk Auth gives your app its own dedicated authentication system powered by [Clerk](https://clerk.com). Unlike [Replit Auth](/core-concepts/workspace/auth-and-security/authentication), which uses Replit's login system and creates Replit accounts, Clerk Auth provisions a **separate Clerk tenant** for your app. Your app's users create accounts directly within your app — not Replit accounts — and you get full control over branding, login methods, and the sign-in experience.

<Frame>
  <video />
</Frame>

<Note>
  **Replit Auth vs. Clerk Auth** — With **[Replit Auth](/core-concepts/workspace/auth-and-security/authentication)**, users sign in with Replit accounts and see Replit-branded login pages. With **Clerk Auth** (this page), your app gets its own authentication tenant with fully customizable branding and user accounts independent of Replit. Choose Clerk Auth when you want your own brand on the login experience or need user accounts separate from Replit.
</Note>

## Replit Auth vs. Clerk Auth at a glance

|                     | Replit Auth                                           | Clerk Auth                                                       |
| ------------------- | ----------------------------------------------------- | ---------------------------------------------------------------- |
| **User accounts**   | Users sign in with a Replit account                   | Users create accounts within your app (no Replit account needed) |
| **Branding**        | Replit-branded login page                             | Fully customizable — your app name, icon, and colors             |
| **SSO credentials** | Uses Replit's shared OAuth apps                       | Bring your own OAuth credentials per provider                    |
| **Environments**    | Single environment                                    | Separate Development and Production environments                 |
| **Referrals**       | Sign-ups count toward Replit Referrals                | No Replit referral integration                                   |
| **Best for**        | Quick setup, apps where Replit branding is acceptable | Custom-branded apps, professional/commercial products            |

## Getting started

To add Clerk Auth to your app, include it in your Agent prompt:

```
Help me create an app that [your app idea] and should feature Clerk Auth.
```

Agent handles everything — creating the Clerk tenant, storing credentials, configuring routes, and adding middleware. You don't need a Clerk account or any manual setup.

## How Clerk Auth works with Replit

When Agent sets up Clerk Auth for your app, it:

1. **Creates a dedicated Clerk tenant** — Your app gets its own Clerk application with separate Development and Production environments
2. **Provisions credentials** — API keys and secrets are stored as environment variables
3. **Configures a proxy** — Authentication works seamlessly on your published domain
4. **Sets up sign-in and sign-up routes** — Pre-built Clerk React components are added to your app
5. **Adds server-side middleware** — Your API routes are protected with Clerk's Express middleware

You don't need to create a Clerk account or manage any infrastructure. Everything is handled through the Replit Workspace.

## Key features

Clerk Auth provides your app with:

* **Independent user accounts** — Your app's users are not Replit users; they exist only within your app's Clerk tenant
* **Configurable login page** — Set your app name, icon, and choose which sign-in providers to show
* **Custom-branded SSO** — Supply your own OAuth credentials per provider so the sign-in flow displays your app's name and branding instead of generic defaults
* **Email and password authentication** — Built-in sign-up and sign-in with email verification
* **Social sign-in (SSO)** — Let users sign in with Google, GitHub, Apple, or X (Twitter)
* **User management** — View, search, and moderate users from the Auth pane
* **Session handling** — Secure session tokens managed automatically
* **Development and Production environments** — Test authentication in development before going live

## Managing users

The **Auth pane** in your Workspace gives you a complete view of your authenticated users. Because Clerk Auth creates a separate user store for your app, the users listed here are accounts in your app — not Replit accounts.

<Frame>
  <img alt="Clerk Auth users tab showing authenticated users in the Auth pane" />
</Frame>

From the **Users** tab, you can:

* **View all users** with details like email, name, last login, and account creation date
* **Search and filter** to find specific users
* **Ban or unban users** to control access to your app
* **Sort users** by different criteria
* **Switch environments** — Toggle between Development and Production to manage users in each

## Configuring your login page

From the **Configure** tab in the Auth pane, you can control which sign-in providers appear on your login page and set your app's name and icon.

<Frame>
  <img alt="Clerk Auth configure tab showing app name, icon, and SSO provider toggles" />
</Frame>

You can change:

* **App name** — Displayed on the login screen
* **App icon** — Your brand's logo on the login screen
* **Login methods** — Enable or disable specific sign-in providers (Google, GitHub, Apple, X, Email)
* **Environment** — Switch between Development and Production settings

## Custom SSO credentials

By default, SSO providers use shared credentials — your app's sign-in flow works immediately but shows generic branding during the OAuth consent screen. To display **your app's name and branding** when users sign in with a social provider, configure your own OAuth credentials for each provider.

<Frame>
  <img alt="Custom OAuth credentials configuration for Google SSO showing client ID and secret fields" />
</Frame>

With custom credentials, the sign-in page shows your app's name instead of a generic application name, giving your users a fully branded experience from start to finish. See [Additional resources](#additional-resources) for setup guides for each provider.

## Security best practices

* **Always validate server-side** — Check authentication in your API routes, not just in the UI
* **Use environment variables** — Never hardcode keys or secrets in your code
* **Keep the proxy middleware first** — The Clerk proxy must be mounted before body parsers in your Express app
* **Don't redirect the homepage to sign-in** — Keep your landing page accessible to unauthenticated visitors

## Additional resources

* [Configure Google SSO](/replit-workspace/whitelabel-auth/google) — Set up custom Google OAuth credentials
* [Configure GitHub SSO](/replit-workspace/whitelabel-auth/github) — Set up custom GitHub OAuth credentials
* [Configure Apple SSO](/replit-workspace/whitelabel-auth/apple) — Set up custom Apple Sign In credentials
* [Configure X (Twitter) SSO](/replit-workspace/whitelabel-auth/twitter-x) — Set up custom X OAuth credentials


# Security and Privacy Scanner
Source: https://docs.replit.com/core-concepts/workspace/auth-and-security/security-scanner

Learn how to scan your app for security and privacy vulnerabilities before you publish.

<Frame>
  <img alt="Security and Privacy Scanner interface showing vulnerability scan results" />
</Frame>

<Note>
  The scanner is currently in beta. It is powerful, but it may occasionally
  report false positives or miss some issues. Review results carefully, and use
  your own judgment before changing code or updating dependencies.
</Note>

## What is Security and Privacy Scanner?

Security and Privacy Scanner helps you find and fix high-impact risks in your Replit App before you publish it.

It focuses on issues that are most likely to affect the safety of your application or your data:

* **Dependency vulnerabilities**: Known issues in the packages your Replit App depends on
* **Static analysis issues (SAST)**: Dangerous patterns in your source code
* **Malicious or unsafe files**: Files that match known-bad or risky signatures
* **Privacy issues**: Potential leaks of sensitive or personal data in your code

Scans run on Replit infrastructure and are powered by partners like **Semgrep Community Edition** and **HoundDog.ai**. Your code and data are **not** sent to these partners or any other third parties.

## Types of vulnerabilities

### Dependency vulnerabilities

These come from a dependency audit of your project’s packages:

* Supports many popular ecosystems (including **Node.js/npm**, **Python**, **Go**, **Rust**, **PHP**, and **Ruby**)
* Captures whether the dependency is direct or transitive
* Includes metadata about the vulnerable package and any available fixes

Examples include:

```json theme={null}
"express": "4.18.2" // version with a known vulnerability
```

Some dependency issues can be updated automatically, while others may require manual changes or may not have a fix available.

### Static analysis (SAST) issues

Static analysis scans your source files for insecure patterns, like:

```javascript theme={null}
const query = `SELECT * FROM users WHERE username = '${userInput}'`;
```

SAST findings include:

* File path and exact location (line and column)
* Rule or check name
* A message describing the issue

These are the issues you’ll typically fix directly in your code.

### Malicious or unsafe files

Malicious file detection looks for files that match known-bad or high-risk signatures, such as:

```bash theme={null}
# malicious setup script from a known supply-chain attack
setup_bun.js
```

For these findings, the scanner shows:

* Why the file is risky
* The paths where it appears
* Suggested mitigation text

You should either remove or carefully inspect these files before continuing.

### Privacy issues

In addition to security issues, the scanner also surfaces potential privacy issues powered by **HoundDog.ai**, especially when sensitive data flows into risky sinks like logs, files, or third-party SDKs and APIs:

* Locations where sensitive data may be exposed
* Rules that describe the privacy concern
* Suggested remediation strategies (for example, deletion vs. sanitization)

For example, the scanner might flag code that logs an entire user profile (including contact details) to an application log:

```javascript theme={null}
logger.info("New signup", {
  email: user.email,
  phoneNumber: user.phoneNumber,
  address: user.address,
});
```

These findings are powered by **HoundDog.ai** and are labeled as privacy or HoundDog vulnerabilities in the pane.

## Getting started

You can open Security and Privacy Scanner in a few ways:

<Steps>
  <Step>Open the **Security Scanner** pane.</Step>

  <Step>
    Use the workspace search/tool palette and search for "Security Scanner".
  </Step>
</Steps>

Once open, the pane will automatically run an initial scan if no previous results exist.

Scans usually complete in minutes, but may take longer for large codebases or dependency graphs.

## Understanding scan results

<Tip>
  The results are organized into two tabs:

  * **Active issues**: Issues that are currently considered in scope
  * **Hidden issues**: Issues you have explicitly hidden
</Tip>

Within **Active issues**, you may see:

* **Automatic dependency vulnerabilities**: Dependency issues that can be fixed by updating packages.
* **Static analysis issues**: Code-level vulnerabilities with file and line references.
* **Malicious file issues**: Known-bad or risky files in your project.
* **Privacy issues**: Locations where sensitive or personal data might be at risk.

### Severity

Each issue has a severity:

* **Critical**
* **High**
* (Lower severity level like moderate/low/info may be present in underlying data but are not prioritized in this pane.)

The scanner focuses on **high** and **critical** issues so you can address the most impactful problems first.

### Hiding and re-activating issues

You can:

* **Hide** a non-critical issue you understand and are willing to accept.
* **Move to active** to bring a previously hidden issue back into the Active issues tab.

## Fixing issues

The scanner integrates with both dependency tooling and Replit AI Agent to help you fix problems quickly.

### Automatic dependency updates (Node.js)

For supported Node.js projects, you’ll see an **Update automatically** button for certain dependency vulnerabilities.

If your project or ecosystem is not supported, you may still see dependency vulnerabilities, but the automatic update button might be disabled for your Replit App.

### Fix with Agent

Most vulnerability cards include a **Fix with Agent** button:

* Opens or attaches to a Replit Agent session.
* Sends the vulnerability details to Agent.
* Agent proposes and applies fixes in your Replit App, while you stay in control.

After fixes are applied, run the scanner again to confirm the issues are resolved.

### Viewing existing Agent sessions

If you already started fixing vulnerabilities with Agent, you may see a **View Agent Session** button on an issue:

* Select it to jump back into the associated Agent chat.
* Continue iterating on the fix or ask follow-up questions about the vulnerability.

## Privacy and data handling

Security and privacy scanning are powered by **Semgrep** and **HoundDog.ai**, but:

* All scanning runs **locally on Replit infrastructure**.
* Your code and data are **not sent** to Semgrep, HoundDog.ai, or other third parties.
* Scan configuration and results stay attached to your Replit App.

## Limitations and best practices

Keep in mind:

* **Beta**: The scanner may occasionally report false positives or miss issues.
* **Language support**:
  * Dependency scanning supports many popular ecosystems (including **Node.js/npm**, **Python**, **Go**, **Rust**, **PHP**, and **Ruby**).
  * Automatic dependency fixing is currently focused on **Node.js/npm**.
* **Not a full security review**: Use it alongside code review, tests, and live app checks.
* **Re-run after changes**: Re-run the scanner after:
  * Adding or updating dependencies
  * Making major code changes
  * Before publishing a new version

For best results, treat the scanner as part of your normal development workflow, not a one-time check.

## Next steps

* Learn more about [Publishing](/category/replit-deployments) and how to publish your Replit App once scans are clean.
* Explore [Replit AI Agent](/core-concepts/agent) to fix security and privacy issues directly from the workspace.
* Check out [Workspace Features](/core-concepts/workspace/editor-and-tools) for more tools to improve code quality, performance, and reliability.


# Editor & Tools
Source: https://docs.replit.com/core-concepts/workspace/editor-and-tools

Learn about the tools available in your Workspace — the editor, preview, console, shell, and more.

The workspace includes layout management and integrated tools that power your app-building experience.
These workspace features specialize in handling specific aspects of the development process, letting you
focus on creating instead of configuring.

## Customizable workspace layout

The workspace layout management tools let you customize the components of the development environment.
It consists of the following user interface element types:

| Element     | Description                                                                    | Capabilities                                                                                                                                                    | Use Cases                                                                                                              |
| ----------- | ------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| **Windows** | Browser tabs that contain one or more panes                                    | <ul><li>Can be organized across multiple screens</li></ul>                                                                                                      | <ul><li>Organizing your workspace across multiple screens</li><li> Work on different projects simultaneously</li></ul> |
| **Panes**   | Sections of a window that contain one or more tabs                             | <ul><li>Support horizontal and vertical splitting</li><li>Can be resized and rearranged</li><li>Can be converted to a floating pane within the window</li></ul> | <ul><li>View code and preview side-by-side</li><li>Create custom layouts for different development tasks</li></ul>     |
| **Tabs**    | Contain exactly one workspace tool, such as the file editor, Preview, or Agent | <ul><li>Can be moved between panes and reordered within them</li><li>Can switch between different files or tools with a single click</li></ul>                  | <ul><li>Open different tools or files when you need them</li></ul>                                                     |

The following video identifies each workspace layout element:

<Frame>
  <iframe />
</Frame>

## File tree

The file tree lists all the files and directories in your Replit App's workspace.

<Accordion title="How to access the file tree">
  Select the <img alt="folder with arrows icon" /> folder icon on the left to toggle
  the file tree's visibility.
</Accordion>

You can perform the following actions in the file tree:

* Select a folder to display its contents
* Select a file or drag it to a pane to open it in a file editor
* Perform file operations such as duplicating, renaming, moving, downloading, or deleting

The following video shows several file tree actions:

<Frame>
  <iframe />
</Frame>

## Tools dock

The tools dock lets you search for and open workspace tools in new tabs.

<Accordion title="How to access the tools dock">
  Select from commonly used tools or select the <img alt="All tools icon" /> **All tools**
  icon to open the tools search popup menu.
</Accordion>

The following screenshot shows the open **All tools** popup menu in the tool dock:

<Frame>
  <img alt="screenshot of the tool dock" />
</Frame>

## Run button

The **Run** button executes the Replit App's selected workflow.

<Accordion title="How to access the run button">
  The **Run** button is located at the top of the workspace screen. Select the button to run the workflow.

  When your Replit App is running, the button label is replaced by **Stop**. Select the button to stop the app.
</Accordion>

To learn how to select, view, and manage workflows, see [Workflows](/core-concepts/workspace/app-setup/workflows/).

The following video shows how to view and run a workflow:

<Frame>
  <iframe />
</Frame>

## Spotlight page

The spotlight page lets you view and modify your Replit App cover page and access sharing options.

<Accordion title="How to access the spotlight page">
  Select your project name in the top left of the workspace to toggle the spotlight page.
</Accordion>

The following video shows how to access the spotlight page:

<Frame>
  <iframe />
</Frame>

## Options menu

The options menu lets you perform the following types of layout actions:

* **Window management**: Open a workspace for the Replit App in a new window
* **Pane management**: Add panes, move a pane, maximize a pane, and toggle between floating and fixed positions
* **Tab management**: Open or select other tabs, move a tab to another pane, and close a tab

<Accordion title="How to access the options menu">
  Select the <img alt="vertical dots icon" /> three vertical dots
  located in the top right corner of the active tab to open the options menu.
</Accordion>

The following screenshot shows the options popup menu in the left pane:

<Frame>
  <img alt="screenshot showing the workspace options menu" />
</Frame>

## Search bar

The search bar lets you find files, text, or tools within your workspace.

<Accordion title="How to access the search bar">
  1. To open the search bar, select the <img alt="magnifying glass icon" /> magnifying glass icon at the top.
  2. Enter your search text and select from the auto-complete suggestions.
</Accordion>

The following screenshot shows the search popup menu:

<Frame>
  <img alt="screenshot showing the workspace search menu" />
</Frame>

## Resources panel

The resources panel displays your development environment's computing resources and usage, including RAM, CPU, and storage.
This information can help you estimate and optimize your Replit App's publishing requirements.

<Accordion title="How to access the resources panel">
  1. Select the <img alt="stacked computers icon" /> resources icon located next to your app's name to toggle the panel.
  2. Hover over the **Compute** or **Storage** line items for more detail.
</Accordion>

The following screenshot shows the resources panel:

<Frame>
  <img alt="screenshot showing the workspace resources panel" />
</Frame>

## Tools

To learn more about other Replit workspace tools, select from the following list:

<CardGroup>
  <Card title="Secrets" icon="key" href="/core-concepts/workspace/app-setup/secrets">
    Safeguard your app's API keys, credentials, and passwords.
  </Card>

  <Card title="File History" icon="clock-rotate-left" href="/core-concepts/workspace/version-control/file-history">
    Rewind time to recover lost edits with Replit's version tracking feature.
  </Card>

  <Card title="Multiplayer" icon="users" href="/replitai/invite-teammates">
    Code together in real-time with two or more users.
  </Card>

  <Card title="User Settings" icon="gear" href="/core-concepts/workspace/editor-and-tools/user-settings">
    Customize your coding experience through the Settings tool.
  </Card>

  <Card title="Console" icon="terminal" href="/core-concepts/workspace/editor-and-tools/console">
    View your Replit App's output
  </Card>

  <Card title="Shell" icon="terminal" href="/core-concepts/workspace/editor-and-tools/shell">
    Interact with your workspace using a command-line interface.
  </Card>

  <Card title="Preview" icon="laptop" href="/core-concepts/workspace/editor-and-tools/preview">
    Preview and debug your web application.
  </Card>
</CardGroup>


# Console
Source: https://docs.replit.com/core-concepts/workspace/editor-and-tools/console

Learn how to use the Console to see your app's output, errors, and activity logs.

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.

<Tip>
  When debugging using Agent, include console logs in your prompt to provide context.
</Tip>

<Frame>
  <img alt="screenshot of the Console workspace tool" />
</Frame>

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

<Accordion title="How to access Console">
  From the left **Tool dock**:

  1. Select <img alt="All tools icon" /> **All tools** to see a list of workspace tools.
  2. Select <img alt="Console icon" /> **Console**.

  From the **Search bar**:

  1. Select the <img alt="magnifying glass icon" /> magnifying glass at the top to open the search tool
  2. Type "Console" to locate the tool and select it from the results.
</Accordion>

Each time you use the **Run** button in your Replit App, Console displays a new entry that includes the following information:

* The Command that executed your code
* Timestamp information
* Standard output and error logs

The following screenshot shows the `npm run dev` command used to start the app and log messages from the run:

<Frame>
  <img alt="Console log entry showing the command run" />
</Frame>

<Note>
  Client-side logs, such as those generated from HTML, CSS, and JS code, appear only in the Developer tools in the [Preview](/core-concepts/workspace/editor-and-tools/preview) tool.
</Note>

### AI-powered debugging

When you encounter errors or other information in the logs that you want to understand, select the
**Ask AI** button at the top of the entry. This automatically opens the **Agent** tab and
submits the log content for analysis.

### Log entry commands

Console provides the following tools to manage your logs:

* **Show Only Latest**: Toggle this control to the **on** position to display only the most recent run.
* **Collapse entry**: Select the <img alt="downward arrow icon" /> 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 <img alt="network off icon" /> globe with slash icon
on the right side of the network information line.

To enable it, select the <img alt="network on icon" /> globe icon.

To view your development URL, select the `{...}.replit.dev` text in the location bar.

<Frame>
  <img alt="Preview development URL location" />
</Frame>

<Note>
  Your app remains accessible in the Preview tool even when set to stop serving requests to the development URL.
</Note>

### Stop a workflow command

You can stop a running workflow command from the Console workspace tool.

Select the square button on the right side of the line that contains your Replit App run command to terminate it.

To restart your app, use the workflow **Run** button at the top of your workspace.

## Next steps

To learn more about related Workspace tools see the following resources:

* [Preview](/core-concepts/workspace/editor-and-tools/preview/): Explore the Preview tool for testing your application and viewing console output
* [Agent](/core-concepts/agent/): Learn about Agent for code help and error resolution
* [Shell](/core-concepts/workspace/editor-and-tools/shell/): Learn how to use the command-line interface in your workspace.


# Keyboard Shortcuts
Source: https://docs.replit.com/core-concepts/workspace/editor-and-tools/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.

## Viewing keyboard shortcuts

To view your keyboard shortcut settings, follow these steps:

1. Open a Replit App to navigate to the workspace.
2. Open the <img alt="gear icon" /> **User Settings** tab from <img alt="all tools icon" /> **All tools** in the dock.
   Alternatively, search for "User Settings" using the <img alt="magnifying glass icon" /> 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 <img alt="plus icon" />**Add shortcut**, located next
   to the unassigned command, or the <img alt="pencil icon" /> 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 <img alt="rollback icon" /> rollback icon.

## Removing keyboard shortcuts

To remove a keyboard shortcut, select the <img alt="trash icon" /> 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


# Preview
Source: https://docs.replit.com/core-concepts/workspace/editor-and-tools/preview

Learn how to use Preview to view and interact with your web app as you build.

Preview shows your web app output and offers browser developer tools and debugging
capabilities.

When you launch your web app using the **Run** button, Replit assigns it a temporary URL
that's reachable on the internet. The Preview tool renders the page just as you would
see in a browser. It also includes developer tools with functionality similar to
what you find in popular browsers.

<Note>
  Preview is the new name for Webview.
</Note>

<Frame>
  <img alt="screenshot of the Preview tool" />
</Frame>

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

<Accordion title="How to access Preview">
  From the left **Tool dock**:

  1. Select <img alt="All tools icon" /> **All tools** to see a list of workspace tools.
  2. Select <img alt="Preview icon" /> **Preview**.

  From the **Search bar**:

  1. Select the <img alt="magnifying glass icon" /> magnifying glass at the top to open the search tool
  2. Type "Preview" to locate the tool and select it from the results.
</Accordion>

## Location bar

The location bar at the top of the **Preview** tab includes the following tools:

* **Back button**: Navigate to the previous page in the browsing history
* **Forward button**: Navigate to the next page in the browsing history
* **App domain**: View information about your Replit App's temporary URL by selecting `{...}.replit.dev`
* **Address field**: View the current URL path or enter a new path

## Browser tools

The browser tools on the right side of the location bar include the following functions:

* **Screen size**: Select from different device screen size presets to test responsive designs
* **Devtools**: Toggle the [developer tools](#Developer_tools) pane
* **New tab**: Open your web app URL in a new browser tab

## Developer tools

Developer tools, powered by the <a href="https://github.com/liriliri/eruda">Eruda</a> open source project, help you perform the following tasks:

* View and interact with the JavaScript console in the context of your app
* Inspect DOM elements
* Monitor network requests
* Configure display and behavior preferences

To access the developer tools, select the <img alt="wrench icon" /> **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 <img alt="clear icon" /> 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 <img alt="filter icon" /> filter icon and entering the text.
* **Copy output**: Copy selected console messages by selecting the <img alt="copy icon" /> copy button.
* **Run JavaScript code**: Run JavaScript code in your app's context by selecting the <img alt="right arrow icon" /> 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 <img alt="copy icon" /> copy button.

Use the <img alt="select icon" /> 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 <img alt="filter icon" /> funnel icon to show results that match your text. Enter an empty filter to clear it.
* **Copy**: Copy storage information by selecting the <img alt="copy icon" /> copy button.

### Resources

The **Resources** tab shows assets loaded by the page and browser storage, such as cookies and local storage.
You can view and refresh lists for the following asset types:

* JavaScript files
* Stylesheets
* Iframes
* Images

In this tab, you can perform the following actions:

* **View storage**: Review local storage, session storage, and cookies.
* **Filter**: View matching results by selecting the <img alt="filter icon" /> funnel icon to show results that match your text. Enter an empty filter to clear it.
* **Clear**: Delete all data for that storage type by selecting the <img alt="clear icon" /> clear button.
* **Delete selected**: Remove storage items by selecting the <img alt="delete icon" /> "X" icon.
* **Copy**: Copy storage information by selecting the <img alt="copy icon" /> copy button.

### Settings

The **Settings** tab allows you to customize the developer tools' appearance and behavior.
This tab includes customization options for the following:

* **Tool settings**: Customize options that apply to each tool tab
* **JavaScript controls**: Specify JavaScript behavior options, such as turning it off to test how your app behaves
* **Display preferences**: Change the theme, panel size, transparency, and other behavior of the developer tools


# Shell
Source: https://docs.replit.com/core-concepts/workspace/editor-and-tools/shell

Learn how to use the Shell to run commands in your Replit Workspace.

Shell lets you perform tasks on the operating system in your workspace such as managing files,
installing packages, and running scripts. It provides a powerful text-based interface to
interact with your Replit environment.

You can use Shell to run the following tasks in your workspace:

* Execute scripts and programs
* Install and run popular Linux tools and packages
* Upload and download files from the internet
* Manage workspace files and directories

<Tip>
  For better workflow management, prefer the **Run** button instead of running your app from
  the Shell. The workflow started by the **Run** button sends output to the Console tool,
  which provides a structured way to review the logs.
</Tip>

<Frame>
  <img alt="screenshot of the Shell workspace tool" />
</Frame>

## Features

Shell provides the following capabilities:

* **Run multiple shells**: Open multiple shell instances to work on different tasks simultaneously
* **Search for text**: Find specific text in the shell output

## Usage

<Accordion title="How to access Shell">
  From the left **Tool dock**:

  1. Select <img alt="All tools icon" /> **All tools** to see a list of workspace tools.
  2. Select <img alt="Shell icon" /> **Shell**.

  From the **Search bar**:

  1. Select the <img alt="magnifying glass icon" /> magnifying glass at the top to open the search tool
  2. Type "Shell" to locate the tool and select it from the results.
</Accordion>

### Text search

The following steps describe how to access and use the text search tool:

1. Select the <img alt="magnifying glass icon" /> magnifying glass at the top right of the Shell tab to open the search dialog.
2. Enter a search term and select **Next** to navigate through the matches.
3. Use **Previous** to go back to prior matches.
4. Select **Exit** or click outside the dialog to exit the text search.

### Multiple shells

To create a new shell, select the menu at the top left of the **Shell** tab arrow and select **New Shell** as shown below:

<Frame>
  <img alt="New Shell menu selection" />
</Frame>

Use the same menu to switch between shells. The workspace labels each shell with the last command executed to help you identify them.

<Warning>
  When you open more than one shell, Replit automatically closes idle shell instances.
  An idle shell is unselected and not running any user processes.
</Warning>

## Next steps

To learn more about related Workspace tools see the following resources:

* [Console](/core-concepts/workspace/editor-and-tools/console/): Learn how to use Console to monitor your Replit App workflows.


# Replit Themes
Source: https://docs.replit.com/core-concepts/workspace/editor-and-tools/themes

Learn how to personalize your Workspace with custom themes, color schemes, and syntax highlighting.

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.

<Frame>
  <img alt="Screenshot of the Replit themes editor showing color customization options" />
</Frame>

## Creating a custom theme

Follow these steps to create and customize your own theme:

1. Open [Settings](https://replit.com/settings) and go to **User** → **Personalization** (or 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.

<Tip>
  Proper syntax highlighting makes code easier to scan and understand at a glance. Choose colors that work well together and provide sufficient contrast against your background.
</Tip>

<Accordion title="Syntax highlighting elements">
  | Element                  | Description                                                            |
  | ------------------------ | ---------------------------------------------------------------------- |
  | **Variable Names**       | Applies to variables where no declaration keyword is used              |
  | **Variable Definitions** | Colors variable names when defined with keywords like `const` or `var` |
  | **Function References**  | Applies when calling functions                                         |
  | **Function Definitions** | Colors function names during declaration                               |
  | **Keywords**             | Highlights language keywords like `import`, `function`, and `return`   |
  | **Property Names**       | Colors property access from variables                                  |
  | **Property Definitions** | Used when defining object properties                                   |
  | **Function Properties**  | Applies when calling methods on objects                                |
  | **Tag Names**            | Used for HTML and JSX tags                                             |
  | **Type Names**           | Colors type annotations in typed languages                             |
  | **Class Names**          | Applies to class declarations and references                           |
  | **Attribute Names**      | Highlights HTML and JSX attributes                                     |
  | **Comments**             | Applies to all code comments                                           |
  | **Strings**              | Colors string literals                                                 |
  | **Numbers**              | Highlights numeric values                                              |
  | **Booleans**             | Formats boolean values (`true`/`false`)                                |
  | **Regular Expressions**  | Colors regex patterns                                                  |
  | **Operators**            | Highlights operators like `+`, `-`, `*`, and `/`                       |
  | **Brackets**             | Colors square and angle brackets when appropriate                      |
</Accordion>

## Theme design best practices

Create visually appealing and functional themes by following these guidelines:

### Color and contrast

* **Balance contrast**: Ensure sufficient difference between background and foreground elements
* **Create cohesive palettes**: Choose colors that complement each other rather than clash
* **Maintain consistent brightness**: Keep a similar brightness level across syntax elements
* **Design for accessibility**: Consider users with visual impairments by avoiding low-contrast combinations

<Warning>
  Common theme design issues to avoid:

  * Excessive brightness differences between syntax elements
  * Poorly matched colors that create visual discord
  * Insufficient contrast between code and background
</Warning>

## Managing your themes

Access and manage all your installed themes in [Settings](https://replit.com/settings) under **User** → **Personalization** (or the **Themes** section).

### Switching themes

Select the button next to a theme's title to activate it as your current theme.

### Editing themes

Modify your custom themes by selecting the three-dot menu and clicking **Edit**.

<Note>
  Only custom themes that you've created can be edited or deleted. Default themes and themes created by others cannot be modified.
</Note>

### Deleting themes

Remove custom themes using the three-dot menu and selecting **Delete**.

## Exploring community themes

Discover themes created by the Replit community on the [Themes Explore Page](https://replit.com/themes).

### Finding themes

* Search by name to find specific themes like "Atom One Dark"
* Filter by author to explore themes from specific creators
* Browse by color scheme to find light or dark themes
* Search by specific colors to match your preferences

Preview any theme before installing it to see how it will look in your workspace.

## Porting from VS Code

Import your favorite VS Code themes to Replit by mapping equivalent colors during the theme creation process.

<Frame>
  <iframe />
</Frame>

## Publishing your theme

Share your custom themes with the Replit community by following these steps:

1. Open the Themes Editor for your custom theme
2. Select the **Publish** button
3. Complete the title and description fields
4. Submit your theme

Once published, your theme will appear on the Themes Explore Page, where other users can preview and install it.

## Related resources

* [Workspace features](/core-concepts/workspace/editor-and-tools/console) - Explore other workspace features like Console, Shell, and Multiplayer
* [User settings](/core-concepts/workspace/editor-and-tools/user-settings) - Configure your workspace preferences
* [Keyboard shortcuts](/core-concepts/workspace/editor-and-tools/keyboard-shortcuts) - Speed up your workflow with keyboard shortcuts
* [Invite teammates](/replitai/invite-teammates) - Collaborate in real-time with team members


# User Settings
Source: https://docs.replit.com/core-concepts/workspace/editor-and-tools/user-settings

Learn how to personalize your Workspace with user settings that apply across all your apps.

The User Settings workspace tool offers options to customize appearance, behavior, and
keyboard shortcuts for your account.

<Frame>
  <img alt="screenshot of the User Settings tool" />
</Frame>

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

<Accordion title="How to access User Settings">
  From the left **Tool dock**:

  1. Select <img alt="All tools icon" /> **All tools** to see a list of workspace tools.
  2. Select <img alt="Settings icon" /> **User Settings**.

  From the **Search bar**:

  1. Select the <img alt="magnifying glass icon" /> magnifying glass at the top to open the search tool
  2. Type "User Settings" to locate the tool and select it from the results.
</Accordion>

### Appearance

Customize the following settings related to the appearance of your Replit workspace using the following settings:

* **Theme selection**: Choose from light and dark theme presets, <a href="https://replit.com/themes">community themes</a>, or your custom theme
* **Custom themes**: Create personalized color schemes using the [Themes](/core-concepts/workspace/editor-and-tools/themes) editor

### File editor preferences

Control the file editor's appearance and behavior using the following settings:

* **Font size**: Adjust text size for readability
* **Auto close brackets**: Automatically insert closing brackets when you type an opening bracket
* **Indentation detection**: Automatically detect indentation settings when you open a file
* **Format pasted text indentation**: Reformat pasted code to follow proper indentation
* **Indentation character**: Choose between spaces and tabs for indenting code
* **Indentation size**: Set the number of columns for each indentation level
* **Wrapping**: Configure line wrapping behavior
* **Minimap**: Include a navigable code overview in a sidebar
* **Multiselect modifier key**: Set the keyboard modifier for multi-file selection
* **Filetree Git status**: Display Git status indicators in the file tree

### Code intelligence

Configure AI-powered tools using the following settings:

* **Semantic tokens**: Use enhanced syntax highlighting powered by language servers
* **AI code completion**: Add inline code suggestions as you type
* **Accept suggestion on commit character**: Automatically accept code suggestions by typing certain characters

### Shell and Preview preferences

Customize the Shell and Preview tool behavior:

* **Shell bell audible indicator**: Play sounds when the Shell tool encounters issues
* **Automatic preview**: Open the Preview tab automatically when a server becomes available
* **Forward opened ports automatically**: Configure handling newly detected ports

### Notifications

Manage the following notification settings:

* **Agent audio notification**: Play sounds when Agent requests feedback
* **Agent push notification**: Receive mobile push notifications when Agent requests feedback

### Accessibility

You can customize the following accessibility setting:

* **Accessible terminal output**: Enable screen reader compatibility for the Shell and Console tools

### Keyboard shortcuts

To access the keyboard shortcut preferences, select the **Keyboard shortcuts** tab in the User Settings tool.

You can search for key combinations using the following methods:

* **Name**: Type the name or description of the keyboard shortcut in the search field
* **Key combination**: Select the <img alt="keyboard icon" /> and enter the key combination

Use the following actions to manage shortcuts:

* **Add**: Select **Add shortcut**
* **Update**: Select the <img alt="pencil icon" /> pencil icon
* **Remove**: Select the <img alt="trash icon" /> trash icon


# Team workspaces
Source: https://docs.replit.com/core-concepts/workspace/team-workspaces

Understand the difference between personal and team workspaces, create a team workspace, and invite members to build together.

## Personal vs. team workspaces

A **workspace** is the structure that holds your apps, members, settings, and billing. Replit has two types:

* Personal workspace, and
* Team workspace
* Personal workspace
* Team workspace
  Below is the difference between Personal and Team workspaces:

|                       | Personal workspace                       | Team workspace                                      |
| --------------------- | ---------------------------------------- | --------------------------------------------------- |
| **Roles**             | Admin, Project-level guests              | Admin, Members, Project-level guests                |
| **Access model**      | You invite guests to individual projects | Members get access to all projects in the workspace |
| **Billing**           | Your account                             | Pooled credits from the admin's account             |
| **Member management** | Per-project (Join Links)                 | Centralized from workspace Settings                 |

**Personal workspace** is best when you're working solo or sharing individual projects with others. You're the sole admin, and other people can only access specific projects you invite them to as project-level guests.

**Team workspace** is best when you're building with a regular group — a startup team, a class, or a client project with multiple contributors. Members get access to all projects in the workspace, so you don't have to invite them one by one to each project. Members are managed centrally from **Settings**.

### When to invite to your workspace vs. to a project

| Scenario                                            | What to do                                      |
| --------------------------------------------------- | ----------------------------------------------- |
| Ongoing collaborator who needs access to everything | Invite to workspace                             |
| Contractor or guest who only needs one project      | [Invite to project](/replitai/invite-teammates) |
| New team member joining your company                | Invite to workspace                             |
| Friend helping you debug a specific app             | [Invite to project](/replitai/invite-teammates) |

## Create a team workspace

<Frame>
  <video>
    <source type="video/mp4" />
  </video>
</Frame>

<Steps>
  <Step title="Open workspace switcher">
    In the home page, click your workspace name in the top-left corner.
  </Step>

  <Step title="Create a new workspace">
    Select **Create workspace** and choose a name for your team workspace.
  </Step>

  <Step title="Invite members">
    Enter one or more email addresses (comma-separated) in the invite field. Invitees receive an invitation and gain access to all projects in the workspace once they accept.
  </Step>
</Steps>

## Managing members

If you didn't invite members during setup, or need to add more later, go to **Settings** in your team workspace and invite members by email or Replit username.

<Frame>
  <video>
    <source type="video/mp4" />
  </video>
</Frame>

From the **Settings** page you can also:

* **Remove members** to revoke their access to all workspace projects
* **Transfer apps** from personal workspaces into the team workspace — see [Transfer app to teams](/teams/identity-and-access-management/transfer-app-to-teams)

For advanced identity management, role-based access, and group permissions, see [Teams](/category/teams).

## Availability

| Capability          | Starter | Core | Pro |
| ------------------- | ------- | ---- | --- |
| Team workspaces     | —       | ✅    | ✅   |
| Collaboration seats | —       | 5    | 15  |
| Pooled credits      | —       | —    | ✅   |

## Next steps

<CardGroup>
  <Card title="Invite teammates" icon="user-plus" href="/replitai/invite-teammates">
    Invite people to a specific project and build together with Agent.
  </Card>

  <Card title="Teams" icon="building" href="/category/teams">
    Enterprise features: SSO/SAML, groups, permissions, and audit logs.
  </Card>
</CardGroup>


# Version control
Source: https://docs.replit.com/core-concepts/workspace/version-control

Learn how to track changes and manage your code's history with Replit's version control tools.

Version control on Replit enables you to track, manage, and collaborate on your codebase with confidence. With built-in Git integration and GitHub connectivity, you can:

* Track code changes and maintain a history of your development work
* Collaborate with team members without code conflicts or lost work
* Import, modify, and push code between Replit and GitHub
* Work with branches to experiment with new features safely

## What is version control?

Version control is a system that records changes to files over time, allowing you to recall specific versions later. On Replit, version control is powered by Git—the industry-standard tool for tracking code changes—with a user-friendly visual interface that eliminates the need for command-line knowledge.

<Frame>
  <img alt="Agent checkpoints in the Git pane" />
</Frame>

### 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](/core-concepts/agent). [Learn more about checkpoints and rollbacks](/core-concepts/agent/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               |
| **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:

<Frame>
  <img alt="Git pane showing the initialize repository button" />
</Frame>

### Automatic version control

<Accordion title="Agent Checkpoints">
  Automatic snapshots created during AI-assisted development with [Replit Agent](/core-concepts/agent).

  **Best for**: Development with Replit Agent

  **Key capabilities**:

  * Automatic creation at logical milestones
  * One-click rollback
  * Feature-level snapshots
  * Progress tracking
  * No setup required
  * Visual timeline of development progress

  Agent checkpoints are stored in Git and can be accessed through the Git Pane or Git CLI. You can also visualize all your checkpoints using the History feature, which provides:

  * Chronological checkpoint visualization
  * Detailed checkpoint descriptions
  * Direct access to checkpoint states
  * One-click rollback to any checkpoint
</Accordion>

<Accordion title="File History">
  Per-file version tracking with automatic saving for non-Agent changes done directly on the editor.

  **Best for**: Quick recovery of recent file changes

  **Key capabilities**:

  * Single file focus
  * Character-level changes
  * Visual comparison
  * 30-day history
  * Playback feature

  While File History provides its own interface, the underlying changes are part of Git's history. Learn more about [File History](/core-concepts/workspace/version-control/file-history).
</Accordion>

### Git-based interfaces

<Accordion title="Git Pane">
  A visual interface for Git operations that makes version control accessible without command-line knowledge.

  **Best for**: Most projects requiring GitHub integration and visual workflow

  **Key capabilities**:

  * Repository-wide tracking
  * Branch management
  * Visual diff viewing
  * One-click GitHub sync
  * Team collaboration

  For detailed instructions on using the Git pane, see [Using the Git pane](/core-concepts/workspace/version-control/git-interface).
</Accordion>

<Accordion title="Git CLI">
  Full command-line access to Git through the [Shell](/core-concepts/workspace/editor-and-tools/shell) for advanced operations.

  **Best for**: Power users who need complete Git functionality

  **Key capabilities**:

  * Full Git command set
  * Advanced branching strategies
  * Custom workflows
  * Script automation
  * Complete repository control

  For common Git commands and usage, see [Using the Git pane](/core-concepts/workspace/version-control/git-interface#using-git-commands-in-shell).
</Accordion>

## Key features

* **Visual Git interface**: Manage repositories, commits, and branches without typing Git commands
* **GitHub integration**: Connect to GitHub repositories for backup and collaboration
* **Import from GitHub**: Turn any [GitHub repository into a Replit App](/getting-started/quickstarts/import-from-github) with a few clicks
* **Branch management**: Create, switch between, and merge branches directly in your workspace
* **Conflict resolution**: Identify and resolve merge conflicts with visual assistance

## Use cases

**Tracking your personal projects**

Track changes to your code as you develop, allowing you to revert to previous versions if needed. The [Git pane](/core-concepts/workspace/version-control/git-interface) shows your changes visually, making it easy to commit meaningful updates.

**Collaborating with a team**

Work with multiple developers on the same codebase without overwriting each other's changes. Create branches for new features, then merge them back when ready. Learn more about [inviting teammates](/replitai/invite-teammates).

## Agent checkpoints

When building applications with [Replit Agent](/core-concepts/agent), you benefit from an additional layer of version control through checkpoints. Checkpoints automatically capture the comprehensive state of your project—including workspace contents, AI conversation context, and connected databases—at key moments during AI-assisted development.

<Frame>
  <img alt="Agent checkpoints in the Git pane" />
</Frame>

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

<Info>
  For detailed information about what checkpoints capture and comprehensive rollback capabilities, see [Checkpoints and Rollbacks](/core-concepts/agent/checkpoints-and-rollbacks).
</Info>

<Tip>
  While Agent checkpoints are powerful for development with AI, consider using Git commits for long-term version tracking and collaboration, especially when working with external repositories.
</Tip>

## Next steps

To learn more about version control on Replit, see the following resources:

* [Using the Git pane](/core-concepts/workspace/version-control/git-interface): Master Replit's visual Git interface
* [Import from GitHub](/getting-started/quickstarts/import-from-github): Turn GitHub repositories into Replit Apps
* [Invite teammates](/replitai/invite-teammates): Work with others on shared projects
* [File History](/core-concepts/workspace/version-control/file-history): Explore file-level version history
* [Replit Agent](/core-concepts/agent): Learn more about AI-assisted development


# Git disaster recovery
Source: https://docs.replit.com/core-concepts/workspace/version-control/disaster-recovery

Learn how to recover your Git history and code using Replit's automatic backup system.

Replit automatically backs up your Git repository to help you recover from issues like corrupted `.git` folders or lost commit history. This backup system runs in the background, so your work is protected without any extra effort.

## How it works

Every Replit App maintains a secure backup of your Git repository. When Replit Agent makes changes to the code or you deploy your app, they're automatically synced to this backup. If your local Git repository becomes corrupted or unusable, you can restore your full commit history from the backup.

<Info>
  The backup remote is named `gitsafe-backup` and is managed automatically by Replit. You don't need to configure anything—it's already working in the background.
</Info>

## Viewing your backup history

The easiest way to view your commit history is through the [Git pane](/core-concepts/workspace/version-control/git-interface). Open it from the Tools section in your Workspace—it shows your full commit history including all Agent checkpoints. This works for most cases and doesn't require any commands.

If you need to inspect the gitsafe-backup remote directly, you can use the Shell:

```bash theme={null}
git fetch gitsafe-backup main
git log gitsafe-backup/main
```

This shows your complete commit history, including all Agent checkpoints and manual commits. You can use this to verify your work is backed up or to find a specific commit to restore.

## Recovering from Git issues

If you encounter Git errors or your repository becomes corrupted, start with the [Git pane](/core-concepts/workspace/version-control/git-interface). It can resolve most common issues—like resetting to a previous commit or pulling from a remote—without needing Shell commands.

For cases where the Git pane can't help (such as a fully corrupted `.git` folder), use the Shell-based steps below.

### Check if backup is available

First, verify that the backup remote exists:

```bash theme={null}
git remote -v
```

Look for `gitsafe-backup` in the output. If it's present, you can proceed with recovery.

### Restore your repository

<Warning>
  This process replaces your current `.git` folder with the backed-up version. Your working files remain unchanged, but your local Git history will be replaced with the backup.
</Warning>

<Steps>
  <Step title="Save your current Git configuration">
    Back up your Git config file in case you have custom settings:

    ```bash theme={null}
    cp .git/config .git_config_backup
    ```
  </Step>

  <Step title="Clone the backup repository">
    Create a temporary clone from the backup:

    ```bash theme={null}
    git clone --bare git://gitsafe:5418/backup.git /tmp/gitsafe-restore
    ```
  </Step>

  <Step title="Replace your Git folder">
    Move your corrupted `.git` folder aside and replace it with the backup:

    ```bash theme={null}
    mv .git .git_corrupted_backup
    mv /tmp/gitsafe-restore/ .git
    ```
  </Step>

  <Step title="Restore your configuration">
    Copy back your Git configuration:

    ```bash theme={null}
    mv .git_config_backup .git/config
    ```
  </Step>
</Steps>

After completing these steps, run `git status` to verify your repository is working correctly.

## Troubleshooting common issues

### "fatal: repository not found" or backup remote missing

The backup system may not be enabled for older projects. Contact support if you need help recovering an older project.

### Recovery didn't include recent commits

Backups sync after each Agent commit. If you made changes but didn't commit them, those changes won't be in the backup. Check your working directory for any uncommitted files.

### Git operations are slow or hanging

If Git operations become unresponsive, you may have a stale lock file. You can safely remove it:

```bash theme={null}
rm -f .git/index.lock
```

## Preventing data loss

While the backup system protects your Git history automatically, you can take additional steps to protect your work:

* **Commit frequently**: Make small, frequent commits so your progress is continuously backed up
* **Use checkpoints**: When working with [Replit Agent](/core-concepts/agent), checkpoints automatically create commits at key milestones
* **Connect to GitHub**: For critical projects, [connect your app to GitHub](/getting-started/quickstarts/import-from-github) for an additional layer of backup

## Next steps

To learn more about version control on Replit:

* [Version control overview](/core-concepts/workspace/version-control): Learn about all version control options
* [Using the Git pane](/core-concepts/workspace/version-control/git-interface): Manage Git visually without command-line
* [Checkpoints and Rollbacks](/core-concepts/agent/checkpoints-and-rollbacks): Understand how Agent checkpoints work


# File History
Source: https://docs.replit.com/core-concepts/workspace/version-control/file-history

Learn how to recover previous versions of your code using File History's automatic save points.

Get started by opening a text file in the Workspace and pressing the **History** button in the bottom-right corner.

<Frame>
  <img alt="opening history" />
</Frame>

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

<Frame>
  <img alt="scroll bar demo" />
</Frame>

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

<Frame>
  <img alt="compare latest image" />
</Frame>

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

<Frame>
  <img alt="restore history image" />
</Frame>

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

<Frame>
  <img alt="replay history video" />
</Frame>


# Using the Git pane
Source: https://docs.replit.com/core-concepts/workspace/version-control/git-interface

Learn how to use the Git pane for version control, branch management, and collaboration in your Workspace.

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

<Accordion title="How to access the Git pane">
  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
</Accordion>

The Git pane helps you set up and connect your repository:

* **Initialize repository**: Create a new Git repository for your Replit App
* **Connect to GitHub**: Link your repository to GitHub for backup and collaboration
* **Configure remote**: Set up and manage the connection to your GitHub repository

<Frame>
  <img alt="Git pane showing the initialize repository button" />
</Frame>

### Change management

<Accordion title="How to view changes">
  1. Make changes to any files in your Replit App
  2. Open the Git pane from the Tools section
  3. Review changes in the **Review Changes** section
</Accordion>

The Git pane provides tools to manage your code changes:

* **Review changes**: See modified files with additions and deletions highlighted
* **Stage files**: Select specific files to include in your next commit
* **Commit changes**: Save your changes with descriptive messages
* **Push updates**: Send your commits to GitHub with a single click

<Frame>
  <img alt="Git pane showing commit message field and stage options" />
</Frame>

<Note>
  You can use Replit AI to help generate commit messages that accurately describe your changes.
</Note>

### Branch management

<Accordion title="How to manage branches">
  1. Open the Git pane from the Tools section
  2. Select the branch dropdown next to the branch name
  3. Create a new branch or select an existing one
</Accordion>

The Git pane simplifies working with multiple versions of your code:

* **Create branches**: Make new branches to develop features separately
* **Switch branches**: Move between different versions of your code
* **Publish branches**: Share your branches to GitHub
* **Pull changes**: Sync with remote updates from collaborators

<Frame>
  <img alt="Git pane showing branch creation interface" />
</Frame>

### Merge conflict resolution

<Accordion title="How to resolve merge conflicts">
  1. Attempt to pull changes when conflicts exist
  2. The Git pane will highlight conflicting files
  3. Open each conflicted file to see and resolve the conflicts
  4. Save the files after resolving conflicts
  5. Complete the merge by selecting **Pull**
</Accordion>

When code from different sources conflicts, the Git pane helps you:

* **Identify conflicts**: See exactly which files contain conflicts
* **Visualize differences**: Review both versions of the conflicting code
* **Resolve issues**: Choose which code to keep or manually edit conflicts
* **Finalize merges**: Complete the merge process after resolving conflicts

<Frame>
  <img alt="Code editor showing merge conflict markers" />
</Frame>

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

<Accordion title="How to access Shell">
  1. Select **All tools** from the left Tool dock
  2. Select **Shell** from the available tools
</Accordion>

<Tip>
  While the Git pane provides a user-friendly interface, power users can use standard Git commands in the Shell for more complex operations. Changes made through either method will be reflected in both places.
</Tip>

If you prefer using Git through the command line:

* **Command synchronization**: Any Git commands executed in the Shell will automatically sync with the Git pane
* **Full Git functionality**: Access advanced Git features not available in the Git pane
* **Seamless switching**: Switch between using Shell commands and Git pane as needed

<Info>
  **GitHub and GitLab CLI Support**: In addition to standard Git commands, you can also use the [GitHub CLI](https://docs.github.com/en/github-cli) (`gh`) and [GitLab CLI](https://docs.gitlab.com/ee/editor_extensions/gitlab_cli/) (`glab`) in the Shell to manage and connect to external Git repositories. These tools provide enhanced functionality for working with GitHub and GitLab repositories, including pull requests, issues, and other platform-specific features.
</Info>

#### Repository operations

* **Clone repository**: `git clone <url-to-repository>`
* **Initialize repository**: `git init`
* **Add remote**: `git remote add origin <url-to-repository>`

#### Making changes

* **Check status**: `git status` (shows modified, added, and deleted files)
* **Stage files**: `git add <filename>` or `git add .` (for all files)
* **Commit changes**: `git commit -m "your commit message"`
* **Push changes**: `git push origin <branch-name>`
* **Pull changes**: `git pull origin <branch-name>`

#### Authentication

When working with private repositories, you'll need to authenticate:

* For GitHub repositories, use a personal access token instead of your password
* To avoid re-entering credentials, you can store them using Replit Secrets:
  1. Create a new secret with key `GIT_URL`
  2. Set the value to `https://<username>:<token>@github.com/<user-or-org>/<repository>`
  3. Use `git push $GIT_URL` to push without typing credentials

<Note>
  When using credential secrets, anyone with access to your Replit App can potentially access your Git credentials. For sensitive repositories, consider manually entering credentials each time.
</Note>


# Overview
Source: https://docs.replit.com/getting-started/intro-replit

Replit is the fastest way to go from idea to app. Create and publish beautiful projects from your browser with AI at your fingertips.

<WistiaEmbed title="Replit Overview" />

Replit is an AI-powered platform that lets you create and publish apps from a single browser tab.
Instead of wrestling with complex development environments, you get coding, publishing, and collaboration tools in one integrated interface.

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.

<div>
  <AgentInput />
</div>

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

<CardGroup>
  <Card title="Build your first app" icon="robot" href="/getting-started/quickstarts/ask-ai/">
    ⏱️ *5 minutes*

    Build your first app with AI-powered Replit tools.
  </Card>

  <Card title="Remix an existing app" icon="shuffle" href="/getting-started/quickstarts/remix-an-app/">
    ⏱️ *1 minute*

    Jump-start your project by building on community-contributed apps.
  </Card>
</CardGroup>

### Import existing projects

<CardGroup>
  <Card title="Import from GitHub" icon="github" href="/getting-started/quickstarts/import-from-github/">
    ⏱️ *2 minutes*

    Import an existing GitHub repository into Replit.
  </Card>

  <Card title="Import from Figma" icon="figma" href="/getting-started/quickstarts/import-from-figma/">
    ⏱️ *3 minutes*

    Convert your Figma designs into functional React applications.
  </Card>

  <Card title="Import from Bolt" icon="bolt" href="/getting-started/quickstarts/import-from-bolt/">
    ⏱️ *4 minutes*

    Migrate your Bolt projects to Replit with Agent assistance.
  </Card>

  <Card title="Import from Lovable" icon="heart" href="/getting-started/quickstarts/import-from-lovable/">
    ⏱️ *4 minutes*

    Transfer your Lovable projects to Replit and continue building.
  </Card>
</CardGroup>

### Workspace features

Replit provides the following essential app creation tools:

* [Real-time preview](/core-concepts/workspace/editor-and-tools/preview) of your app
* [Publish in minutes](/category/replit-deployments)
* Browser native app that requires zero installation and configuration
* [Full-featured code editor](/core-concepts/workspace/editor-and-tools)
* [Mobile app](/platforms/mobile-app) for building apps from your phone or tablet
* [AI-assisted app creation](/core-concepts/agent)
* [Version control integration](/core-concepts/workspace/version-control) for tracking changes
* [Team collaboration](/teams/public_profiles) for building together

### AI companion capabilities

Replit [Agent](/core-concepts/agent) accelerates 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

## Built on trust

<CardGroup>
  <Card title="SOC 2 Type 2" icon="shield-check">
    Independently audited security controls and data protection practices.
  </Card>

  <Card title="GDPR Compliant" icon="lock">
    Data privacy protections that meet European regulatory standards.
  </Card>

  <Card title="Enterprise Ready" icon="building" href="/category/teams">
    SSO/SAML, role-based access, admin controls, and dedicated support.
  </Card>
</CardGroup>

## Additional information

To learn more about all of Replit's features, see the following resources:

* [Starter Plan](/billing/plans/starter-plan): Learn about Starter plan features and what you can build for free
* Learn about the Workspace features from [Workspace Features](/core-concepts/workspace/editor-and-tools).
* Learn about the capabilities of the Replit AI-powered features from [Replit Agent](/core-concepts/agent/).
* 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.


# Build your first app
Source: https://docs.replit.com/getting-started/quickstarts/ask-ai

Build and publish your first app with Replit Agent in minutes.

⏰ *Estimated time: 5 minutes*

## Before you begin

You'll need a free [Replit account](https://replit.com).

<Note>This quickstart uses Agent, which is included in the free Starter plan with daily credits. No credit card required.</Note>

## Welcome to Replit

When you open Replit, the first thing you see is your **Workspace**, with the prompt box at the center. This is where everything starts. Describe what you want to build, and Agent takes it from there.

<Frame>
  <img alt="The Replit Workspace home screen showing the prompt input where you describe what you want to build" />
</Frame>

## Build your app

<Steps>
  <Step title="Describe what you want to build">
    In the prompt box on the home screen, describe what you want to build. Be specific about features and behavior — the more detail you give Agent, the better the result.

    For this quickstart, try something like: *"Build a realistic 16-key piano with proper white and black key layout. Each key should press down with animation when clicked and play the correct note."*

    Press **Start** to kick off the build. Agent sets up your project and starts writing code. This takes about 3–5 minutes.

    <Tip>You can build any idea you like — a to-do list, a landing page, a quiz app. The rest of the steps work the same way.</Tip>
  </Step>

  <Step title="Preview your app">
    When Agent finishes, navigate to the **Preview** tab to see your app in action. Click around and interact with it to make sure it works the way you expect.

    <Frame>
      <video />
    </Frame>

    <Note>Your app might look slightly different from the screenshots — Agent can generate varied results from the same prompt.</Note>
  </Step>

  <Step title="Publish your app">
    Ready to share? Click **Publish** in the Workspace to deploy your app to a public URL that anyone can visit.

    <Frame>
      <video />
    </Frame>

    Your app is now live. Copy the URL and share it with anyone.
  </Step>
</Steps>

## Try it now

Ready to build? Press <StartButton /> to open Replit with the piano prompt pre-filled.

<AgentInput />

## Next steps

<CardGroup>
  <Card title="Design with Canvas" icon="palette" href="/getting-started/quickstarts/design-with-canvas">
    Explore design variations and restyle your app visually.
  </Card>

  <Card title="Expand your project" icon="layer-group" href="/getting-started/quickstarts/expand-your-project">
    Add a mobile app, slide deck, or other artifacts to your project.
  </Card>

  <Card title="Publish your app" icon="globe" href="/getting-started/quickstarts/publish">
    Learn about custom domains, sharing, and how publishing works.
  </Card>

  <Card title="Agent" icon="robot" href="/core-concepts/agent">
    Explore everything Agent can do.
  </Card>
</CardGroup>


# Replit App in ChatGPT
Source: https://docs.replit.com/getting-started/quickstarts/build-in-chatgpt

Learn how to build a Replit App directly from ChatGPT.

⏰ *Estimated time: 5 minutes*

Learn how to build Replit Apps directly from ChatGPT using the Replit integration. This integration brings Replit's development environment into your ChatGPT workflow, letting you:

* Create full-stack applications from natural language descriptions
* Bootstrap projects without leaving ChatGPT
* Seamlessly transition to Replit for further development

## ChatGPT Apps

Replit is the fastest way to turn your ideas into a live app, and now you can do it without leaving ChatGPT.

Apps in ChatGPT let you connect external tools and services directly into the conversation. Instead of switching between tabs or copying context around, you can ask ChatGPT to take action inside the tools you already use.

The Replit app allows you to create and bootstrap real applications directly from ChatGPT, with the code living in your Replit Workspace.

Follow the steps below to build your first Replit App in ChatGPT, or try it now by clicking the button below.

<Card title="Try it now" icon="rocket" href="https://chatgpt.com?prompt=build+me+a+cool+app+with+%40replit">
  Build an app with Replit directly in ChatGPT
</Card>

<Steps>
  <Step title="Open a conversation in ChatGPT">
    Start a new conversation or continue an existing one in ChatGPT.
  </Step>

  <Step title="Describe what you want to build and invoke @Replit">
    In the chat input, describe your app idea and mention `@Replit` to invoke the Replit app.

    Example prompt:

    ```text theme={null}
    Create a beautiful app to split my restaurant bill @Replit
    ```

    <Frame>
      <img alt="ChatGPT conversation with a prompt to create a bill splitting app using @Replit" />
    </Frame>
  </Step>

  <Step title="ChatGPT creates the project directly in Replit">
    ChatGPT will use the Replit app to create your project. You'll see the app being generated in real-time.

    <Frame>
      <img alt="ChatGPT planning the app structure" />
    </Frame>

    <Frame>
      <img alt="ChatGPT executing and building the app in Replit" />
    </Frame>
  </Step>

  <Step title="Open and publish your app">
    Once the project is created, open it in Replit to edit, run, and publish your app.

    <Frame>
      <img alt="The completed bill splitting app in Replit" />
    </Frame>
  </Step>
</Steps>

This workflow is especially powerful for prototyping: you can go from idea to runnable app in minutes, then iterate using normal Replit tooling.

## Next steps

Now that you've built your first app in ChatGPT, explore more possibilities:

* **[Replit in ChatGPT](/platforms/chatgpt)**: Learn about all features, billing, troubleshooting, and advanced usage
* **[Replit Agent](/core-concepts/agent)**: Continue building and refining your app with Agent in the Workspace
* **[Agent modes](/core-concepts/agent/agent-modes)**: Use Lite for targeted improvements or switch modes for bigger tasks
* **[Publish your app](/category/replit-deployments)**: Share your creation with the world


# Design with Canvas
Source: https://docs.replit.com/getting-started/quickstarts/design-with-canvas

Explore design variations on the Canvas, pick a direction, and apply it to your app.

⏰ *Estimated time: 5 minutes* · Follows from [Build your first app](/getting-started/quickstarts/ask-ai)

The **Canvas** is a visual space where you can explore multiple design directions before building your app. Generate mockups, compare them side by side, and apply the one you like.

## Before you begin

You'll need an existing app on Replit — from the [Build your first app](/getting-started/quickstarts/ask-ai) quickstart or any project.

<Tip>You can also start fresh — just create a new project and describe your idea to Agent first.</Tip>

## Design your app

<Steps>
  <Step title="Explore design variations">
    Open the **Canvas** tab in your Workspace, then click **Reimagine**. A dropdown gives you quick prompts to explore different directions.
    Pick "Try different layouts" and Agent generates multiple design mockups on the Canvas.

    <Frame>
      <video />
    </Frame>

    Here are all the options available:

    * Explore different approaches
    * Try different layouts
    * Explore different vibes
    * More like this, but better
    * Optimize for usability
    * Show me the opposite of this
    * Surprise me

    Or, you can simply ask Agent to generate variations in your own words:

    ```
    Show me a dark theme, a minimal theme, and a colorful theme on the Canvas
    ```

    <Frame>
      <img alt="Canvas showing multiple design variations side by side" />
    </Frame>
  </Step>

  <Step title="Pick a direction">
    Browse the variations and choose the one that fits your vision. You can ask Agent to refine a specific variation before committing:

    ```
    I like the second one, but make the header bigger
    ```
  </Step>

  <Step title="Apply to your app">
    Once you're happy with a design, ask Agent to apply it:

    ```
    Apply this design to my app
    ```

    Agent updates your app's code to match the chosen design. Check the **Preview** tab to see the result.
  </Step>

  <Step title="Publish your updated app (optional)">
    Click **Publish** in the Workspace to push the new design live. Your existing URL stays the same. Visitors will see the updated version immediately.

    <Frame>
      <video />
    </Frame>

    Learn more about publishing in [Publish your app](/getting-started/quickstarts/publish).
  </Step>
</Steps>

## Next steps

<CardGroup>
  <Card title="Canvas" icon="palette" href="/replitai/canvas">
    Deep dive into Canvas features and workflows.
  </Card>

  <Card title="Visual Editor" icon="pen-ruler" href="/replitai/visual-editor">
    Make fine-grained tweaks to colors, text, and layout.
  </Card>

  <Card title="Expand your project" icon="layer-group" href="/getting-started/quickstarts/expand-your-project">
    Add a mobile app, slide deck, or other artifacts to your project.
  </Card>
</CardGroup>


# Expand your project
Source: https://docs.replit.com/getting-started/quickstarts/expand-your-project

Add a mobile app, slide deck, and more to an existing project — all sharing the same backend.

⏰ *Estimated time: 5 minutes* · Follows from [Build your first app](/getting-started/quickstarts/ask-ai)

You've built a web app. Now turn it into more — add a mobile app, a slide deck, or anything else, all inside the same project. Everything shares the same data and backend, so you don't have to start over.

## Before you begin

You'll need an existing project on Replit — from a previous quickstart or any project you've created.

## Your project can do more than one thing

When you built your first app, you created a web app. But a single project on Replit isn't limited to one output. You can add a **Mobile App** that works on phones, a **slide deck** to present your idea, an **animated video**, and more — all living side by side in the same project.

These are called **artifacts**. Each artifact is its own publishable output, but they all share the same code and data behind the scenes. Build once, publish everywhere.

## Add a mobile app

<Steps>
  <Step title="Ask Agent to create a mobile version">
    Tell Agent what you want:

    ```
    Add a mobile version of this app
    ```

    You can also click the **+** button in the Preview panel to add a new artifact.

    <Frame>
      <video />
    </Frame>

    Agent builds a mobile app that shares the same backend as your web app — any data or logic you've already built carries over automatically.
  </Step>

  <Step title="Preview on a phone simulator">
    When Agent finishes, the Preview panel shows your mobile app running in a phone simulator. Tap around and test it just like you would on a real phone.
  </Step>

  <Step title="Switch between your apps">
    Use the dropdown in the **Preview panel** to switch between your web app and mobile app.

    <Frame>
      <video />
    </Frame>

    You can also ask Agent:

    ```
    Show me the web app
    ```
  </Step>
</Steps>

## Add even more to your project

Your project isn't limited to web and mobile apps. You can ask Agent to create other types of artifacts too:

* **Slide decks** — "Create a pitch deck for this app"
* **Animated videos** — "Make a short explainer video for this app"
* **Data visualizations** — "Build a dashboard showing usage stats"
* **Documents** — "Write a one-pager describing this app"

Each one becomes a new artifact in your project, shareable with its own URL.

## Publish your project

When you click **Publish**, all artifacts in your project go live together. Your web app, mobile app, and slide deck each get their own URL, and they stay connected through the same backend.

Learn more in [Publish your app](/getting-started/quickstarts/publish).

## Next steps

<CardGroup>
  <Card title="Artifacts" icon="layer-group" href="/replitai/artifacts">
    Learn more about all the artifact types you can create.
  </Card>

  <Card title="Mobile apps" icon="mobile" href="/replitai/building-mobile-apps">
    Deep dive into building and testing mobile apps.
  </Card>

  <Card title="Slide decks" icon="presentation-screen" href="/replitai/slide-decks">
    Create and customize slide decks.
  </Card>
</CardGroup>


# Import from Bolt
Source: https://docs.replit.com/getting-started/quickstarts/import-from-bolt

Import Bolt projects into Replit by exporting to GitHub first.

## Import from Bolt

⏰ *Estimated time: four minutes*

<Warning>Agent currently supports Bolt imports for Vite + React apps.</Warning>

Import a Bolt project into Replit by exporting it to GitHub, then importing that repository.

For comprehensive import options including other platforms like GitHub, Figma, and Lovable, see the [Import feature documentation](/core-concepts/workspace/app-setup/import).

## Before you start

* A Bolt project you can export
* A GitHub account connected to Bolt
* A Replit account

## Import steps

1. Export your Bolt project to GitHub.
2. Open [replit.com/import](https://replit.com/import).
3. Select **Bolt**.
4. Connect your GitHub account.
5. Select the exported Bolt repository.
6. Select **Import**.

## What gets imported

Replit imports the following from your  project:

* **Code**: Application logic and source files
* **Design and styles**: UI components and styling rules
* **Assets**: Images, icons, and static files
* **Backend logic**: Server-side functionality, if present
* **Database schema**: Table structure, if present

## What is not imported

* **Supabase data**: Existing database records are not migrated
* **Secrets**: Environment variables and API keys must be added separately

Use Agent to rebuild missing functionality, add secrets, and recreate database data.

## Configure and run your app

During import, . If your app needs changes, use these Workspace tools:

* **[Agent](/core-concepts/agent)**: Refine features, debug issues, and make code changes
* **[Secrets](/core-concepts/workspace/app-setup/secrets)**: Add API keys and environment variables
* **[Workflows](/core-concepts/workspace/app-setup/workflows)**: Set the **Run** command for your app

## Continue your journey

Now that you've imported your  , explore these next steps:

* [Replit Agent](/core-concepts/agent): Get help with feature work, debugging, and refactoring
* [Make your Replit App Public](/replit-app/collaborate#make-your-replit-app-public): Share your app as a Template
* [Replit Deployments](/category/replit-deployments): Publish your app
* [Database setup](/cloud-services/storage-and-databases/sql-database): Configure your database with Agent help
* [Collaborate](/replit-app/collaborate): Build with teammates


# Import from Figma
Source: https://docs.replit.com/getting-started/quickstarts/import-from-figma

Import Figma designs into Replit and convert them into React apps.

## Import from Figma

⏰ *Estimated time: three minutes*

Import a Figma frame into Replit and convert the design into a working React app.

For comprehensive import options including other platforms like GitHub, Bolt, and Lovable, see the [Import feature documentation](/core-concepts/workspace/app-setup/import).

## Before you start

* A Figma file with a frame you want to import
* Access to connect your Figma account
* A Replit account

## Import steps

1. Open [replit.com/import](https://replit.com/import).
2. Select **Figma**.
3. Connect your Figma account.
4. In Figma, select a frame and copy its URL.
5. Paste the URL into Replit.
6. Select **Import**.

## What gets imported

* Theme and component styling
* Images and icon assets
* App scaffolding for a React project

## Improve conversion quality

* Use auto layout where possible.
* Keep layer names short and descriptive.
* Convert groups to frames before import.
* Mark image layers for export.

## Configure and run your app

During import, . If your app needs changes, use these Workspace tools:

* **[Agent](/core-concepts/agent)**: Refine features, debug issues, and make code changes
* **[Secrets](/core-concepts/workspace/app-setup/secrets)**: Add API keys and environment variables
* **[Workflows](/core-concepts/workspace/app-setup/workflows)**: Set the **Run** command for your app

## Import limits

Figma limits how often you can import based on your Figma plan and seat type. These limits are set by Figma, not Replit.

* **Free, Starter, View, and Collab seats**: 1 import per month.
* **Dev and Full seats** (Pro, Organization, or Enterprise plans): Higher limits with per-minute and daily caps.

If you hit a rate limit during import, upgrade to a Figma Dev or Full seat for increased access. See <a href="https://developers.figma.com/docs/figma-mcp-server/plans-access-and-permissions">Figma's plans and permissions documentation</a> for full details.

## Interact in Agent chat (beta)

After import, you can paste Figma links into Agent chat to inspect layers, extract tokens, and request code changes. A Figma <strong>Dev</strong> or <strong>Full</strong> seat is recommended for Agent chat features. Free and Starter seats are limited to 6 MCP tool calls per month.

See the guide: [Figma MCP Integration](/replitai/mcp/figma).

## Continue your journey

Now that you've imported your  , explore these next steps:

* [Replit Agent](/core-concepts/agent): Get help with feature work, debugging, and refactoring
* [Make your Replit App Public](/replit-app/collaborate#make-your-replit-app-public): Share your app as a Template
* [Replit Deployments](/category/replit-deployments): Publish your app
* [Collaborate](/replit-app/collaborate): Build with teammates


# Import from GitHub
Source: https://docs.replit.com/getting-started/quickstarts/import-from-github

Import GitHub repositories into Replit with rapid import or guided import.

## Import from GitHub

⏰ *Estimated time: two minutes*

Import a GitHub repository into Replit to run, test, and publish faster.

For comprehensive import options including other platforms like Figma, Bolt, and Lovable, see the [Import feature documentation](/core-concepts/workspace/app-setup/import).

## Before you start

* A GitHub repository URL
* Access to the repository (public or private)
* A Replit account

## Option one: rapid import

Rapid import works for public repositories.

1. Copy the repository path after `github.com/`.
2. Open `https://replit.com/github.com/<owner>/<repo>`.
3. Press Enter to start import.

**Example**

* GitHub URL: `https://github.com/exampleUser/my-app`
* Replit import URL: `https://replit.com/github.com/exampleUser/my-app`

## Option two: guided import

Guided import supports public and private repositories.

1. Open [replit.com/import](https://replit.com/import).
2. Select **GitHub**.
3. Connect your GitHub account.
4. Choose a repository.
5. Select **Import**.

## What gets imported

* Repository files and folders
* Dependency files
* Common run and build configuration

## What is not imported

* Existing secret values and environment variable values
* Platform-specific services that do not run in Replit by default

## Configure and run your app

During import, . If your app needs changes, use these Workspace tools:

* **[Agent](/core-concepts/agent)**: Refine features, debug issues, and make code changes
* **[Secrets](/core-concepts/workspace/app-setup/secrets)**: Add API keys and environment variables
* **[Workflows](/core-concepts/workspace/app-setup/workflows)**: Set the **Run** command for your app

## Continue your journey

Now that you've imported your  , explore these next steps:

* [Replit Agent](/core-concepts/agent): Get help with feature work, debugging, and refactoring
* [Make your Replit App Public](/replit-app/collaborate#make-your-replit-app-public): Share your app as a Template
* [Replit Deployments](/category/replit-deployments): Publish your app
* [Collaborate](/replit-app/collaborate): Build with teammates


# Import from Lovable
Source: https://docs.replit.com/getting-started/quickstarts/import-from-lovable

Import Lovable projects into Replit by exporting to GitHub first.

## Import from Lovable

⏰ *Estimated time: four minutes*

Import a Lovable project into Replit by exporting it to GitHub, then importing that repository.

For comprehensive import options including other platforms like GitHub, Figma, and Bolt, see the [Import feature documentation](/core-concepts/workspace/app-setup/import).

## Before you start

* A Lovable project you can export
* A GitHub account connected to Lovable
* A Replit account

## Import steps

1. Export your Lovable project to GitHub.
2. Open [replit.com/import](https://replit.com/import).
3. Select **Lovable**.
4. Connect your GitHub account.
5. Select the exported Lovable repository.
6. Select **Import**.

## What gets imported

Replit imports the following from your  project:

* **Code**: Application logic and source files
* **Design and styles**: UI components and styling rules
* **Assets**: Images, icons, and static files
* **Backend logic**: Server-side functionality, if present
* **Database schema**: Table structure, if present

## What is not imported

* **Supabase data**: Existing database records are not migrated
* **Secrets**: Environment variables and API keys must be added separately

Use Agent to rebuild missing functionality, add secrets, and recreate database data.

## Configure and run your app

During import, . If your app needs changes, use these Workspace tools:

* **[Agent](/core-concepts/agent)**: Refine features, debug issues, and make code changes
* **[Secrets](/core-concepts/workspace/app-setup/secrets)**: Add API keys and environment variables
* **[Workflows](/core-concepts/workspace/app-setup/workflows)**: Set the **Run** command for your app

## Continue your journey

Now that you've imported your  , explore these next steps:

* [Replit Agent](/core-concepts/agent): Get help with feature work, debugging, and refactoring
* [Make your Replit App Public](/replit-app/collaborate#make-your-replit-app-public): Share your app as a Template
* [Replit Deployments](/category/replit-deployments): Publish your app
* [Database setup](/cloud-services/storage-and-databases/sql-database): Configure your database with Agent help
* [Collaborate](/replit-app/collaborate): Build with teammates


# Import from Vercel
Source: https://docs.replit.com/getting-started/quickstarts/import-from-vercel

Import Vercel projects into Replit by selecting the backing GitHub repository.

## Import from Vercel

⏰ *Estimated time: three minutes*

Import a Vercel project into Replit by linking the GitHub repository behind the project.

For comprehensive import options including other platforms like GitHub, Figma, Bolt, and Lovable, see the [Import feature documentation](/core-concepts/workspace/app-setup/import).

## Before you start

* A Vercel project connected to GitHub
* Access to the backing GitHub repository
* A Replit account

## Import steps

1. Open [replit.com/import](https://replit.com/import).
2. Select **Vercel**.
3. Connect your GitHub account.
4. Select the repository for your Vercel project.
5. Add any requested secrets and environment variables.
6. Select **Import**.

## What gets imported

* Project files and directory structure
* Dependency and framework configuration
* Run and build defaults for Replit

## What is not imported

* Existing environment variable values
* Custom domains
* Vercel-specific edge or middleware behavior
* External analytics or monitoring configuration

## Configure and run your app

During import, . If your app needs changes, use these Workspace tools:

* **[Agent](/core-concepts/agent)**: Refine features, debug issues, and make code changes
* **[Secrets](/core-concepts/workspace/app-setup/secrets)**: Add API keys and environment variables
* **[Workflows](/core-concepts/workspace/app-setup/workflows)**: Set the **Run** command for your app

## Continue your journey

Now that you've imported your  , explore these next steps:

* [Replit Agent](/core-concepts/agent): Get help with feature work, debugging, and refactoring
* [Make your Replit App Public](/replit-app/collaborate#make-your-replit-app-public): Share your app as a Template
* [Replit Deployments](/category/replit-deployments): Publish your app
* [Collaborate](/replit-app/collaborate): Build with teammates


# Import from ZIP
Source: https://docs.replit.com/getting-started/quickstarts/import-from-zip

Import ZIP files into Replit by uploading your project archive.

## Import from ZIP

⏰ *Estimated time: three minutes*

Import a local project by uploading a `.zip` file.

For comprehensive import options including other platforms like GitHub, Figma, Bolt, Lovable, and Vercel, see the [Import feature documentation](/core-concepts/workspace/app-setup/import).

## Before you start

* A `.zip` file that contains your project
* A clear project root folder in the archive
* A Replit account

## Import steps

1. Open [replit.com/import](https://replit.com/import).
2. Select **ZIP**.
3. Upload your `.zip` file.
4. Add any requested secrets and environment variables.
5. Select **Import**.

## What gets imported

* Project files and directory structure
* Dependency files
* Run and build defaults for Replit

## What is not imported

* Existing environment variable values
* Custom domains
* Platform-specific services that need manual setup
* Existing database data
* Existing third-party connector configuration

## Configure and run your app

During import, . If your app needs changes, use these Workspace tools:

* **[Agent](/core-concepts/agent)**: Refine features, debug issues, and make code changes
* **[Secrets](/core-concepts/workspace/app-setup/secrets)**: Add API keys and environment variables
* **[Workflows](/core-concepts/workspace/app-setup/workflows)**: Set the **Run** command for your app

## Continue your journey

Now that you've imported your  , explore these next steps:

* [Replit Agent](/core-concepts/agent): Get help with feature work, debugging, and refactoring
* [Make your Replit App Public](/replit-app/collaborate#make-your-replit-app-public): Share your app as a Template
* [Replit Deployments](/category/replit-deployments): Publish your app
* [Collaborate](/replit-app/collaborate): Build with teammates


# Publish your app
Source: https://docs.replit.com/getting-started/quickstarts/publish

Make your app available to the world — understand the difference between building and publishing.

⏰ *Estimated time: 2 minutes* · Follows from [Build your first app](/getting-started/quickstarts/ask-ai)

Up until now, your apps work in the Workspace. But right now, only you can see them. Publishing makes them available to everyone.

## Building vs. publishing

While you're working with Agent, your app runs in a **private building environment**. You can see it in the Preview tab, test it, and make changes, but no one else can access it. Think of it like a draft: it exists, but it's not shared yet.

When you **publish**, Replit takes your app and puts it on the internet with its own public URL. Now anyone with the link can visit it on any device, anywhere in the world.

## Publish your app

In the Workspace, click the **Publish** button.

<Frame>
  <video />
</Frame>

That's it. Replit packages your app, hosts it on its servers, and gives it a public `.replit.app` URL. Copy it and share it anywhere.

<Note>If your project has multiple artifacts — like a web app, a mobile app, and a slide deck — they all go live together when you publish. Each one gets its own URL.</Note>

## Updating your app

Every time you make changes and click **Publish** again, your app updates at the same URL. Visitors will see the latest version immediately. No need to share a new link.

## Next steps

<CardGroup>
  <Card title="Custom domains" icon="globe" href="/cloud-services/deployments/custom-domains">
    Use your own domain instead of .replit.app.
  </Card>

  <Card title="Deployments" icon="server" href="/category/replit-deployments">
    Explore deployment types and advanced settings.
  </Card>

  <Card title="Build your first app" icon="rocket" href="/getting-started/quickstarts/ask-ai">
    Haven't built yet? Start here.
  </Card>
</CardGroup>


# Remix an App
Source: https://docs.replit.com/getting-started/quickstarts/remix-an-app

Learn how to create a **Remix** as a starting point for your app. A Remix is a Replit App started from a publicly shared Replit App.

Looking for another way to start building on Replit? **Remixing** lets you start from existing apps created by the community. It's faster than building from scratch and a great way to learn from working code.

<Tip>
  New to Replit? Try [building your first app](/getting-started/quickstarts/ask-ai) to learn how Agent works from scratch.
</Tip>

## Create your Remix

⏰ *Estimated time: 5 minutes*

Follow the steps in this guide to create a Remix of an interactive digital piano app:

<Frame>
  <img alt="Interactive digital piano with keys" />
</Frame>

<Tip>
  Try the published app at [Digital Piano Keys](https://digital-piano-keys.replit.app).
</Tip>

<Steps>
  <Step title="Remix the app">
    Select the **Remix this app** button below to start creating your own version of the Digital Piano app.

    <RemixButton label="Remix this app" />
  </Step>

  <Step title="Complete the app details">
    After selecting the button, the **Remix App** dialog appears. Select **Remix App** to continue. You can edit these details later.

    <Frame>
      <img alt="Remix App dialog showing app name, description, and privacy settings" />
    </Frame>
  </Step>

  <Step title="Play the piano">
    The app starts automatically. Navigate to the **Preview** tab to see the piano interface.

    <Frame>
      <video />
    </Frame>

    You now have a fully functioning Remix that you can interact with and iteratively improve.

    Click the piano keys to play notes and hear the sounds. Try playing a simple melody to test the app.
  </Step>
</Steps>

## Enhance your Remix

Now that you have a working app, use Agent to modify and extend it. The following sections show practical examples of enhancing your Remix.

### Add a feature using Agent

Use Agent to add complex features to your Remix:

<Steps>
  <Step title="Craft a prompt">
    Navigate to the **Agent** tab.

    Enter the following prompt in the text area:

    <AiPrompt>
      Add a tutorial mode that teaches you how to play simple songs. When tutorial mode is active, highlight the next key that should be played, wait for you to press the correct key before moving on, and display the song name at the top. Include a button to start the tutorial and pre-load at least two simple songs like "Mary Had a Little Lamb" or "Twinkle Twinkle Little Star."
    </AiPrompt>

    After you submit the prompt, Agent might pause and ask for clarification or confirmation. Respond in the text area.
  </Step>

  <Step title="Test the feature">
    Navigate to the **Preview** tab to see Agent's updates to the piano.

    Try starting the tutorial mode and following along as keys are highlighted.

    <Frame>
      <video />
    </Frame>

    Since the initial prompt excluded specific details about the visual design, the result might not
    match your exact expectations.
  </Step>

  <Step title="Refine the feature">
    If the feature differs from your expectations, continue the conversation by entering a follow-up prompt
    in the **Agent** text area. For example:

    <AiPrompt>
      Make the highlighted key glow with a pulsing animation and add a progress indicator showing how far along in the song I am.
    </AiPrompt>

    To undo these changes, select **Rollback to here** in the Checkpoint created immediately
    after starting the plan for the change in the **Agent** tab.

    Learn more about [Checkpoints and Rollbacks](/core-concepts/agent/checkpoints-and-rollbacks).
  </Step>
</Steps>

### Add a feature using Lite mode

Follow these steps to add a quick enhancement to your Remix using [Lite mode](/core-concepts/agent/agent-modes):

<Steps>
  <Step title="Craft a prompt">
    Switch to [Lite mode](/core-concepts/agent/agent-modes) and enter the following prompt:

    <AiPrompt>
      Add record and playback buttons to capture and replay piano performances.
    </AiPrompt>

    After you submit the prompt, Agent describes the changes it wants to make and lets you review the code changes before proceeding.
    Select **Preview code changes** to view a comparison of the current code and the updates.
  </Step>

  <Step title="Test the feature">
    Select **Apply all** and approve any following confirmations to continue.

    Navigate to the **Preview** tab to check the result. You should now see record and playback buttons that let you capture and replay what you play.

    To undo these changes, use the Rollback feature in the **Agent** tab.
  </Step>
</Steps>

## Continue your journey

Now that you've completed this tutorial, here are some remix-specific next steps:

* **Explore more remixes**: Browse the [community](https://replit.com/community/all) to find apps to remix and learn from
* **Build from scratch**: Try [creating your own app](/getting-started/quickstarts/ask-ai) with Agent to compare the experience
* **Examine the code**: View the source code in the **Files** tab to understand how the app works
* **Publish for remixing**: Share your enhanced version so others can build on your work. Learn more in [Make your Replit App Public](/replit-app/collaborate#make-your-replit-app-public)


# App Storage JavaScript SDK
Source: https://docs.replit.com/reference/object-storage-javascript-sdk

Learn how to use the official JavaScript SDK to manage files in Replit App Storage.

This reference guide explains the `Client` class from the `object-storage` library and provides code examples for its methods.

## Client

The `Client` class manages interactions with Replit App Storage. This class features methods for performing operations on files in a bucket.

To import the class from the library, add the following line to your JavaScript code:

```javascript theme={null}
import { Client } from "@replit/object-storage";
```

Use the following code to create a `Client` instance that interacts with Replit Object Storage:

```javascript theme={null}
const client = new Client();
```

## Constructors

**constructor**

* **new Client**(`options?`): `Client`

Creates a new Client instance to interact with Replit App Storage.

**Parameters**

| Name       | Type            | Description                                      |
| :--------- | :-------------- | :----------------------------------------------- |
| `options?` | `ClientOptions` | Configuration options for setting up the client. |

**Returns**

`Client`

## Methods

### copy

* **copy**(`objectName`, `destObjectName`): `Promise`\<`Result`\<`null`, `RequestError`>>

Copies an object within the same bucket.
This method overwrites any existing object at the destination path.

**Parameters**

| Name             | Type     | Description                          |
| :--------------- | :------- | :----------------------------------- |
| `objectName`     | `string` | The full path of the object to copy. |
| `destObjectName` | `string` | The full path to copy the object to. |

**Returns**

`Promise`\<`Result`\<`null`, `RequestError`>>

***

### delete

* **delete**(`objectName`, `options?`): `Promise`\<`Result`\<`null`, `RequestError`>>

Deletes an object from the bucket.

**Parameters**

| Name         | Type            | Description                              |
| :----------- | :-------------- | :--------------------------------------- |
| `objectName` | `string`        | The full path of the object to delete.   |
| `options?`   | `DeleteOptions` | Configurations for the delete operation. |

**Returns**

`Promise`\<`Result`\<`null`, `RequestError`>>

***

### downloadAsBytes

* **downloadAsBytes**(`objectName`, `options?`): `Promise`\<`Result`\<`Buffer`, `RequestError`>>

Downloads an object and returns its raw contents as a buffer.

**Parameters**

| Name         | Type              | Description                                |
| :----------- | :---------------- | :----------------------------------------- |
| `objectName` | `string`          | The full path of the object to download.   |
| `options?`   | `DownloadOptions` | Configurations for the download operation. |

**Returns**

`Promise`\<`Result`\<`Buffer`, `RequestError`>>

***

### downloadAsStream

* **downloadAsStream**(`objectName`, `options?`): `Readable`

Creates a readable stream of the object's contents.
The stream emits any errors encountered during the download.

**Parameters**

| Name         | Type              | Description                                |
| :----------- | :---------------- | :----------------------------------------- |
| `objectName` | `string`          | The full path of the object to download.   |
| `options?`   | `DownloadOptions` | Configurations for the download operation. |

**Returns**

`Readable`

### downloadAsText

* **downloadAsText**(`objectName`, `options?`): `Promise`\<`Result`\<`string`, `RequestError`>>

Downloads an object and returns its contents as a string.

**Parameters**

| Name         | Type              | Description                                |
| :----------- | :---------------- | :----------------------------------------- |
| `objectName` | `string`          | The full path of the object to download.   |
| `options?`   | `DownloadOptions` | Configurations for the download operation. |

**Returns**

`Promise`\<`Result`\<`string`, `RequestError`>>

### downloadToFilename

* **downloadToFilename**(`objectName`, `destFilename`, `options?`): `Promise`\<`Result`\<`null`, `RequestError`>>

Downloads an object and saves it to the specified location on the local filesystem.

**Parameters**

| Name           | Type              | Description                                                         |
| :------------- | :---------------- | :------------------------------------------------------------------ |
| `objectName`   | `string`          | The full path of the object to download.                            |
| `destFilename` | `string`          | The path on the local filesystem to write the downloaded object to. |
| `options?`     | `DownloadOptions` | Configurations for the download operation.                          |

**Returns**

`Promise`\<`Result`\<`null`, `RequestError`>>

### exists

* **exists**(`objectName`): `Promise`\<`Result`\<`boolean`, `RequestError`>>

Checks if an object exists in the bucket.

**Parameters**

| Name         | Type     | Description                           |
| :----------- | :------- | :------------------------------------ |
| `objectName` | `string` | The full path of the object to check. |

**Returns**

`Promise`\<`Result`\<`boolean`, `RequestError`>>

### getBucket

* **getBucket**(): `Promise`\<`Bucket`>

**Returns**

`Promise`\<`Bucket`>

### init

* **init**(`bucketId?`): `Promise`\<`Bucket`>

**Parameters**

| Name        | Type     |
| :---------- | :------- |
| `bucketId?` | `string` |

**Returns**

`Promise`\<`Bucket`>

### list

* **list**(`options?`): `Promise`\<`Result`\<`StorageObject`\[], `RequestError`>>

Returns a list of all objects in the bucket.

**Parameters**

| Name       | Type          | Description                            |
| :--------- | :------------ | :------------------------------------- |
| `options?` | `ListOptions` | Configurations for the list operation. |

**Returns**

`Promise`\<`Result`\<`StorageObject`\[], `RequestError`>>

### mapUploadOptions

* **mapUploadOptions**(`options?`): `undefined` | `UploadOptions`

**Parameters**

| Name       | Type            |
| :--------- | :-------------- |
| `options?` | `UploadOptions` |

**Returns**

`undefined` | `UploadOptions`

### uploadFromBytes

* **uploadFromBytes**(`objectName`, `contents`, `options?`): `Promise`\<`Result`\<`null`, `RequestError`>>

Uploads an object using its in-memory byte representation.
This method overwrites any existing object with the same name.

**Parameters**

| Name         | Type            | Description                                  |
| :----------- | :-------------- | :------------------------------------------- |
| `objectName` | `string`        | The full destination path of the object.     |
| `contents`   | `Buffer`        | The raw contents of the object in byte form. |
| `options?`   | `UploadOptions` | Configurations for the upload operation.     |

**Returns**

`Promise`\<`Result`\<`null`, `RequestError`>>

### uploadFromFilename

* **uploadFromFilename**(`objectName`, `srcFilename`, `options?`): `Promise`\<`Result`\<`null`, `RequestError`>>

Uploads a file from the local filesystem to the bucket.
This method overwrites any existing object with the same name.

**Parameters**

| Name          | Type            | Description                                             |
| :------------ | :-------------- | :------------------------------------------------------ |
| `objectName`  | `string`        | The full destination path of the object.                |
| `srcFilename` | `string`        | The path of the file on the local filesystem to upload. |
| `options?`    | `UploadOptions` | Configurations for the upload operation.                |

**Returns**

`Promise`\<`Result`\<`null`, `RequestError`>>

### uploadFromStream

* **uploadFromStream**(`objectName`, `stream`, `options?`): `Promise`\<`void`>

Uploads an object by reading its contents from the provided stream.
The stream emits any errors encountered during the upload. This method overwrites any existing object with the same name.

**Parameters**

| Name         | Type            | Description                                                 |
| :----------- | :-------------- | :---------------------------------------------------------- |
| `objectName` | `string`        | The full destination path of the object.                    |
| `stream`     | `Readable`      | A readable stream from which to read the object's contents. |
| `options?`   | `UploadOptions` | Configurations for the upload operation.                    |

**Returns**

`Promise`\<`void`>

### uploadFromText

* **uploadFromText**(`objectName`, `contents`, `options?`): `Promise`\<`Result`\<`null`, `RequestError`>>

Uploads an object using its in-memory text representation.
This method overwrites any existing object with the same name.

**Parameters**

| Name         | Type            | Description                              |
| :----------- | :-------------- | :--------------------------------------- |
| `objectName` | `string`        | The full destination path of the object. |
| `contents`   | `string`        | The contents of the object in text form. |
| `options?`   | `UploadOptions` | Configurations for the upload operation. |

**Returns**

`Promise`\<`Result`\<`null`, `RequestError`>>

## Method examples

The following sections provide code examples for managing your files using the Replit Object Storage SDK.

### Retrieve an object as text

```javascript theme={null}
const { ok, value: textValue, error } = await client.downloadAsText('file.json');
if (!ok) {
    // ... handle error ...
}
```

### Retrieve an object as its raw byte representation

```javascript theme={null}
const { ok, value: bytesValue, error } = await client.downloadAsBytes('file.png');
if (!ok) {
    // ... handle error ...
}
```

### Retrieve an object from a stream

```javascript theme={null}
const { ok, value: stream, error } = await client.downloadAsStream('file.json');
if (!ok) {
    // ... handle error ...
}
```

### Download an object to the filesystem

```javascript theme={null}
const { ok, error } = await client.downloadToFilename('file.json', destFilename);
if (!ok) {
    // ... handle error ...
}
```

### List objects in the bucket

```javascript theme={null}
const { ok, value, error } = await client.list();
if (!ok) {
    // ... handle error ...
}
```

### Upload an object from text

```javascript theme={null}
const { ok, error } = await client.uploadFromText('file.json', data);
if (!ok) {
    // ... handle error ...
}
```

### Upload an object as bytes

```javascript theme={null}
const { ok, error } = await client.uploadFromBytes('file.png', data);
if (!ok) {
    // ... handle error ...
}
```

### Upload an object from the filesystem

```javascript theme={null}
const { ok, error } = await client.uploadFromFilename('file.json', srcFilename);
if (!ok) {
    // ... handle error ...
}
```

### Upload an object from a stream

```javascript theme={null}
const { ok, error } = await client.uploadFromStream('file.json', stream);
if (!ok) {
    // ... handle error ...
}
```

### Delete an object from the bucket

```javascript theme={null}
const { ok, error } = await client.delete('file.json');
if (!ok) {
    // ... handle error ...
}
```


# App Storage Python SDK
Source: https://docs.replit.com/reference/object-storage-python-sdk

Learn how to use the official Python SDK to manage files in Replit App Storage.

This reference guide explains the `Client` class from the `replit-object-storage-python` package and provides code examples for its class methods.

## Client

The `Client` class manages interactions with Replit App Storage. This class features methods for performing operations on objects in a bucket.

To import the class from the `replit.object_storage` package, add the following line to your Python code:

```python theme={null}
from replit.object_storage import Client
```

Use the following code to create a `Client` instance that interacts with Replit App Storage:

```python theme={null}
client = Client()
```

<Tip>
  If your app uses multiple buckets, create one `Client` instance per bucket.
</Tip>

### \_\_init\_\_

The `init` method initializes an instance of the Client class.

```python theme={null}
def __init__(bucket_id: Optional[str] = None)
```

**Argument**:

* `bucket_id` (Optional\[str]): The ID of the bucket the client manages. When omitted, the Client uses the default bucket associated with the Replit App or Deployment.

### copy

The `copy` method copies an object within the same bucket. If an object exists in the same location, it overwrites the original.

```python theme={null}
def copy(object_name: str, dest_object_name: str) -> None
```

**Arguments**:

* `object_name` (str) - The full path of the source object.
* `dest_object_name` (str) - The full path of the object destination.

**Raises**:

* `ObjectNotFoundError` - Indicates the source object does not exist at the specified path.

### delete

The `delete` method permanently removes a file from App Storage.

```python theme={null}
def delete(object_name: str, ignore_not_found: bool = False) -> None
```

**Arguments**:

* `object_name` (str) - The name of the object to delete.
* `ignore_not_found` (bool) - When `True`, suppress the error if the object does not exist.

**Raises**:

* `ObjectNotFoundError` - Indicates the object does not exist.

### download\_as\_bytes

The `download_as_bytes` method retrieves the contents of a file as `bytes`.

```python theme={null}
def download_as_bytes(object_name: str) -> bytes
```

**Argument**:

* `object_name` (str) - The name of the object to download.

**Returns**:

* `bytes`- The raw byte representation of the object's contents.

**Raises**:

* `ObjectNotFoundError` - Indicates the object does not exist.

### download\_as\_text

The `download_as_text` method downloads the contents of a file as a `str` type.

```python theme={null}
def download_as_text(object_name: str) -> str
```

**Argument**:

* `object_name` (str) - The source object name to retrieve.

**Returns**:

* str: The object's contents as a UTF-8 encoded string.

**Raises**:

* `ObjectNotFoundError` - Indicates the object does not exist.

### download\_to\_filename

Downloads the contents of an object into a file on the local disk.

```python theme={null}
def download_to_filename(object_name: str, dest_filename: str) -> None
```

**Arguments**:

* `object_name` (str) - The name of the source object from App Storage to retrieve.
* `dest_filename` (str) - The destination filename on local disk.

**Raises**:

* `ObjectNotFoundError` - Indicates the object does not exist.

### exists

The `exists` method checks if an object exists.

```python theme={null}
def exists(object_name: str) -> bool
```

**Argument**:

* `object_name` (str) - The name of the object to check for existence.

**Returns**:

* `bool`: `True` if the object exists, False otherwise.

### list

The `list` method lists objects in the Bucket.

```python theme={null}
def list(end_offset: Optional[str] = None,
         match_glob: Optional[str] = None,
         max_results: Optional[int] = None,
         prefix: Optional[str] = None,
         start_offset: Optional[str] = None) -> List[Object]
```

**Arguments**:

* `end_offset`(Optional\[str]) - Filter results to objects named lexicographically before `end_offset`. If `start_offset` is defined, the objects listed
  have names between `start_offset` (inclusive) and `end_offset` (exclusive).
* `match_glob` (Optional\[str]) - Use a glob pattern to filter results. For example: "foo\*bar" matches "footbar", "foo baz bar", and "foobar".
* `max_results` (Optional\[int]) - The maximum number of results to return in the response.
* `prefix` (Optional\[str]) - Filter results to objects whose names have the specified prefix.
* `start_offset` (Optional\[str]) - Filter results to objects whose names are lexicographically equal to or after `start_offset`.
  When `end_offset` is set, the objects listed have names between `start_offset` (inclusive) and `end_offset` (exclusive).

**Returns**:

* `List`(Object): A list of objects matching the given query parameters.

### upload\_from\_filename

Use `upload_from_filename()` to upload an object from a source file on the local disk to App Storage.

```python theme={null}
def upload_from_filename(dest_object_name: str, src_filename: str) -> None
```

**Arguments**:

* `dest_object_name`(str) - The name of the uploaded file.
* `src_filename`(str) - The source file to upload.

### upload\_from\_bytes

The `upload_from_bytes` method uploads an object from `bytes` data.

```python theme={null}
def upload_from_bytes(dest_object_name: str, src_data: bytes) -> None
```

**Arguments**:

* `dest_object_name`(str) - The name of the object to upload.
* `src_data`(str) - The `bytes` data to upload.

### upload\_from\_text

The `upload_from_text` method uploads an object from a string.

```python theme={null}
def upload_from_text(dest_object_name: str, src_data: Union[bytes, str]) -> None
```

**Arguments**:

* `dest_object_name`(str) - The name of the object to upload.
* `src_data`(str)- The text data to upload.

### Exception types

* When interacting with Replit App Storage using the `Client`, any method might return one of the following errors:

  * `BucketNotFoundError`: Indicates the configured bucket name does not match with any bucket in App Storage.

  * `DefaultBucketError`: Indicates missing default bucket configuration.

  * `ForbiddenError`: Indicates insufficient permissions to access to the bucket.

  * `TooManyRequestsError`: Indicates the operation is rate-limited due to excessive requests.

  * `UnauthorizedError`: Indicates authorization restricted access to the operation.

## Class method examples

The following sections provide code examples for managing your objects using the Replit App Storage SDK.

### Retrieve a file as text

```python theme={null}
client.download_as_text("file.json")
```

### Retrieve raw bytes of a file

```python theme={null}
client.download_as_bytes("file.png")
```

### Download a file to the local filesystem

```python theme={null}
client.download_to_filename("file.json", dest_filename)
```

### List objects in the bucket

```python theme={null}
client.list()
```

### Upload a file from text

```python theme={null}
client.upload_from_text("file.json", data)
```

### Upload a file as bytes

```python theme={null}
client.upload_from_bytes("file.png", data)
```

### Upload a objects from the filesystem

```python theme={null}
client.upload_from_filename("file.json", src_filename)
```

### Delete an object from the bucket

```python theme={null}
client.delete("file.json")
```


# Configure Apple OAuth
Source: https://docs.replit.com/replit-workspace/whitelabel-auth/apple

Set up Sign in with Apple for your app's authentication

This guide walks you through configuring Sign in with Apple for your app's authentication. This requires creating an App ID, Services ID, and Private Key in the Apple Developer portal.

## Prerequisites

* A published Replit app (you need a deployment URL like `your-app.replit.app`)
* An [Apple Developer account](https://developer.apple.com/account) (requires enrollment in the Apple Developer Program)

## Step 1: Publish your app

Before configuring custom OAuth credentials, you need a published deployment URL. You'll need the URL when setting up your custom Apple credentials.

1. Publish your app from the Replit workspace
2. Note your published URL (e.g., `https://your-app.replit.app`)

## Step 2: Create an Apple App ID

1. Navigate to the [Apple Developer portal](https://developer.apple.com/account)
2. Go to **Certificates, IDs & Profiles** then **Identifiers**
3. Select **App IDs** from the dropdown
4. Select the **+** icon to register a new identifier
5. Select **App IDs**, then **Continue**
6. Choose **App**, then **Continue**
7. Fill in:
   * **Description**: Name for your App ID
   * **Bundle ID**: Your unique identifier
8. Enable **Sign In with Apple** under Capabilities
9. Select **Continue**, then **Register**
10. **Save your App ID Prefix** (shown at top) - this is your **Team ID**

## Step 3: Create an Apple Services ID

1. On the Identifiers page, select **Services IDs** from the dropdown
2. Select **+** to register a new identifier
3. Select **Services IDs**, then **Continue**
4. Fill in:
   * **Description**: Name for your Services ID
   * **Identifier**: Your unique identifier (save this - it's your **Services ID**)
5. Select **Continue**, then **Register**

### Configure the Services ID

1. Select your newly created Services ID
2. Enable **Sign In with Apple**
3. Select **Configure**
4. Set:
   * **Primary App ID**: Select your App ID from Step 2
   * **Domains and Subdomains**: Add your published domain without the protocol:
     ```
     your-app.replit.app
     ```
   * **Return URLs**: The return URL is your published domain followed by `/api/__clerk/v1/oauth_callback`:
     ```
     https://your-app.replit.app/api/__clerk/v1/oauth_callback
     ```
5. Select **Next**, then **Done**, then **Continue**, then **Save**

## Step 4: Create an Apple Private Key

1. In the Apple Developer portal sidebar, select **Keys**
2. Select **+** to register a new key
3. Enter a **Key Name**
4. Enable **Sign In with Apple**
5. Select **Configure**, then select your App ID from Step 2
6. Select **Save**, then **Continue**, then **Register**
7. **Save the Key ID**
8. **Download** the private key file (.p8)

<Warning>
  You can only download the private key once. Store it securely - you cannot download it again.
</Warning>

## Step 5: Configure Apple Private Email Relay

Apple's Hide My Email feature lets users sign in without revealing their real email. To send emails to these users, register your email source.

1. In the Apple Developer portal sidebar, select **Services**
2. Under **Sign in with Apple for Email Communication**, select **Configure**
3. Select **+** to add an Email Source
4. Enter the Email Source value from the Replit Auth configuration form
5. Select **Next**, then **Register**, then **Done**
6. Wait for DNS verification (green check icon)

<Info>
  In some regions (China, India), Apple IDs may be tied to phone numbers instead of email. If your app requires email for all users, Sign in with Apple may fail for users in these regions.
</Info>

## Step 6: Enter credentials in Replit

1. In your Repl, navigate to the **Auth pane**
2. Select the **Configure** tab
3. Select **Production** environment
4. Select the **Edit** button next to Apple
5. Toggle on **Use custom credentials**
6. Enter all the values you collected:
   * **Team ID** (App ID Prefix from Step 2)
   * **Services ID** (Identifier from Step 3)
   * **Key ID** (from Step 4)
   * **Private Key**: Open the .p8 file in a text editor, copy the entire contents including the `-----BEGIN PRIVATE KEY-----` and `-----END PRIVATE KEY-----` lines
7. Select **Save changes**
8. Toggle Apple to **Enabled**

## Step 7: Test your integration

1. Open your published app's login page
2. Select **Sign in with Apple**
3. Complete the Apple sign-in flow
4. Verify successful authentication

## Troubleshooting

### Invalid client

* Verify all credentials are entered correctly
* Ensure the Private Key includes the BEGIN and END lines
* Check that your Services ID is properly configured

### Invalid redirect URI

* Verify the Return URL in the Apple Services ID configuration is exactly `https://your-app.replit.app/api/__clerk/v1/oauth_callback`
* Check the domain in Domains and Subdomains matches your published domain (without `https://`)

### Email relay not working

* Verify the Email Source shows a green check in the Apple Developer portal
* Wait for DNS propagation if recently added

### Not working on custom domain

* Add your custom domain to Domains and Subdomains in the Services ID configuration (without `https://`)
* Add `https://your-custom-domain.com/api/__clerk/v1/oauth_callback` as an additional Return URL
* Republish your app

## Additional resources

* [Apple Sign in with Apple Documentation](https://developer.apple.com/sign-in-with-apple/)
* [Private Email Relay Service Guide](https://developer.apple.com/help/account/configure-app-capabilities/configure-private-email-relay-service)


# Configure GitHub OAuth
Source: https://docs.replit.com/replit-workspace/whitelabel-auth/github

Set up GitHub as a social sign-in provider for your app's authentication

This guide walks you through configuring GitHub OAuth for your app's authentication. Your app's users will be able to sign in with their GitHub accounts.

## Prerequisites

* A published Replit app (you need a deployment URL like `your-app.replit.app`)
* A [GitHub account](https://github.com)

## Step 1: Publish your app

Before configuring custom OAuth credentials, you need a published deployment URL. You'll need the URL when setting up your custom GitHub credentials.

1. Publish your app from the Replit workspace
2. Note your published URL (e.g., `https://your-app.replit.app`)

## Step 2: Create a GitHub OAuth app

1. Navigate to [GitHub Developer Settings](https://github.com/settings/developers)
2. Select **OAuth Apps** in sidebar
3. Select **New OAuth App**
4. Fill in the application details:

**Application name:**

Enter a name for your application.

**Homepage URL:**

Enter your published app URL:

```
https://your-app.replit.app
```

**Authorization callback URL:**

The callback URL is your published domain followed by `/api/__clerk/v1/oauth_callback`. Enter the following, replacing `your-app.replit.app` with your actual published domain:

```
https://your-app.replit.app/api/__clerk/v1/oauth_callback
```

5. Select **Register application**

## Step 3: Generate client credentials

1. You'll see your **Client ID** on the app's settings page - copy it
2. Select **Generate a new client secret**
3. Copy your **Client Secret** immediately

<Warning>
  Save your Client Secret securely. You can't view it again after leaving the page. If lost, you'll need to generate a new one.
</Warning>

## Step 4: Enter credentials in Replit

1. In your Repl, navigate to the **Auth pane**
2. Select the **Configure** tab
3. Select **Production** environment
4. Select the **Edit** button next to GitHub
5. Toggle on **Use custom credentials**
6. Paste your **Client ID** and **Client Secret**
7. Select **Save changes**
8. Toggle GitHub to **Enabled**

## Step 5: Test your integration

1. Open your published app's login page
2. Select **Sign in with GitHub**
3. Authorize the app on GitHub
4. Verify successful authentication

## Troubleshooting

### Redirect URI mismatch

* Verify the Authorization callback URL is exactly `https://your-app.replit.app/api/__clerk/v1/oauth_callback`
* Check for typos or incorrect protocols
* No trailing slashes

### Invalid client

* Double-check Client ID and Client Secret are copied correctly
* Ensure no extra spaces when pasting

### Not working on custom domain

* Update the Homepage URL in your GitHub OAuth app to your custom domain
* Update the Authorization callback URL to `https://your-custom-domain.com/api/__clerk/v1/oauth_callback`
* Republish your app


# Configure Google OAuth
Source: https://docs.replit.com/replit-workspace/whitelabel-auth/google

Set up Google as a social sign-in provider for your app's authentication

This guide walks you through configuring Google OAuth for your app's authentication. Your app's users will be able to sign in with their Google accounts.

## Prerequisites

* A published Replit app (you need a deployment URL like `your-app.replit.app`)
* Access to the [Google Cloud Console](https://console.cloud.google.com/)

## Step 1: Publish your app

Before configuring custom OAuth credentials, you need a published deployment URL. You'll need the URL when setting up your custom Google credentials.

1. Publish your app from the Replit workspace
2. Note your published URL (e.g., `https://your-app.replit.app`)

## Step 2: Create a Google OAuth app

Navigate to the [Google Cloud Console](https://console.cloud.google.com/):

### Create or select a project

1. Select an existing project or create a new one from the project dropdown
2. You'll be redirected to your project's Dashboard

### Configure OAuth consent screen

1. In the left sidebar, select the menu icon (≡) and select **APIs & Services**
2. Select **OAuth consent screen**
3. Configure your app's consent screen with required information
4. Save your changes

### Create OAuth credentials

1. From **APIs & Services**, select **Credentials**
2. Select **Create Credentials** at the top, then select **OAuth client ID**
3. Choose **Web application** as the application type
4. Configure the following:

**Authorized JavaScript origins:**

Add your published app URL:

```
https://your-app.replit.app
```

If you have a custom domain, add that as well:

```
https://your-custom-domain.com
```

**Authorized redirect URIs:**

The redirect URI is your published domain followed by `/api/__clerk/v1/oauth_callback`. Add the following, replacing `your-app.replit.app` with your actual published domain:

```
https://your-app.replit.app/api/__clerk/v1/oauth_callback
```

If you have a custom domain:

```
https://your-custom-domain.com/api/__clerk/v1/oauth_callback
```

5. Select **Create**
6. Save your **Client ID** and **Client Secret**

<Warning>
  Keep your Client Secret secure and never commit it to version control.
</Warning>

## Step 3: Enter credentials in Replit

1. In your Repl, navigate to the **Auth pane**
2. Select the **Configure** tab
3. Select **Production** environment
4. Select the **Edit** button next to Google
5. Toggle on **Use custom credentials**
6. Paste your **Client ID** and **Client Secret**
7. Select **Save changes**
8. Toggle Google to **Enabled**

## Step 4: Test your integration

1. Open your published app's login page
2. Select **Sign in with Google**
3. Complete the Google sign-in flow
4. Verify successful authentication

<Warning>
  Google sign-in does not work in embedded browsers or in-app webviews. Users must use a standard web browser.
</Warning>

## Troubleshooting

### Redirect URI mismatch

* Verify the redirect URI in Google Cloud Console is exactly `https://your-app.replit.app/api/__clerk/v1/oauth_callback`
* Ensure there are no trailing slashes or typos
* Wait a few minutes for Google's configuration to propagate

### Invalid client

* Double-check Client ID and Client Secret are copied correctly
* Ensure there are no extra spaces
* Verify OAuth consent screen is configured

### Not working on custom domain

* Add your custom domain to both Authorized JavaScript origins and Authorized redirect URIs
* Use the format `https://your-custom-domain.com/api/__clerk/v1/oauth_callback` for the redirect URI
* Republish your app and clear browser cache


# Configure X (Twitter) OAuth
Source: https://docs.replit.com/replit-workspace/whitelabel-auth/twitter-x

Set up X (formerly Twitter) as a social sign-in provider for your app's authentication

This guide walks you through configuring X OAuth for your app's authentication. Your app's users will be able to sign in with their X accounts.

## Prerequisites

* A published Replit app (you need a deployment URL like `your-app.replit.app`)
* An [X Developer account](https://developer.twitter.com/) (free tier available)

## Step 1: Publish your app

Before configuring custom OAuth credentials, you need a published deployment URL. You'll need the URL when setting up your custom X credentials.

1. Publish your app from the Replit workspace
2. Note your published URL (e.g., `https://your-app.replit.app`)

## Step 2: Set up X Developer app

### Create a developer account (if needed)

1. Navigate to [X Developer Portal](https://developer.twitter.com/en/portal/dashboard)
2. Apply for a developer account if you don't have one
3. Complete the application describing your use case

### Create or select an app

1. In the X Developer Portal, go to **Projects & Apps**
2. Use an existing app or select **Add App**
3. Enter an app name and select **Next**
4. Select **App settings**

## Step 3: Configure authentication

1. Scroll to **User authentication settings**
2. Select **Set up**

**App permissions:**

Select minimum permission level:

* **Read** - Required for user profile (minimum)
* **Write** - For posting on behalf of users (optional)
* **Direct Messages** - For DM access (optional)

<Warning>
  Permissions must match scopes requested. If your app requests `tweet.write` but you only enabled Read, authentication will fail.
</Warning>

**Type of app:**

Select **Web App, Automated App or Bot**

**App info:**

* **Callback URI / Redirect URL**: The callback URI is your published domain followed by `/api/__clerk/v1/oauth_callback`. Enter the following, replacing `your-app.replit.app` with your actual published domain:
  ```
  https://your-app.replit.app/api/__clerk/v1/oauth_callback
  ```
* **Website URL**: Your published app URL:
  ```
  https://your-app.replit.app
  ```

3. Select **Save**
4. **Save your Client ID and Client Secret**

<Warning>
  Store your Client Secret securely. If lost, regenerating it invalidates the old one.
</Warning>

## Step 4: Enter credentials in Replit

1. In your Repl, navigate to the **Auth pane**
2. Select the **Configure** tab
3. Select **Production** environment
4. Select the **Edit** button next to X
5. Toggle on **Use custom credentials**
6. Paste your **Client ID** and **Client Secret**
7. Select **Save changes**
8. Toggle X to **Enabled**

## Step 5: Test your integration

1. Open your published app's login page
2. Select **Sign in with X**
3. Authorize the app on X
4. Verify successful authentication

## Troubleshooting

### Redirect URI mismatch

* Verify the Callback URI is exactly `https://your-app.replit.app/api/__clerk/v1/oauth_callback`
* Check for typos or incorrect protocols
* No trailing slashes

### Invalid client

* Double-check Client ID and Client Secret
* Ensure no extra spaces
* Verify you are using OAuth 2.0 credentials (not OAuth 1.0a)

### Scope/permission errors

* Verify scopes match permissions enabled in X Developer Portal
* Ensure Read permission is enabled at minimum

### App in development mode

* X apps start in development mode with limited users
* You may need to apply for elevated access for production use

### Not working on custom domain

* Update the Website URL in your X app settings to your custom domain
* Update the Callback URI to `https://your-custom-domain.com/api/__clerk/v1/oauth_callback`
* Republish your app

## Additional resources

* [X OAuth 2.0 Documentation](https://developer.twitter.com/en/docs/authentication/oauth-2-0)
* [X OAuth Scopes](https://developer.twitter.com/en/docs/authentication/oauth-2-0/authorization-code)


# Animated Videos
Source: https://docs.replit.com/replitai/animated-videos

Learn how to create animated videos with Agent — describe what you want in everyday language and export polished motion graphics.

Create professional animated videos with Replit Agent. Describe the video you want in everyday language, and Agent generates motion graphics you can export and share — no video editing skills or expensive agencies required.

## Overview

Replit Animation lets you create polished motion graphics entirely through conversation with Agent. These are programmatic animations built with React — Remotion is not used; instead, Animated Videos rely on a combination of website animation libraries and custom Agent skills. This is not AI-generated video like Runway or Sora. Your videos can include text overlays, smooth transitions, AI-generated images, and more.

Videos auto-play in a loop in the Preview pane, and you can iterate on them by chatting with Agent, just like building any other app.

**Available to all builders**, including the free tier.

## Creating an animated video

You can start creating an animated video in two ways from the Replit homepage:

### Option 1: Type a prompt

Select the **App** tab on the homepage and type a prompt that describes the video you want. Agent will automatically detect video-related prompts and select the Animated Video stack.

Example prompts:

* "Make a promo video for my new sparkling water brand"
* "Create a 30-second explainer video for how large language models work"
* "Make a cinematic promotional video for the city of Austin, Texas"

<Frame>
  <img alt="Replit homepage App tab with Animation selected and a prompt reading Create a launch video for my new app" />
</Frame>

### Option 2: Select from the dropdown

1. Go to the **App** tab on the homepage.
2. Open the app type dropdown.
3. Select **Animation**.
4. Type a description of the video you want to create.

<Frame>
  <img alt="App type dropdown showing Animation selected among options including Web app, Mobile app, Data Visualization, 3D Game, and Automation" />
</Frame>

Once Agent starts building, it generates the animation and displays it in the preview pane. You can watch the video auto-play in a loop and continue chatting to make changes.

## Iterating on your video

After Agent generates the first version, you can refine it through conversation. A few approaches that work well:

* **Use the Enhance Prompt button** in the chat input, which is tuned specifically for video prompts.
* **Ask for improvements** — saying something like "make it better" or "add more complex animations within the scenes, be more creative" after reviewing the first version tends to produce strong results.
* **Be specific** about what you want changed — for example, "make the transitions smoother," "change the color scheme to dark blue and gold," or "add a logo reveal at the end."

If you submit a few different prompts, you'll likely be happy with at least one of the results.

## Exporting your video

When your video looks good, you can export it as an MP4 file.

1. Locate the **Export** button in the top right of the Preview pane.
2. Select your preferred quality settings:
   * **Resolution**: 720p or 1080p
   * **Frame rate**: 30fps or 60fps
3. Select **Export**. Rendering may take a few minutes depending on the complexity of the video.
4. Once rendering is complete, the MP4 file downloads automatically.

<Frame>
  <img alt="Export video dialog showing Name field, Quality dropdown set to 1080p 60fps, and Render button" />
</Frame>

You can also select **Publish** to share a link to the video.

**Export times**: Longer or more complex videos may take several minutes to render. The export runs server-side, so you can continue working while it processes.

## Use cases

Animated Videos work well for a range of creative and professional needs:

* **Product launch videos** — announce a new app, feature, or product release with a polished promo.
* **Brand and cinematic videos** — create visually rich videos for companies, cities, universities, or events.
* **Explainer videos** — break down how a product, feature, or concept works in 30–60 seconds.
* **Social media content** — make scroll-stopping motion graphics for Twitter/X, LinkedIn, Instagram, or TikTok.
* **Landing page videos** — add animated hero sections or background videos to your website.
* **Fundraising and investor updates** — create professional announcement videos for milestones.

## Video specifications

| Property         | Details                                                                                                |
| ---------------- | ------------------------------------------------------------------------------------------------------ |
| **Format**       | MP4                                                                                                    |
| **Resolution**   | 720p or 1080p                                                                                          |
| **Frame rate**   | 30fps or 60fps                                                                                         |
| **Aspect ratio** | 16:9 (default)                                                                                         |
| **Rendering**    | Server-side; animation libraries (typically used for websites) plus custom Agent skills — not Remotion |
| **Playback**     | Auto-play loop in preview pane                                                                         |

## Common questions

* **Can I pause or play the video?** The Preview does not include built-in pause/play controls. Videos always auto-play in a loop. If you want pause/play (or scene selection) in your video, you can ask Agent to add them — though adding these controls can sometimes degrade design quality, so you may prefer to keep the default loop.
* **Is there scene selection?** There is no built-in scene selector in the preview. You can ask Agent to add scene selection or other controls if you want; the same tradeoff applies as above.

## Limitations

Animated Videos is a new feature and has some current limitations to be aware of:

* **Programmatic animation only**: Videos are React-based motion graphics. This is not AI-generated video (like Runway or Sora) — though it can generate videos and use those in the code.
* **Rendering time**: Complex animations may take several minutes to export. Simpler videos render faster.
* **Iteration may be needed**: While many prompts produce great results in one shot, you may need to iterate through 2–3 versions to get the exact result you want. Using the Enhance Prompt button for the initial prompt and giving feedback after the first checkpoint helps.

## Next steps

* **Try example prompts**: Start with one of the demo prompts above to see what Animated Videos can do.
* **Use Enhance Prompt**: The Enhance Prompt button in chat is tuned for video prompts and tends to improve results.
* **Publish or download**: Export your finished video as MP4, or publish it to share a link.
* **Explore other app types**: Learn about [building apps with Agent](/core-concepts/agent) or creating visual designs with [Design Mode](/replitai/design-mode).


# What's an Artifact?
Source: https://docs.replit.com/replitai/artifacts

Artifacts are publishable outputs on Replit — web apps, mobile apps, slides, and videos you can deploy and share.

## What are artifacts?

Artifacts are the things you can publish on Replit — web apps, mobile apps, slides, and videos. Each one is a complete, standalone output that gets its own shareable URL when you publish.

Everything else in your project — files, images, CSVs, code — supports your artifacts but can't be published on its own.

<ArtifactGrid />

## What you can create

| Type           | What it is                                                                   |
| -------------- | ---------------------------------------------------------------------------- |
| **Web App**    | Fullstack web applications, games, data dashboards, Streamlit apps, and more |
| **Mobile App** | Native mobile apps built with Expo and React Native                          |
| **Slides**     | Presentation decks                                                           |
| **Video**      | Programmatically generated video projects                                    |

## Getting started

There are two ways to create from the Replit homepage:

* **Describe it**: Type what you want — "build me a recipe app" or "make a pitch deck for my startup." Agent figures out which type fits and builds it.
* **Pick a type**: Open the type dropdown and choose **Web App**, **Mobile App**, **Slides**, or **Video** before describing your idea.

You can also add more to an existing project at any time by asking Agent in chat or clicking the **+** button in the preview panel.

## Switching between artifacts

Once you have multiple artifacts in a project, switch between them in the **preview panel** or the **Library sidebar**. You can also ask Agent — "show me the mobile app" or "switch to the slides."

### Library sidebar

The Library sidebar gives you a central place to browse everything in your project. It shows your artifacts, images that Agent generated or downloaded, and other project assets. Open the Library sidebar from the left panel to find and reuse any asset across your project.

<Frame>
  <video />
</Frame>

## Multiple artifacts in one project

A single project can hold multiple artifacts. For example, you could build a web app for your customers, a mobile app for your team, and a slide deck for investors — all in the same project.

<ArtifactGrid />

### Adding artifacts to a project

There are three ways to add an artifact to an existing project:

* **Chat**: Ask Agent — "add a mobile app to this project" or "create a slide deck for the investor pitch"
* **Plus button**: Click the **+** button in the preview panel and choose what you want to build
* **Library sidebar**: Browse your existing artifacts, images, and other assets, and add new artifacts from there

### Shared data and backend

When artifacts live in the same project, they automatically share the same data and backend logic. If a customer places an order through your web app, your mobile app and data dashboard see that order too. You don't need to set up any connections or duplicate code — it just works.

<Note>
  Publishing deploys your entire project at once. All artifacts go live together, so they always stay in sync.
</Note>

### Example combinations

* **Web app + mobile app**: A restaurant with a customer-facing web app and a mobile app for staff — both connected to the same API and database
* **App + admin dashboard**: A main product alongside an internal admin panel for managing content, users, or settings
* **App + slide deck**: Your product and a pitch deck in the same project, so the slides always reflect the latest version
* **Data dashboard + video**: A live data visualization paired with an animated video that walks through the highlights

## Publishing

Apps, slides, and videos can all be published and shared. Each one gets its own shareable URL when you deploy.

Files and assets that aren't artifacts (like CSVs, images, or markdown files) can't be published on their own. To share them, add them to an app or create a new artifact.

## Frequently asked questions

<Accordion title="Can I have more than one artifact in a project?">
  Yes. You can add as many as you want to a single project. They all share the same backend and data automatically.
</Accordion>

<Accordion title="Do I have to pick a type before I start?">
  No. Just describe what you want and Agent picks the right type for you. You can also choose a type manually from the dropdown if you prefer.
</Accordion>

<Accordion title="Can I publish just one artifact from a project?">
  Not currently. Publishing deploys the entire project together, so all artifacts stay in sync. If you need independent deployment, use separate projects.
</Accordion>

<Accordion title="Do artifacts share data with each other?">
  Yes. All artifacts in a project share the same database and backend services. If your web app writes data, your mobile app and data dashboard can read it immediately.
</Accordion>

<Accordion title="What's the difference between an artifact and a file?">
  Artifacts are things you can publish — apps, slides, and videos. Files (like CSVs, images, or code) are assets within your project that support your artifacts but can't be published on their own.
</Accordion>

<Accordion title="My mobile app is missing features from my web app. What happened?">
  When Agent translates features between artifact types, some things may not carry over perfectly — especially interactions or layouts that work differently across platforms. You can follow up in chat to fill in the gaps.
</Accordion>

For a full list of what you can build, see the [Projects overview](/replitai/projects).


# Native Mobile Apps
Source: https://docs.replit.com/replitai/building-mobile-apps

Learn how to build a native mobile app with Agent, test it on your phone, and publish to the App Store.

<Frame>
  <img alt="Mobile app running in the Replit Workspace preview with the Preview on device panel and QR code" />
</Frame>

Build iOS and Android apps with Agent, preview them on your phone, and publish through a guided flow—without setting up local toolchains.

## Getting started

You can get to a working mobile app in a few steps:

<Steps>
  <Step title="Create a mobile app">
    On the Replit home screen, describe your app idea and select **Mobile app** as the app type.

    <Frame>
      <img alt="Replit home screen prompt with Mobile app selected as the app type" />
    </Frame>
  </Step>

  <Step title="Test on your phone">
    Install Expo Go on your phone, then open a native preview:

    * **Desktop**: In your Workspace, select **Preview on mobile device**, then scan the QR code shown next to the preview.
    * **Mobile**: In the Replit Mobile App, tap **Open in Expo Go** at the top of the preview.

    <Frame>
      <img alt="Replit Workspace showing the app preview and the Preview on mobile device option" />
    </Frame>
  </Step>

  <Step title="Iterate with Agent">
    Ask Agent to add features, connect data sources, or integrate services. Keep testing on your phone as you iterate.
  </Step>
</Steps>

<Tip>
  The preview pane shows the web version of your app. Native features like haptics, glass effects, or platform-specific styling may only appear when you test on your phone with Expo Go.
</Tip>

## Why build a mobile app?

Build a mobile app when you want:

* **A native experience**: Fast performance, smooth interactions, and platform-native UI.
* **Device capabilities**: Camera, push notifications, location, and more.
* **App Store distribution**: A shareable listing that people can discover and install.

## Key features

* **AI-first creation**: Describe your app, and Agent scaffolds a working mobile app.
* **Device preview**: Test on your phone with Expo Go for a native experience.
* **Full-stack by default**: Add server routes, a Database, App Storage, Connectors, and AI integrations as your app grows.
* **Guided publishing**: Publish to App Store and submit builds without managing local iOS toolchains.

## Development workflow

There are three stages for accessing your app, each with different audiences and capabilities:

| Stage           | Who can access      | How to access                    | Best for               |
| --------------- | ------------------- | -------------------------------- | ---------------------- |
| **Development** | You                 | QR code in the Workspace console | Building and iterating |
| **Deploy**      | Anyone with Expo Go | Public URL with QR code          | Prototyping and demos  |
| **App Store**   | Anyone              | Download from App Store          | Production release     |

**Development**: When you click **Start App**, a QR code appears in the console. Scan it with Expo Go to preview on your device. The preview pane in your Workspace shows a web version, which may look slightly different from the native version on your phone.

**Deploy**: When you click **Publish**, Replit creates a public URL with a QR code. Anyone with Expo Go can scan it and run your app. This is ideal for prototyping—show investors, gather feedback, or test with friends before committing to the App Store.

**App Store**: When you submit to the App Store, users can download and install your app permanently. This requires an Apple Developer account and goes through Apple's review process.

## Publishing overview

When you publish for iOS, the flow typically goes:

* Publish from your Workspace
* Submit a build to TestFlight
* Promote a TestFlight build to the App Store in App Store Connect

<Note>
  To publish to TestFlight and submit to the App Store, Apple requires an Apple Developer Program membership.
</Note>

For a complete walkthrough, see the [Build and launch a mobile app](/tutorials/build-and-launch-a-mobile-app) tutorial.

## Build on the go

Your Replit environment runs in the cloud, not on your local machine. This means you can build mobile apps from anywhere—including from the [Replit Mobile App](/platforms/mobile-app). Open your project, prompt Agent, and tap **Open in Expo Go** to preview your changes on your phone.

## How the technology works

Your mobile app is built with a stack of technologies that work together. This section explains what powers your app and how the pieces fit together.

### The technology stack

<MobileStackDiagram />

* **React Native** is an open-source framework that lets you write one codebase and compile it to iOS, Android, and web. It renders platform-native UI components, not a webview.
* **Expo** simplifies React Native development by handling builds, managing native modules, and providing tools like Expo Go for previews.
* **Expo Go** is a free app you install on your phone. It runs your development preview so you can test on a real device without building a full native binary.

When you run your app, the Metro bundler compiles your code and pushes it to your device. The first build takes longer because there's no cache. Subsequent builds are faster.

### Architecture: server and client

When you publish a mobile app, you're deploying two things:

1. **A server** that runs on Replit in the cloud. This handles your database, API routes, AI integrations, and backend logic.
2. **A client app** that runs on the user's phone. This is the native app distributed through the App Store or Expo Go.

<MobileArchitectureDiagram />

This separation gives you flexibility. You can run complex logic on the server (where you have access to Replit's Database, Object Storage, and Connectors) and keep the client lightweight. As you build, think about what should happen on the phone versus what should happen in the cloud.

## Considerations

* **Publishing requirements**: Apple sets the requirements for TestFlight and the App Store.
* **Android publishing**: You can build cross-platform apps for iOS and Android. Publishing to Google Play is not supported through a guided experience yet, but can be accomplished manually.
* **Native changes**: Changes like app icons or permissions usually require a new store build.

## Troubleshooting

If you run into issues while developing your mobile app, see [Mobile app troubleshooting](/tutorials/mobile-app-troubleshooting) for common problems and solutions.

## Next steps

* Learn how Agent works: [Agent](/core-concepts/agent)
* Explore integrations: [Integrations](/replitai/integrations)
* Build on mobile: [Replit Mobile App](/platforms/mobile-app)
* Read more about Expo: [Expo](https://expo.dev/)
* Manage TestFlight and submissions: [App Store Connect](https://appstoreconnect.apple.com/)

## FAQs

<AccordionGroup>
  <Accordion title="What is Expo?">
    Expo is what Agent uses to build your mobile app on Replit. It is an open-source platform and toolchain for building, running, and deploying cross-platform native apps with React Native. Learn more at [https://expo.dev](https://expo.dev).
  </Accordion>

  <Accordion title="What is React Native?">
    React Native is an open-source framework from Meta for building native iOS and Android apps using React and JavaScript or TypeScript. It renders platform-native UI components (not a webview), so your app looks and feels native.
  </Accordion>

  <Accordion title="What is Expo Go?">
    Expo Go is a free app you install on your phone from the App Store or Google Play. It lets you preview your mobile app during development without building a full native binary. When you scan the QR code in your Workspace, Expo Go downloads and runs your app code.
  </Accordion>

  <Accordion title="What's the difference between Expo Go and a dev build?">
    **Expo Go** is a pre-built app that runs your code. It's fast to set up but only supports modules included in the Expo SDK.

    **Dev builds** are custom native binaries that can include any native module. They require more setup (EAS Build or local Xcode/Android Studio) but offer more flexibility.

    Replit uses Expo Go for development previews. If you need native modules not supported in Expo Go, you may need to explore dev builds through [Expo's documentation](https://docs.expo.dev/develop/development-builds/introduction/).
  </Accordion>

  <Accordion title="How is this different from a mobile-responsive web app?">
    A mobile-responsive web app is a website that adapts its layout in the browser. A React Native app is a native application installed on the device that uses platform APIs (camera, haptics, push notifications), offers better access to hardware and offline capabilities, and is distributed via app stores. Responsive web can be great for reach and zero-install; native is best when you need device features, performance, or App Store distribution.
  </Accordion>

  <Accordion title="Do I need a Mac or Xcode?">
    No. Replit and Expo manage the build process for you in the cloud.
  </Accordion>

  <Accordion title="Can I preview without an Apple Developer account?">
    Yes. You can preview with Expo Go. You only need an Apple Developer account when you're ready to publish to TestFlight or the App Store.
  </Accordion>

  <Accordion title="Is Android supported?">
    Yes. You can build cross-platform apps for iOS and Android from the same codebase. Preview on Android devices with Expo Go. Publishing to Google Play can be done manually.
  </Accordion>

  <Accordion title="What about servers and databases?">
    Use Replit's built-in PostgreSQL, Object Storage, Connectors, and AI integrations—no separate infrastructure required. Your server runs on Replit and your mobile app connects to it.
  </Accordion>

  <Accordion title="Why does my app look different in the preview pane vs. on my phone?">
    The preview pane shows the web version of your app. Native iOS and Android features—like platform-specific styling, glass effects, or haptic feedback—only appear when you test on a real device with Expo Go. Always test on your phone for the most accurate preview.
  </Accordion>
</AccordionGroup>


# Canvas
Source: https://docs.replit.com/replitai/canvas

Learn how to use the Canvas to explore and iterate on designs with Agent, and see your artifacts displayed in frames.

<WistiaEmbed title="Replit Canvas overview" />

## What is the Canvas?

The Canvas is a space to explore and iterate on designs with Agent. Here, you'll see your artifacts — such as apps, videos, and slides — displayed in a frame. You can work with Agent to create mockups, compare design directions, and apply changes back to your app — all from one visual board.

<Frame>
  <img alt="Canvas showing an app preview alongside Agent chat with task updates" />
</Frame>

## What's on the Canvas

The Canvas is an infinite board where you can see and work with everything visually.

<Frame>
  <img alt="Canvas showing multiple design mockups laid out side by side — dark theme, mobile views, and detail pages" />
</Frame>

* **Your apps**: Your running apps appear as live, interactive previews right on the Canvas. You can click around and use them just like you would in a browser.
* **Design mockups**: Visual prototypes Agent creates for you. These look and feel like real pages — you can interact with them, resize them, and ask Agent to tweak them — but they're separate from your live app so you can experiment freely.
* **Shapes and drawings**: Rectangles, circles, stars, arrows, hearts, and more. Use these to sketch rough ideas, mark up designs, or map out how screens connect.
* **Text and sticky notes**: Add labels or notes anywhere on the Canvas to organize your thoughts.
* **Images**: Drop screenshots or reference images onto the Canvas. Agent can recreate or riff on what it sees.
* **Videos**: Place video files on the Canvas alongside your other content.

### Getting designs on the Canvas

There are a few ways to start creating designs. Pick whichever feels most natural.

<Steps>
  <Step title="Ask Agent in chat">
    Type what you want to see in the chat input and Agent places it as an interactive frame on the Canvas.

    <AgentInput />
  </Step>

  <Step title="Pick an output type">
    You can also choose what kind of output you want — web, mobile, slides, design, and more. Use the carousel to pick before sending your prompt.

    <AgentCarousel />
  </Step>

  <Step title="Bring an existing page onto the Canvas">
    Already have a live app? Ask Agent to pull a page onto the Canvas for a redesign — for example, "Put my dashboard on the canvas." Agent makes a copy so your live app stays untouched.
  </Step>
</Steps>

## Making changes

Once you have a design on the Canvas, there are several ways to iterate on it.

### Ask Agent for updates

Select a frame on the Canvas and type your changes in the input that appears below it. When you press enter, Agent picks up the request, runs the updates, and refreshes the mockup right on the Canvas.

<Frame>
  <video>
    <source type="video/mp4" />
  </video>
</Frame>

### Draw and annotate

Use the drawing tools in the bottom toolbar to sketch directly on the Canvas. Draw arrows pointing to what you want changed, circle problem areas, or add text notes with your feedback. Then ask Agent to make the changes based on your annotations.

<Frame>
  <video>
    <source type="video/mp4" />
  </video>
</Frame>

### Preview on different devices

See how your designs look on different screen sizes. Ask Agent to show you a mobile, tablet, or desktop version:

* **Mobile** — 390 × 844
* **Tablet** — 768 × 1024
* **Desktop** — 1280 × 720

For example, "Show me the mobile version of this page" and Agent renders it at that size.

<Frame>
  <video>
    <source type="video/mp4" />
  </video>
</Frame>

### Apply changes to your app

When you're happy with a design, apply the changes back to your main version. Agent shows you a summary of what was done and gives you the option to apply or dismiss.

<Frame>
  <video>
    <source type="video/mp4" />
  </video>
</Frame>

## Comparing design directions

When you're not sure which direction to go, ask Agent to generate multiple versions so you can compare them side by side.

<Frame>
  <video>
    <source type="video/mp4" />
  </video>
</Frame>

* **Multiple versions of one page**: "Show me five versions of this landing page." Agent creates each one and lays them out next to each other.
* **Multi-page flows**: "Design a complete onboarding flow: welcome, profile setup, preferences, and confirmation." Agent builds each screen and arranges them in order.
* **Mix and match**: "Show me the landing page and pricing page in both a minimal and a bold style." Agent creates every combination so you can see the full picture.

## Mapping out user flows

Lay out complete user journeys on the Canvas — sign-up, onboarding, dashboard, settings — and arrange them to see how everything connects.

* Place each screen as a separate frame
* Ask Agent to generate the full flow: "Draw out the complete onboarding flow for my app"
* Use arrows and shapes to show how users move between screens
* Ask Agent to turn rough sketches into polished designs

## Turning a design into a real app

When you're happy with a design and want to make it real, there are two paths:

### Make it a full app

If your design needs real functionality — like saving data, user accounts, or connecting to other services — ask Agent to turn it into a full app. Say something like "Make this a real app" or "Add a backend to this." Agent builds everything it needs to work as a real, publishable app.

<Note>
  Turning a design into a full app requires a paid plan.
</Note>

### Convert it to a specific type

You can also convert a design frame into a specific artifact type:

<Steps>
  <Step title="Select a frame">
    Click on the frame you want to convert.
  </Step>

  <Step title="Ask Agent to convert">
    Tell Agent what you want — for example, "Convert this into a web app" or "Turn this into slides."
  </Step>

  <Step title="Pick a type">
    Choose from web app, mobile app, slides, data visualization, and more.
  </Step>
</Steps>

## Frequently asked questions

<Accordion title="Are design frames the same as my running app?">
  No. Design frames are visual prototypes — they look and feel like the real thing, but they don't have a working backend or database behind them. Your app previews on the Canvas, on the other hand, are your actual running app.
</Accordion>

<Accordion title="Can I redesign a page without breaking my live app?">
  Yes. Ask Agent to bring a page onto the Canvas — for example, "Put my dashboard on the canvas." Agent makes a copy you can experiment with. Your live app isn't affected until you choose to apply the changes.
</Accordion>

<Accordion title="How do I turn a design into a real app?">
  Ask Agent to make it a full app ("Make this real") or convert it to a specific type ("Convert this to a web app"). Agent builds everything it needs to become a working, publishable app.
</Accordion>

<Accordion title="Can I convert to types other than web apps?">
  Yes. You can turn Canvas frames into web apps, mobile apps, slides, data visualizations, and more.
</Accordion>

<Accordion title="Can I import designs from Figma or other tools?">
  Yes. There are a few ways to bring Figma designs into Replit:

  * **Import from Figma**: Go to [replit.com/import](https://replit.com/import), connect your Figma account, and paste a frame URL to convert a design into a working React app. See the [Import from Figma quickstart](/getting-started/quickstarts/import-from-figma) for details.
  * **Figma MCP in Agent chat**: Paste a Figma link directly into Agent chat and ask it to generate code, extract design data, or build out a component from the design. See the [Figma MCP Integration](/replitai/mcp/figma) guide.
  * **Screenshot reference**: Drop a screenshot onto the Canvas and ask Agent to recreate the design from it.
</Accordion>

<Accordion title="What else can I put on the Canvas?">
  Besides design mockups and app previews, you can add shapes, arrows, text labels, sticky notes, images, and videos — useful for sketching ideas, annotating designs, or organizing your thinking.
</Accordion>

## Availability

The Canvas is available on all plans, including frame creation, inline editing, variant generation, and conversion to artifacts. Turning designs into full apps requires a paid plan.


# Data Visualization
Source: https://docs.replit.com/replitai/data-apps

Build interactive dashboards, reporting tools, and data exploration interfaces through conversation with Agent.

## What is a data visualization?

A data visualization is an interactive dashboard or reporting tool you build through conversation with Agent. Describe what you want to visualize and where your data lives—Agent selects appropriate KPIs, chart types, and layouts automatically, generating a comprehensive dashboard in a single prompt.

Key concepts:

* **One-shot generation**: Describe your goal and data source, and Agent builds a complete dashboard with appropriate charts and metrics
* **Connected data sources**: Pull from databases, [warehouse connectors](/replitai/warehouse-connectors), external APIs, or uploaded files
* **Built-in features**: Every dashboard includes refresh, auto-refresh, export to PDF, export charts to CSV, and light/dark mode
* **Analysis summary**: Agent generates insights based on your request and the resulting data
* **Multiple artifacts**: Data visualizations can share the same backend and database as your other artifacts in the [same project](/replitai/artifacts#multiple-artifacts-in-one-project)

## How to use Data Visualization

### Creating from a prompt

Select the **App** tab on the homepage and describe the dashboard you want. Agent detects data-related prompts and selects the Data Visualization stack.

**Example prompts:**

* "Build a sales analytics dashboard that tracks revenue by region"
* "Create a reporting tool that visualizes our monthly metrics"
* "Build a dashboard from our BigQuery sales data showing top-performing products"
* "Connect to Snowflake and create a customer churn analysis dashboard"

### Creating from the dropdown

1. Go to the **App** tab on the homepage.
2. Open the app type dropdown.
3. Select **Data Visualization**.
4. Describe the dashboard or data tool you want to build.

### Connecting to data warehouses

Connect your data visualization to BigQuery, Databricks, or Snowflake through [Data Connectors](/replitai/warehouse-connectors) to build dashboards on top of your existing datasets.

When you query warehouse data, Agent uses parallel multi-agent search to explore your schema and datasets. This speeds up exploration and helps Agent select the right tables and fields for your dashboard.

To get started, set up a warehouse connector in your project's [Integrations](/replitai/integrations), then tell Agent what you want to visualize.

### Adding filters and features

After Agent builds your dashboard, you can prompt it to add filters, drill-downs, or other interactive features. For example, ask Agent to add a date range filter, a region selector, or a search bar.

### Exporting and sharing

* **Export to PDF**: Export your entire dashboard as a PDF for sharing or offline review.
* **Export charts to CSV**: Download individual chart data as CSV files for further analysis in spreadsheets or other tools.
* **Analysis document**: Ask Agent to produce a detailed analysis document based on your dashboard's data.

## What you can build

* **Analytics dashboards**: Track key metrics like revenue, signups, or engagement across time periods
* **Reporting tools**: Build internal reports that stakeholders can filter and explore without direct database access
* **Data exploration interfaces**: Browse and query datasets with visual feedback
* **Monitoring panels**: Display real-time or near-real-time data from APIs, databases, or external services

## Frequently asked questions

<Accordion title="What data sources can I connect?">
  You can pull data from your project's Replit Database, warehouse connectors (BigQuery, Databricks, Snowflake), external APIs, or uploaded files like CSVs. Set up warehouse connections through [Integrations](/replitai/integrations).
</Accordion>

<Accordion title="Can I customize the look and feel?">
  Yes. You can customize colors, layouts, and typography through conversation—ask Agent to match your brand or adjust the design. Dashboards also support light and dark mode.
</Accordion>

<Accordion title="Does Agent analyze the data for me?">
  After building a dashboard, Agent generates an analysis summary based on your request and the resulting data. You can also ask for a more detailed analysis document.
</Accordion>

<Accordion title="Can I combine a data visualization with other artifact types?">
  Yes. You can combine a data visualization with a [web app](/replitai/web-apps), [slide deck](/replitai/slide-decks), or other artifact types in the [same project](/replitai/artifacts#multiple-artifacts-in-one-project). They share the same backend and database.
</Accordion>

## Availability

| Capability                     | Core | Pro |
| ------------------------------ | ---- | --- |
| Data visualization creation    | ✅    | ✅   |
| Interactive filters and charts | ✅    | ✅   |
| Export to PDF and CSV          | ✅    | ✅   |
| Warehouse connectors           | ✅    | ✅   |
| Refresh and auto-refresh       | ✅    | ✅   |
| Light and dark mode            | ✅    | ✅   |

Data Visualization is available on all plans.


# From Design to App
Source: https://docs.replit.com/replitai/from-design-to-app

Learn how to turn Design Canvas mockups into real, working applications — from exploration to published app.

## What is this workflow?

The Design Canvas is for exploration — your app lives in the Preview. This page walks you through the full journey of turning a visual direction into a published application.

Key concepts:

* **Canvas = scratchpad**: Frames are static HTML mockups for exploring ideas
* **Artifacts = publishable outputs**: Converting a frame creates a buildable, publishable artifact
* **One-way flow**: There's no live link between the Canvas and your app — you convert when ready
* **Any artifact type**: Convert to web apps, mobile apps, slide decks, data visualizations, and more

## How to go from design to app

### Start on the Canvas

Open the [Design Canvas](/replitai/canvas) and explore your idea. Ask Agent for mockups, generate variants, and compare directions side by side.

**Example prompts:**

* "Design a landing page for my SaaS product"
* "Show me five variations of a dashboard layout"
* "Sketch the full sign-up flow for my app"

### Refine with the Visual Editor

Use the [Visual Editor](/replitai/visual-editor) to make hands-on adjustments directly on your frames — change text, tweak colors, adjust spacing — without going through an Agent loop or consuming AI credits.

### Pick a direction

Compare your frames and choose the one that best matches your vision. You don't need to get it perfect — you can continue refining after conversion.

### Convert to an artifact

<Steps>
  <Step title="Select your frame">
    Click on the frame you want to turn into a real application.
  </Step>

  <Step title="Ask Agent to convert">
    Tell Agent what you want — for example, "Convert this into a web app" or "Turn this into a mobile app."
  </Step>

  <Step title="Agent builds your app">
    Agent creates a real artifact with the design you chose. It adds the backend, database, and infrastructure your app needs.
  </Step>

  <Step title="Refine in Preview">
    Switch to the Preview to see your running application. Continue using the Visual Editor or chat with Agent to add features, fix details, and polish.
  </Step>

  <Step title="Publish">
    When your app is ready, publish it. Replit handles hosting and infrastructure so your app works reliably for your audience.
  </Step>
</Steps>

### What carries over

When you convert a frame to an artifact, Agent uses the design as a reference to build a real application. The visual layout, colors, typography, and structure carry over. Agent adds the functionality — data storage, user accounts, API connections — on top.

<Note>
  Conversion is a one-way step. The Canvas frame and the resulting artifact are separate — changes to one don't affect the other.
</Note>

## What you can build

* **Static site → full-stack app**: Start with a landing page design, then convert and add a contact form, payments, or a blog backend
* **Dashboard mockup → live data visualization**: Design the layout on the Canvas, convert to an artifact, and connect real data sources
* **Mobile app concept → native app**: Explore the UI on the Canvas, then convert to a mobile artifact with real navigation and data
* **Pitch deck + product**: Design your app and a slide deck in the same project — both start as Canvas explorations, both become real artifacts

## Frequently asked questions

<Accordion title="Do I have to start on the Canvas?">
  No. You can skip the Canvas entirely and build directly in App mode. The Canvas is for exploration — use it when you want to try visual directions before committing.
</Accordion>

<Accordion title="What's the difference between a frame and an artifact?">
  A frame is a static HTML mockup on the Canvas — it has no server, database, or backend. An artifact is a real, buildable application that you can publish. Converting a frame creates an artifact.
</Accordion>

<Accordion title="Can I convert the same frame into multiple artifact types?">
  Yes. You can convert a single frame into a web app, then separately convert it into a mobile app or slide deck. Each conversion creates a new artifact.
</Accordion>

<Accordion title="Can I go back to the Canvas after converting?">
  The Canvas is always available. You can continue designing new frames, but the converted artifact and the original frame are independent — editing one doesn't change the other.
</Accordion>

<Accordion title="Will my design look exactly the same after conversion?">
  Agent uses your design as a reference, so the layout, colors, and structure carry over closely. Some details may shift as Agent adds real functionality — you can refine in the Preview after conversion.
</Accordion>


# Agent Integrations
Source: https://docs.replit.com/replitai/integrations

Learn what integrations Agent supports and how they activate automatically based on your prompts.

<Frame>
  <img alt="Agent logo with integration connections illustrated around it" />
</Frame>

Agent supports four 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. Agent can read and write to these services directly from chat — pull data, create records, send messages — and 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.
* **Agent services**: Paid third-party APIs that Agent uses behind the scenes — no API keys required. Usage is billed to your Replit credits.

<Note>
  **Core and Pro only**: Third-party connectors require a Core or Pro subscription. Starter plan users can use Replit-managed integrations like databases, authentication, etc.
</Note>

## Getting started

To use an integration, mention the service or functionality you need. For example:

<AiPrompt>
  Create a web app that uses Stripe to accept payments and SendGrid to send confirmation emails
</AiPrompt>

Agent automatically detects these keywords and implements the necessary code and configuration.

## Replit managed integrations

These built-ins require no setup. Just ask Agent to use them.

<AccordionGroup>
  <Accordion title="Replit Database">
    Managed PostgreSQL for relational data and SQL queries, built into every Replit App.
    <AiPrompt>Add Replit Database to my app</AiPrompt>
  </Accordion>

  <Accordion title="Replit App Storage">
    Built-in storage for app files and assets.
    <AiPrompt>Use Replit App Storage to save files</AiPrompt>
  </Accordion>

  <Accordion title="App Storage">
    Cloud-based storage for images, videos, and other files.
    <AiPrompt>Add App Storage to my app to store files</AiPrompt>
  </Accordion>

  <Accordion title="Replit Auth">
    Native authentication so people can sign in with Replit.
    <AiPrompt>Add Replit Auth to my app</AiPrompt>
  </Accordion>

  <Accordion title="Replit Domains">
    Configure and manage custom domains for your app.
    <AiPrompt>Set up a custom domain for my app</AiPrompt>
  </Accordion>
</AccordionGroup>

## Connectors

Connectors let Agent read and write to your services directly. They are first-party integrations supported by Replit. Sign in once on the Connectors page in your Workspace, then reuse those connections across apps.

<Note>
  Connections are tied to your Replit account and persist across all your apps. Connect a service once and use it in any app you create.
</Note>

### Available connectors

<AccordionGroup>
  <Accordion title="Google Workspace" icon="google">
    * **Google Drive**: Access and manage files and folders
    * **Google Docs**: Create, read, and edit documents
    * **Google Sheets**: Read and write spreadsheet data
    * **Google Calendar**: Read and write events and settings
    * **Gmail**: Send, receive, and manage emails
  </Accordion>

  <Accordion title="Microsoft 365" icon="microsoft">
    * **OneDrive**: Access and manage files and folders
    * **Outlook**: Send, receive emails and manage calendar events
    * **SharePoint**: Read, write, and manage sites and documents
  </Accordion>

  <Accordion title="Developer tools" icon="code">
    * **GitHub**: Access repositories, users, and organizations
    * **Linear**: Create and manage issues, comments, and schedules
    * **Jira**: Read users and manage work items and issues
    * **Asana**: Read tasks and project data
    * **Confluence**: Read users and groups, write content to spaces
  </Accordion>

  <Accordion title="Cloud storage" icon="cloud">
    * **Dropbox**: Read files, content, and metadata
    * **Box**: Read and access files and folders
  </Accordion>

  <Accordion title="Communication" icon="comments">
    * **AgentMail**: Send and receive emails programmatically
    * **Discord**: Access guild information and user profiles
    * **Resend**: Send transactional emails
    * **SendGrid**: Send transactional emails
    * **Slack**: Send messages and interact with channels and workflows
    * **Twilio**: Send SMS messages and make voice calls
  </Accordion>

  <Accordion title="CRM and sales" icon="building">
    * **Salesforce**: Access CRM data and perform operations via REST API
    * **HubSpot**: Read CRM objects, contacts, and deals
    * **Zendesk**: Read and write access to Ticket API for support workflows
  </Accordion>

  <Accordion title="Payments and monetization" icon="credit-card">
    * **RevenueCat**: Manage in-app purchases and subscriptions
    * **Stripe**: Process payments and manage subscriptions. See the [Stripe payments guide](/core-concepts/monetization/stripe-payments).
  </Accordion>

  <Accordion title="AI and media" icon="wand-magic-sparkles">
    * **ElevenLabs**: Generate AI voice and audio content
  </Accordion>

  <Accordion title="Productivity" icon="list-check">
    * **Notion**: Read and write to workspaces and pages
    * **Spotify**: Access and manage playlists and library
    * **Todoist**: Create and manage tasks and projects
  </Accordion>
</AccordionGroup>

### Accessing Connectors

You can access Connectors from the sidebar in your Workspace:

<Steps>
  <Step title="Navigate to your Workspace">
    Open the Workspace for your app.
  </Step>

  <Step title="Select Connectors">
    Select **Connectors** from the sidebar.
  </Step>

  <Step title="Add new integration">
    Choose **Add new integration** to browse available connectors.
  </Step>

  <Step title="Connect">
    Select **Connect** next to the service you want to integrate.
  </Step>
</Steps>

<Tip>
  To disconnect a service, return to the Connectors panel and select **Manage** next to the connected service.
</Tip>

<Frame>
  <img alt="App connectors interface showing available integrations including GitHub, OneDrive, Outlook, Spotify, Linear, Dropbox, Monday.com, Google Docs, and YouTube with their connection status and manage options" />
</Frame>

When you select Connect for a service, Replit redirects you to authenticate with that service and grant permissions for Replit to access your data:

<Frame>
  <img alt="OAuth authentication flow showing the Linear connection dialog with privacy and security information, explaining data usage and user control" />
</Frame>

### 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"

<Note>
  Connectors provide authenticated access to your external services, eliminating the need to manage API keys or authentication tokens manually.
</Note>

<Tip>
  Looking for workspace or organization connector management? See [Managing your connectors](/replitai/managing-connectors).
</Tip>

## External integrations

Trusted third-party services. Ask Agent to set them up; you'll provide API keys.

<Note>
  API keys are stored securely in your app's [Secrets](/core-concepts/workspace/app-setup/secrets). Agent will prompt you to add the key when needed.
</Note>

### AI providers

<AccordionGroup>
  <Accordion title="OpenAI">
    Access GPT models for text generation, analysis, and assistants.
    <AiPrompt>Create a web app that uses OpenAI to summarize text</AiPrompt>
  </Accordion>

  <Accordion title="Google AI (Gemini)">
    Use Gemini models for multimodal understanding and generation.
    <AiPrompt>Use Google Gemini to analyze and summarize documents</AiPrompt>
  </Accordion>

  <Accordion title="Anthropic (Claude)">
    Access Claude models for reasoning, writing, and coding.
    <AiPrompt>Create a web app that uses Anthropic to generate content</AiPrompt>
  </Accordion>

  <Accordion title="Perplexity">
    AI-powered search and answer generation with citations.
    <AiPrompt>Create a web app that uses Perplexity to answer questions</AiPrompt>
  </Accordion>

  <Accordion title="Mistral AI">
    Fast, efficient language models for NLP tasks.
    <AiPrompt>Use Mistral to extract key facts from text</AiPrompt>
  </Accordion>

  <Accordion title="OpenRouter">
    Access hundreds of AI models from multiple providers through a single API.
    <AiPrompt>Use OpenRouter to access Llama models for my chatbot</AiPrompt>
  </Accordion>
</AccordionGroup>

### Business and automation

<AccordionGroup>
  <Accordion title="Workato">
    Trigger automation recipes and call APIs from your apps.
    <AiPrompt>Connect my app to a Workato recipe that syncs leads</AiPrompt>
  </Accordion>

  <Accordion title="HubSpot">
    Access CRM data and manage contacts.
    <AiPrompt>Connect my app to HubSpot to manage contacts</AiPrompt>
  </Accordion>
</AccordionGroup>

### Communication and community

<AccordionGroup>
  <Accordion title="Discord">
    Send messages and manage servers from your apps.
    <AiPrompt>Send a message to my Discord channel when a new signup happens</AiPrompt>
  </Accordion>
</AccordionGroup>

## Agent services

Some capabilities use paid third-party APIs behind the scenes. Agent handles the integration automatically — no API keys or setup required. You're billed at the provider's rate, deducted from your Replit credits.

<AccordionGroup>
  <Accordion title="Brave Image Search">
    Search for images across the web using Brave's image search API.
    <AiPrompt>Find product images for my e-commerce store</AiPrompt>
  </Accordion>

  <Accordion title="ElevenLabs">
    Generate realistic text-to-speech audio and voice content.
    <AiPrompt>Add voice narration to my app's onboarding flow</AiPrompt>
  </Accordion>

  <Accordion title="NanoBanana">
    Generate images and video using AI models.
    <AiPrompt>Generate a hero image for my landing page</AiPrompt>
  </Accordion>
</AccordionGroup>

<Note>
  Agent services are billed at the provider's public API rate. Costs are deducted from your Replit credits and appear on your [usage page](/billing/managing-spend).
</Note>

## Debugging connectors

Running into issues connecting a service? These guides walk you through common errors and how to fix them.

<AccordionGroup>
  <Accordion title="Google Workspace: &#x22;This app is blocked&#x22;">
    If you see **"This app is blocked"** when connecting Google Drive, Docs, Sheets, Calendar, or Gmail, your organization's Google Workspace likely restricts third-party OAuth apps. See the full troubleshooting guide to resolve it.

    [Resolve "This app is blocked" for Google connectors](/replitai/debugging-google-connectors)
  </Accordion>
</AccordionGroup>


# Invite teammates
Source: https://docs.replit.com/replitai/invite-teammates

Invite teammates to your project and build together — each person can start new threads with Agent while working on the same project.

## Build with teammates

Replit lets multiple people work in the same project at the same time. Each person can start new planning threads with Agent, and everyone's tasks appear on the shared board — so your team builds together instead of taking turns.

## Start building with teammates

### Inviting teammates

1. Open your project
2. Click **Invite** or share the project link
3. Teammates join and start new threads with Agent

<Frame>
  <video>
    <source type="video/mp4" />
  </video>
</Frame>

### Working in parallel

Each person can create new threads, so you can work independently without interrupting each other. Everyone's tasks show up on the shared Kanban board, making it easy to see who's working on what and avoid stepping on each other's work.

<Note>
  On Core, only 1 background task can run at a time across the project. On Pro, up to 10 tasks can run in parallel — so multiple people can have Agent building different parts of the project simultaneously.
</Note>

## The shared task board

When your team works together, everyone's tasks appear on the same board. You can see at a glance who's working on what, what's in progress, and what's ready to apply.

<Frame>
  <img alt="Task board showing tasks organized in Drafts, Active, Ready, and Done columns" />
</Frame>

Each task moves through four stages:

<div>
  <div>
    <TaskCard title="Add gift flow for family and friends" description="Let parents create a story for someone else's child and send it as a gift." />

    <span><strong>Draft</strong> — Agent has proposed this task. It has a plan ready for review.</span>
  </div>

  <div>
    <TaskCard title="Story continuations — sequels" description="Adding a 'Continue the Adventure' button generates a sequel that picks up where the last one left off." />

    <span><strong>Active</strong> — Agent is building this task right now in its own isolated copy of the project.</span>
  </div>

  <div>
    <TaskCard title="Bedtime mode with dark theme" description="A dedicated bedtime mode with a warm-toned dark theme and ambient sounds." />

    <span><strong>Ready</strong> — The task is complete. Review the changes and apply them to the main version.</span>
  </div>

  <div>
    <TaskCard title="Read-aloud with word highlighting" description="Text-to-speech lets kids enjoy stories independently while following along with highlighted words." />

    <span><strong>Done</strong> — This task is finished and its changes are part of the main version.</span>
  </div>
</div>

### How teams use the board

When multiple people are building at the same time, each person's tasks appear on the shared board. Here's what that looks like — one teammate is working on sequels and story regeneration while another tackles the gift flow, and the rest of the team's completed work sits in Ready and Done.

<KanbanColumns />

When a task moves to Ready, anyone on the team can review and apply the changes. Agent handles conflicts automatically when multiple tasks are applied.

## What you can build together

* **Split a feature across the team**: One person builds the frontend while another handles the backend, each through their own chat with Agent. The Kanban board keeps everyone aligned.
* **Onboard a new teammate**: They can explore the project through their own Agent chat, ask questions about how things work, and start contributing — all without blocking anyone else.
* **Ship faster on Pro**: With parallel execution, two or three people can each dispatch tasks that run at the same time. A project that would take one person a full session can be done in a fraction of the time.

## Frequently asked questions

<Accordion title="Can I message my teammate through Agent?">
  No. Agent isn't a messaging tool — it's always listening and will try to act on anything you type. Use Slack, Discord, or another tool for team communication.
</Accordion>

<Accordion title="Will we overwrite each other's work?">
  The task system helps prevent this by giving each task its own isolated copy, but is aware of what other tasks exist. When tasks complete, you apply them back to the main version and resolve any conflicts at that step.
</Accordion>

<Accordion title="How do I see what my teammates are doing?">
  Check the Kanban board to see active tasks. You can also see cursor presence and which files teammates are viewing.
</Accordion>

<Accordion title="Can I remove someone from my project?">
  Yes. Project owners can manage team members and revoke access at any time.
</Accordion>

## Availability

| Capability              | Core | Pro |
| ----------------------- | ---- | --- |
| Collaboration seats     | 5    | 15  |
| Simultaneous chats      | ✅    | ✅   |
| Shared Kanban           | ✅    | ✅   |
| Active background tasks | 1    | 10  |


# MCP Directory
Source: https://docs.replit.com/replitai/mcp/directory

Browse featured MCP servers that connect Replit Agent to your favorite tools and services.

Use this directory to explore servers that expose specialized tools, data sources, or workflows through the Model Context Protocol (MCP). Every listing includes a short summary and a Replit badge so you can decide which servers to wire up for your builders.

This is not an exhaustive list, you can [add any remote MCP server](/replitai/mcp/overview#add-an-mcp-server) and use it with the Replit Agent.

<Info>
  Click the **Add to Replit** badge to install any server. You'll be prompted to authorize the connection in your Replit workspace.
</Info>

## Featured servers

<table>
  <thead>
    <tr>
      <th>Server</th>
      <th>Description</th>
      <th>Install</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><img alt="" />Figma</td>
      <td>Generate code from Figma designs.</td>
      <td><a href="/replitai/mcp/figma">View guide</a></td>
    </tr>

    <tr>
      <td><img alt="" />Atlassian</td>
      <td>Project management and team collaboration tools.</td>

      <td>
        <a href="https://replit.com/integrations?mcp=eyJkaXNwbGF5TmFtZSI6IkF0bGFzc2lhbiIsImJhc2VVcmwiOiJodHRwczovL21jcC5hdGxhc3NpYW4uY29tL3YxL3NzZSJ9">
          <img alt="Add to Replit" />
        </a>
      </td>
    </tr>

    <tr>
      <td><img alt="" />Amplitude</td>
      <td>Product analytics and user behavior insights.</td>

      <td>
        <a href="https://replit.com/integrations?mcp=eyJkaXNwbGF5TmFtZSI6IkFtcGxpdHVkZSIsImJhc2VVcmwiOiJodHRwczovL21jcC5hbXBsaXR1ZGUuY29tL21jcCJ9">
          <img alt="Add to Replit" />
        </a>
      </td>
    </tr>

    <tr>
      <td><img alt="" />Granola</td>
      <td>AI-powered meeting notes and transcription.</td>

      <td>
        <a href="https://replit.com/integrations?mcp=eyJkaXNwbGF5TmFtZSI6IkdyYW5vbGEiLCJiYXNlVXJsIjoiaHR0cHM6Ly9tY3AuZ3Jhbm9sYS5haS9tY3AifQ==">
          <img alt="Add to Replit" />
        </a>
      </td>
    </tr>

    <tr>
      <td><img alt="" />Linear</td>
      <td>Create and update issues directly from Agent.</td>

      <td>
        <a href="https://replit.com/integrations?mcp=eyJkaXNwbGF5TmFtZSI6IkxpbmVhciIsImJhc2VVcmwiOiJodHRwczovL21jcC5saW5lYXIuYXBwL3NzZSJ9">
          <img alt="Add to Replit" />
        </a>
      </td>
    </tr>

    <tr>
      <td><img alt="" />Miro</td>
      <td>Collaborative AI-powered visual platform for planning and design.</td>

      <td>
        <a href="https://replit.com/integrations?mcp=eyJkaXNwbGF5TmFtZSI6Ik1pcm8iLCJiYXNlVXJsIjoiaHR0cHM6Ly9tY3AubWlyby5jb20vIiwiaGVhZGVycyI6W119">
          <img alt="Add to Replit" />
        </a>
      </td>
    </tr>

    <tr>
      <td><img alt="" />Notion</td>
      <td>Sync docs, notes, and project trackers into Agent context.</td>

      <td>
        <a href="https://replit.com/integrations?mcp=eyJkaXNwbGF5TmFtZSI6Ik5vdGlvbiIsImJhc2VVcmwiOiJodHRwczovL21jcC5ub3Rpb24uY29tL21jcCJ9">
          <img alt="Add to Replit" />
        </a>
      </td>
    </tr>

    <tr>
      <td><img alt="" />PostHog</td>
      <td>Product analytics, session replay, and feature flags.</td>

      <td>
        <a href="https://replit.com/integrations?mcp=eyJkaXNwbGF5TmFtZSI6IlBvc3RIb2ciLCJiYXNlVXJsIjoiaHR0cHM6Ly9tY3AucG9zdGhvZy5jb20vbWNwIn0=">
          <img alt="Add to Replit" />
        </a>
      </td>
    </tr>

    <tr>
      <td><img alt="" />Sentry</td>
      <td>Error tracking and performance monitoring.</td>

      <td>
        <a href="https://replit.com/integrations?mcp=eyJkaXNwbGF5TmFtZSI6IlNlbnRyeSIsImJhc2VVcmwiOiJodHRwczovL21jcC5zZW50cnkuZGV2L21jcCJ9">
          <img alt="Add to Replit" />
        </a>
      </td>
    </tr>

    <tr>
      <td><img alt="" />Stripe</td>
      <td>Payment processing and financial infrastructure.</td>

      <td>
        <a href="https://replit.com/integrations?mcp=eyJkaXNwbGF5TmFtZSI6IlN0cmlwZSIsImJhc2VVcmwiOiJodHRwczovL21jcC5zdHJpcGUuY29tIn0=">
          <img alt="Add to Replit" />
        </a>
      </td>
    </tr>
  </tbody>
</table>


# Figma MCP Integration
Source: https://docs.replit.com/replitai/mcp/figma

Learn how to connect Agent to Figma via MCP to explore layers, extract design data, and generate code from your designs.

Use Agent with Model Context Protocol (MCP) to work with your Figma designs directly in chat. Paste a Figma link to explore layers, extract variables and components, capture screenshots, and generate code from selected frames.

<Note>
  <strong>Seat requirements:</strong> A Figma <strong>Dev</strong> or <strong>Full</strong> seat is recommended for Agent chat features. Free, Starter, and Viewer seats are limited to 6 MCP tool calls per month. The import flow at <a href="/getting-started/quickstarts/import-from-figma">replit.com/import</a> has separate limits — see <a href="#rate-limits-and-figma-seat-requirements">rate limits</a> below.
</Note>

<Callout>
  Want to turn a Figma design into a new app? See the <a href="/getting-started/quickstarts/import-from-figma">Import from Figma quickstart</a>.
</Callout>

<Note>
  The Figma MCP integration uses a <strong>remote server</strong>—you do not need the Figma desktop app running or installed to use this feature in Agent.
</Note>

## Features

* **Generate starter code**: Turn selected frames into production-ready code to bootstrap features or iterate faster.
* **Extract design data**: Access variables, components, and layout specifications defined in your file.
* **Capture frame screenshots**: Create visual references from any frame to guide implementation.
* **Inspect MCP activity**: Expand chat events to view raw requests and responses.

## Demo

Watch a quick walkthrough of the workflow from link detection to code generation:

<Frame>
  <video />
</Frame>

## Usage

### Connect in Agent chat

1. Open Agent chat in your workspace.
2. Paste a valid Figma file or prototype link into the message box.
3. When a valid link is detected, a <strong>Figma design</strong> card appears. Click <strong>Log in with Figma</strong> to authorize.

After pasting a supported link, Agent shows a Figma design card for quick authorization:

<Frame>
  <img alt="Connect Figma card appears in Agent chat when a valid Figma link is pasted" />
</Frame>

### 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:

<Frame>
  <img alt="Selecting a frame in Figma" />
</Frame>

Then paste the link into Agent along with a short instruction (for example, “generate React for this frame”):

<Frame>
  <img alt="Sharing the URL with Agent in the chat box" />
</Frame>

### View MCP calls

Open the timeline event labeled <strong>Used Figma MCP (Beta)</strong> to see the underlying requests and responses.

Here is where to expand the timeline event to inspect MCP calls:

<Frame>
  <img alt="Expanded chat event showing MCP calls to the Figma integration" />
</Frame>

<Callout>
  MCP access to Figma is read‑oriented and respects your Figma permissions. If a file is private or you lack access, the integration cannot fetch content.
</Callout>

## Rate limits and Figma seat requirements

Figma enforces rate limits on MCP tool calls based on your Figma plan and seat type. These limits are set by Figma, not Replit.

| Seat type        | Starter / Free  | Pro / Organization | Enterprise      |
| ---------------- | --------------- | ------------------ | --------------- |
| **View, Collab** | 6 calls / month | 6 calls / month    | 6 calls / month |
| **Dev, Full**    | —               | 200 calls / day    | 600 calls / day |

Dev and Full seats also have per-minute limits: 10/min on Pro, 15/min on Organization, and 20/min on Enterprise plans.

### What counts against the limit

Rate limits apply to tools that read data from Figma, such as `get_design_context` and `get_image`. Some tools like `whoami` and `generate_figma_design` are exempt.

### If you hit a rate limit

Agent tells you when a Figma rate limit is reached. To increase your limit:

* **On a Starter plan or free account**: Upgrade to a Pro, Organization, or Enterprise plan with a Dev or Full seat.
* **On a View or Collab seat**: Upgrade to a Dev or Full seat on your current plan.
* **On a Dev/Full seat (Organization)**: Upgrade to an Enterprise plan for the highest limits.

For full details, see <a href="https://developers.figma.com/docs/figma-mcp-server/plans-access-and-permissions">Figma's plans, access, and permissions documentation</a>.

### Manage connections

Manage or disconnect the Figma integration at <a href="https://replit.com/integrations">replit.com/integrations</a>.

Find and manage connections from your workspace integrations:

<Frame>
  <img alt="Integrations pane in the personal workspace showing the Figma integration" />
</Frame>


# MCP Install Links
Source: https://docs.replit.com/replitai/mcp/install-links

Learn how to generate direct install links for MCP servers.

Install links let users add your MCP server to Replit with a single click. Share these links in your documentation, README files, or anywhere you want to promote your integration.

## Generate a link

Use this form to generate an install link and badge for your MCP server:

<McpLinkGenerator />

## Link format

Install links use a base64-encoded JSON payload containing your server configuration:

```
https://replit.com/integrations?mcp={payload}
```

The payload includes:

* **displayName**: The name shown to users during installation
* **baseUrl**: Your MCP server's HTTPS endpoint
* **headers**: Optional authentication headers

```json theme={null}
{
  "displayName": "My MCP Server",
  "baseUrl": "https://example.com/mcp",
  "headers": [
    {
      "key": "Authorization",
      "value": "Bearer your-token"
    }
  ]
}
```

## Using badges

Add a clickable badge to your README or documentation that installs your MCP server when clicked.

```markdown theme={null}
[![Install My MCP](https://replit.com/badge?caption=Install%20My%20MCP)](https://replit.com/integrations?mcp={payload})
```

<Frame>
  ![Install MCP Badge](https://replit.com/badge?caption=Install%20MCP%20Server)
</Frame>

You can customize the badge caption (maximum 30 characters) by URL-encoding the text in the `caption` parameter.


# MCP Servers Overview
Source: https://docs.replit.com/replitai/mcp/overview

Learn how to connect Replit Agent to external tools with the Model Context Protocol.

Replit Agent can connect to hundreds of external tools and data sources through the <a href="https://modelcontextprotocol.io">Model Context Protocol (MCP)</a>, an open standard for integrations between AI tooling providers. MCP servers let Agent leverage context and tools from external services, databases, and APIs.

Use the **MCP servers** section in the Integrations pane to connect any remote MCP server. Once connected, Agent automatically loads the tools each server makes available and will use them when appropriate.

## MCP servers section

<Steps>
  <Step title="Open the MCP servers section">
    Go to <a href="https://replit.com/integrations">Integrations Page</a>, then scroll down to <strong>MCP Servers for Replit Agent</strong> to view existing servers or add a new one.
  </Step>

  <Step title="Add an MCP server">
    Click <strong>Add MCP server</strong> and provide a recognizable name so Agent can reference the server in chat logs.

    <Frame>
      <img alt="showing the MCP servers section in the integrations pane" />
    </Frame>
  </Step>

  <Step title="Test & Save">
    Enter the server URL and authentication details, then select **Test & Save**. This will attempt to connect to the server and guide you through the authentication flow if required.

    <Frame>
      <img alt="showing the MCP server setup" />
    </Frame>
  </Step>
</Steps>

Once saved, the connection appears under <strong>MCP servers</strong> with its connection status. You can remove it at any time from the same pane by clicking the "Manage" button.

## Use MCP tools in Agent

After a connection is active, Agent automatically fetches the server's tool list and makes its capabilities available in chat for all your projects. To get started, just ask the agent to use the MCP server by mentioning the display name you configured during setup.

<Frame>
  <img alt="showing the MCP server being used" />
</Frame>

## Security protections

All custom MCP traffic passes through Replit's security scanner. The scanner evaluates tool definitions and planned executions, blocking suspicious or unsafe tools before they run. If a tool is rejected, Agent will inform you about it.

## Authentication options

* **OAuth dynamic client registration**: If the server supports OAuth DCR, Replit automatically detects and registers the client for you.
* **Custom headers**: Define one or more header name and value pairs (for example, `X-API-Key`). Replit includes these headers in every MCP request so your server can verify the caller.

## Explore MCP resources

* [Browse the MCP directory](/replitai/mcp/directory) for featured server integrations.
* [Grab install links](/replitai/mcp/install-links) to quickly share tested MCP server connections.


# Multiple Artifacts vs. Separate Projects
Source: https://docs.replit.com/replitai/multiple-artifacts-vs-projects

Learn when to combine artifacts in one project and when to create separate projects on Replit.

A [project](/replitai/projects) is the container for everything you build on Replit. A project contains your designs, apps, slides, data, and all the outputs you create.
[Artifacts](/replitai/artifacts) are the publishable outputs inside a project: web apps, mobile apps, slide decks, and videos.

When you're building more than one thing, you have two options:

* add multiple artifacts to a single project,
* or create separate projects.

The right choice depends on whether your apps share data, logic, and a deployment lifecycle. This guide covers when to keep artifacts in a single project and when to create separate ones.

## What artifacts share in a project

When [artifacts](/replitai/artifacts) live in the same [project](/replitai/projects), they automatically share:

* **Database**: One artifact writes data, the others read it instantly
* **Backend and API**: Shared server logic, no duplicate code
* **File storage**: Images, documents, and uploads accessible across artifacts
* **Deployment**: Publishing deploys everything together in sync

This means you don't need to set up connections or duplicate code between artifacts. But it also means you can't publish one artifact without publishing the others.

## Quick guide

Here are the key scenarios to consider when deciding whether to add artifacts to an existing project or create a separate one.

| **Use multiple artifacts in one project**                               | **Use separate projects**                                              |
| ----------------------------------------------------------------------- | ---------------------------------------------------------------------- |
| Apps share the same data and backend                                    | Apps don't share underlying logic or data                              |
| You want everything to deploy together                                  | You need independent deployment cycles                                 |
| They're complementary (like a customer app and an admin dashboard)      | They're unrelated products or for different clients                    |
| You want changes in one artifact to automatically reflect in the others | The project is short-lived, like a campaign landing page or event site |

## Examples

### Same project: Web app + mobile app for one product

A restaurant builds a web app for customers to browse the menu and a mobile app for staff to manage orders. Both connect to the same database of menu items, orders, and customer information.

**Why one project:** The apps share the same data and backend. When a customer places an order through the web app, the staff sees it immediately on the mobile app.

### **Same project**: App + admin dashboard + investor pitch deck

A startup builds their main product, an internal admin panel for managing content, and a slide deck for fundraising—all in one project.
A startup builds their main product, an internal admin panel for managing content, and a slide deck for fundraising — all in one project.

**Why one project:** The admin dashboard manages the same data the app displays, and the pitch deck can reference live metrics from the shared backend.

### **Separate projects**: Two unrelated client apps

A freelancer builds an e-commerce store for one client and a booking system for another.

**Why separate projects:** The apps have no shared data or logic. Each client needs independent deployment and you don't want changes to one affecting the other.

### **Separate projects**: Campaign landing page alongside a main product

You have a production app that runs year-round and a short-lived landing page for a marketing campaign.

**Why separate projects:** The campaign page has its own lifecycle — you'll spin it up, run it for a few weeks, and take it down. Keeping it separate avoids cluttering your main product and lets you publish or remove it independently.

## Frequently asked questions

<Accordion title="Can I move an artifact to a different project?">
  Not currently. If you need to separate an artifact, create a new [project](/replitai/projects) and ask Agent to rebuild it there.
</Accordion>

<Accordion title="Is there a limit to how many artifacts a project can have?">
  There's no hard limit. Add as many artifacts as your project needs. Your web apps, mobile apps, slides, videos, and data visualizations can all coexist.
</Accordion>

<Accordion title="Can I publish just one artifact from a project?">
  Not currently. Publishing deploys everything together. If you need independent deployment, use separate projects.
</Accordion>


# Open in Replit
Source: https://docs.replit.com/replitai/open-in-replit

Learn how to create an Open in Replit button that lets visitors start building from your app or website.

<Frame>
  <div>
    <a href="https://replit.com/?stack=Build&prompt=A4Jw9gtsAuQ&referrer=replit-docs">
      <img alt="Open in Replit" />
    </a>
  </div>
</Frame>

## Building a link

To build a link, use the format below.

```
https://replit.com/?stack=Build&prompt=A4Jw9gtsAuQ&referrer=replit-docs
```

### URL parameters

Make sure to include the following parameters in your URL.

| Parameter  | Type   | Description                                                                                                                                                                                                  | Required/Optional |
| ---------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------- |
| `stack`    | string | The build mode to use. Must be either `Design` or `Build`. `Design` opens [Design Mode](/replitai/design-mode) for visual prototyping. `Build` opens [Agent](/core-concepts/agent) for full app development. | Required          |
| `prompt`   | string | Text describing the application to build, **compressed using [LZ-string](https://pieroxy.net/blog/pages/lz-string/index.html)**. The uncompressed prompt can be up to 50,000 characters.                     | Required          |
| `referrer` | string | The name or URL of the page containing this link. Used for attribution.                                                                                                                                      | Optional          |

<Note>
  The `prompt` parameter must be compressed using LZ-string compression before
  being added to the URL. This helps URLs remain within browser length limits
  and parse correctly.
</Note>

### Interactive link builder

Use the tool below to generate your **Open in Replit** link. Enter your prompt, select the stack mode, and the link will be generated automatically with LZ-string compression applied.

<CreateUrlLinkBuilder />

### Compressing prompts

To create a valid **Open in Replit** link, you must compress your prompt using LZ-string compression. Here's how:

#### JavaScript/TypeScript

```javascript theme={null}
import LZString from 'lz-string';

const prompt = 'Create a todo app with a clean, modern design';
const compressed = LZString.compressToEncodedURIComponent(prompt);
const url = `https://replit.com/?stack=Design&prompt=${compressed}`;
```

#### Python

```python theme={null}
import lzstring

prompt = "Create a todo app with a clean, modern design"
compressed = lzstring.LZString().compressToEncodedURIComponent(prompt)
url = f"https://replit.com/?stack=Design&prompt={compressed}"
```

<Tip>
  Use `compressToEncodedURIComponent` to ensure the compressed string is
  URL-safe.
</Tip>

### Examples

**Design Mode with basic prompt**

```
https://replit.com/?stack=Design&prompt=AoUwTgzg9gdghgGwAQAcpgC4DMoIJZRIR4YgB0QA
```

**Build Mode with detailed prompt**

```
https://replit.com/?stack=Build&prompt=LIQw1gpgBCUE4HsQBMC2IAOUMBsQDt8BLfAcygBcEEcoB3ACwjmg0WQFcBjCqdfEKWYBnKFwJiWICtALIoANyLCOIHEQBe0AI6q4MuDgCe2dt16IU6DMIB0UAJL4uODsmjI4g0iABGOaHE4ZFEAMwQ4KBIiCiJpIgUIYQAaUyIImJMKQRSYfHkuGgixBGQScl8siBBUewARJKJSfCjeOhiGGFMEUKThdIFaWNQIdXxoJQg6PIKAglTUUuYWgFUHWyA&referrer=replit%20docs
```

## Stack modes

### Design Mode

Use `stack=Design` to open your prompt in [Design Mode](/replitai/design-mode), which is optimized for:

* Visual design and UI prototyping
* Rapid iteration on layouts and styling
* Creating design mockups
* Frontend-focused development

### Build Mode

Use `stack=Build` to open your prompt in [Agent](/core-concepts/agent), which is optimized for:

* Full-stack application development
* Backend logic and APIs
* Database integration
* Complex functionality and features

## Best practices

* Keep prompts concise and focused on core features for best generation results.
* Use clear, descriptive language that explains what you want to build.
* Choose the appropriate `stack` mode for your use case (Design for UI/UX, Build for full apps).
* Test your compressed URLs to ensure they parse correctly before sharing.
* Consider your audience's technical level when crafting prompts.

### User authentication

Regardless of your Replit authentication state, you'll need to provide input before creating the app. Usually this means submitting the prompt.

### Error handling

If the URL is malformed or parameters are invalid, Replit won't fill the prompt. Possible causes include:

* Missing required parameters (`stack` or `prompt`)
* Invalid `stack` value (must be `Design` or `Build`)
* Failed decompression of the `prompt` parameter
* Browser "URL too long" errors (though compression helps mitigate this)

### Security considerations

<Warning>
  **Open in Replit** links could be used to create apps with unintended behavior
  or security vulnerabilities. Only click links from trusted sources.
</Warning>

When sharing **Open in Replit** links:

* Review prompts carefully before sharing publicly
* Consider the security implications of the apps being generated
* Avoid including sensitive information in prompts
* Be transparent about what the link will create

## Related resources

* [Design Mode documentation](/replitai/design-mode)
* [Agent documentation](/core-concepts/agent)
* [Replit AI integrations](/replitai/integrations)


# What's a Project?
Source: https://docs.replit.com/replitai/projects

Learn what projects are on Replit — the container for everything you build, from web apps and mobile apps to slide decks and animated videos.

## What is a project?

A project is the container for everything you build on Replit. It holds your code, data, and all the artifacts you create — web apps, mobile apps, slide decks, data dashboards, and videos. When you tell Agent what you want, it sets up a project and builds the artifacts inside it.

Think of a project like a workspace on your desk. Everything lives in one place and can share the same information, but each piece serves a different purpose.

For example, if you ask Agent to build a fitness tracking app, it creates a project with a mobile app artifact along with the backend, database, and storage it needs to work.

<ArtifactGrid />

Key concepts:

* **Project**: The container that holds everything — your code, data, and all your artifacts
* **Artifact**: A publishable output within a project (a web app, slide deck, video, etc.)
* **Resources**: Every artifact gets automatic access to a backend, database, and file storage — no setup required

<Note>
  Publishing deploys your entire project at once. All artifacts go live together, so they always stay in sync.
</Note>

## What you can build

| Type                                             | What it is                                                   | Example                                                    |
| ------------------------------------------------ | ------------------------------------------------------------ | ---------------------------------------------------------- |
| **[Web app](/replitai/web-apps)**                | A website or web application people visit in their browser   | An online store, a booking tool, a portfolio site          |
| **[Mobile app](/replitai/building-mobile-apps)** | A native app people install on their phone                   | A fitness tracker, a restaurant ordering app               |
| **[Data visualization](/replitai/data-apps)**    | An interactive dashboard with charts, filters, and live data | A sales report, a metrics tracker, an analytics view       |
| **[Slide deck](/replitai/slide-decks)**          | A presentation you can present or export                     | A pitch deck, a team update, a product overview            |
| **[Animated video](/replitai/animated-videos)**  | A motion graphics video you can export as MP4                | A product launch video, an explainer, social media content |

A single project can hold multiple artifacts. For example, you could build a web app for your customers, a mobile app for your team, and a slide deck for investors — all in the same project. When artifacts live in the same project, they automatically share the same data and backend logic. To learn more, see [Artifacts](/replitai/artifacts#multiple-artifacts-in-one-project).

## Next steps

<CardGroup>
  <Card title="Artifacts" href="/replitai/artifacts" icon="file-lines">
    Learn how to create, switch between, and manage artifacts
  </Card>

  <Card title="Artifacts" href="/replitai/artifacts" icon="layer-group">
    Learn about artifact types and how they work together
  </Card>

  <Card title="Web Apps" href="/replitai/web-apps" icon="globe">
    Build full-stack web applications
  </Card>

  <Card title="Mobile Apps" href="/replitai/building-mobile-apps" icon="mobile">
    Create native iOS and Android apps
  </Card>

  <Card title="Data Visualization" href="/replitai/data-apps" icon="chart-bar">
    Build interactive dashboards and data visualizations
  </Card>

  <Card title="Slide Decks" href="/replitai/slide-decks" icon="presentation-screen">
    Create presentations through conversation
  </Card>
</CardGroup>


# Replit AI Integrations
Source: https://docs.replit.com/replitai/replit-ai-integrations

Learn how to use AI models from OpenAI, Anthropic, Google, and more without needing your own API key.

Replit AI Integrations makes it easy to build AI-powered applications. Get started with models from OpenAI, Anthropic, Google, and OpenRouter immediately—no developer account setup, no API key management. Replit handles everything for you.

## What is Replit AI Integrations?

Replit AI Integrations provides managed access to AI models from leading providers. Build chat apps, content generators, and AI-powered tools without leaving Replit. No need to create external developer accounts, find your API credentials, or manage separate billing.

When you use Replit AI Integrations, Replit manages the provider credentials and bills you at the public API price. Your usage is billed to your Replit credits and appears on your [usage page](/billing/managing-spend), broken down by Existing Replit App.

## Features

Replit AI Integrations streamlines AI development with built-in access and transparent billing:

* **Zero setup required**: No developer accounts or API keys needed to get started
* **Managed credentials**: Replit handles provider authentication and credential management
* **Transparent billing**: Pay public API prices, billed to your Replit credits
* **Usage tracking**: View your usage per Existing Replit App on your usage page
* **Cross-stack support**: Works across all programming languages and frameworks
* **Optional BYOK**: Bring your own API key if you prefer to use your own credentials

## Getting started

### Using Replit-managed credentials

When you mention AI functionality or specific providers (OpenAI, Anthropic, Google, or OpenRouter) in your prompt, Agent defaults to using Replit AI Integrations:

<AiPrompt>
  Create a web app that uses OpenAI to summarize articles
</AiPrompt>

You can tell which integration is being used by looking for **"OpenAI (Replit managed)"**, **"Anthropic (Replit managed)"**, **"Google (Replit managed)"**, or **"OpenRouter (Replit managed)"** in your initial prompt response. This indicates Agent will use Replit's credentials instead of requiring your own API key.

**For initial builds**: When you submit an initial prompt to create a new app with AI functionality, Replit AI Integrations is matched automatically. Agent will start building with Replit's managed credentials right away.

**For existing Replit Apps**: When Agent detects you want to add AI functionality to an existing Replit App, Agent will explicitly tell you in the Workspace that it's asking to use Replit AI Integrations instead of your own API key. You'll see a confirmation prompt:

<Frame>
  <img alt="Confirm OpenAI Integration dialog showing message about adding OpenAI using Replit's managed service with no API keys required, with Dismiss and Approve buttons" />
</Frame>

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 credentials from OpenAI, Anthropic, Google, or other providers 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:

<AiPrompt>
  Create a web app that uses OpenAI to summarize articles. Use my own OpenAI API key.
</AiPrompt>

You'll see the provider name (without "Replit managed") in the response, indicating Agent will request your API key.

**For existing Replit Apps**: When Agent tells you it wants to use Replit AI Integrations and shows the confirmation prompt, click "Dismiss" instead of "Approve."

In both cases, Agent will build through the first checkpoint before requesting your API key. This allows Agent to set up your project structure first, then pause to collect your credentials.

When you use your own API key, you're billed directly by the provider rather than through Replit credits.

## Viewing your usage

All Replit AI Integrations usage appears on your [usage page](/billing/managing-spend) alongside your other Replit usage. Usage is broken down by Existing Replit App so you can see exactly where your AI spend is going.

## Supported providers

Replit AI Integrations currently supports:

* **OpenAI**: Multimodal models for text generation, reasoning, and audio. Supports chat completions, responses, image generation, audio transcription (`gpt-4o-transcribe`, `gpt-4o-transcribe-mini`), and audio output (`gpt-4o-audio`, `gpt-4o-audio-mini`).
* **Anthropic**: Multimodal models for reasoning, writing, and coding. Supports the Messages API and interactions with web search.
* **Google (Gemini)**: Multimodal models for text generation and reasoning. Supports text and image generation.
* **OpenRouter**: Access to models from providers such as Microsoft (Phi series), Meta (Llama series), Mistral, Qwen, DeepSeek, Nvidia, Amazon, and more.

<Note>
  Replit AI Integrations supports **text, image, and audio output**. Video output is not supported. If you need video generation capabilities, you'll need to use your own API key from a provider that offers them.
</Note>

## OpenRouter privacy and availability

When you use OpenRouter through Replit AI Integrations, your requests are sent with specific privacy settings to protect your data. Understanding these settings is important because they may affect which models are available to you.

### Privacy settings for self-serve users

For individual and team users, Replit configures OpenRouter requests with the following privacy defaults:

* **Paid endpoints training disabled**: Your data will not be used for training by paid model providers
* **Free endpoints training enabled**: Free model providers may train on your prompts and completions
* **Free endpoints publishing enabled**: Free providers may publish your prompts and completions to public datasets
* **Input/output logging disabled**: Your requests and responses are not logged by OpenRouter for the 1% billing discount
* **Analytics cookies disabled**: Analytics cookies are not used

These settings prioritize your privacy while enabling access to the widest range of models. However, **some models may not be available** if they require different privacy settings than those configured above.

### Privacy settings for Enterprise

For Enterprise organizations, Replit enforces stricter privacy controls:

* **Zero Data Retention (ZDR) endpoints only**: Only models with a Zero Data Retention policy are available
* All privacy settings listed above for self-serve users also apply
* This ensures that Enterprise requests are only routed to endpoints that do not retain any data

Because Enterprise enforces ZDR endpoints only, **the selection of available models will be more limited** compared to self-serve users. This trade-off ensures the highest level of data privacy for enterprise workloads.

## Teams and Enterprise

For Teams and Enterprise organizations, Replit AI Integrations access is disabled by default. Organization admins can control access from the organization settings page:

1. Navigate to your organization settings
2. Find the Replit AI Integrations section
3. Toggle access on or off for your organization

When enabled, organization members can use Replit AI Integrations in their apps. All usage is tracked and billed to the organization account. When disabled, members will need to provide their own API keys to use AI model providers.

## Use cases

Build powerful AI applications across any stack:

* **Content generation**: Summarize articles, generate descriptions, create content
* **Analysis and insights**: Extract key information, analyze sentiment, classify text
* **Conversational interfaces**: Build chatbots and AI assistants
* **Text transformation**: Translate, rewrite, or format content
* **Code assistance**: Generate code snippets, explain algorithms, review code

## FAQ

<AccordionGroup>
  <Accordion title="How is this different from other Agent integrations?">
    Other Agent integrations let you connect to external services and APIs. Replit AI Integrations specifically provides managed access to AI model providers like OpenAI, Anthropic, Google, and OpenRouter, with Replit handling credentials and billing so you can start building immediately.
  </Accordion>

  <Accordion title="Do I need a paid Replit account?">
    Yes. Replit AI Integrations is available for paying users.
  </Accordion>

  <Accordion title="What models are available?">
    Replit AI Integrations supports models from leading AI providers:

    |                |                                                               |
    | -------------- | ------------------------------------------------------------- |
    | **OpenAI**     | GPT models for text generation, reasoning, and image creation |
    | **Anthropic**  | Claude models for reasoning, writing, and coding              |
    | **Google**     | Gemini models for multimodal understanding                    |
    | **OpenRouter** | 200+ models from Meta, Mistral, DeepSeek, Qwen, and more      |

    <Tip>
      For the complete and up-to-date model catalog, see [OpenRouter's model list](https://openrouter.ai/models).
    </Tip>
  </Accordion>

  <Accordion title="How is billing calculated?">
    You're billed at the public API price set by the provider. Costs are deducted from your Replit credits and appear on your usage page.
  </Accordion>

  <Accordion title="Can I use my own API key?">
    Yes. You can provide your own API key using Replit secrets. When you use your own key, you're billed directly by the provider instead of through Replit.
  </Accordion>

  <Accordion title="Does this work in all programming languages?">
    Yes. Replit AI Integrations works across all stacks and programming languages supported on Replit.
  </Accordion>

  <Accordion title="Why is this feature not available for my organization?">
    For Teams and Enterprise, Replit AI Integrations access is disabled by default for security and control. Your organization admin can enable it from the organization settings page.
  </Accordion>

  <Accordion title="How do I know if I'm using Replit AI Integrations?">
    Look for "OpenAI (Replit managed)", "Anthropic (Replit managed)", "Google (Replit managed)", or "OpenRouter (Replit managed)" in Agent's response. This indicates you're using Replit AI Integrations. If you see just the provider name without "Replit managed," Agent will request your own API key.
  </Accordion>

  <Accordion title="What happens when I use Replit AI Integrations?">
    When you mention AI functionality or a specific provider (OpenAI, Anthropic, Google, or OpenRouter), Agent defaults to Replit AI Integrations. For new apps, Agent starts building immediately using Replit's credentials. For existing Replit Apps, Agent will tell you in the Workspace that it's asking to use Replit AI Integrations and show a confirmation prompt. Either way, your app can make API calls to the provider, and usage is tracked and billed to your Replit account.
  </Accordion>

  <Accordion title="When do I see the confirmation prompt?">
    You'll see a confirmation prompt when adding Replit AI Integrations to an existing Replit App. Agent will explicitly tell you it's asking to use Replit AI Integrations instead of your own API key. For initial builds when creating a new app, Replit AI Integrations is matched automatically without a pop up.
  </Accordion>

  <Accordion title="When does Agent ask for my API key if I want to use my own?">
    Agent will build through the first checkpoint before requesting your API key. This lets Agent set up your project structure first, then pause to collect your credentials before continuing.
  </Accordion>

  <Accordion title="What types of models & outputs are supported?">
    Replit AI Integrations supports text, image, and audio output. Audio capabilities include transcription (speech-to-text) via `gpt-4o-transcribe` and `gpt-4o-transcribe-mini`, and audio generation via `gpt-4o-audio` and `gpt-4o-audio-mini`. Video output is not supported. If your application requires video generation capabilities, Agent will direct you to use your own API key from a provider that offers these features.
  </Accordion>
</AccordionGroup>


# Slide Decks
Source: https://docs.replit.com/replitai/slide-decks

Learn how to create and refine slide decks through conversation with Agent — pitch decks, presentations, and more.

## What are Slide Decks?

Slide Decks let you create polished, professional presentations entirely through conversation with Agent. Describe what you want and get a complete, beautiful deck instantly — then iterate by chatting, editing visually, or exploring variations on the [Design Canvas](/replitai/canvas).

Under the hood, slides are built with React, which means they export to pixel-perfect, fully editable PPTX, Google Slides, or PDF files. You can also deploy your deck as a live, shareable URL.

Key concepts:

* **One-shot generation**: Describe your presentation and Agent creates a complete deck — layouts, text, and visuals included
* **React-based**: Slides are real React components, not static images, so they export cleanly to any format
* **Export anywhere**: Download as PPTX, Google Slides, or PDF — pixel-perfect and fully editable
* **Deployable**: Publish your deck as a live URL that anyone can view or present from their browser

## How to use Slide Decks

### Creating a slide deck

There are two ways to create a slide deck from the Replit homepage:

* **Type a prompt**: Describe the presentation you want. Agent detects presentation-related prompts and selects the Slide deck stack automatically.
* **Select from the dropdown**: Open the app type dropdown, select **Slides**, then describe your presentation.

**Example prompts:**

* "Create a pitch deck for my AI-powered fitness app"
* "Make a 10-slide investor presentation for a Series A raise"
* "Build a product overview deck for our team offsite"

### Starting with brand guidelines or a reference

You can give Agent a head start:

* **Brand guidelines**: Upload your brand guidelines so Agent matches your colors, fonts, and visual style across every slide.
* **Reference file**: Upload an existing presentation or document as a starting point. Agent uses it as a foundation and builds from there.

### Iterating on your slides

After Agent generates the first version, refine it through conversation:

* **Adjust content**: "Make the problem slide more concise" or "Add a competitive landscape slide after the market size section."
* **Change styling**: "Use a dark theme with blue accents" or "Make the fonts larger and more minimal."
* **Add or remove slides**: "Add two more slides about our roadmap" or "Remove the last slide."
* **Add visuals**: "Add a chart showing projected growth" or "Include icons for each feature on slide 4."
* **Reorder or restructure**: "Move the team slide to the end" or "Split the features slide into two slides."

Slides auto-render in the preview pane as you iterate, so you can see changes immediately.

### Editing slides directly

You can make hands-on edits without going through chat:

* **[Visual Editor](/replitai/visual-editor)**: Click on any element to adjust text, colors, spacing, and layout directly — no AI credits consumed.
* **Duplicate or delete**: Right-click any slide to duplicate or delete it.

<Note>
  Drag and drop for elements within a slide is not yet supported. To move or rearrange elements, ask Agent in chat.
</Note>

### Using Design Canvas for variations

You can use the [Design Canvas](/replitai/canvas) to explore alternative designs for individual slides or sections, then bring your preferred version back to the main deck. This is useful when you want to compare multiple visual directions before committing.

### Presenting and deploying

When your deck is ready:

* **Presenter mode**: Enter full-screen presentation mode to present directly from the preview pane. This is the same view your audience sees when you deploy.
* **Mobile support**: Slides work on mobile devices, so your audience can view them from any screen.
* **Publish**: Deploy your slide deck as a live, shareable URL. Anyone with the link can view or present the deck in their browser.

### Exporting

Download your slides for use outside of Replit:

* **PPTX**: Open and edit in PowerPoint or Keynote
* **Google Slides**: Import directly into Google Slides
* **PDF**: Share a static, print-ready version

All exports are pixel-perfect and fully editable — your slides look the same outside Replit as they do inside it.

## What you can build

* **Pitch decks**: Create investor-ready presentations with clear narratives and professional design.
* **Product overviews**: Build decks that introduce your product's features, architecture, or roadmap.
* **Team presentations**: Prepare slides for standups, offsites, or all-hands meetings.
* **Sales decks**: Design client-facing presentations with tailored messaging and visuals.
* **Educational content**: Create lecture slides, workshop materials, or training decks.

## Frequently asked questions

<Accordion title="Can I drag and drop elements on a slide?">
  Not yet. To move or rearrange elements within a slide, ask Agent in chat. You can use the Visual Editor to edit text, colors, and spacing directly.
</Accordion>

<Accordion title="What export formats are supported?">
  You can export to PPTX, Google Slides, or PDF. All exports are pixel-perfect and fully editable.
</Accordion>

<Accordion title="Can I use my brand guidelines?">
  Yes. Upload your brand guidelines when creating a deck and Agent matches your colors, fonts, and visual style across every slide.
</Accordion>

<Accordion title="Do slides work on mobile?">
  Yes. Slides render on mobile devices, so your audience can view deployed or shared decks from any screen.
</Accordion>

<Accordion title="Can I deploy my slides as a live URL?">
  Yes. Publish your deck and it becomes a live, shareable URL that anyone can view or present from their browser.
</Accordion>

## Availability

Slide Decks are available on all plans for both Core and Pro builders.


# Visual Editor
Source: https://docs.replit.com/replitai/visual-editor

Make direct visual edits to your designs and apps — adjust text, colors, layout, and images by clicking, without writing code.

## What is Visual Editor?

The Visual Editor lets you make hands-on changes to your UI by clicking directly on elements. It works in both the [Design Canvas](/replitai/canvas) and the Preview, so you can edit mockups and running applications the same way.

Simple edits — text changes, color adjustments, spacing tweaks — update the source code directly without consuming AI credits. For changes that involve hidden complexity, the Visual Editor hands off to Agent automatically.

Key concepts:

* **Deterministic edits**: Simple changes (text, colors, spacing) apply directly to source code without an Agent loop
* **No credit cost**: Direct edits don't consume AI credits — only complex changes route through Agent
* **Dual context**: Works identically on Design Canvas frames and in the Preview
* **Source code sync**: Every edit updates the underlying source code instantly

<Note>
  The Visual Editor is currently available only on **web browsers**. It is not supported on Mobile App or Desktop App.
</Note>

## How to use Visual Editor

### Editing in Preview

Click any element in your running application to start editing. Modify text, colors, spacing, or images — and see changes applied live.

<Steps>
  <Step title="Select an element">
    Click any element in the Preview to start editing.
  </Step>

  <Step title="Make your edit">
    Edit text inline, adjust colors with the picker, change spacing with style controls, or swap images. Use the editor pane in chat for additional properties like padding, margin, and more.
  </Step>

  <Step title="Save">
    Hit save to update the source code. Simple changes apply directly without consuming AI credits. If the edit involves complexity, the Visual Editor sends targeted metadata to Agent for assistance.
  </Step>
</Steps>

### Editing on the Canvas

The same editing experience works on Design Canvas frames. Click any element within a frame to edit it — resize, change text, adjust colors and spacing on your mockups without going through an Agent loop.

### Text editing

Click any text element and type to change it directly. If the text is a string in your source code, the edit applies immediately.

<Frame>
  <video />
</Frame>

### Color adjustments

Use the color picker to adjust text and background colors. Type a color name like "purple" in the input field, or use the eyedropper to pick a color from anywhere on your screen.

<Frame>
  <video />
</Frame>

### Style changes

Adjust padding, margins, and layout across elements using intuitive controls.

<Frame>
  <video />
</Frame>

### Image updates

Select images to swap URLs or upload your own files with instant previews.

<Frame>
  <video />
</Frame>

## What you can do

* **Quick text fixes**: Update copy, labels, and headings without opening source files
* **Color exploration**: Try different color schemes by clicking and adjusting — no need to find the right CSS
* **Layout tweaks**: Fine-tune padding, margins, and spacing visually instead of guessing pixel values
* **Image swaps**: Replace placeholder images with real assets by clicking and uploading
* **Design iteration**: Rapidly adjust Canvas frames to compare visual directions without Agent round-trips

## Frequently asked questions

<Accordion title="Do Visual Editor changes cost AI credits?">
  Simple, deterministic edits — text changes, color picks, spacing adjustments — don't consume AI credits. They update the source code directly. If the Visual Editor detects hidden complexity, it routes the change through Agent, which does use credits.
</Accordion>

<Accordion title="Can I edit elements that appear in multiple places?">
  Yes. Selecting an element rendered in a loop or reused across components highlights and updates all instances at once.
</Accordion>

<Accordion title="Why can't I edit the text on some elements?">
  Composite elements made up of multiple sub-elements can't be text-edited directly in the Visual Editor. Ask Agent in chat to make those changes instead.
</Accordion>

<Accordion title="How do I find the source code for an element?">
  Click the top-left label on a selected element to jump to its location in the source code.
</Accordion>


# Web Apps
Source: https://docs.replit.com/replitai/web-apps

Learn how to build full-stack web applications with Agent — responsive by default, instantly deployable, and shareable.

Web apps are the default output type on Replit. When you describe an idea to Agent, it builds a full-stack web application unless you specify a different artifact type.

## Getting started

There are two ways to create a web app:

* **Type a prompt**: Describe what you want to build on the Replit homepage. Agent automatically creates a web app.
* **Select from the dropdown**: Open the app type dropdown on the homepage and choose **Web app**, then describe your idea.

## Key features

* **Full-stack by default**: Every web app includes a frontend and backend. Agent sets up API routes, a database, and server-side logic as your app needs them.
* **Responsive design**: Apps adapt to different screen sizes automatically.
* **Instant deploy**: Publish your app with one click. Replit handles hosting, SSL, and infrastructure.
* **Shared infrastructure**: If your project has multiple artifacts — like a mobile app or data dashboard — they all share the same backend, database, and services.

## Use cases

* **SaaS products**: Build customer-facing tools, dashboards, and platforms.
* **Internal tools**: Create admin panels, CRMs, or workflow apps for your team.
* **Landing pages**: Launch marketing sites with forms, animations, and dynamic content.
* **Marketplaces and directories**: Build listing sites, job boards, or community platforms.

## Next steps

* Add a [mobile app](/replitai/building-mobile-apps) or [data visualization](/replitai/data-apps) to the [same project](/replitai/artifacts#multiple-artifacts-in-one-project)
* Customize your app's look with the [Visual Editor](/replitai/visual-editor)
* Connect external services through [Integrations](/replitai/integrations)


# Replit Cheat Sheet
Source: https://docs.replit.com/additional-resources/cheat-sheet

A handy cheat sheet summarizing the key features and functionalities of Replit.

Here's a handy cheat sheet summarizing the key features and functionalities of Replit. Keep it nearby for quick reference!

<Frame>
  <img alt="Replit Cheat Sheet" />
</Frame>


# The Graphical Command Line Interface
Source: https://docs.replit.com/additional-resources/clui-graphical-cli

Learn how to use CLUI, Replit's interactive command bar that lets you perform various actions across Settings, Workspace, and through Shortcuts.

CLUI (Command Line User Interface) is Replit's interactive command bar that lets you perform various actions quickly without navigating through menus. It combines the efficiency of a command line with a graphical interface.

## Features

CLUI provides powerful command-driven interactions across three different contexts in Replit:

* **Settings management**: Manage your settings, view warnings, and restore deleted Replit Apps
* **Quick navigation**: Move between your Replit Apps and access common features via shortcuts
* **Workspace operations**: Find files, search code, and access tools within your development environment

## Usage

### Account CLUI

The Account CLUI helps you manage your settings, teams, and deleted Replit Apps.

**How to access**: Navigate to the [CLUI page](https://replit.com/~/cli), type in the input box to search for a command, and press Enter to execute it.

<Accordion title="Account commands">
  Type `account` to manage your settings:

  * **view-warns**: View warnings you have been issued
  * **change-username**: Change your username (can only be done once)
</Accordion>

<Accordion title="Trash commands">
  Type `trash` to manage deleted Replit Apps:

  * **restore \<title>**: Restore a deleted Replit App by its title (restores the most recently deleted if multiple exist with the same name)
  * **view**: View your most recently deleted Replit Apps
</Accordion>

<Accordion title="Team commands">
  Type `team` to manage your teams:

  * **view**: View the members of a team you're in by its username
  * **fork-repl-to-project**: Fork an existing Replit App to create a Team Project
</Accordion>

<Accordion title="Clear command">
  Type `clear` to clear the screen of all past commands you've executed
</Accordion>

### Shortcuts CLUI

The Shortcuts CLUI provides quick access to common Replit features from any page.

<Frame>
  <img alt="Shortcuts CLUI" />
</Frame>

**How to access**: Press **CMD/CTRL + K** or click on the search icon in the top navigation bar on most Replit pages.

<Accordion title="Available commands">
  * **Search**: Search Replit for Replit Apps, Templates, Code, People, and more
  * **New**: Create a new Replit App
  * **My Replit Apps**: Browse and navigate to your Replit Apps
  * **My Code**: Search through the code in all of your Replit Apps
</Accordion>

### Workspace CLUI

The Workspace CLUI helps you perform operations, access tools, find files, and search your code while working in a Replit App.

<Frame>
  <img alt="Workspace CLUI" />
</Frame>

**How to access**: Press **CMD/CTRL + K** or click the Search icon in the upper-left corner while in the Workspace.

<Accordion title="Common operations">
  * **Find files**: Quickly locate files in your project
  * **Search code**: Find specific code snippets across your files
  * **Access tools**: Open any tool or panel available in the Workspace
  * **Run commands**: Execute workspace-specific commands
</Accordion>


# Publishing and Database Billing
Source: https://docs.replit.com/billing/about-usage-based-billing

Learn how Replit bills for publishing and databases, including outbound data transfer, compute units, requests, and PostgreSQL usage metrics.

There are three types of usage-based billing for publishing:

1. Outbound Data Transfer
2. Autoscale Compute Units
3. Requests

You can view your usage in **Settings** under **Account** → **Account usage**. Billing occurs monthly or once your accumulated costs exceed your monthly credits. Replit Core and Pro users receive monthly allowances for these resources.

If you need additional credits beyond your monthly subscription allowance, you can purchase credit packs on your billing page. See [Managing Your Spend](/billing/managing-spend) for more information about credit packs.

# Publishing

## 1. Publishing Outbound Data Transfer

This type of usage is billed per byte with Replit Core users receiving a monthly allowance. Only egress (outgoing) data is counted against this allowance, potentially leading to overages. In contrast, ingress (incoming) data is always free.

| Subscription | Allowance |
| ------------ | --------- |
| Replit Core  | 100 GiB   |

The allowances apply to [Static](/cloud-services/deployments/static-deployments), [Autoscale](/cloud-services/deployments/autoscale-deployments), [Reserved VM](/cloud-services/deployments/reserved-vm-deployments) and [Scheduled](/cloud-services/deployments/scheduled-deployments) deployments.

See the [pricing page](https://www.replit.com/pricing) for the current price of outbound data transfer.

***

## 2. Compute Units

Autoscale Deployments are billed based on Compute Units, which take into account both CPU and RAM usage over time.

Overages are billed based on Compute Units. The granularity of the billing is down to each individual compute unit. See the [pricing page](https://www.replit.com/pricing) for the current price of compute units.

Here is a breakdown of how RAM and CPU seconds for an Autoscale Deployment translate into Compute Units:

| Resource     | Compute Units |
| ------------ | ------------- |
| 1 RAM Second | 2 Units       |
| 1 CPU Second | 18 Units      |

Static Deployments don't consume Compute Units. Their billing is solely for Outbound Data Transfers beyond a [specified amount](#).

[Learn more about Autoscale Deployments](/cloud-services/deployments/autoscale-deployments).

***

## 3. Requests

Autoscale Deployments also consider the number of requests made.

See the [pricing page](https://www.replit.com/pricing) for the current price of requests.

# Databases

Replit only charges for usage of [production databases](/cloud-services/storage-and-databases/production-databases) -- development databases are always free and included with every Replit App. For details on development databases, see [Development Database](/cloud-services/storage-and-databases/sql-database).

Replit PostgreSQL is fully managed and serverless, providing effortless high availability and zero maintenance. Billing for production databases is based on actual usage, which can lead to significant cost savings.

Production PostgreSQL databases are billed by two usage metrics:

* **[Compute Time](#compute-time)**: The amount of compute resources consumed per hour.
* **[Data Storage](#data-storage)**: The total volume of data (including historical data) stored.

You can view your current resource usage, including production database usage, in **Settings** → **Account** → **Account usage**.

## Compute Time

Compute time is determined by number of hours your database remains active during a given billing period. Databases are considered active when they receive requests and for an additional 5-minute period after the last request. If a database remains idle for 5 minutes, it will be suspended and enter an inactive state.

## Data Storage

Data storage is the total volume of data stored across all databases in your account, measured in gibibytes (GiB). Storage is calculated as the maximum amount of storage used per month. Each PostgreSQL database consumes 33MB of storage, even if it doesn't contain any data. This is the default storage footprint of the Postgres server.

<Note>The total storage limit for each database is 10 gibibytes (GiB).</Note>

# Additional Notes

If there's an issue with your payment method, we'll notify you. Continuous payment failures might lead to the suspension of your published apps. If this happens, please [contact support](https://replit.com/help) and update your payment details to regain access to our services.


# Replit AI Billing
Source: https://docs.replit.com/billing/ai-billing

Learn how billing and credits work for Replit AI features including Agent usage, checkpoints, and managing your spend.

Replit AI features use usage-based billing to charge you based on what you build and how much you use our AI-powered tools. This ensures you only pay for the value you receive from Agent.

## Getting started

**All subscribers** receive one-time free Agent checkpoints.

Additional monthly credits automatically apply to AI usage:

* **Core subscribers**: Monthly credits (see [pricing](https://replit.com/pricing))
* **Pro subscribers**: Tiered monthly credits with rollover for one month. See [Replit Pro](/billing/plans/replit-pro).

These credits cover Agent and other Replit cloud services like published apps, storage, and databases. Choose [Lite, Economy, Power, or Turbo](/core-concepts/agent/agent-modes) to optimize Agent for speed, cost, or capability.

## Agent features by plan

| Capability                 | Starter       | Core      | Pro       |
| -------------------------- | ------------- | --------- | --------- |
| Agent chat                 | ✅ (daily cap) | ✅         | ✅         |
| Lite build                 | ✅             | ✅         | ✅         |
| Full build                 | ❌             | ✅         | ✅         |
| Design Canvas              | ✅             | ✅         | ✅         |
| Convert design to artifact | ❌             | ✅         | ✅         |
| Visual Editor              | ✅             | ✅         | ✅         |
| All artifact types         | ❌             | ✅         | ✅         |
| Plan Mode                  | ❌             | ✅         | ✅         |
| Connectors                 | ❌             | ✅         | ✅         |
| Task planning (Kanban)     | ❌             | ✅         | ✅         |
| Active background tasks    | —             | 1         | 10        |
| Collaboration seats        | —             | 5         | 15        |
| Turbo mode                 | ❌             | ❌         | ✅         |
| Published apps             | 1 (30-day)    | Unlimited | Unlimited |
| Remove Replit badge        | ❌             | ✅         | ✅         |

For full plan details, see [Starter](/billing/plans/starter-plan), [Replit Core](/billing/plans/replit-core), and [Replit Pro](/billing/plans/replit-pro).

## Agent billing

<Frame>
  <img alt="Replit Agent interface showing chat and checkpoint system" />
</Frame>

Replit Agent uses **effort-based pricing** that scales with the complexity of your request. You pay based on the actual work Agent performs, ensuring fair pricing whether you're making small tweaks or building complex features. This same pricing applies to all Agent usage, including Plan Mode 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.

### How effort-based pricing works

When you chat with Agent in "Build Mode", it creates **checkpoints** that capture completed work on your request:

* **Simple requests** (like bug fixes or small changes) typically cost less than complex builds
* **Complex builds** (like full features or integrations) are bundled into one checkpoint that may cost more than a simple request, reflecting the total effort involved
* **One checkpoint per request** eliminates intermediate checkpoints and reduces billing noise
* **Transparent pricing** shows you exactly what you're paying for each completed task

<Info>
  A checkpoint occurs when Agent completes work on your request and implements the requested functionality in your code.
</Info>

It's important to note, that in cases where the Agent performed work by answering a question or request, but didn't make code changes (e.g. in Plan Mode), there is still a charge associated with that work, even if there's not a checkpoint shown. Checkpoints are generally only shown to the user when there are code changes completed.

For detailed information about what checkpoints capture and how they work, see [Checkpoints and Rollbacks](/core-concepts/agent/checkpoints-and-rollbacks).

### Agent services billing

Some Agent capabilities use paid third-party APIs behind the scenes (such as Claude, ChatGPT, and Nano Banana / Gemini). Agent handles these integrations automatically — no API keys or setup required. You're billed at the provider's public API rate, deducted from your Replit credits. These costs appear alongside your other usage on the [usage dashboard](/billing/managing-spend).

To understand the cost of sample apps, check out our simple [interactive demo](https://agent-pricing.replit.app/).

<Frame>
  <img alt="Replit Agent pricing demo" />
</Frame>

### Track your usage

You can monitor your Agent spending in real-time:

1. **Agent tab**: View costs for individual checkpoints by hovering over the usage icon
2. **Usage dashboard**: See detailed billing information for the current period
3. **Settings**: Set up alerts and budgets in **Account** → **Billing** to control spending

<Tip>
  Usage data can take up to 30 minutes to appear on your usage dashboard.
</Tip>

## Managing your spend

Take control of your AI spending with Replit's built-in budget tools:

* **Usage alerts**: Get notified when you reach spending thresholds
* **Budget limits**: Set hard caps to prevent unexpected charges
* **Real-time tracking**: Monitor costs as you build
* **Credit packs**: Purchase additional credits with discounts on larger purchases. See [Managing Your Spend](/billing/managing-spend) for details.

<CardGroup>
  <Card title="Set Up Alerts" href="/billing/managing-spend">
    Configure email notifications when you reach custom spending amounts
  </Card>

  <Card title="Usage Dashboard" href="https://replit.com/usage">
    View detailed breakdowns of your AI and cloud service costs
  </Card>
</CardGroup>

## Next steps

Ready to start building with AI? Here's how to get the most value from your credits:

* **Try Agent first**: Use your free checkpoints to explore Agent's capabilities
* **Start small**: Begin with simple requests to understand effort-based pricing
* **Use Lite mode**: Leverage [Lite mode](/core-concepts/agent/agent-modes) for quick, targeted edits
* **Set up alerts**: Configure spending notifications before you exceed your credits

Learn more about [Replit's AI tools](/core-concepts/how-replit-works) or explore our [pricing plans](https://replit.com/pricing).


# Publishing costs
Source: https://docs.replit.com/billing/deployment-pricing

Flexible publishing costs that scale with your app's needs. Pay only for what you use with transparent, credit-based billing.

Replit's publishing costs are designed to scale with your app's needs. Choose from usage-based billing that charges only when your app serves requests, or predictable flat-rate options for consistent workloads.

## How billing works

All publishing costs are deducted from your monthly credits. You only pay usage-based fees after your monthly credits are fully used.

* **Starter Plan**: Includes 1 free published app. The deployment expires after 30 days but can be re-published. See [Starter Plan](/billing/plans/starter-plan) for details.
* **[Core Plan](/billing/plans/replit-core)**: Monthly credits included; see [pricing](https://replit.com/pricing)
* **[Pro Plan](/billing/plans/replit-pro)**: Tiered monthly credits; see [Replit Pro](/billing/plans/replit-pro) and the [pricing page](https://replit.com/pricing) for details

<Note>
  Credits apply automatically to all publishing costs. Unused credits don't roll
  over to the next month. Learn more about [usage-based
  billing](/billing/about-usage-based-billing).
</Note>

For a hands-on understanding of publishing costs, explore our [interactive pricing calculator](https://deployment-pricing.replit.app/).

<Frame>
  <img alt="Interactive publishing costs calculator showing cost breakdown by deployment type" />
</Frame>

## Deployment types

Choose the deployment type that best fits your app's traffic patterns and resource needs.

<AccordionGroup>
  <Accordion title="Autoscale Deployments" icon="arrows-up-down">
    Perfect for apps with variable traffic. Pay only when your app serves requests—nothing when idle.

    **Best for:** Web apps, APIs, and services with unpredictable traffic patterns

    [Learn more about Autoscale Deployments](/cloud-services/deployments/autoscale-deployments)
  </Accordion>

  <Accordion title="Reserved VM Deployments" icon="server">
    **Predictable monthly costs with dedicated resources**

    Guaranteed compute resources that run continuously. Choose shared or dedicated VMs based on your performance needs.

    **Best for:** Production apps with steady traffic or guaranteed resource requirements

    [Learn more about Reserved VM Deployments](/cloud-services/deployments/reserved-vm-deployments)
  </Accordion>

  <Accordion title="Scheduled Deployments" icon="clock">
    **Cost-effective for background tasks and automation**

    Run code on a schedule without maintaining persistent infrastructure.

    **Best for:** Background jobs, data processing, and automated tasks

    [Learn more about Scheduled Deployments](/cloud-services/deployments/scheduled-deployments)
  </Accordion>

  <Accordion title="Static Deployments" icon="globe">
    **Minimal costs for static content with global distribution**

    Publish static sites with CDN distribution and pay only for data transfer.

    **Best for:** Documentation sites, portfolios, and single-page applications

    [Learn more about Static Deployments](/cloud-services/deployments/static-deployments)
  </Accordion>
</AccordionGroup>

## Understanding request-based billing

<Tip>
  With Autoscale Deployments, you only pay when your app is actively working.
  When no one visits your app, you pay nothing.
</Tip>

Autoscale Deployments use request-based billing—you're charged only when your app serves traffic. Here's how it works:

1. **App starts up** when the first request arrives (if idle)
2. **Processes the request** using compute resources
3. **Goes idle** after 15 minutes of inactivity

**Billing time:** Often just 1-2 seconds per request, even for complex apps.

### Request-based Billing Timeline

When no one visits your app, you pay nothing. When your app is busy, you pay for the compute resources used.

Here's a timeline of what happens when someone visits your app:

<p> Request-based Billing Timeline </p>

<div>
  <div>
    Instance
  </div>

  <div>
    <div>
      Running
    </div>
  </div>

  <div>Requests</div>

  <div>
    <div />

    <div />

    <div />

    <div />

    <div />
  </div>

  <div>
    Billable
  </div>

  <div>
    <div />

    <div />

    <div />
  </div>
</div>

<div>
  <div />

  <div>
    <span>
      Started
    </span>

    <span>
      Stopped
    </span>
  </div>
</div>

First, the server starts up. Then, it processes the requests. Finally, it goes idle. You only pay for CPU and memory during request processing.

<Note>
  When multiple requests arrive simultaneously (like the stacked blue bars), they share the same compute resources.

  Your billing time extends to cover all concurrent requests, but you don't pay separately for each—just for the total time the server is working.
</Note>

The gaps between green bars represent cost savings during idle time. At the end of the session, the server shuts down.

### Compute units explained

Compute units measure the computational work your app performs:

* **CPU time**: Processing power used (1 CPU second = 18 compute units)
* **Memory time**: RAM consumed (1 GB-second = 2 compute units)
* **Duration**: How long your app works on each request

## Pricing breakdown

<AccordionGroup>
  <Accordion title="Autoscale Deployments" icon="arrows-up-down">
    Pay only when your app serves requests. Automatically scales based on demand.

    | Component                             | Price |
    | :------------------------------------ | ----: |
    | **Base fee** (per month)              |       |
    | **Compute units** (per million units) |       |
    | **Requests** (per million requests)   |       |
  </Accordion>

  <Accordion title="Scheduled Deployments" icon="clock">
    Execute background tasks and scheduled jobs.

    | Component                             | Price |
    | :------------------------------------ | ----: |
    | **Base fee** (per month)              |       |
    | **Compute units** (per million units) |       |
    | **Scheduler**                         |       |
  </Accordion>

  <Accordion title="Reserved VM Deployments" icon="server">
    Dedicated compute resources with predictable monthly costs.

    #### Shared VMs

    | Configuration | Price (per month) |
    | :------------ | ----------------: |

    \| **0.5 vCPU / 2GB RAM** |  |

    #### Dedicated VMs

    | Configuration         | Price (per month) |
    | :-------------------- | ----------------: |
    | **1 vCPU / 4GB RAM**  |                   |
    | **2 vCPU / 8GB RAM**  |                   |
    | **4 vCPU / 16GB RAM** |                   |
  </Accordion>

  <Accordion title="Static Deployments" icon="globe">
    Host static sites with global CDN distribution.

    | Component                  | Price |
    | :------------------------- | ----: |
    | **Hosting**                |  Free |
    | **Data transfer** (per GB) |       |
  </Accordion>
</AccordionGroup>

## Cost examples by app type

These examples show realistic costs for different types of applications.

<AccordionGroup>
  <Accordion title="Personal blog" icon="browser">
    **Traffic:** 50 visitors/day, 3 page views each = 4,500 requests/month

    | Component         | Usage        |         Cost |
    | :---------------- | :----------- | -----------: |
    | **Base fee**      | Monthly      |              |
    | **Compute units** | 13,500 units |     \~\$0.04 |
    | **Requests**      | 4,500        |     \~\$0.01 |
    | **Total**         |              | **\~\$1.05** |
  </Accordion>

  <Accordion title="Small business website" icon="browser">
    **Traffic:** 500 visitors/day, 5 page views each = 75,000 requests/month

    | Component         | Usage         |         Cost |
    | :---------------- | :------------ | -----------: |
    | **Base fee**      | Monthly       |              |
    | **Compute units** | 600,000 units |     \~\$1.92 |
    | **Requests**      | 75,000        |     \~\$0.15 |
    | **Total**         |               | **\~\$3.07** |
  </Accordion>

  <Accordion title="API service" icon="gear">
    **Traffic:** 10,000 API calls/day = 300,000 requests/month

    | Component         | Usage       |          Cost |
    | :---------------- | :---------- | ------------: |
    | **Base fee**      | Monthly     |               |
    | **Compute units** | 3.96M units |     \~\$12.67 |
    | **Requests**      | 300,000     |      \~\$0.60 |
    | **Total**         |             | **\~\$14.27** |
  </Accordion>

  <Accordion title="Background processing job" icon="clock">
    **Usage:** Daily data processing with Scheduled Deployments

    | Component                | Usage        |         Cost |
    | :----------------------- | :----------- | -----------: |
    | **Scheduled deployment** | Base fee     |              |
    | **Compute units**        | 50,000 units |     \~\$0.16 |
    | **Total**                |              | **\~\$1.16** |
  </Accordion>
</AccordionGroup>

## Monitor and control costs

<CardGroup>
  <Card title="Set spending controls" icon="shield" href="/billing/managing-spend">
    Configure spending limits and budgets to prevent unexpected charges.
  </Card>

  <Card title="Monitor usage" icon="chart-bar" href="https://replit.com/usage">
    Track real-time consumption and costs in your Usage dashboard.
  </Card>

  <Card title="Learn about AI billing" icon="brain" href="/billing/ai-billing">
    Understand how [Agent](/core-concepts/agent) affects your bill.
  </Card>

  <Card title="Monitor published apps" icon="chart-line" href="/cloud-services/deployments/monitoring-a-deployment">
    View logs, track performance, and monitor published app status.
  </Card>
</CardGroup>


# Managing Your Spend
Source: https://docs.replit.com/billing/managing-spend

Control AI costs and monitor spending with usage limits, budgets, Plan Mode, Agent modes, and Code Optimizations. Learn strategies to optimize your Replit usage and reduce unnecessary token consumption.

You can control your costs on Replit by using built-in budget controls, optimizing how you work with [AI Agent](/core-concepts/agent), purchasing credit packs, and monitoring your usage patterns. Learn more about [AI billing](/billing/ai-billing).

## Optimize AI costs

AI features like [Agent](/core-concepts/agent) are powerful tools, but strategic use can help you maximize value while controlling costs. Here are effective ways to reduce AI spending.

### Use Plan Mode for cost-effective collaboration

[Plan Mode](/core-concepts/agent/plan-mode) is one of the most effective ways to save on AI costs. When you enable Plan Mode, Agent creates a detailed plan without making any code changes. This approach offers several cost benefits:

* **Chat before committing**: Discuss and refine the approach with Agent before any work begins
* **Lower token costs**: Planning conversations use fewer tokens than code generation and editing
* **Precision targeting**: Review and adjust the plan to ensure Agent only works on what matters
* **Iterative refinement**: Get the scope right before spending tokens on implementation

Use [Plan Mode](/core-concepts/agent/plan-mode) when you're exploring solutions, refining requirements, or want to understand the approach before implementation.

### Control costs with Agent modes and Code Optimizations

[Agent modes](/core-concepts/agent/agent-modes) (Economy, Power, Turbo) let you choose cost vs. capability—Economy uses fewer credits per task.

**We recommend using [Code Optimizations](/core-concepts/agent/code-optimizations)** to balance cost and quality. Code Optimizations controls how much Agent reviews its own code, which affects both token usage and output quality:

* **Choose when to use it**: Turn it **on** for most work—Agent reviews its own code, catches mistakes, and reduces costly rework. Turn it **off** when you want maximum control and minimal tokens (e.g., quick edits or budget-conscious work).
* **Review before execution**: Monitor what Agent plans to do before it makes changes
* **Selective approval**: Choose which changes to apply, avoiding work that doesn't align with your goals
* **Reduced iterations**: Using Code Optimizations can mean fewer correction cycles and wasted tokens

<Tip>
  Combine [Plan Mode](/core-concepts/agent/plan-mode) with [Economy mode](/core-concepts/agent/agent-modes) for maximum cost control. Plan first, then approve changes step by step. We recommend keeping Code Optimizations **on** for most projects.
</Tip>

## Purchase credit packs

If you're on a Core or Pro plan and need additional credits beyond your monthly subscription allowance, you can purchase credit packs from **Settings** → **Account** → **Billing**. Credit packs have discounts when you buy larger amounts, making them ideal for covering temporary usage spikes or preparing for larger projects.

### Available credit packs

Credit packs are available in four sizes, with increasing discounts on larger purchases:

<CreditPackTable />

### How credit packs work

* **Purchase location**: Available in **Settings** → **Account** → **Billing** for Core and Pro plan customers
* **Expiration**: Credit packs expire six months after the purchase date
* **No renewal**: Credit packs do not automatically renew
* **No rollover**: Unused credits from a pack do not roll over after expiration
* **Automatic usage**: Credits are automatically used from the credit pack that expires earliest first, helping you maximize the value of your purchases

<Note>
  Your usage limits and budgets will apply to usage after you use any credit packs you may have. If you want to limit your usage to just credits you've purchased in your pack, set any limits to \$0.01.
</Note>

## Set up limits and budgets

You can establish monthly usage limits and budgets for all usage-based billing services to monitor and control your costs.

### Usage limits

Usage limits cap your spending beyond your monthly credits. When you reach your limit, usage-based services are blocked until the next billing cycle or until you increase the limit.

For Core accounts, open **Settings** → **Account** → **Billing** to set up a usage limit. For organizations, you can set your usage limit via the [usage page](https://replit.com/usage) by selecting **Manage** under **Usage total**.

### Service shutdown limit

When this limit is reached, services will be suspended until the budget is increased or the next billing cycle begins. This will help prevent extra charges.

For Core accounts, open **Settings** → **Account** → **Billing** to set up a service shutdown limit.

### Organization budgets

For organizations, you can set your usage budget from the [settings page](https://replit.com/t/replit/settings/billing). Budgets must be in increments of .

<Note>You must have organization admin or owner permissions to enable a monthly usage limit. If you don't have access, contact your organization owner.</Note>

### Organization admin controls

Organization admins can manage AI model access and integrations from the [organization billing settings](https://replit.com/t/replit/settings/billing).

**Disable external AI model integrations**

Enable this setting to block all users in the organization from using external AI model integrations (such as OpenAI, Anthropic, xAI, and Perplexity through Replit's managed connectors).

Enable this setting to block all users in the organization from using Replit-managed AI integrations.


# App Storage Billing
Source: https://docs.replit.com/billing/object-storage-billing

Learn how Replit charges for App Storage.

## Billing categories

Replit categorizes App Storage billing into the following areas:

* **Storage**: Amount of data capacity used per month. All stored objects have a minimum billing period of seven days.
* **Data Transfer**: Total amount of data uploaded and download throughout the month.
* **Basic Operations**: Operations associated with updating buckets and objects. See Class A Operations in <a href="https://cloud.google.com/storage/pricing">Google Cloud Storage pricing</a> for details.
* **Advanced Operation**: All other cloud object storage operations including retrieving configuration and metadata about objects and buckets. See Class B Operations in <a href="https://cloud.google.com/storage/pricing">Google Cloud Storage pricing</a> for details.

## Prices

The following table lists the prices for each usage category.

| Category                        | Price                  |
| ------------------------------- | ---------------------- |
| App Storage                     |  per GiB per month     |
| App Storage Data Transfer       |  per GiB               |
| App Storage Basic Operations    |  per thousand requests |
| App Storage Advanced Operations |  per thousand requests |


# Replit Core
Source: https://docs.replit.com/billing/plans/replit-core

Learn about Replit Core membership features including powerful AI tools, high-performance workspaces, and one-click publishing.

[Replit Core](https://replit.com/replit-core) membership gives you access to premium
tools that let you quickly go from idea to app. See the [pricing page](https://replit.com/pricing) for current Core pricing (monthly or annual).

## Key features

The Core membership offers the following features:

### AI-powered tools

* **Agent**: Chat with Agent to build, debug, and iterate on your apps
* **Full build**: Use Economy or Power when you want Agent to work independently on larger tasks
* **Lite build**: Quick, targeted edits for fast changes
* **Design Canvas**: Explore visual ideas, generate variations, and convert designs to artifacts
* **Visual Editor**: Directly edit your app's content and layout visually
* **All artifact types**: Web apps, mobile apps, data visualizations, slide decks, animated videos, and more
* **Plan Mode**: Brainstorm and plan work with Agent without editing code
* **Connectors**: Integrate with third-party services like Google, Stripe, and more

### Collaboration

* Invite up to 5 builders to your workspace — no separate team subscription required
* Background tasks — 1 active task at a time
* Shared Kanban board for planning and tracking work

### Lightning-fast and secure workspace

* Work in a high-powered cloud development environment
* Avoid interruptions in service with pay-as-you-go billing
* Use the Secrets tool to keep sensitive data secure and separated from the code

See the <a href="https://replit.com/pricing">pricing page</a> for cost and limits for
specific plans.

### Monthly credits

* Receive monthly credits that automatically apply to paid services such as Agent, publishing, network transfer, and database storage. Need more builders or higher credit tiers? See [Replit Pro](/billing/plans/replit-pro).

### One-click Publishing

* Publish an unlimited number of apps
* Select from multiple publishing options to optimize your spending
* Access built-in logging & analytics
* Remove the "Made with Replit" badge from your published apps

### Priority support and community events

* Access members-only forums and events
* Get early access to new features

## Core vs Starter vs Pro

| Capability              | Starter       | Core      | Pro       |
| ----------------------- | ------------- | --------- | --------- |
| Agent chat              | ✅ (daily cap) | ✅         | ✅         |
| Lite build              | ✅             | ✅         | ✅         |
| Full build              | ❌             | ✅         | ✅         |
| Design Canvas           | ✅             | ✅         | ✅         |
| All artifact types      | ❌             | ✅         | ✅         |
| Plan Mode               | ❌             | ✅         | ✅         |
| Connectors              | ❌             | ✅         | ✅         |
| Collaboration seats     | —             | 5         | 15        |
| Active background tasks | —             | 1         | 10        |
| Turbo mode              | ❌             | ❌         | ✅         |
| Published apps          | 1 (30-day)    | Unlimited | Unlimited |

For a full comparison, see the [pricing page](https://replit.com/pricing).

## Getting started

Upgrade to Replit Core in just a few steps:

1. Navigate to the <a href="https://replit.com/pricing">Pricing</a> page
2. Select **Join Replit Core**
3. Select either **Monthly** or **Yearly** plan and enter your payment details

## Next steps

To learn more about Replit Core's features, see the following resources:

* [Starter Plan](/billing/plans/starter-plan): Compare Starter plan features with Core
* [Replit Pro](/billing/plans/replit-pro): For teams—up to 15 builders, Turbo mode, and tiered credits
* [Replit Agent](/core-concepts/agent/): Start building with Agent
* [Workspace](/core-concepts/workspace/): Learn about the workspace and app-building tools
* [Publishing](/category/replit-deployments/): Read about the various publishing options for your app


# Replit Pro
Source: https://docs.replit.com/billing/plans/replit-pro

Learn about Replit Pro: our most powerful plan for serious builders—Turbo mode, up to 15 builders, tiered credits with rollover, and priority support.

[Replit Pro](https://replit.com/pricing) is built for serious builders who have outgrown Core—whether you're shipping production apps, working with a growing team, or pushing Agent to its limits. See the [pricing page](https://replit.com/pricing) for current Pro pricing.

## Key features

### Most powerful Agent experience

* **Turbo mode**: A **separate toggle** in Advanced settings — turn it on in **Power** mode for **2.5x faster** Agent with the fastest models. Requests can cost up to 6x more, so it's recommended for experienced builders.
* **Parallel task execution**: Run up to 10 tasks simultaneously across your workspace for faster iteration.
* **Agent modes**: Choose Lite, Economy, or Power to match the task, then use Turbo in Power mode when you need maximum speed. See [Agent modes](/core-concepts/agent/agent-modes) for guidance.

### Tiered credits and rollover

* **Tiered monthly credits**: Multiple tiers with discounts on larger tiers. Buy in advance, save more, and add credits as you grow. See the [pricing page](https://replit.com/pricing) for current tiers.
* **Credit rollover**: Unused credits roll over for one month, so you get more value from your subscription.

### Scale your team

* **Up to 15 builders**: Invite up to 15 builders with pooled credits and budget controls. No per-user fees—everyone works from the same plan.
* **Collaborative workspaces**: Create collaborative workspaces with pooled credits from the admin's account; organize apps and track usage per workspace.

### Priority support and reliability

* **Priority support**: Responses in under 24 hours on business days.
* **4× database recovery window**: Restore your database to any point in time within the last 28 days, instead of the standard 7 days. Keep in mind that longer retention windows use more storage, so extending the recovery period will increase your usage costs.

### Community and more

* **Exclusive community**: Learn from other serious builders, share what you're working on, and get exclusive access to our team.
* **More coming soon**: Additional features are coming exclusively to Pro this year.

## What's exclusive to Pro

| Feature                 | Details                                        |
| ----------------------- | ---------------------------------------------- |
| Turbo mode              | 2.5x faster Agent with the most capable models |
| Parallel task execution | Run up to 10 tasks simultaneously              |
| Up to 15 builders       | vs 5 on Core                                   |
| Credit rollover         | Unused credits roll over for one month         |
| Priority support        | Responses in under 24 hours on business days   |
| 4× data retention       | Recover deleted databases for up to 28 days    |

Everything in Core is also included in Pro. For a full comparison, see the [pricing page](https://replit.com/pricing).

## Getting started

1. Go to the [pricing page](https://replit.com/pricing)
2. Select **Replit Pro** and choose your credit tier
3. Complete payment to start building with your team

## Next steps

* [Replit Core](/billing/plans/replit-core): Compare Core (up to 5 collaborators) with Pro
* [Agent modes](/core-concepts/agent/agent-modes): Choose Lite, Economy, Power, or Turbo for speed, cost, and performance
* [Billing overview](/category/billing): Understand credits, usage, and credit packs


# Starter Plan
Source: https://docs.replit.com/billing/plans/starter-plan

Learn about the Starter plan features, limitations, and what you can build for Free.

## What you get

The Starter plan gives you everything you need to start building on Replit. Create apps, use AI integrations, and publish  your first project — all at no cost.

### Daily credits for Agent

Starter plan users receive daily credits for Agent usage, up to a monthly cap. These credits reset daily, giving you a fresh allowance to work with Agent each day.

### Monthly credits for cloud usage

You also receive monthly credits that can be used for:

* [Databases (Production)](/cloud-services/storage-and-databases/production-databases)
* [Object storage](/cloud-services/storage-and-databases/object-storage)
* [AI Integrations](/replitai/replit-ai-integrations)
* [Publishing (Autoscale, static)](/category/replit-deployments)

These credits reset each month.

### Lite build

Access to [Lite build](/core-concepts/agent/agent-modes), a fast and focused build experience for quick edits and targeted changes with Agent.

### One free published app

Get  free published app whether you're using Lite build or Design Canvas. This published link will automatically go down after 30 days.

Your published app will include a "Made with Replit" badge that contains your unique referral link. If another user signs up with that link from your badge, you'll receive referral credits once you upgrade to a paid plan.

## Limitations

The following features require upgrading to Core:

### Full build

[Full build](/core-concepts/agent/) allows Agent to work independently with more power and autonomy. Starter plan builders can only use [Lite build](/core-concepts/agent/agent-modes). Full build requires Core or Pro.

### Converting a design to an artifact

Converting a Design Canvas design to a full artifact requires Core. Starter plan builders can create designs and deploy them, but converting to an artifact with backend functionality requires an upgrade. If you want to build an app with backend functionality, try starting with [Lite build](/core-concepts/agent/agent-modes).

### Third-party connectors

External connectors require Core. This includes integrations with services like Google, Stripe, and other third-party APIs (See more info [here](https://docs.replit.com/replitai/integrations#connectors)).

### Remove "Made with Replit" badge

Removing the "Made with Replit" badge from your published apps requires Core. Starter plan users will have the badge displayed on their deployments.

### Additional published apps

Starter plan users get  free published app. Additional published apps beyond this require Core or Pro.

### Plan Mode

Using Plan Mode requires Core. Plan Mode allows you to brainstorm ideas, plan work, and collaborate with Replit Agent without editing your app's code or data.

### All artifact types

Building artifact types other than web and mobile apps requires Core. Choose from a variety of types including data visualizations, slide decks, animated videos, and more. See [Projects](/replitai/projects).

## Upgrading to Core

Ready for more? Upgrade to Core to unlock:

* **More storage and monthly credits** that also let you pay-as-you-go
* **Unlimited published apps** beyond your first free one
* **Full build** for autonomous development
* **Third-party connectors** to connect with external services
* **Plan Mode** to map out tasks before jumping into a build.
* **Replit Badge removal** for a professional look
* And more

<CardGroup>
  <Card title="View Pricing" icon="dollar-sign" href="https://replit.com/pricing">
    Compare plans and see pricing details
  </Card>

  <Card title="Learn About Core" icon="star" href="/billing/plans/replit-core">
    Discover all Core plan features
  </Card>
</CardGroup>

## Next steps

Ready to start building? Here's how to get the most from your Starter plan:

* **[Create your first app](/getting-started/quickstarts/ask-ai)**: Build a full-stack app
* **[Try Design Canvas](/replitai/canvas)**: Create beautiful designs in under 2 minutes
* **[Publish your app](/category/replit-deployments)**: Publish your deployment and share what you've built with others


# Analytics Dashboard
Source: https://docs.replit.com/billing/teams-billing/analytics-dashboard

View activity, resource usage, published apps, and costs with the Enterprise Analytics Dashboard.

<Info>
  The Analytics Dashboard is available exclusively for Enterprise customers.
</Info>

The Analytics Dashboard gives Enterprise admins comprehensive visibility into their organization's Replit usage. See engagement metrics, spending breakdowns, and published app performance from a centralized interface.

<Frame>
  <img alt="Analytics Dashboard showing overview metrics including active members, published apps, and app views, with usage data grouped by member" />
</Frame>

## Features

### Activity monitoring

See how your organization engages with Replit:

* View active members and their contribution patterns
* See collaboration activity across teams
* Identify usage trends over time

### Resource usage tracking

View spending by member and app:

* See resource consumption broken down by team member
* View usage patterns across individual apps
* Identify high-consumption apps and members

<Frame>
  <img alt="Analytics Dashboard showing usage and traffic data grouped by app, with columns for app name, creator, last edited, days online, unique viewers, and resource usage" />
</Frame>

### Publishing oversight

See your organization's published app activity:

* View total published apps with public vs. private access breakdowns
* See publishing frequency, app views, and remix activity
* Review days online, unique viewers, and resource usage per app

### Cost management

View resource consumption and costs across your organization:

* See spending breakdowns by member, team, or app
* Compare costs against budgets and allocations
* Export usage reports for internal accounting

## Accessing the dashboard

To open the Analytics Dashboard:

1. Go to [replit.com](https://replit.com) and sign in to your Enterprise account.
2. Select **Analytics** from the left navigation on the home page.

<Note>
  Contact your dedicated account manager for help using your Analytics Dashboard.
</Note>


# Cancellation
Source: https://docs.replit.com/billing/teams-billing/cancellation

Learn how to cancel your organization subscription and understand what happens to your resources when you delete your organization.

## Subscription cancellation

You can cancel your subscription by deleting your organization under your organizations advanced settings. Upon deletion of your org, all resources will be deleted (Replit Apps, published apps, Projects, etc.) and you will immediately lose access to the organization.

<Frame>
  <img alt="org-deletion" />
</Frame>


# Managing Seats
Source: https://docs.replit.com/billing/teams-billing/managing-seats

Learn how to add and remove seats in your organization, including prorated billing and scheduling changes for the next contracted period.

## Where to manage seats

Seats can be managed from **Settings** (under **Account** → **Seats** or your organization's billing section) or the members page. **Note:** After migration to Pro, the billing model changes—Pro has no per-seat fees and supports up to 15 builders. See the [Pro plan](/billing/plans/replit-pro) or [blog](https://blog.replit.com/pro-plan) for current behavior.

## Adding Seats

Adding a seat happens immediately and you will pay a prorated value for the seat for the remainder of your billing period and get a prorated Monthly Credit. For example, if you are half way through the billing period, the seat will cost 50% of the full cost, and the Monthly Credit for the seat will be 50%. At the next billing period cycle, the seat will cost full value and the Monthly Credit will be the full amount.

## Removing Seats

To remove a seat from your organization, that seat must be empty. Any seat that is associated with a user cannot be removed. Removing a seat does not immediately take effect — you will have access to this seat until the end of your current contracted period. At the start of the next contracted period, your organization will have the updated number of seats.

### Adding members to seats scheduled for removal

If you have a seat scheduled to be removed at the start of the next contracted period, you can still add a member to consume that seat. Adding a member will stop that seat from being removed at the start of the next contracted period.

<Frame>
  <img alt="scheduled-seat-warning" />
</Frame>


# Overview
Source: https://docs.replit.com/billing/teams-billing/overview

Learn about billing for organizations on Replit Pro, including tiered credits, pooled usage, and migration from the former Teams plan.

## Replit Pro

The **Pro plan** replaced the former Teams plan. Pro has **no per-seat fees**: you get **up to 15 builders** with **pooled credits** and budget controls. Everyone works from the same plan. See [Replit Pro](/billing/plans/replit-pro) for full Pro plan features.

## Billing and usage

Invoices include your plan cost and usage-based charges. To see historic and upcoming bills, visit the usage page. Usage is tracked per workspace so you can see how credits are consumed across your organization.

## Usage-based pricing

Visit [Usage-based billing](/billing/about-usage-based-billing) for details on compute, data transfer, databases, and other usage.

## Credit packs

If your organization needs additional credits beyond your monthly allowance, you can purchase credit packs in **Settings** → **Account** → **Billing**.

<CreditPackTable />

Credit packs expire six months after the purchase date and do not renew or roll over. Credits are automatically used from the credit pack that expires earliest first. On Pro, unused subscription credits also roll over for one month.


# Billing
Source: https://docs.replit.com/category/billing

Replit's billing system helps you optimize your spending on the platform.

Replit's billing system is designed to keep things simple and predictable. When you subscribe to a Replit plan, you receive monthly credits that are included in your subscription fee.

<CardGroup>
  <Card title="Starter Plan" icon="gift">
    Limited daily Agent and monthly cloud credits
  </Card>

  <Card title="Core Plan" icon="user">
    Monthly or annual credits; invite up to 5 collaborators
  </Card>

  <Card title="Pro Plan" icon="users">
    Tiered credits, up to 15 builders, Turbo Mode, no per-seat fees
  </Card>
</CardGroup>

This means your usage up to your monthly credit allowance is covered by your subscription—no additional charges. Only when you exceed your monthly credits will you be charged for additional usage.

These credits cover all your usage across Replit's platform, including AI features like Agent, publishing, database operations, and more. Your subscription credits reset each month, giving you a fresh allowance to build and publish your projects.

Beyond the credit system, Replit provides comprehensive billing tools to help you monitor your spending patterns, set monthly budget limits, and control spending with usage limits. You can configure limits and budgets to prevent unexpected charges and give yourself time to increase your budget if needed for uninterrupted access to your projects.

## Getting started

Access Replit's billing features through the tools described in the following sections to take control of your spending and optimize your development workflow.

### Billing in Settings

Review your plan details, payment information, usage limits, and budget settings all in one place.

<Accordion title="How to access Billing">
  1. Select your profile icon in the top right corner to access the dropdown menu.
  2. Select **Settings**.
  3. Under **Account**, select **Billing** to view your current plan, current month usage, alert settings, and budget limit.
</Accordion>

### Usage dashboard

Track detailed resource consumption and costs for the current billing period, organized by service category. Use this dashboard to understand how your credits are being used and identify optimization opportunities.

<Accordion title="How to access the Usage dashboard">
  Open **Settings** and, under **Account**, select **Account usage** to view detailed resource consumption and costs for the current billing period.
</Accordion>

### Invoices

Review past usage and payments for subscriptions and usage-based charges to track your development costs over time.

<Accordion title="How to access invoices">
  Open **Settings** and, under **Account**, select **Billing** or **Account usage**. From there, select **See previous invoices** (or equivalent) to open the invoice portal on Replit's third-party provider.
</Accordion>

## Key features

* **Credits included**: Starter plan users receive limited daily Agent credits (up to a monthly cap) and monthly cloud credits. Core and Pro include monthly credits; Pro offers tiered credits with rollover for one month. Core lets you invite up to 5 collaborators; Pro supports up to 15 builders with pooled credits and no per-seat fees.
* **Credit packs available**: Purchase additional credits on Core and Pro plans, with discounts on larger packs. See [Managing Your Spend](/billing/managing-spend) for details
* **AI features included**: Use Agent within your credit allowance
* **Real-time usage tracking**: Monitor your current plan and usage in **Settings** → **Account** → **Billing** and **Account usage**
* **Smart limits and budgets**: Set custom usage limits and budgets to manage costs and prevent unexpected charges. See [Managing Your Spend](/billing/managing-spend) for more information
* **Detailed usage insights**: Track resource consumption and costs for the current billing period in your **Usage** dashboard
* **Complete invoice history**: View and download current and past costs from the invoice portal linked from the **Usage** dashboard

## Use cases

The following examples show how to use Replit's billing features to maintain control over your development costs while building and scaling your projects.

### Protect your budget when your app scales

When your autoscale deployment experiences sudden growth, use these features to maintain cost control:

* Create a usage limit to cap spending at your custom threshold
* Set a budget limit to suspend your app when you reach the cap
* If you reach your monthly limit, increase your budget and restart the app to restore availability

### Track and optimize your development costs

Use data from the **Usage** and **Invoice** pages to make informed decisions about your development spending:

* Streamline expense reporting with export-ready invoices
* Download or view itemized reports for accounting and budget planning
* Identify cost optimization opportunities by reviewing usage trends across different services

## Next steps

To learn more about Replit's billing and plans, explore these resources:

* [Starter Plan](/billing/plans/starter-plan) - Learn about Starter Plan features and limitations
* [Pricing plans](https://replit.com/pricing) - Compare plans and features to find the right fit for your projects
* [AI Billing](/billing/ai-billing): Learn how Replit charges for Agent usage
* [Publishing and Database Billing](/billing/about-usage-based-billing): Learn about compute units, data transfer, and database costs
* [Replit Pro](/billing/plans/replit-pro) - Learn about the Pro plan for teams: up to 15 builders, Turbo Mode, and tiered credits


# Legal and Security
Source: https://docs.replit.com/category/legal-and-security

Learn about Replit's policies on security, privacy, licensing, usage limits, and other legal matters to help you use the platform safely and effectively.

<CardGroup>
  <Card title="Reporting Abuse on Replit" href="/legal-and-security-info/abuse-report" icon="bug">
    At Replit, we strive to maintain a safe and welcoming environment for all our users. Report any abusive, harmful, or inappropriate content immediately.
  </Card>

  <Card title="Copyright claims and takedown requests" href="/legal-and-security-info/copyright-claims-takedown-requests" icon="copy">
    It is against our Terms and Conditions to publish content that violates copyrights, privacy, or contract rights. We act immediately on takedown requests.
  </Card>

  <Card title="Licensing information" href="/legal-and-security-info/licensing-info" icon="file">
    Find details on how your Replit Apps are licensed here.
  </Card>

  <Card title="Strike system FAQ" href="/legal-and-security-info/strike-system-faq" icon="triangle">
    Learn about warnings, bans, and the site ban process at Replit.
  </Card>

  <Card title="Account Inactivity" href="/legal-and-security-info/account-inactivity" icon="user">
    Replit reserves the right to terminate inactive accounts after 6 months of no activity.
  </Card>

  <Card title="Deleting your data" href="/legal-and-security-info/deleting-your-data" icon="trash">
    Instructions for deleting your personal information from Replit.
  </Card>

  <Card title="Security" href="/legal-and-security-info/security" icon="lock">
    Information on how Replit secures your code, applications, and user data.
  </Card>

  <Card title="Support Policy" href="/legal-and-security-info/support-policy" icon="headset">
    Learn about the support options Replit offers for users, both free and members.
  </Card>

  <Card title="Trust and Safety at Replit" href="/legal-and-security-info/trust-and-safety" icon="shield">
    We strive to create a trusted and safe community. Here's how we do it.
  </Card>

  <Card title="Usage Quota & Limits" href="/legal-and-security-info/usage" icon="gauge">
    Learn about Replit's service limits, soft limits, and hard limits.
  </Card>

  <Card title="Replit web accessibility statement" href="/legal-and-security-info/web-accessibility" icon="eye">
    See Replit's accessibility features and commitment to web accessibility.
  </Card>
</CardGroup>


# Replit Pro and Enterprise
Source: https://docs.replit.com/category/teams

Have your team build production-ready customer apps and business tools faster with Replit.

<CardGroup>
  <Card title="Pro Plan" icon="users" href="/billing/plans/replit-pro">
    Up to 15 builders, pooled credits, Turbo Mode, no per-seat fees — see [pricing](https://replit.com/pricing)
  </Card>

  <Card title="Enterprise Plan" icon="building">
    Custom pricing with advanced security and compliance features
  </Card>
</CardGroup>

Choose the right plan for your organization. **Pro** is the team plan: up to 15 builders with pooled credits and no per-user fees. **Enterprise** adds advanced security, compliance, and support for larger organizations. If you have multiple Teams organizations, each workspace will migrate to its own Pro subscription for the remainder of its term; you can consolidate after migration.

## Pro

Pro provides shared resources and collaborative features for serious builders and teams:

* **Up to 15 builders**: No per-seat fees—everyone works from the same plan with pooled credits
* **Tiered credits**: Multiple tiers with rollover for one month; see the [pricing page](https://replit.com/pricing) for current tiers
* **Turbo Mode**: 2.5x faster Agent via a separate toggle; most capable models (Pro and Enterprise only)
* **Private Deployments**: Secure app hosting with controlled access
* **Viewer Seats**: Ability for stakeholders and non-builders to use published private apps
* **Unified settings**: Organize apps, track usage per workspace, and manage billing and users from one place

## Enterprise

Enterprise includes all Pro features plus enhanced security, control, and support for organizations:

<CardGroup>
  <Card title="Enterprise Security" icon="shield-check">
    SOC-2 compliant platform with SSO/SAML, SCIM Provisioning, and advanced security controls.
  </Card>

  <Card title="Centralized Management" icon="folder-open">
    Manage teams, billing, and resources from a central dashboard. Monitor usage and control costs effectively.
  </Card>
</CardGroup>

* **SSO/SAML with SCIM Provisioning**: Secure team access with Single Sign-On and automated user provisioning
* **Dedicated Development Environment**: Role-based access control with IDP groups for granular permissions
* **Admin Controls**: Require Private Deployments, ban public apps, and mandate Security Scanner checks before publishing
* **Enterprise Security Center**: Detect CVEs across dependencies by severity. View affected apps and download SBOMs for compliance.
* **Custom Integration Permissions**: Define access boundaries for first-party integrations across your organization
* **Larger Deployment VMs**: Access expanded VM sizes for scalable app hosting
* **Dedicated Support**: Access your dedicated account manager and sales engineer for platform support
* **Enterprise Data Connectors**: Connect to Snowflake, BigQuery, and Databricks for seamless data integration
* **Unlimited Viewer Seats**: Give stakeholders and non-builders unlimited access to your published private apps

## Essential resources

Learn more about Pro and Enterprise with comprehensive documentation:

<CardGroup>
  <Card title="Identity & Access" href="/teams/identity-and-access-management/" icon="lock">
    Comprehensive guide to user management, permissions, and SSO integration
  </Card>

  <Card title="Security & Compliance" href="/teams/information-security/overview" icon="shield">
    Detailed information about our security features and compliance standards
  </Card>
</CardGroup>

Additional documentation:

* [Custom Templates](/teams/custom-templates) — Standardize how your organization builds with Agent
* [Design Systems](/teams/custom-design-system) — Set up your organization's design system for Agent
* [Project Management Guide](/teams/projects/overview)
* [Billing for organizations](/billing/teams-billing/overview)
* [Replit Pro plan](/billing/plans/replit-pro)

## Use cases

Pro and Enterprise support diverse organizational needs across different scales:

* **Enterprise Applications**: Build and publish mission-critical applications with enterprise-grade security and scaling
* **Business Tooling**: Develop and maintain business tools with seamless access management
* **Rapid Prototyping**: Accelerate innovation with instant development environments

<Note>
  Ready to transform your team's development workflow? [Contact our sales team](https://replit.com/teams) for a personalized demo and enterprise pricing information.
</Note>


# Monetization
Source: https://docs.replit.com/core-concepts/monetization

Add payments and subscriptions to your Replit apps with Agent-powered integrations.

Turn your app into a business. Replit integrates with payment providers so you can accept payments, sell subscriptions, and monetize your web and mobile apps.

## How it works

Tell Agent what you want to charge for, and it handles the rest: connecting to a payment provider, building the checkout or paywall UI, and wiring up the payment logic. You can test everything safely before going live.

Replit supports two monetization integrations—one for web apps and one for native mobile apps:

* **[Stripe Payments](/core-concepts/monetization/stripe-payments)** (web apps): Accept one-time payments, sell subscriptions, or build a full storefront. Agent connects a Stripe sandbox so you can test checkout flows before going live.
* **[RevenueCat Subscriptions](/core-concepts/monetization/revenuecat-subscriptions)** (mobile apps): Add in-app subscriptions to your native mobile app. Agent sets up RevenueCat, builds a paywall screen, and configures test mode so purchases are simulated during development.

## Choose the right integration

|                      | Stripe                                        | RevenueCat                                    |
| -------------------- | :-------------------------------------------- | :-------------------------------------------- |
| **Best for**         | Web apps                                      | Native mobile apps                            |
| **Payment types**    | One-time payments, subscriptions, storefronts | In-app subscriptions                          |
| **Test environment** | Stripe sandbox (test cards)                   | RevenueCat test mode (simulated purchases)    |
| **Go live**          | Connect live Stripe API keys                  | Publish to the App Store or Google Play Store |
| **Account required** | Stripe account                                | RevenueCat account                            |

<CardGroup>
  <Card title="Stripe Payments" href="/core-concepts/monetization/stripe-payments" icon="credit-card">
    Accept payments and sell subscriptions in your web app. Agent sets up Stripe with a sandbox for safe testing.
  </Card>

  <Card title="RevenueCat Subscriptions" href="/core-concepts/monetization/revenuecat-subscriptions" icon="mobile">
    Add in-app subscriptions to your native mobile app. Agent configures RevenueCat, builds a paywall, and sets up test mode.
  </Card>
</CardGroup>

## Getting started

The fastest way to get started is to ask Agent:

* **Web app**: "Add Stripe payments to my app" — see [Stripe Payments](/core-concepts/monetization/stripe-payments)
* **Mobile app**: "Add a \$5.99/mo subscription to my app" — see [RevenueCat Subscriptions](/core-concepts/monetization/revenuecat-subscriptions)

Agent connects the integration, builds the UI, and sets up a test environment so you can try it immediately.

## Next steps

* [Stripe Payments](/core-concepts/monetization/stripe-payments): Add payments and subscriptions to web apps
* [RevenueCat Subscriptions](/core-concepts/monetization/revenuecat-subscriptions): Add in-app subscriptions to mobile apps
* [Native Mobile Apps](/replitai/building-mobile-apps): Learn about building mobile apps on Replit
* [Web Apps](/replitai/web-apps): Learn about building web apps on Replit


# RevenueCat Subscriptions
Source: https://docs.replit.com/core-concepts/monetization/revenuecat-subscriptions

Learn how to add in-app subscriptions to your mobile app with RevenueCat using Agent.

## What is RevenueCat

RevenueCat allows you to add in-app subscriptions to your [native mobile app](/replitai/building-mobile-apps). To get started, ask Agent to set up a subscription, connect your RevenueCat account, and Agent handles the logic and provides a test environment.

## Prerequisites

Before you start, you need:

* A Replit project created with a **Mobile app**
* A [RevenueCat](https://www.revenuecat.com) account (only an email and password are required—no bank account or additional setup needed)

## Get started

<Steps>
  <Step title="Ask Agent to add a subscription">
    Describe the subscription you want. Agent plans the integration, installs packages, and sets up RevenueCat.

    <AiPrompt>Add a \$5.99/mo subscription to my app</AiPrompt>

    <Frame>
      <img alt="Replit Workspace showing Agent responding to a prompt to add a subscription" />
    </Frame>
  </Step>

  <Step title="Connect your RevenueCat account">
    Agent prompts you to connect RevenueCat. Select **Connect RevenueCat** to begin the authorization flow.

    <Frame>
      <img alt="Agent chat showing the Connect RevenueCat banner with a Connect button" />
    </Frame>

    A modal confirms you are connecting to RevenueCat. Select **Continue to RevenueCat** to proceed.

    <Frame>
      <img alt="Connect RevenueCat modal showing privacy and security information" />
    </Frame>
  </Step>

  <Step title="Authorize Replit">
    On the RevenueCat authorization page, select **Read & Write** access and then **Authorize** to grant Replit access to your RevenueCat account.

    <Frame>
      <img alt="RevenueCat OAuth authorization page with Read and Write access selected" />
    </Frame>
  </Step>

  <Step title="Agent builds your subscription">
    After authorization, Agent creates the RevenueCat project, configures products and entitlements, builds a paywall screen, and wires up subscription logic throughout your app.

    <Frame>
      <img alt="Agent summary showing the paywall screen with subscription features and pricing" />
    </Frame>

    <Frame>
      <img alt="Mobile app home screen showing a Premium badge for subscribed content" />
    </Frame>
  </Step>
</Steps>

## Test subscriptions

Replit previews use RevenueCat's **test mode**. When you test a purchase in Expo Go, you see a test purchase dialog instead of a real payment flow. No money is charged.

<Frame>
  <img alt="Test purchase dialog on a mobile device showing package details and test buttons" />
</Frame>

<Tip>
  Test purchases are safe to use during development. You can test both
  successful and failed purchase flows without any real charges.
</Tip>

<Warning>
  Once your app is published to the App Store, purchases use real money. Make
  sure your RevenueCat products and pricing are correct before submitting to the
  App Store.
</Warning>

## Manage subscriptions

To modify your subscription, ask Agent. For example:

<AiPrompt>Modify the subscription to be \$9.99/yr instead</AiPrompt>

Agent updates your RevenueCat product configuration, paywall UI, and subscription logic to reflect the change.

<Frame>
  <img alt="Replit Workspace showing Agent modifying the subscription price from monthly to yearly" />
</Frame>

## Syncing to App Store Connect

For in-app purchases to work in TestFlight and the Apple App Store, [you'll need to agree
to Apple's Paid Apps Agreement and connect your bank account](https://developer.apple.com/help/app-store-connect/manage-agreements/sign-and-update-agreements/).
This is done through App Store Connect. You'll need a paid Apple Developer Account. This is required if you want to publish your app to the App Store.

Afterwards, you can sync your in-app purchases configurations from RevenueCat to App Store Connect directly through Replit.

<Steps>
  <Step title="Go to the Manage pane in Publishing">
    You'll see a button to sync RevenueCat to App Store Connect.

    <Frame>
      <img alt="Sync RevenueCat to App Store Connect button" />
    </Frame>

    <Tip>
      This section will only show up once you have published your app to TestFlight.
    </Tip>
  </Step>

  <Step title="Provide App Store Connect API key">
    You'll need to go to App Store Connect to provide this key.

    In [App Store Connect](https://appstoreconnect.apple.com/access/integrations/api), go to **Users and Access**, then select the **Integrations** tab. In the sidebar, select **App Store Connect API**.

    When creating a key, be sure to give the key "App Manager" permissions.

    Download the .p8 file now—you can only download it once. The filename starts with `AuthKey_` and ends in `.p8`.

    Copy the **Key ID** and **Issuer ID** shown on this page.

    <Frame>
      <img alt="App Store Connect Users and Access page with numbered steps highlighting the Integrations tab, App Store Connect API sidebar link, and the plus button to create a new API key" />
    </Frame>

    <Frame>
      <img alt="Generate API Key dialog in App Store Connect with the name set to RevenueCat and Access set to App Manager" />
    </Frame>

    <Frame>
      <img alt="App Store Connect API keys page with arrows pointing to the Issuer ID Copy link and the Key ID column" />
    </Frame>
  </Step>

  <Step title="Create an In-App Purchase API key">
    Repeat the previous step for an In-App Purchase API key.
    In the sidebar, select **In-App Purchase**. Then create an API key with **App Manager** permissions.
    Download the .p8 key (filename starts with `SubscriptionKey_` and ends in `.p8`). Copy the **Key ID** and **Issuer ID**.

    <Frame>
      <img alt="App Store Connect Users and Access page with In-App Purchase selected in the sidebar and an arrow pointing to the plus button to create a new key" />
    </Frame>
  </Step>

  <Step title="Sync Products">
    Confirm the list of products and sync to App Store Connect.

    <Frame>
      <img alt="Manage in-app purchases dialog showing a Monthly Subscription product with price, duration, and territory fields, and a Sync to App Store Connect button" />
    </Frame>
  </Step>
</Steps>

## Frequently asked questions

<AccordionGroup>
  <Accordion title="Do I need a bank account to use RevenueCat?">
    No. You only need an email and password to create a RevenueCat account. Bank
    account setup is handled separately through Apple or Google when you are
    ready to receive payouts from the App Store or Google Play.
  </Accordion>

  <Accordion title="Are test purchases charged?">
    No. During development, Replit previews use RevenueCat's test mode.
    Purchases are simulated and no real charges are made. Real charges only
    apply after your app is published to the App Store.
  </Accordion>

  <Accordion title="Can I use RevenueCat with a web app?">
    RevenueCat is designed for native mobile apps. To add subscriptions to a web
    app, use the [Stripe integration](/core-concepts/monetization/stripe-payments)
    instead.
  </Accordion>

  <Accordion title="What can I configure with RevenueCat?">
    You can set up monthly or yearly subscriptions, configure pricing, manage
    entitlements, and build paywalls. Ask Agent to make changes—it handles both
    the RevenueCat configuration and your app code.
  </Accordion>
</AccordionGroup>


# Stripe Payments Integration
Source: https://docs.replit.com/core-concepts/monetization/stripe-payments

Learn how to add payments and subscriptions to your app with Stripe using Agent.

<Note>
  The Stripe Connector is only supported for Replit Free and Core users. It is not available in Teams workspaces at this time.
</Note>

## What you can build

Use Agent to add Stripe to your app in one click—no setup required. Build a storefront, accept one‑time payments, or create subscriptions. Agent wires up the integration, data models, and test environment.

## How it works

Agent starts with a Stripe sandbox so you can safely test payments without moving real money. You can build and try flows immediately. When you are ready, switch to your live Stripe account to publish and accept real payments.

<Info>
  A Stripe sandbox is an isolated test environment where you can simulate
  payments, subscriptions, and events. Learn more in
  [Stripe's docs on sandboxes](https://docs.stripe.com/sandboxes).
</Info>

## Get started

* **Ask Agent to use Stripe**
  * Use a slash command on the home screen and select Stripe, or ask directly:
    <AiPrompt>Build a storefront and integrate Stripe for payments</AiPrompt>

<Note>
  Stripe integration requires an App with backend functionality. Select **App** from the homepage to get started.
</Note>

## Test payments in the sandbox

1. Open your app’s **Preview** in a new tab.
2. Make a test purchase from your storefront or payment page.
3. Use Stripe’s standard test card:

```text theme={null}
Card number: 4242 4242 4242 4242
Expiry: any future date
CVC: any 3 digits
Name, address: any mock values
```

<Tip>
  Sandbox purchases don’t process through real networks or move money. They’re
  safe for testing end to end.
</Tip>

## Manage products and pricing

You have two options:

1. From your app, select **Publish**, then choose to claim your Stripe sandbox.
   * If you don’t have a Stripe account yet, create one to claim the sandbox.
2. In the Stripe Dashboard, open **Products** to add or edit products and prices.
   Changes you make in the Stripe sandbox reflect in your Replit app automatically
   and sync to your app’s database.

### View synced Stripe data

* In your Workspace, open **Database**.
* Select **MyData**.
* Change the schema selector to **Stripe** to see payment objects and related
  records.

## Go live

To accept real payments:

<Warning>
  Before you publish:

  * Install the [Replit Integrated Payments](https://marketplace.stripe.com/apps/replit-integrated-payments) app in your live Stripe account
    (required for sandbox‑to‑live synchronization)
  * Complete Stripe’s KYB verification and add your live API keys

  Your sandbox integration is not production‑ready. It cannot accept real
  payments until you complete these steps.
</Warning>

1. In Stripe, switch from sandbox to your live account.
2. Complete Stripe’s KYB (Know Your Business) verification if prompted.
3. Copy your live Publishable and Secret keys from Stripe.
4. In Replit, open the **Publish** pane, then add your live keys.
5. Publish your app.

## Manage the integration

* Go to **Integrations > Stripe** to open the Stripe connector.
* From there, you can test the connection, view status, and manage settings.

## Frequently asked questions

### How do I update the prices of my products?

* Ask Agent: Describe the change and Agent updates your app and Stripe objects.
* Use the Stripe Dashboard: Open **Products** to edit prices and product details.
  * In sandbox, changes sync back to your app and database automatically.
  * For production, switch to your live account first, then update prices. Publish again if your app needs to pick up new configuration.

### How do I test transactions on Replit?

Open your app’s **Preview** in a new tab. Run the Stripe Checkout flow with the
standard test card (4242 4242 4242 4242), any future expiry, and any CVC. See
[Test payments in the sandbox](#test-payments-in-the-sandbox) above for details.

### What is a live Stripe account?

A live Stripe account is an activated and verified account that can process real
payments using your business details. See Stripe’s guidance on account creation
and activation: [Create and manage your Stripe account](https://docs.stripe.com/get-started/account).

### How do I find my live keys?

1. In the Stripe Dashboard, switch to your live account using the account picker (top left).
2. From the bottom left, select **Developers** > **API keys**.
3. Reveal your live keys or create new ones. For step‑by‑step instructions on creating new keys, see
   [Create a secret API key](https://docs.stripe.com/keys#create-api-secret-key).

## Update or remove the Stripe connection

If you're not ready to publish with your Stripe live keys, you have three options:

### Option A: Use placeholder API keys

You can use Stripe placeholder keys that you can replace later.

<Warning>
  Placeholder keys will not process real payments. The catalog and checkout will not function on your published URL until you add your live Stripe keys. Use this option only for testing purposes.
</Warning>

<Steps>
  <Step title="Go to the publishing tab">
    Open the **Publish** pane in your Workspace.
  </Step>

  <Step title="Enter placeholder keys">
    Use these values:

    **Publishable Key:**

    ```text theme={null}
    pk_live_abcdef
    ```

    **Secret Key:**

    ```text theme={null}
    sk_live_abcdef
    ```
  </Step>
</Steps>

### Option B: Remove the Stripe integration manually

You can completely remove the Stripe integration from your project.

<Steps>
  <Step title="Open your project">
    Navigate to the project with the Stripe integration you want to remove.
  </Step>

  <Step title="Open a new tab and type integrations">
    <Frame>
      <img alt="New tab search showing Integrations option to connect to Replit-native and external services" />
    </Frame>
  </Step>

  <Step title="Scroll down to Stripe and select Manage">
    <Frame>
      <img alt="Connectors panel showing Stripe integration with Manage button" />
    </Frame>
  </Step>

  <Step title="Select the name of your project">
    This opens the connection details.
  </Step>

  <Step title="Select Edit">
    <Frame>
      <img alt="Stripe sandbox account showing Publishable key, Secret key, and Edit button" />
    </Frame>
  </Step>

  <Step title="Select Delete">
    <Frame>
      <img alt="Stripe sandbox account with Delete and Update buttons" />
    </Frame>
  </Step>

  <Step title="Ask Agent to remove the Stripe code">
    Go to Agent chat and ask Agent to remove the Stripe connector code from your application. This will remove your entire Stripe integration.
  </Step>
</Steps>

### Option C: Roll back to a checkpoint before the Stripe integration

If you want to completely undo the Stripe integration and return to a previous state, you can roll back to an earlier checkpoint.

<Steps>
  <Step title="Open your project">
    Navigate to the project with the Stripe integration you want to remove.
  </Step>

  <Step title="Open a new tab and type integrations">
    <Frame>
      <img alt="New tab search showing Integrations option" />
    </Frame>
  </Step>

  <Step title="Scroll down to Stripe and select Manage">
    <Frame>
      <img alt="Connectors panel showing Stripe integration with Manage button" />
    </Frame>
  </Step>

  <Step title="Select the name of your project">
    This opens the connection details.
  </Step>

  <Step title="Select Edit">
    <Frame>
      <img alt="Stripe sandbox account with Edit button" />
    </Frame>
  </Step>

  <Step title="Select Delete">
    <Frame>
      <img alt="Stripe sandbox account with Delete button" />
    </Frame>
  </Step>

  <Step title="Find a checkpoint from before the Stripe integration">
    Go to Agent chat and look for a checkpoint that was created before the Stripe integration. Select the **clock icon** on the top left of the chat pane to view older chat history.

    <Frame>
      <img alt="Clock icon for viewing chat history and checkpoints" />
    </Frame>
  </Step>

  <Step title="Select Rollback here">
    Once you find a checkpoint that looks good, select **Rollback here** to restore your project to that state.

    <Frame>
      <img alt="Checkpoint with Rollback here button" />
    </Frame>
  </Step>
</Steps>

## Notes and limitations

* Sandbox activity does not affect real balances or customers.
* Some Stripe features can't be tested in sandboxes (for example, IC+ pricing
  and certain Connect flows). See
  [Stripe's sandbox limitations](https://docs.stripe.com/sandboxes).


# FAQ
Source: https://docs.replit.com/faq

Find answers to common questions about Replit, including account management, troubleshooting, billing support, and using key features.

<Tabs>
  <Tab title="General">
    <AccordionGroup>
      <Accordion title="Where can I get code-level help?">
        The best place to get help with code is to use [Replit AI](/core-concepts/how-replit-works/). In your Workspace, open a new tab and search for **AI**. Replit AI can help you set up new projects, answer questions about your code, and assist your thinking. For further assistance, you can also check our [Community Hub](https://replit.com/community) for additional resources.
      </Accordion>

      <Accordion title="I am having trouble using Replit. How can I get help?">
        Sign in to Replit and use the **?** on the top right corner of the page for help. For additional support, refer to the [support policy doc](/legal-and-security-info/support-policy).
      </Accordion>

      <Accordion title="Where can I get help with billing?">
        Before contacting the Support team, check if you can find a solution below under **Settings**. If that does not help, please sign in and use the **?** on the top right corner of the page for help.
      </Accordion>

      <Accordion title="I cannot access my Replit account – what should I do?">
        Please email `support@replit.com` and include your account username and sign-in ID.
      </Accordion>

      <Accordion title="When will I get a response from Replit?">
        Replit support is generally available Monday through Friday from 9 a.m. to 8 p.m. Eastern Standard Time (UTC-5).
      </Accordion>

      <Accordion title="How do I restore my folders in my Replit App?">
        Navigate to your profile identity located on the top right corner of your Replit App, select **CLUI**, and in the search box that appears, search by typing *restore*. In the search results, you'll see an option **restore-folder** to restore a specific folder from the trash.

        > Note: Deleted Replit Apps are permanently deleted and unrecoverable **30-days** after their original deletion date.
      </Accordion>

      <Accordion title="How do I restore a deleted Replit App?">
        Navigate to your profile identity located on the top right corner of your Replit App, select **CLUI**, and in the search box that appears, search by typing *restore*. In the search results, you'll see an option **restore-repl** to restore a specific Replit App from the trash.

        > Note: Deleted Replit Apps are permanently deleted and unrecoverable **30-days** after their original deletion date.
      </Accordion>

      <Accordion title="Why is my Replit App failing to load?">
        If your Replit App is failing to load, try these debugging steps:

        1. Test your [internet connection](https://www.speedtest.net/).
        2. Try a different browser.
        3. Check if your browser has enabled JavaScript.
        4. Use the command `kill 1` in the shell to kill and restart the virtual Linux machine backing your Replit App.

        If none of the above steps helped, check Replit's [Service Status](https://status.replit.com). If you see the status as **All systems are go!** and you still have issues loading your Replit App, please get in touch with [Replit Support](https://replit.com/support).
      </Accordion>

      <Accordion title="How can I upload a large file to my Replit App?">
        If the file is too large for a standard GUI upload, you can use `scp` (Secure Copy) to securely transfer files between local and remote systems over [SSH](/core-concepts/workspace/app-setup/ssh). To copy files from your local machine to the remote machine, use this syntax:`scp filename username@ip_address:/home/username`

        You can also copy entire directories using scp.
      </Accordion>

      <Accordion title="How do I check my usage credit balance?">
        You can view your current balance at [https://replit.com/\~/cli/account/usage-credits-balance](https://replit.com/~/cli/account/usage-credits-balance).
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Accounts">
    <AccordionGroup>
      <Accordion title="I'm having trouble logging in; what should I do?">
        1. Make sure you are using the correct email and password.
        2. To reset your password, navigate to the [forgot password page](https://replit.com/forgot). Be sure to check your spam folder for the reset email from `notifications@replit.com`.
        3. Try logging in through a different browser.

        If all the steps you've tried don't succeed, please [Contact Support](https://replit.com/support).
      </Accordion>

      <Accordion title="How do I change my email if I signed up with Google/GitHub/Facebook/Apple?">
        We require a password to change the email on your account. If you sign up with a third-party authentication provider such as Google or GitHub, you will first need to create a password.

        To create a password:

        1. Open the sidebar and log out.
        2. Return to the login page, select [forgot password](https://replit.com/forgot), and enter your email address.
        3. You will receive an email with a link to create a new password. If you don't see the email, check your spam folder and allow up to thirty minutes for the email to be sent.
        4. After logging in, open [Settings](https://replit.com/settings) to change your email address.
      </Accordion>

      <Accordion title="How do I change my username?">
        Replit users can change their username only **once**. Navigate to the [CLUI](https://replit.com/~/cli/account/change-username?run=1) and select **change-username**. If the option is unavailable to you, you've already changed it.
      </Accordion>

      <Accordion title="What is Explorer mode, and how can I activate it?">
        Explorers are Replit users who have opted to see and test new features that are still in development. To enable Explorer mode, open [Settings](https://replit.com/settings) and toggle the Explorer switch (e.g. under **Account** or **User**).
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>


# Connect your app to a SQL database
Source: https://docs.replit.com/getting-started/quickstarts/database-connection

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
<a href="https://neon.tech/docs/connect/choose-connection#next-choose-your-connection-type-direct-or-pooled">Choosing your driver and connection type</a>
in the Neon documentation.

<Tip>
  Use **Agent** to generate code that connects to your existing database.
</Tip>

## Prerequisites

Before getting started, make sure you have the following:

* Created a database in your Replit App
* Knowledge of coding and database connection management

## Create a connection script

<Note>
  This tutorial does not provide examples for all programming languages.
  Use PostgresSQL driver documentation for your project's programming language
  or ask Agent to translate the code examples.
</Note>

<Steps>
  <Step title="Create a directory for your connection script">
    Create a directory at the top level of your project called `scripts`.
  </Step>

  <Step title="Create a connection script">
    Create a file in this directory and paste one of the following connection examples.

    <Accordion title="Direct connection examples">
      <CodeGroup>
        ```js JavaScript theme={null}
        const { Client } = require('pg')

        async function queryDatabase() {
          const databaseUrl = process.env.DATABASE_URL
          const client = new Client({ connectionString: databaseUrl })

          try {
            await client.connect()
            const result = await client.query('SELECT * FROM users WHERE active = true')
            return result.rows
          } finally {
            await client.end()
          }
        }

        queryDatabase()
          .then(rows => console.log(rows))
          .catch(err => console.error(err))
        ```

        ```py Python theme={null}
        import os
        import psycopg2

        database_url = os.environ['DATABASE_URL']

        try:
            conn = psycopg2.connect(database_url)
            cur = conn.cursor()
            # example query that assumes users table is present
            cur.execute("SELECT * FROM users WHERE active = true")
            results = cur.fetchall()
        finally:
            cur.close()
            conn.close()
        ```
      </CodeGroup>
    </Accordion>

    <Accordion title="Pooled connection examples">
      <CodeGroup>
        ```js JavaScript theme={null}
        const { Pool } = require('pg')

        async function queryDatabasePool() {
          const databaseUrl = process.env.DATABASE_URL
          // changes the URL to use the Neon's connection pooler
          const poolUrl = databaseUrl.replace('.us-east-2', '-pooler.us-east-2')
          const pool = new Pool({
            connectionString: poolUrl,
            max: 10
          })

          try {
            const client = await pool.connect()
            try {
              const result = await client.query('SELECT * FROM users WHERE active = true')
              return result.rows
            } finally {
              client.release()
            }
          } finally {
            await pool.end()
          }
        }

        queryDatabasePool()
          .then(rows => console.log(rows))
          .catch(err => console.error(err))
        ```

        ```py Python theme={null}
        import os
        from psycopg2 import pool

        database_url = os.environ['DATABASE_URL']
        # changes the URL to use the Neon's connection pooler
        database_url = database_url.replace('.us-east-2', '-pooler.us-east-2')

        connection_pool = pool.SimpleConnectionPool(1, 10, database_url)

        try:
            conn = connection_pool.getconn()
            cur = conn.cursor()
            # example query that assumes users table is present
            cur.execute("SELECT * FROM users WHERE active = true")
            results = cur.fetchall()
        finally:
            cur.close()
            connection_pool.putconn(conn)
            connection_pool.closeall()
        ```
      </CodeGroup>
    </Accordion>
  </Step>
</Steps>

## Create a workflow to run your script

<Info>
  Your workflow may vary depending on the language you chose and the file path of the script you created.
</Info>

<Steps>
  <Step title="Add a new workflow">
    Navigate to the **Workflows** tool and select **New Workflow** to add a workflow.
    In the **Workflow** field, enter "test connection" as the name.
  </Step>

  <Step title="Create a command to run the script">
    Select **Execute Shell Command** under the **Tasks** heading. Add a command to run the script you created in the line below it.

    The following screenshot shows the "test connection" workflow configured to run a JavaScript connection example:

    <Frame>
      <img alt="screenshot of an example workflow" />
    </Frame>
  </Step>

  <Step title="Run the workflow">
    Select the arrow to the left of the workflow name to run it.
  </Step>

  <Step title="View the output">
    Navigate to the **Console** tool, where you should see a data from your `users` table, if any exists.
  </Step>
</Steps>

## Share a database across multiple Replit Apps

If you need multiple Replit Apps to share a single database, you can expose it as a REST API. This approach allows other applications or services to securely access and manipulate database data through standardized HTTP requests.

See the tutorial on [sharing a database across multiple apps](/tutorials/share-database-across-apps) for a complete guide on setting up a secure database API service using the Database API Example template.

## Next steps

To learn more about working with databases in Replit, see the following resources:

* [Database](/cloud-services/storage-and-databases/sql-database/): learn how to create and manage a SQL database using the Replit Database tool.
* [Workflows](/core-concepts/workspace/app-setup/workflows/): learn how to create and run custom workflows.


# Manage App Storage in JavaScript
Source: https://docs.replit.com/getting-started/quickstarts/object-storage-javascript

Learn how to use the JavaScript App Storage client library to manage files from your Replit App.

This guide demonstrates how to use the JavaScript client library to upload, list, download, and delete files in your App Storage bucket.

<Note>
  This client library, written in TypeScript, can be used for projects that use JavaScript runtimes such as Bun, Deno, and Node.js 14 and later.
</Note>

## Create a TypeScript Replit App

1. Select <img alt="plus sign" /> **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:
   <Frame>
     <img alt="TypeScript template selection screen" />
   </Frame>
4. Select <img alt="plus sign" /> **Create App**.

## Install the official client library

To install the client library, follow the one-click setup or package manager instructions below.

<Tabs>
  <Tab title="One-click setup">
    <Steps>
      <Step title="Access the App Storage tool">
        1. Navigate to the **App Storage** tab.
        2. Select the <img alt="angled brackets icon" /> **Commands** view in the **App Storage** tab.

        The installation screen should resemble the following screenshot:

        <Frame>
          <img alt="screenshot of App Storage dependencies installation" />
        </Frame>
      </Step>

      <Step title="Install the dependencies">
        1. Select "JavaScript" from the programming language dropdown on the top left.
        2. Select **Install @replit/object-storage package**.
        3. When completed, the button text should read **Package installed**.
      </Step>
    </Steps>
  </Tab>

  <Tab title="npm">
    Use this option if your Replit App uses Node Package Manager (`npm`) to manage its dependencies.

    Open the **Shell** tool in your workspace and enter the following command:

    ```sh theme={null}
    npm install @replit/object-storage
    ```
  </Tab>

  <Tab title="yarn">
    Use this option if your Replit App uses `yarn` to manage its dependencies.

    Open the **Shell** tool in your workspace and enter the following command:

    ```sh theme={null}
    yarn add @replit/object-storage
    ```
  </Tab>
</Tabs>

## Create a bucket

Before storing files, you must create a bucket. Follow the steps below to create a new bucket:

1. Navigate to the **App Storage** tool
2. Select **Create new bucket**
3. Enter a name for the bucket in the **Name** field
4. Select **Create bucket**

## Add and run the example code

<Steps>
  <Step title="Locate index.ts">
    Open the <img alt="files icon" /> **Files** tool from the left dock.

    Select `index.ts` to open it in a file editor.
  </Step>

  <Step title="Add the client code">
    Replace the contents of `index.ts` with the following code:

    ```javascript theme={null}
    import { Client } from "@replit/object-storage";
    const client = new Client();

    // Upload a text file that contains the text "Hello, World!"
    const { ok: uploadOk, error: uploadError } = await client.uploadFromText(
      "file.txt",
      "Hello World!",
    );
    if (!uploadOk) console.error("Upload failed:", uploadError);

    // List the files in the bucket
    const { ok: listOk, value: listValue, error: listError } = await client.list();
    if (!listOk) console.error("List failed:", listError);
    else console.log("Bucket contents:", listValue);

    // Retrieve and print the contents of the uploaded file
    const {
      ok: downloadOk,
      value,
      error: downloadError,
    } = await client.downloadAsText("file.txt");
    if (!downloadOk) console.error("Download failed:", downloadError);
    else console.log("file.txt contents:", value);
    ```
  </Step>

  <Step title="Run the app">
    Select **Run** to execute the example code.

    Navigate to the **Console** tab to view the output, which should resemble the output below:

    ```
    Bucket contents: [ { name: 'file.txt' } ]
    file.txt contents: Hello World!
    ```

    Confirm that the `file.txt` file appears in your bucket in the **Objects** view of the
    **App Storage** tool.

    <Tip>
      Reload the page to update the object list if `file.txt` fails to appear.
    </Tip>
  </Step>
</Steps>

## Delete the object

To remove the `file.txt` file from the bucket,

1. Replace the content of `index.ts` with the following code:

   ```javascript theme={null}
   import { Client } from "@replit/object-storage";
   const client = new Client();

   // Delete file.txt from the bucket
   const { ok: deleteOk, error: deleteError } = await client.delete("file.txt");
   if (!deleteOk) console.error("Delete failed:", deleteError);
   else console.log("Delete succeeded");
   ```
2. Select **Run** to execute the example code.
3. Navigate to the **Console** tab to view the output, which should resemble the output below:
   ```
   Delete succeeded
   ```
4. Verify that the `file.txt` object no longer appears in the bucket.

## Next steps

To learn more about Replit App Storage, see the following resources:

* [App Storage](/cloud-services/storage-and-databases/object-storage/): Learn more about the App Storage feature and workspace tool
* [App Storage JavaScript SDK](/reference/object-storage-javascript-sdk): Learn about the `Client` class and its methods


# Manage App Storage in Python
Source: https://docs.replit.com/getting-started/quickstarts/object-storage-python

Learn how to use the Python App Storage client library to manage files from your Replit App.

This guide demonstrates how to use the Python client library to upload, list, download, and delete files in your App Storage bucket.

## Create a Python Replit App

1. Select <img alt="plus sign" /> **Create App** from the home screen.
2. Navigate to the **Choose a Template** tab.
3. Type "Python" in the template search field and select it as shown below:
   <Frame>
     <img alt="Python template selection screen" />
   </Frame>
4. Select <img alt="plus sign" /> **Create App**.

## Install the official client library

To install the client library, follow the one-click setup or package manager instructions below.

<Tabs>
  <Tab title="One-click setup">
    <Steps>
      <Step title="Access the App Storage tool">
        1. Navigate to the **App Storage** tab.
        2. Select the <img alt="angled brackets icon" /> **Commands** view in the **App Storage** tab.

        The installation screen should resemble the following screenshot:

        <Frame>
          <img alt="screenshot of App Storage package installation" />
        </Frame>
      </Step>

      <Step title="Install the dependencies">
        1. Select "Python" from the programming language dropdown on the top left.
        2. Select **Install replit-object-storage package**.
        3. When completed, the button text should read **Package installed**.
      </Step>
    </Steps>
  </Tab>

  <Tab title="upm">
    Use this option if your Replit App uses the Universal Package Manager (`upm`) to manage its dependencies.

    Open the **Shell** tool in your workspace and enter the following command:

    ```sh theme={null}
    upm --lang python add replit-object-storage
    ```
  </Tab>

  <Tab title="pip">
    Use this option if your Replit App uses `pip` to manage its dependencies.

    Open the **Shell** tool in your workspace and enter the following command:

    ```sh theme={null}
    pip install replit-object-storage
    ```
  </Tab>
</Tabs>

## Create a bucket

Before storing objects, you must create a bucket. Follow the steps below to create a new bucket:

1. Navigate to the **App Storage** tool
2. Select **Create new bucket**
3. Enter a name for the bucket in the **Name** field
4. Select **Create bucket**

## Add and run the example code

<Steps>
  <Step title="Locate main.py">
    Open the <img alt="files icon" /> **Files** tool from the left dock.

    Select `main.py` to open it in a file editor.
  </Step>

  <Step title="Add the client code">
    Copy and paste the following code into `main.py`:

    ```python theme={null}
    # Instantiate a Client
    from replit.object_storage import Client
    client = Client()

    # Upload a text file that contains the text "Hello, World!"
    client.upload_from_text("file.txt", "Hello World!")

    # List the objects in the bucket
    objects = client.list()
    print("Bucket contents:", objects)

    # Retrieve and print the contents of the uploaded file
    contents = client.download_as_text("file.txt")
    print("file.txt contents: ", contents)
    ```
  </Step>

  <Step title="Run the app">
    Select **Run** to execute the example code.

    Navigate to the **Console** tab to view the output, which should resemble the output below:

    ```
    Bucket contents: [Object(name='file.txt')]
    file.txt contents:  Hello World!
    ```

    Confirm that the `file.txt` object appears in your bucket in the **Objects** view of the
    **Object Storage** tool.

    <Tip>
      Reload the page to update the object list if `file.txt` fails to appear.
    </Tip>
  </Step>
</Steps>

## Delete the object

To remove the `file.txt` file from the bucket,

1. Replace the content of `main.py` with the following code:

   ```python theme={null}
   from replit.object_storage import Client
   client = Client()

   # Delete file.txt from the bucket
   client.delete("file.txt")
   print("Delete succeeded")
   ```
2. Select **Run** to execute the example code.
3. Navigate to the **Console** tab to view the output, which should resemble the output below:
   ```
   Delete succeeded
   ```
4. Verify that the `file.txt` object no longer appears in the bucket.

## Next steps

To learn more about Replit App Storage, see the following resources:

* [App Storage](/cloud-services/storage-and-databases/object-storage/): Learn more about the App Storage feature and workspace tool
* [App Storage Python SDK](/reference/object-storage-python-sdk): Learn about the `Client` class and its methods


# Reporting Abuse on Replit
Source: https://docs.replit.com/legal-and-security-info/abuse-report

At Replit, we strive to maintain a safe and welcoming environment for all our users. If you encounter abusive, harmful, or inappropriate content, we encourage you to report it immediately. We have established multiple channels to address various types of concerns efficiently. Here's how you can help

## 1. Use the On-Site reporting feature

Use the on-site reporting feature for a quick and direct way to report content that violates our [Community Standards](https://blog.replit.com/community-standards). This method ensures that your report is immediately sent to our staff members for review. Here's how to use it:

* Navigate to the content you wish to report.
* Look for a report button or link. This is usually located near the content itself, such as under a post or within a user's profile options.
* Select the report button or link and describe the nature of the abusive content.
* Submit your report. Our team will review it as soon as possible and take appropriate action.

For more detailed instructions on using the reporting feature, please read [How to Make Reports](./trust-and-safety.md#how-to-make-reports).

## 2. Report Abuse via email

If you come across phishing attempts or suspect a piece of content is designed to deceive or harm others by pretending to be something it's not, please report it directly to our dedicated email address for abuse reports:

* **Email**: `abuse@replit.com`
* **Subject**: Briefly describe the issue (e.g., "Phishing Attempt Detected").
* **Body**: Include detailed information about the phishing attempt, such as URLs, user account names involved, and a description of the content. Attach any relevant screenshots if possible.

### Additional Resources

For cybersecurity organizations looking to report phishing detections via automation, we invite you to contact us for potential partnership opportunities. Please reach out to the abuse team at [abuse@replit.com](mailto:abuse@replit.com) to discuss further.

## 3. Issue DMCA Takedown Requests

For copyright holders or their authorized representatives, Replit respects your intellectual property rights and follows the Digital Millennium Copyright Act (DMCA) procedures to address your concerns. For detailed instructions on copyright claims on Replit, please read [Copyright claims and takedown requests](./copyright-claims-takedown-requests).

## 4. Report Security vulnerabilities

If you've discovered a security vulnerability within Replit, we highly value your contribution to our community's safety and encourage you to report it to us. Please read our [Security](./security) documentation for instructions on disclosing potential vulnerabilities.


# Account Inactivity
Source: https://docs.replit.com/legal-and-security-info/account-inactivity

Learn about Replit's account inactivity policy, when accounts may be terminated, and how paid subscriptions affect account status.

A free Replit account provides access to most Replit features and products. An account is kept active by user actions, including logging in and interacting with the Replit Workspace. An inactive Replit account is one that has not been used within a **1-year** period, meaning the user has not logged in to the account during that period. Replit reserves the right to terminate inactive Replit accounts and delete associated user data. Replit will delete Replit Apps associated with inactive free accounts.

Replit accounts under a paid subscription plan are not subject to termination due to account inactivity.


# Copyright claims and takedown requests
Source: https://docs.replit.com/legal-and-security-info/copyright-claims-takedown-requests

Learn how to submit DMCA takedown requests for copyrighted content or private information on Replit Apps and understand the required documentation process.

It is against our [Terms and Conditions](https://replit.com/site/terms) for users to publish any content that violates privacy rights, publicity rights, copyrights, or contract rights. We will immediately remove a replit app at your request in the case of either of the following:

* You hold a copyright to content contained within a public/private replit app, or a public/private classroom assignment.
* Personal/private information is contained within a public/private replit app, or a public/private classroom assignment.

To issue a takedown request, send an email to [dmca@replit.com](mailto:dmca@replit.com). Ensure that your request complies with all the requirements of the DMCA (see below). Our team will review your submission and take appropriate action.

Per the Digital Millennium Copyright Act (DMCA, see 17 U.S.C 512(c)(3) for details), we require the following information in writing for DMCA takedown requests:

* An electronic or physical signature of the person authorized to act on behalf of the owner of the copyright's interest.
* A description of the copyrighted work that you claim has been infringed, including the URL of the location where the copyrighted work exists, or a copy of the copyrighted work.
* Identification of the URL or other specific location on the service where the material that you claim is infringing is located.
* Your address, telephone number, and email address.
* A statement by you that you have a good faith belief that the disputed use is not authorized by the copyright owner, its agent, or the law.
* A statement by you, made under penalty of perjury, that the above information in your notice is accurate and that you are the copyright owner or authorized to act on the copyright owner's behalf.


# Deleting your data
Source: https://docs.replit.com/legal-and-security-info/deleting-your-data

Learn how to permanently delete your account and personal information from Replit using either the web browser or mobile app.

To delete your personal information from Replit, please follow these instructions.  If you are using a desktop web browser:

1. Log in to Replit and open **Settings** (click your profile icon, then **Settings**, or go to [https://replit.com/settings](https://replit.com/settings)).
2. Under **Account**, open **Billing** and scroll to "Manage subscription" if needed.
3. In the "Delete Account" section, click "Request account deletion" then "Yes, Delete my Account" to confirm.

You can also perform the same process using our mobile app:

1. Open **Settings** (e.g. tap your profile or the Settings entry in the app).
2. Go to the account/billing section and find "Manage Account" or "Delete Account".
3. Tap "Delete Account" and confirm when prompted.

Deleting your account removes all of your content from Replit (including Replit Apps, templates, posts), and results in your personal information being purged from our systems. You will not be able to recover this data if you change your mind.

For further information about your rights over your personal data, please view our [Privacy Policy](https://replit.com/site/privacy).


# Licensing information
Source: https://docs.replit.com/legal-and-security-info/licensing-info

Learn how public and private Replit Apps are licensed, including MIT license details and how to specify custom licenses for your projects.

Here, you will find information about how your Replit Apps are licensed.

## Public Replit Apps

Content you create in a public Replit App in a team or personal context is automatically subject to an MIT license. The full text of the MIT license reads as follows:

> Copyright

> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

## Specific Replit App Licenses

<Note>
  Adding a license file to a public Replit App does not prevent the Replit App from being made available under the MIT license. To make a license file effective, the Replit Apps must be made private as described below.
</Note>

For specific Replit Apps, Replit may offer features to allow you to change the default license.

## Private Replit Apps

Content in a private Replit Apps in a Team or personal context is licensed to Replit on a platform basis under the [Terms of Service](https://replit.com/site/terms).

If you would like to attach your own license to the code, include the license as a (code) comment or a readme.txt file, as part of the Replit App.


# Security
Source: https://docs.replit.com/legal-and-security-info/security

Your code, applications, and data are important. We're committed to protecting them—Replit's security is our security, too.

## Reporting a Vulnerability

Please use the following dedicated channel for all security-related concerns:

* **Email**: `security@replit.com`
* **Subject**: "Security Vulnerability Report".
* **Body**: Describe the nature of the vulnerability in detail, including the steps to reproduce it if possible. Please include any relevant information that would help us understand the severity and scope of the issue, such as the potential impact on user data or system integrity.

## Responsible Disclosure

Pursuant to our [terms of service](https://replit.com/site/terms), you should not take any actions
that interfere or disrupt the service. If you are in doubt, and think there might be a risk of service
disruption, then don't try to verify the bug yourself – email us and we'll work with you to verify it.

Email [security@replit.com](mailto:security@replit.com) with a description of the issue and we'll respond as soon as possible.


# Strike system FAQ
Source: https://docs.replit.com/legal-and-security-info/strike-system-faq

Learn about warnings, banned community access, and site bans in Replit.

### What is a Warning in Replit?

A staff member will send you a warning when you violate the [Community Standards](https://blog.replit.com/community-standards), [Terms of Service](https://replit.com/site/terms), or [Privacy Policy](https://replit.com/site/privacy). Other disciplinary actions may include unpublishing of your Replit App(s).

### Can I republish my Replit App after it's been unpublished?

Yes. Revise your Replit App to abide by the [Community Standards](https://blog.replit.com/community-standards), then republish.

### What happens when I'm banned from the Community?

When banned from the community, you cannot create posts or share Replit Apps. However, you can still use the online IDE for features unrelated to community activity.

### What happens when I'm banned from Replit?

A ban from Replit means you cannot log into your account and all Replit App will have been deleted. This often occurs for violating the [Terms of Service](https://replit.com/site/terms).

### How can I appeal a ban?

Send an email to [appeals@replit.com](mailto:appeals@replit.com) with your Replit username, a description of the action that you are appealing, and your reasons for the appeal.


# Support Policy
Source: https://docs.replit.com/legal-and-security-info/support-policy

Replit offers different support options for all Replit builders.

## Community support

All Replit builders can access the [Community Forum](https://replit.discourse.group/) for community support and resources.

## Replit Core and Pro support

Replit Core and Pro members can submit private support requests to Replit's support team. This support covers a wide range of topics including billing, account management, product questions, and technical assistance.

Pro subscribers receive **priority support** with responses in under 24 hours on business days.

### Scope

While Replit Agent is a powerful tool designed to help you build quickly, it may occasionally produce code that doesn't fully match your intent or contains errors. Reviewing, modifying, and refining application code—either through manual changes or additional Agent prompts—is ultimately the user's responsibility.

Replit Support is here to ensure the platform itself is functioning correctly and to assist with billing, account, and platform-related issues. However, Replit Support is unable to provide hands-on debugging or fixes for individual application-level code.

However, [Replit Learn](https://blog.replit.com/replit-learn) is a great resource for learning how to use Replit and build your first app!

### Contact Us

Replit Core and Pro support is available via the in-app [`? Get Help` button](https://replit.com/t/replit?supportform=true).


# Trust and Safety at Replit
Source: https://docs.replit.com/legal-and-security-info/trust-and-safety

Replit strives to create a fun and creative community that is also trusted and safe. To achieve this goal, Replit has implemented rules and policies that promote positive behavior and protect builders. In this document, you will find a summary of key rules, tips on how to report any concerns, and information on where to learn more.

## Rules for Content and Behavior

To maintain a safe and trusted environment, Replit has established a set of rules that are detailed in the [Terms of Service](https://replit.com/site/terms). The same rules apply whether you are publishing a Replit App or engaging with other builders in the Community.

* Keep it appropriate. All content must be suitable for a workplace environment and free of any offensive language or nudity. Violent and graphic content, as well as content that depicts or encourages self-harm, is prohibited.
* No bullying. Replit has a zero-tolerance policy for bullying, trolling, doxxing, hate speech, racism, sexism, or any other form of prejudice. Violation of this rule may result in an immediate ban.
* No illegal or regulated content. Replit should not be used for any illegal activities, such as dealing in drugs, sex, gambling, weapons, or pirated software.
* Misuse of the service is not allowed. Do not share content that could harm other builders, such as spam, malware, or phishing. Replit Apps that consume an excessive amount of resources, such as spam bots and cryptocurrency miners, are also not allowed.

## How Replit enforces rules

The Replit team works to keep the service safe by actioning reports concerning content that violates the [Terms](https://replit.com/site/terms), [Community Standards](https://blog.replit.com/community-standards), or [Privacy Policy](https://replit.com/site/privacy).

If your content violates the rules, Replit takes appropriate action against it. In circumstances of serious violations, you may be banned from using Replit. For more information, check out the [Strike System FAQ](/legal-and-security-info/strike-system-faq).

## Protecting underage builders

Replit upholds the highest global privacy standards for its youngest members. To ensure that their personal information remains safe, Replit does not collect it in the first place.

To protect children from inappropriate images, Replit automatically scans all images uploaded to the platform. Machine learning technology quickly detects and flags most images that violate the rules for review by a staff member.

Replit also takes swift action to prevent predators from using the platform. Any account that shares child abuse material (CSAM) or seeks sexual contact with minors will be terminated and may be reported to the authorities.

## How to Make Reports

### Reporting a Replit App

Report a Replit App to a staff member by visiting its cover page and selecting the kebab menu. Select the "Report" option and provide a reason for the report. A staff member will investigate and take appropriate action as soon as possible

<Frame>
  <img alt="Reporting a Replit App" />
</Frame>

### Reporting a User

Report a user by accessing the "Report" option on their profile page. Provide a reason for the report, and a staff member will review and address as soon as possible

<Frame>
  <img alt="Reporting a User" />
</Frame>

### Reporting a Theme

Report a theme by accessing the "Report" option on the theme page. Themes should not be reported because of their appearance, but only because they contain content such as an offensive name that violates the rules.

<Frame>
  <img alt="Reporting a Theme" />
</Frame>

## Additional Information

This page contains an easy-to-read summary of information that is given in more detail in other policy documents. If you would like more information, consult these resources:

* [Terms of service](https://replit.com/site/terms)
* [Privacy Policy](https://replit.com/site/privacy)
* [Copyright claims and takedown requests](./copyright-claims-takedown-requests)


# Usage Quota & Limits
Source: https://docs.replit.com/legal-and-security-info/usage

Learn about Replit's resource limits, including CPU, RAM, storage, and network restrictions that apply to Replit Apps based on your plan.

Replit has certain soft and hard limits in using its service. Hard limits are automatically enforced by the Service. Soft limits are consumable resources that you agree not to exceed. Details of these limits are shown at [https://replit.com/site/pricing](https://replit.com/site/pricing) and may be updated there from time to time Long periods of inactivity may result in an account or your use of the Service being deemed inactive.

* CPU per Replit App: determined by plan (hard)

* RAM per Replit App: determined by plan (hard)

* Concurrent Replit Apps: 20 (hard)

* Storage per Replit App: determined by plan and storage used by other Replit Apps (hard)

* Storage per account: determined by plan (hard)

* Network bandwidth: determined by plan (soft)

In addition, regardless of your plan, some limits and restrictions are imposed on your Replit App’s content and its network activity in order to enforce our Terms of Service. If these limits are exceeded, your Replit App may become temporarily unavailable, or particular operations may fail with an error. These include:

* A limit on the number of concurrent outgoing network connections in a given period.

* Limits on the frequency and size of requests to Replit’s internal GraphQL API.

* Restrictions on the use of code that appears to violate our Terms of Service, such as cryptocurrency mining.


# Replit web accessibility statement
Source: https://docs.replit.com/legal-and-security-info/web-accessibility

Learn about Replit's commitment to web accessibility, WCAG 2.1 compliance goals, current accessibility status, and how to provide feedback about accessibility features.

*See the accessibility features [here](/core-concepts/workspace/editor-and-tools/user-settings).*

Replit believes that computing is for everyone. As such, Replit is committed to making the service fully accessible to all, including people with disabilities. This statement explains the accessibility goals, the progress towards meeting those goals, and how you can provide feedback about accessibility on Replit.

# Conformance goals

The aim is to achieve full compliance with the W3C WAI's Web Content Accessibility Guidelines (WCAG) 2.1, which defines requirements for designers and developers to improve accessibility for people with disabilities. Replit is currently partially conformant with WCAG 2.1 level AA. Partially conformant means that some parts of the website content do not yet fully conform to the accessibility standard.

# Current status

Replit has an ongoing internal project to improve the site's accessibility, responding to internal evaluation, builder interviews and reports, and the results of an independent evaluation conducted by the Cornell University IT Department in 2021.

The majority of content on the website is available in HTML format conformant with current W3C standards for HTML and CSS. Non-text content presented to you, such as images and form elements, has a text alternative that can be recognized and spoken aloud by screen readers.

Despite ongoing efforts to ensure accessibility of Replit, you may encounter some limitations. In particular, the inability to fully manipulate the Workspace using your keyboard is a known issue that Replit is working to address.

# Giving feedback

If you have any trouble accessing the Replit website, provide feedback by emailing [contact@replit.com](mailto:contact@replit.com). Include the URL (web address) of the material you tried to access, the problem you experienced, and your contact information.


# Replit in ChatGPT
Source: https://docs.replit.com/platforms/chatgpt

Build real apps by talking to ChatGPT. Create, update, and inspect Replit Apps from a single conversation.

The Replit integration in ChatGPT lets you create, update, and inspect Replit Apps directly from your conversations—no setup required. Build real apps by talking to ChatGPT and let Agent handle the rest.

## What is Replit in ChatGPT

Replit in ChatGPT connects your ChatGPT conversations to Replit's powerful development platform. You can describe what you want to build, and Agent will create a fully functional Replit App for you. Once created, you can ask ChatGPT to modify, update, or analyze your app—all through natural conversation.

## Getting started

Follow these steps to connect Replit to ChatGPT and create your first app.

### Connect Replit to ChatGPT

You can connect Replit to ChatGPT in two ways:

<Accordion title="Connect from Settings">
  1. Click your profile icon in ChatGPT
  2. Go to **Settings** → **Apps & Connectors**
  3. Find **Replit** and click **Connect**
  4. Complete the OAuth authorization with your Replit account
</Accordion>

<Accordion title="Connect from a conversation">
  1. Start a new conversation in ChatGPT
  2. Invoke Replit using one of the methods below
  3. ChatGPT will guide you through the OAuth flow if you're not connected
</Accordion>

### Invoke Replit in ChatGPT

Once connected, you can invoke Replit in three ways:

| Method         | How to use                                            |
| -------------- | ----------------------------------------------------- |
| Direct mention | Type `Replit, <request>` at the start of your message |
| Slash command  | Type `/Replit` in the composer                        |
| Composer menu  | Click the **+** button → **More** → **Replit**        |

### Create your first app

After connecting, create your first Replit App:

1. Start a new conversation in ChatGPT
2. Invoke Replit and describe what you want to build (e.g., "Replit, create a todo app with dark mode")
3. Agent will generate your app and deploy it automatically
4. Once complete, you'll receive a link to view your app

<Note>
  Each conversation can work with one Replit App. If you create a new app in the same conversation, it will modify the existing app. To create multiple apps, start separate conversations.
</Note>

## Features

* **[Replit AI](/core-concepts/how-replit-works)**: Agent generates and deploys apps based on your natural language requests
* **[Replit Workspace](/core-concepts/workspace)**: Full-featured development environment accessible from ChatGPT
* **[Publishing](/category/replit-deployments)**: Apps are automatically deployed and ready to share

<Accordion title="What you can do">
  **Create:** Build new Replit Apps by describing what you want. Agent generates the application and deploys it automatically.

  **Update:** Modify the app in your current conversation. Ask ChatGPT to add features, fix bugs, or make changes, and Agent will apply them.

  **Inspect:** Analyze your app without making changes. Get information about code structure, file paths, or behavior.
</Accordion>

<Accordion title="Supported file formats">
  You can include various file types in your prompts:

  | Format                  | Supported                    |
  | ----------------------- | ---------------------------- |
  | PDF                     | Yes                          |
  | CSV                     | Yes                          |
  | Common document formats | Yes                          |
  | Images (raw files)      | No (use public URLs instead) |
  | Videos (raw files)      | No (use public URLs instead) |

  <Note>
    To include images or videos in your app, provide public URLs in your prompt. You can also add media files directly in Replit after the app is created.
  </Note>
</Accordion>

<Accordion title="Build times">
  Agent typically builds apps in:

  | App complexity                                     | Typical build time |
  | -------------------------------------------------- | ------------------ |
  | Simple (calculators, small landing pages)          | 2–3 minutes        |
  | Complex (games, rich animations, dense dashboards) | 3–4 minutes        |
</Accordion>

## Availability and plans

<Accordion title="ChatGPT plans">
  The Replit integration works with all ChatGPT plan types:

  | Plan           | Supported | Notes                                                            |
  | -------------- | --------- | ---------------------------------------------------------------- |
  | Free           | Yes       |                                                                  |
  | Plus           | Yes       |                                                                  |
  | Pro            | Yes       |                                                                  |
  | Business       | Yes       | Requires admin enablement in **Workspace settings → Connectors** |
  | Enterprise/Edu | Yes       | Requires admin enablement in **Workspace settings → Connectors** |

  **Regional availability:** All regions outside the EU.
</Accordion>

<Accordion title="Replit plans">
  All Replit plan types support the ChatGPT integration:

  | Plan           | Supported | Notes                                                |
  | -------------- | --------- | ---------------------------------------------------- |
  | Starter (Free) | Yes       | Public apps only                                     |
  | Core           | Yes       | Private apps, extended builds, Publishing, Database  |
  | Teams          | Yes       | Private apps, extended builds, publishing, databases |
  | Enterprise     | Yes       | Full feature access                                  |
</Accordion>

## Billing and credits

Work done by Replit in ChatGPT is billed as Replit Agent usage in your Replit account.

<Accordion title="How billing works">
  * **Core** and **Pro** plans include monthly credits that cover Agent, publishing, and databases up to your allowance
  * You can buy **credit packs** that expire after six months and do not auto‑renew — ideal for launch spikes or experiments
  * Use **usage limits** and **budgets** in Replit's billing settings to cap spend

  Learn more in the [AI billing documentation](/billing/ai-billing).
</Accordion>

## Current limitations

Currently, the Replit app in ChatGPT:

* Can only work on the app created in that specific conversation
* Cannot open or modify:
  * Apps created in other ChatGPT threads
  * Apps you built directly in Replit

Feature parity with the full Replit experience (databases, secrets management, more advanced workspace controls) is coming later.

## Troubleshooting

<Accordion title="Replit not appearing in Browse apps">
  If you don't see Replit in **Browse apps**, check:

  * Whether apps are available in your region
  * Whether your workspace admin has enabled the Replit app (Business/Enterprise/Edu)
</Accordion>

<Accordion title="Build failures">
  If builds fail, open the app in Replit:

  * Check usage and billing
  * Use checkpoints and rollbacks to revert
  * Ask Agent for help directly in the Workspace
</Accordion>

## Next steps

* **[Build in ChatGPT quickstart](/getting-started/quickstarts/build-in-chatgpt)**: Create your first app in 5 minutes
* **[Replit AI](/core-concepts/how-replit-works)**: Learn more about Agent and AI-powered tools
* **[Replit Workspace](/core-concepts/workspace)**: Explore the full development environment
* **[Publishing](/category/replit-deployments)**: Share and deploy your apps
* **[Support](https://replit.com/~?supportform=true)**: Contact us for help with Replit in ChatGPT


# Replit Mobile App
Source: https://docs.replit.com/platforms/mobile-app

The Replit Mobile App for iOS and Android lets you create apps using all of Replit's tools on the go.

The <a href="https://replit.com/mobile">Replit mobile app</a> is a full-featured development environment optimized for phone and tablet. Build and publish apps wherever you are using all of Replit's powerful tools, including Agent.

## What is the Replit Mobile App

The Replit Mobile App brings the complete Replit experience to your iOS or Android device. You can create apps with Agent, access your workspace, and publish your projects—all from your mobile device. The app is designed for on-the-go development with an interface optimized for touch and mobile screens.

## Getting started

Follow these steps to learn to install the app and create a Replit App.

### Install the app

To install the app on your compatible mobile device, follow these steps:

1. Navigate to the <a href="https://replit.com/mobile">mobile app download page</a> and install the app for your mobile device OS.
2. Open the app and sign up for a new account or log in with an existing one.
   If you register for a new account, you must verify your email address to complete the process.
3. Create a Replit App from the home screen.

### Create your first app

Start building from the Create tab—it's the first thing you'll see when you open the app. Every app you create includes Agent.

<Accordion title="Build with Agent">
  1. Open the **Create** tab
  2. Describe what you want to build
  3. Tap **Start chat**

  Agent starts building your app right away.
</Accordion>

<Accordion title="Start from a template or GitHub">
  1. Open the **Create** tab
  2. Tap ⋮ in the top right
  3. Choose **Remix a Template** or **Import from GitHub**
  4. Pick what you need
</Accordion>

## Features

* **[Replit AI](/core-concepts/how-replit-works)**: Agent and AI-powered tools for building apps
* **[Replit Workspace](/core-concepts/workspace)**: Full-featured development environment
* **[Publishing](/core-concepts/workspace/app-setup/visibility)**: Share Replit Apps with zero setup

<Accordion title="Live Activities">
  Follow along with Agent's progress on the go.

  **Enable Live Activities:**
  When Agent starts, you'll see a notification. Tap **Allow** on your lock screen. Now you can check progress without opening Replit.

  **Supported Devices:**

  * iPhone running iOS 18 or later
  * iPad running iOS 18 or later
  * Mac running macOS Tahoe or later
  * Paired Apple Watch
</Accordion>

<Accordion title="Notifications">
  Get updates that matter, wherever you are.

  **Enable Notifications:**
  Go to **Settings** and open **Notifications** (e.g. under **User**). Ensure Notifications is toggled on and tap allow if prompted.

  **When we'll notify:**

  * Agent needs your help
  * Agent is done working
  * Important billing updates
</Accordion>

<Accordion title="Tablet Keyboard Mode">
  Create on your tablet with a keyboard.

  **How it works:**
  Connect a keyboard to your tablet for a creation experience optimized for larger screens. When you first open the workspace with a keyboard connected, we'll ask if you want to enable it.

  **Turn it on or off:**
  Go to Account > Keyboard Settings anytime to toggle.

  **What you'll see:**
  A workspace layout designed for keyboard and larger screens.
</Accordion>

## Upgrade and billing

<Accordion title="Get Core or Pro">
  **Core:**

  1. Go to **Account**
  2. Tap **Upgrade**
  3. Choose your plan
  4. Tap **Continue with Core**

  **Pro:** Pro isn't available for purchase in the mobile app. It must be purchased on Replit.com.
</Accordion>

<Accordion title="Add more Agent usage">
  Core subscriptions purchased from Apple and Google include \$20 in credits refreshed every month.

  Add a payment method for [usage-based billing](/billing/about-usage-based-billing) to use Agent beyond this limit.

  **On the web:**

  1. Go to replit.com
  2. Open **Settings** → **Account** → **Billing**
  3. Add your payment info

  **In the app (iOS in US only):**

  1. Open **Settings** → **Billing** (or **Account** → **Billing**)
  2. Add payment method
</Accordion>

## Next steps

* **[Replit AI](/core-concepts/how-replit-works)**: Learn more about Agent and AI-powered tools
* **[Replit Workspace](/core-concepts/workspace)**: Explore the full development environment
* **[Publishing](/core-concepts/workspace/app-setup/visibility)**: Share Replit Apps with zero setup


# Resolving "This app is blocked" for Google Connectors
Source: https://docs.replit.com/replitai/debugging-google-connectors

Fix the 'This app is blocked' error when connecting Google Drive, Docs, Sheets, Calendar, or Gmail connectors in Replit.

## Overview

If you see the error message **"This app is blocked"** when attempting to connect a Google Workspace service (Drive, Docs, Sheets, Calendar, or Gmail) through [Connectors](/replitai/integrations#connectors), it is typically caused by a misconfiguration of Google's OAuth settings within your organization's Google Workspace.

This guide walks you through resolving the issue so you can connect Google services to your Replit apps.

<Frame>
  <img alt="Google error dialog showing 'This app is blocked' message preventing OAuth access" />
</Frame>

<Warning>
  These steps apply only to **Google Workspace** accounts (organization-managed accounts). If you are using a personal Google account linked to a `@gmail.com` address and the Replit connector is blocked, you cannot change the OAuth policy yourself — contact your Google Workspace admin or use a different account.
</Warning>

## Troubleshooting steps

### Step 1: Try Incognito mode

Browser extensions or cached data can interfere with the OAuth flow. Using Incognito mode bypasses these issues.

<Steps>
  <Step title="Open Incognito">
    Open a new **Incognito** (Chrome) or **Private** (Firefox/Safari) window in your browser.
  </Step>

  <Step title="Sign in to Replit">
    Log in to your Replit account at [replit.com](https://replit.com).
  </Step>

  <Step title="Retry the connection">
    Open the Workspace for your app, navigate to **Connectors** in the sidebar, and try connecting the Google service again.
  </Step>
</Steps>

If the error persists, continue to Step 2.

### Step 2: Verify OAuth settings in Google Workspace

<Note>
  You need access to your organization's **Google Admin console** for this step. Contact your IT team if you do not have admin access.
</Note>

<Steps>
  <Step title="Open the Google Admin console">
    Log in to your organization's [Google Admin console](https://admin.google.com).
  </Step>

  <Step title="Confirm the user exists">
    Navigate to the **Users** section and confirm that the account attempting the Replit connection is listed.

    <Frame>
      <img alt="Google Admin console Users section showing user accounts" />
    </Frame>
  </Step>

  <Step title="Navigate to API Controls">
    Go to **Security > Access and data control > API controls**.

    <Frame>
      <img alt="Google Admin console showing Security > API Controls navigation path" />
    </Frame>
  </Step>

  <Step title="Open third-party app access">
    Select **Manage third-party app access**.

    <Frame>
      <img alt="Google Admin console API controls page with Manage third-party app access button highlighted" />
    </Frame>
  </Step>

  <Step title="Check OAuth access">
    Verify that OAuth access is enabled for users in the workspace. If it is restricted, grant the required access so Replit can complete the OAuth flow.
  </Step>
</Steps>

If the connection still fails, continue to Step 3.

### Step 3: Add Replit as a trusted OAuth client

If your organization restricts third-party app access by default, you need to explicitly trust Replit.

<Steps>
  <Step title="Open the Google Admin console">
    Log in to your organization's [Google Admin console](https://admin.google.com).
  </Step>

  <Step title="Navigate to API Controls">
    Go to **Security > Access and data control > API controls**.
  </Step>

  <Step title="Open third-party app access">
    Under **App access control**, select **Manage third-party app access**.
  </Step>

  <Step title="Add a new app">
    Select the **Add app** button, then choose **OAuth App Name or Client ID** from the dropdown.
  </Step>

  <Step title="Search for Replit">
    Enter the Replit Client ID:

    ```
    1012035106355-2dhot2e6o0malvog2ofss7akj2nsp8nq.apps.googleusercontent.com
    ```

    Select **Search**. When the Replit app appears in the results, select it.
  </Step>

  <Step title="Set the access level">
    Set the access level to **Trusted**.
  </Step>

  <Step title="Save">
    Select **Save**.
  </Step>
</Steps>

<Tip>
  Changes to Google Workspace policies can take a few minutes to propagate. Wait 5-10 minutes after saving, then try connecting your Google service in Replit again.
</Tip>

## Still blocked?

If you have completed all three steps and the error persists:

* **Double-check the organizational unit (OU)**: Google Workspace policies can be scoped to specific OUs. Make sure the OAuth and trusted-app settings apply to the OU that contains the user trying to connect.
* **Review Google Workspace alerts**: In the Admin console, check **Reporting > Audit and investigation > OAuth log events** for any denied requests related to Replit.
* **Contact Replit support**: If the issue is not on the Google Workspace side, reach out to [Replit support](https://replit.com/support) for help.

## Related documentation

* [Connectors overview](/replitai/integrations) -- Learn about all integration types, including Google Workspace connectors
* [Managing your connectors](/replitai/managing-connectors) -- Admin setup for workspace and organization connectors
* [Google Workspace Admin Help: Control third-party app access](https://support.google.com/a/answer/7281227) -- Google's official guide to managing OAuth app access

***

<Note>
  Special thanks to the [Element451](https://element451.com) team for their [original guide on resolving this error](https://help.element451.com/en/articles/9999308-resolving-this-app-is-blocked-error-for-google-drive-connectors), which served as the basis for this article.
</Note>


# Managing Your Connectors
Source: https://docs.replit.com/replitai/managing-connectors

Set up and manage connectors on Core and Pro (collaborative workspaces) or Enterprise. Centralized admin controls, scoped access, and audit tracking.

You can manage connectors so your team uses integrations in a consistent, secure way. What’s available depends on your plan:

* **Core and Pro**: Connector management is available in **collaborative workspaces**. The account admin sets up and manages connections for that workspace; builders can use them in apps within that workspace.
* **Enterprise**: Organization-wide connector management with advanced controls—custom OAuth clients, API key access controls, and bring-your-own keys.

## Key capabilities

* **Centralized management**: Admin sets up a service once; builders use it across apps in that workspace.
* **Visibility and audit**: See which apps and members use which services.
* **Per-app consent and revocation**: Revoke or rotate access without code changes.

**Enterprise only:**

* **Role-based access controls**: Scoped, least-privilege permissions and access controls on API keys.
* **Bring your own OAuth**: Use organization-owned OAuth clients with custom scopes.
* **Bring your own OpenAI key**: Use your own OpenAI API key instead of Replit’s default.

## How it works

<Steps>
  <Step title="Admin sets up a service">
    Admin sets up a service once using the credentials.
  </Step>

  <Step title="Admin approves access">
    Admin approves which groups can use the connector (Enterprise) or makes it available to the collaborative workspace (Core/Pro).
  </Step>

  <Step title="Builders use the connector">
    Members build with that service by asking Agent in apps within the workspace or org.
  </Step>

  <Step title="Admin monitors usage">
    Admins can monitor which members and apps use which services.
  </Step>
</Steps>

## Security and governance

* Credentials and tokens are managed by the platform, not stored in individual apps.
* Centralized revocation and rotation without code changes.
* Enterprise: scoped access with least-privilege permissions and optional custom OAuth configuration.

## Setup and management

### Enable new connectors

<Steps>
  <Step title="Navigate to Integrations">
    From your collaborative workspace (Core/Pro) or organization home (Enterprise), open the **Integrations** page.
  </Step>

  <Step title="Enable new connector">
    Select **Enable new connector** in the top right.
  </Step>

  <Step title="Select the service">
    Select the service you want to enable (e.g. Notion, GitHub, Google, Outlook, Dropbox, Salesforce).
  </Step>

  <Step title="Configure the connector">
    Enable the connector using the default configuration. On **Enterprise** only, you can create a custom OAuth connector (e.g. Drive scopes `.../auth/drive.file`, `.../auth/drive.install`).
  </Step>

  <Step title="Submit">
    Select **Submit**.
  </Step>
</Steps>

### Configure access (Enterprise)

1. After enabling a connector, select **Manage**.
2. Grant access to specific groups as needed.

### Modify connectors

* After enabling a connector, select **Manage**.
* Deleting a connector removes it for all builders in that workspace (Core/Pro) or organization (Enterprise).
* On Enterprise, you can edit scopes for custom OAuth connectors.

## Plan comparison

| Feature                         | Core (collaborative workspace) | Pro (collaborative workspace) | Enterprise   |
| ------------------------------- | ------------------------------ | ----------------------------- | ------------ |
| Enable and manage connectors    | ✓                              | ✓                             | ✓            |
| Scope                           | Workspace                      | Workspace                     | Organization |
| Create custom OAuth clients     | —                              | —                             | ✓            |
| Set access controls on API keys | —                              | —                             | ✓            |
| Bring your own OpenAI key       | —                              | —                             | ✓            |

### Bring your own OpenAI key (Enterprise)

Enterprise customers can use Connectors to bring their own OpenAI API key instead of Replit's default AI infrastructure. This lets you use existing OpenAI agreements and manage AI usage through your own account.

## What's next

Connector management is expanding to support:

* Webhook events for event-driven workflows
* Deeper admin experience with permissions, assignments, and analytics

## Related documentation

* [Connectors overview](/replitai/integrations) — Learn about all integration types
* [Data Connectors](/replitai/warehouse-connectors) — Connect to BigQuery, Databricks, Snowflake, Segment, Amplitude, and Hex


# Data Connectors
Source: https://docs.replit.com/replitai/warehouse-connectors

Connect Replit Agent to data warehouses (BigQuery, Databricks, Snowflake) and analytics platforms (Segment, Amplitude, Hex) to build data-driven applications.

Data Connectors let Replit Agent securely access your organization's data warehouses and analytics platforms. Build powerful, data-driven applications using natural language, with centralized admin control and role-based access.

## Supported data sources

### Data warehouses (Enterprise)

Warehouse connectors are available on Enterprise plans with centralized admin control and role-based access.

* **BigQuery**
* **Databricks**
* **Snowflake**

These connectors allow Agent to write and execute SQL queries against your data. You can build internal dashboards, data visualization tools, reporting systems, and applications that integrate directly with your warehouse data.

### Analytics and data platforms (all plans)

These connectors are available on Core and Pro plans. Connect your analytics and data tools so Agent can read and work with your product data.

* **Segment**: Access customer data, event streams, and audience segments from your CDP
* **Amplitude**: Query product analytics, user behavior data, and engagement metrics
* **Hex**: Connect to collaborative data notebooks and query results

## Admin setup

Administrators must configure warehouse connectors before team members can use them. The setup process involves configuring an OAuth application in your warehouse provider and adding those credentials to Replit.

### Prerequisites

* Enterprise plan (for warehouse connectors)
* Admin access to your Replit organization
* Ability to create OAuth applications in your warehouse provider (or access to credentials from your IT/Data team)

### Configuration steps

<Steps>
  <Step title="Navigate to Integrations">
    Go to your organization's settings and select the **Integrations** tab.
  </Step>

  <Step title="Enable Connector">
    Select the warehouse you want to connect (BigQuery, Databricks, or Snowflake).
  </Step>

  <Step title="Enter Credentials">
    Provide the **Client ID** and **Client Secret** for the OAuth application you created in your warehouse provider.
  </Step>

  <Step title="Configure Access">
    Use Role-Based Access Control (RBAC) to specify which members or groups can use this connector.
  </Step>
</Steps>

### Warehouse-specific configuration

<AccordionGroup>
  <Accordion title="Databricks">
    Admins can configure Databricks connections using one of two methods: **User-OAuth** or **Service Account**.

    **Option 1: User-OAuth**

    This method involves minting OAuth application tokens within Databricks.

    <Warning>
      With User-OAuth, the credentials of the user who authenticates the connection are used for all subsequent access. This means that anyone using an application created with this connection will effectively have the same permissions as the authenticating user. Ensure the authenticating user has the appropriate scope of access intended for all application users.
    </Warning>

    **Option 2: Service Account**

    This method involves creating a service account (Service Principal) in Databricks to connect to Replit.

    The service account is shared among everyone given permission to use that integration. The permissions granted to the service account in Databricks will flow to all users enabled for the integration. Scope service accounts to READ-only access on the data when possible.

    **Managing Access Granularity**

    To differentiate access levels (for example, restricting specific tables to different teams):

    1. Create multiple Service Principals in Databricks
    2. Assign specific permissions to each Service Principal
    3. Create separate integrations in Replit for each Service Principal
    4. Open access to each integration only for the allowed individuals or groups
  </Accordion>
</AccordionGroup>

## Builder access and login

Once an admin has enabled a connector and granted you access, you can connect to the warehouse.

### Connecting to a warehouse

When you ask Agent to use a warehouse (for example, "Query the Snowflake database..."), or when you manually add the integration, you receive a login prompt.

Each warehouse requires specific information during the login or connection process:

<AccordionGroup>
  <Accordion title="BigQuery">
    **Required at login:**

    * **Project ID**: You must specify the Google Cloud Project ID you want to access.
  </Accordion>

  <Accordion title="Databricks">
    **Required information:**

    * **SQL Warehouse**: The specific SQL Warehouse compute resource to use.
    * **Account URL**: Your Databricks account URL.
  </Accordion>

  <Accordion title="Snowflake">
    **Required information:**

    * **Account ID**: Your Snowflake Account ID.

    For the complete setup guide, including creating the OAuth integration and troubleshooting, see [Connect Snowflake](/teams/snowflake-connector).
  </Accordion>
</AccordionGroup>

### Building with warehouse data

After connecting, you can ask Agent to build applications that use your data. Agent can:

* Build internal tools that fetch and display live data
* Create dashboards with charts and visualizations backed by your warehouse
* Generate SQL queries to power your application's backend
* Explain schema and table structures to help you understand what to build

<Note>
  While Agent can answer ad-hoc questions about your data, the primary purpose of Data Connectors is to enable Agent to build functional applications that leverage your organization's data. Warehouse queries are executed directly against your instance, so make sure your OAuth scopes and database user permissions allow the necessary read and write operations.
</Note>

## Connector availability

| Connector  | Starter | Core | Pro | Enterprise |
| ---------- | ------- | ---- | --- | ---------- |
| BigQuery   | —       | —    | —   | ✅          |
| Databricks | —       | —    | —   | ✅          |
| Snowflake  | —       | —    | —   | ✅          |
| Segment    | —       | ✅    | ✅   | ✅          |
| Amplitude  | —       | ✅    | ✅   | ✅          |
| Hex        | —       | ✅    | ✅   | ✅          |

## Related documentation

* [Connectors overview](/replitai/integrations) — Learn about all integration types
* [Connect Snowflake](/teams/snowflake-connector) — Step-by-step Snowflake setup with OAuth configuration and troubleshooting
* [Managing your connectors](/replitai/managing-connectors) — Connector management on collaborative workspaces in Core, on collaborative workspaces in Pro, and Enterprise


# Setting up a Design System
Source: https://docs.replit.com/teams/custom-design-system

Configure Agent with your organization's design system - component library, brand assets, design tokens, and visual standards - so every app, site, and artifact follows your design language.

A design system gives Agent the knowledge it needs to build on-brand UI across everything your organization creates on Replit - web apps, mobile apps, slides, and other artifacts. By setting up your component library, design tokens, brand assets, and usage rules within the standard Replit pnpm monorepo, Agent applies your visual language from the first prompt.

<Note>
  Design systems are available exclusively on the **Enterprise** plan. Only org admins can configure and manage design systems.
</Note>

## Why set up a design system

Without a design system, every builder needs to manually explain your component library, color tokens, and layout conventions to Agent. Setting up a design system solves this by:

* **Encoding your visual standards**: Agent uses your exact components, colors, and spacing - not generic defaults
* **Ensuring consistency**: Every app follows the same design language
* **Reducing onboarding time**: New builders produce on-brand results immediately
* **Capturing tribal knowledge**: Design decisions and component usage patterns that live in your team's heads get documented for Agent

## What you will need

* Frontend code component library as a tarfile or set of tarfiles
* Font assets and icons used in your design system
* Any AI documentation of your design system (MCP, Agent Skills)

## What you can configure

Setting up a design system involves three parts:

1. **Custom instructions**. Your `custom_instruction/instructions.md` file gives Agent the high-level rules that apply to every project: which component library to use, which design tokens to reference, and which patterns to follow. Agent always has this file in context.

2. **Skills**. Skills in `.agents/skills/` provide detailed reference material that Agent loads on demand. Use them for component API documentation, theming guides, layout pattern libraries, and other deep reference content that would be too large for the main instructions file.

3. **Design and brand assets**. Place your logos, icons, fonts, and other brand assets in a dedicated folder (for example, `src/assets/brand/`). Configure a Vite path alias so Agent and builders can reference them with clean imports like `@brand/logo.svg` instead of fragile relative paths. This keeps asset references consistent across the entire project.

## Step-by-step guide

This guide walks you through setting up a design system end to end using your existing component library packaged as tarfiles:

1. **Create a new Replit app** and upload your tarfiles.
2. **Tell Replit Agent to install the packages and display all of the components.** Agent will configure the project and render your component library.
3. **Review the output.** Make sure all components look correct and match your expectations. Once everything is verified, proceed to [Creating the design system skill](#creating-the-design-system-skill).

### Creating the design system skill

With your components ready, the final step is to create a design system skill so Agent can reference your components, tokens, and usage patterns in every project.

Copy the entire prompt below and paste it into Agent. Replace `<your-design-system-name>` with the name of your design system:

````
Create a `<your-design-system-name>` design system skill from the components and packages in this project.

Use the file structure shown below with a `SKILL.md` at the root, a `references/` directory for guides and component docs, and a `packages/` directory containing all dependencies needed to function.

Go through every component in the project and document each one in its own file under `references/components/`, including its props, variants, and example usage.

Format `SKILL.md` as an index that links out to the guide and component reference files, with a "General Guidance" section and a "Components" section, following the example shown below.

File structure:

.agents/skills/your-design-system/
├── SKILL.md
├── references/
│   ├── guides/
│   │   ├── setup.md
│   │   ├── guardrails.md
│   │   ├── layout-and-spacing.md
│   │   └── ...
│   └── components/
│       ├── component-index.md
│       ├── button.md
│       ├── checkbox.md
│       └── ...
└── packages/
    └── (Tar files or code components)

The `SKILL.md` file acts as an index that links out to separate markdown files for guides and component references. Each linked file covers one topic in detail. Here is an example of what the generated `SKILL.md` looks like:

```markdown
---
name: your-design-system
description: Use when building or modifying any UI. Provides component API references, layout guidance, and visual style rules for your design system.
---

# Your Design System

## General Guidance

- [Setup](references/guides/setup.md) — Installation, project configuration, and provider setup
- [Guardrails](references/guides/guardrails.md) — Hard rules that must never be broken (banned patterns, required tokens, accessibility minimums)
- [Layout & Spacing](references/guides/layout-and-spacing.md) — Grid system, spacing scale, responsive breakpoints, and page templates
- ...

## Components

- [Component Index](references/components/component-index.md) — Full list of available components with status and category

Individual component references (props, variants, examples):

- [Button](references/components/button.md)
- [Checkbox](references/components/checkbox.md)
- ...
```

Guide files cover one topic each — setup and installation steps, best practices and rules, reference tables for token values, and short code examples showing correct usage.

Component files document a single component each, including the component name, a brief description, a props table, usage examples, and any guidelines or constraints. The more complete these files are, the better Agent's output will be.
````

### Connect your skill to Agent

Once the skill is created, make sure your `custom_instruction/instructions.md` points Agent to it:

```markdown theme={null}
# Design System

Read and follow the design system skill at `.agents/skills/your-design-system/`.
Always apply the design system when building or modifying UI.
```

Finally, pre-populate `replit.md` with design-system-specific context so Agent understands your visual standards from the start. Include a project overview, your preferred component library, key design preferences (spacing scale, accessibility requirements), and the architecture stack.

### Validate your setup

Before rolling out your design system, verify these essentials:

* `custom_instruction/instructions.md` points Agent to your design system skill
* `.agents/skills/` includes the skill with component references, guides, and packages
* `replit.md` is pre-populated with project overview, preferences, and architecture
* Design tokens file is included (`tokens.css` or equivalent)
* Design system package is pre-installed in `package.json`
* Create a new test app and verify Agent uses the design system correctly

### Pin the design system to your organization

Once your design system is ready, pin it so every org member can use it:

1. Navigate to the design system app in your organization
2. Open the app's action menu (three-dot menu)
3. Select **Pin to Agent input box**

<img alt="App action menu showing the Pin to Agent input box option" />

<Note>
  Only org admins (members of the `system_admins` role) can pin and unpin design systems.
</Note>

Set member access to **Read-only** so that members can see and use the pinned design system without being able to edit it.

<img alt="Invite dialog showing member access set to Read-only" />

The design system now appears as a selectable pill below the Agent input box for every member of your organization. To remove it, open the same menu and select **Unpin from Agent input box**.

<img alt="Design system appearing as a selectable pill in the Agent input box" />

## Maintain your design system over time

Design systems evolve. Keep yours current:

* **Update token files** when your design system ships new colors, spacing, or typography values
* **Update skills** when components get new props, variants, or usage patterns
* **Update instructions** when design principles or standards change
* **Bump package versions** when new releases of your design system ship
* **Test regularly** by creating a new app and verifying that Agent produces correct output

## Design Systems vs. Custom Templates

Design systems and [custom templates](/teams/custom-templates) serve different purposes:

|                      | Design Systems                                                            | Custom Templates                                                      |
| -------------------- | ------------------------------------------------------------------------- | --------------------------------------------------------------------- |
| **Purpose**          | Change the frontend stack to your team's and utilize your code components | Replace the default stack entirely (e.g., Rust, Go, C++)              |
| **Stack**            | Works within the standard Replit pnpm monorepo                            | Defines a completely custom project structure                         |
| **What it provides** | Component library rules, design tokens, brand assets, visual skills       | Full boilerplate: runtime, build config, dependencies, project layout |
| **Applies to**       | Web apps, mobile apps, slides, artifacts - anything Agent builds          | Only apps created from that specific template                         |

Use a design system when you want Agent to follow your visual standards across the normal Replit experience. Use a custom template when you need a fundamentally different stack.

## Related resources

* [Custom Templates](/teams/custom-templates) - Set up entirely custom stacks for your organization
* [Agent Skills](/core-concepts/agent/skills) - How skills work and how to create them
* [Agent Skills tutorial](/tutorials/agent-skills) - Hands-on guide to skills
* [replit.md](/core-concepts/agent/replit-dot-md) - Customize Agent behavior with project context
* [Enterprise overview](/category/teams) - Learn about Enterprise features


# Custom Templates
Source: https://docs.replit.com/teams/custom-templates

Set up and manage custom templates on Replit Enterprise to standardize how your organization builds with Agent.

## Getting started

Replit is a cloud development environment capable of writing and running any framework or stack. To build a custom template, there are two recommended paths:

1. **[Import](https://replit.com/import) from a Git provider** — Import your existing starter stack (or one matching your preferences) from GitHub, GitLab, or Bitbucket.
2. **Fork the Blank template** — Fork the [Blank template](https://replit.com/@replit/Nothing?v=1) to start from scratch with a completely empty development environment.

Customers have successfully built templates matching Rust, Python, Java, C++, and many other stacks — if it runs at all, it can run on Replit.

<Tip>
  We recommend working with Replit's **Field Engineering team** when building your first templates. They have extensive experience setting up custom templates across a wide range of stacks and are available to help. Reach out to your Account Executive to get connected.
</Tip>

Custom templates let Enterprise admins create pre-configured starting points that appear directly in the Agent input box for every member of your organization. When a builder selects a custom template, Agent forks it and uses the template's configuration, instructions, and skills to guide all subsequent work. No extra setup required.

<Note>
  Custom templates are available exclusively on the **Enterprise** plan. Only org admins can pin and manage templates.
</Note>

## How custom templates work

A custom template is a standard Replit App in your organization that has been **pinned to the Agent input box**. When a builder selects it:

1. Agent creates a new app by forking the template (all files are copied)
2. Agent skips the planning phase and goes straight to building
3. The template's `custom_instruction/instructions.md` file is injected into Agent's context
4. Custom [skills](/core-concepts/agent/skills) from `.agents/skills/` are discovered and made available
5. The [`replit.md`](/core-concepts/agent/replit-dot-md) file provides ongoing project context

This means your organization's standards, patterns, and tooling are baked in from the very first interaction.

## Template file structure

Here is the recommended layout for a custom template:

```
my-template/
├── .replit                              # App configuration (run commands, ports, modules)
├── replit.md                            # Agent memory: project overview and preferences
├── custom_instruction/
│   └── instructions.md                  # Company instructions injected into Agent's prompt
├── .agents/
│   └── skills/
│       └── my-skill/
│           └── SKILL.md                 # Custom skills Agent can invoke on demand
└── ...                                  # The rest of your repo structure
```

Each file serves a distinct purpose. The sections below walk through how to configure each one.

## Set up a custom template

### Create the base app

Create a new Replit App in your organization. Set up the project with all the files, dependencies, and configuration your builders need as a starting point. This includes:

* Source code scaffolding (components, utilities, config files)
* Pre-installed dependencies (`package.json`, `requirements.txt`, etc.)
* Environment configuration in the [`.replit` file](/replit-app/configuration)

### Configure shared secrets

If your template relies on API keys, tokens, or other credentials, add them to the template's **Secrets** (under the Tools pane) before pinning. When a builder creates a new app from the template, all secrets are copied into the new app automatically, so builders can start working without configuring credentials themselves.

Document every secret in `custom_instruction/instructions.md` (or in a dedicated skill) so builders know what is available and what each key is used for.

<Warning>
  Secrets are copied at fork time, not dynamically synced. If you rotate a key or add a new secret to the template, existing apps that were previously forked are not updated. Builders must add or update secrets manually in those apps.
</Warning>

### Write custom instructions

Create a file at `custom_instruction/instructions.md` in the project root. This is the most important file in your template — it tells Agent how your organization builds software.

<Warning>
  The folder name must be `custom_instruction` (singular), not `custom_instructions`.
</Warning>

Agent injects this file directly into its system prompt with a preamble that frames it as company-provided guidance. Write it in Markdown and include:

* **Architecture patterns**: How your apps should be structured
* **Coding standards**: Naming conventions, file organization rules, linting expectations
* **Component usage**: Which libraries and components to use (and which to avoid)
* **API patterns**: How to call your backend services, handle authentication, manage errors
* **Testing requirements**: What tests are expected and how to run them
* **Deployment guidelines**: Environment-specific configuration and deploy workflows

````markdown theme={null}
# Company Engineering Standards

## Architecture
All web applications use React with TypeScript. Use functional components
with hooks exclusively. State management uses Zustand for local state
and React Query for server state.

## Component Library
Use our internal design system package `@acme/ui`. Never use raw HTML
elements for buttons, inputs, forms, or modals — always use the
corresponding component from `@acme/ui`.

Import components like this:
```tsx
import { Button, TextField, Modal } from '@acme/ui';
```

## API Integration
All API calls go through the `@acme/api-client` package. Never use
raw fetch or axios directly. Authentication is handled automatically
by the client.

## Testing
Every component must have a corresponding test file. Use Vitest
for unit tests and Playwright for integration tests.
````

**Size limit**: Content is soft-limited to approximately 25 KB. Content beyond this limit may be progressively truncated. As your instructions grow, move detailed reference material into [skills](/core-concepts/agent/skills) in `.agents/skills/` rather than keeping everything in `instructions.md`. Skills are loaded on demand when relevant, so they do not count against the instruction size limit and keep your main instructions focused on high-level rules.

### Add custom skills

Create skills in the `.agents/skills/` directory for specialized workflows that Agent should follow. Each skill is a directory containing a `SKILL.md` file with YAML frontmatter.

```
.agents/skills/
├── use-design-system/
│   └── SKILL.md
├── api-integration/
│   └── SKILL.md
└── run-tests/
    └── SKILL.md
```

Each `SKILL.md` needs a `name` and `description` in its frontmatter:

```markdown theme={null}
---
name: use-design-system
description: Use when building UI components. Provides component patterns, theming rules, and accessibility requirements for the Acme design system.
---

# Acme Design System

## Available components

- `Button` — Primary, secondary, and ghost variants
- `TextField` — Text input with validation support
- `Modal` — Dialog overlay with focus trapping
...
```

| Field         | Required | Details                                                                 |
| ------------- | -------- | ----------------------------------------------------------------------- |
| `name`        | Yes      | Max 64 characters. Lowercase letters, numbers, and hyphens only.        |
| `description` | Yes      | Max 1,024 characters. Describes what the skill does and when to use it. |
| `enabled`     | No       | Defaults to `true`. Set to `false` to disable without deleting.         |

**How skills load**: Agent sees only the `name` and `description` in its prompt. It reads the full `SKILL.md` content on demand when the skill is relevant to the current task. This means the `description` is critical — write it to match the scenarios where Agent should use the skill.

Skills can also include supporting files alongside `SKILL.md`:

```
.agents/skills/use-design-system/
├── SKILL.md
├── references/
│   └── component-api.md
└── assets/
    └── theme-tokens.json
```

For more about skills, see [Agent Skills](/core-concepts/agent/skills) and the [Agent Skills tutorial](/tutorials/agent-skills).

### Configure replit.md

Pre-populate `replit.md` in the project root with your template's architecture overview. This file is always loaded into Agent's context and serves as ongoing project memory.

The file should have these four sections:

```markdown theme={null}
# Overview
Task management application built with React, TypeScript, and the Acme
design system. Uses Express.js backend with PostgreSQL.

# User Preferences
- Use TypeScript for all files
- Prefer functional components with hooks
- Follow Acme coding standards

# System Architecture
- Frontend: React + TypeScript + @acme/ui
- Backend: Express.js + TypeScript
- Database: PostgreSQL with Drizzle ORM
- Auth: Acme SSO via @acme/auth

# External Dependencies
- @acme/ui: Internal design system
- @acme/api-client: API integration layer
- @acme/auth: Authentication SDK
```

Agent updates `replit.md` as the project evolves. If the file grows beyond approximately 4,000 tokens, Agent automatically summarizes it to keep it focused and useful.

For more details, see [replit.md](/core-concepts/agent/replit-dot-md).

### Pin the template to your organization

Once your template is ready:

1. Navigate to the template app in your organization
2. Open the app's action menu (three-dot menu)
3. Select **Pin to Agent input box**

<img alt="App action menu showing the Pin to Agent input box option" />

<Note>
  Only org admins (members of the `system_admins` role) can pin and unpin templates.
</Note>

Set member access to **Read-only** so that members can see and use the pinned template without being able to edit it.

<img alt="Invite dialog showing member access set to Read-only" />

The template now appears as a selectable pill below the Agent input box for every member of your organization. To remove it, open the same menu and select **Unpin from Agent input box**.

### Control template access

Pinning makes a template visible to every org member. For more targeted distribution, use the **Invite** button on the template app to share it with specific [Groups or individual users](/teams/identity-and-access-management/groups-and-permissions). This lets you limit which teams or people can see and fork the template while keeping it unpinned from the org-wide input box.

## What happens when a builder selects a template

<img alt="Template appearing as a selectable pill in the Agent input box" />

When an org member picks a pinned template from the Agent input box:

1. **Fork**: A new app is created as a copy of the template, with all files included
2. **Skip planning**: Agent bypasses the initial planning conversation and goes directly into building mode
3. **Load instructions**: `custom_instruction/instructions.md` is read and injected into Agent's system prompt as company-provided guidance
4. **Discover skills**: Skills in `.agents/skills/` are identified and listed in Agent's context for on-demand loading
5. **Load project context**: `replit.md` is read and injected into Agent's context (or auto-generated if missing)
6. **Inherit configuration**: The `.replit` file, dependencies, and all template files carry over to the new app

The builder can immediately start prompting Agent with their specific requirements, and Agent operates within the guardrails established by the template.

## How files work together

Each configuration file serves a distinct role:

| File                                 | Purpose                            | When Agent reads it                  | Mutable by Agent                  |
| ------------------------------------ | ---------------------------------- | ------------------------------------ | --------------------------------- |
| `custom_instruction/instructions.md` | Organization standards and rules   | Always (injected into system prompt) | No                                |
| `.agents/skills/*/SKILL.md`          | Specialized workflows and patterns | On demand (when relevant)            | Yes (Agent can create skills too) |
| `replit.md`                          | Project overview and preferences   | Always (injected into system prompt) | Yes (Agent updates it over time)  |
| `.replit`                            | Runtime configuration              | When configuring the app             | Yes                               |

**Key distinction**: `custom_instruction/instructions.md` is your static, authoritative source for organizational standards. `replit.md` is the living document that Agent maintains as the project evolves. Skills are on-demand reference material for specific workflows.

## Best practices

### Keep instructions focused

Write `custom_instruction/instructions.md` for the patterns that matter most. Focus on:

* Decisions that are hard to reverse (architecture, data models)
* Patterns that must be consistent (component usage, API conventions)
* Standards the builder might not know about (internal libraries, team conventions)

Avoid including changelogs, implementation details, or information that changes frequently.

### Write discoverable skill descriptions

The `description` field in `SKILL.md` frontmatter is what Agent uses to decide when to load a skill. Write descriptions that match the tasks where the skill is relevant:

```yaml theme={null}
# Good — describes when to use it
description: Use when building forms or handling user input. Provides validation patterns, error display conventions, and accessible form layouts.

# Less effective — too vague
description: Form utilities and helpers.
```

### Organize skills by workflow

Group skills around workflows rather than technical categories:

| Approach              | Example                                      |
| --------------------- | -------------------------------------------- |
| **By workflow**       | `build-a-form`, `connect-to-api`, `add-auth` |
| **By technical area** | `react-utils`, `api-helpers`, `auth-config`  |

The workflow approach helps Agent discover skills at the right moment.

### Iterate on your template

Templates improve with use. After your team starts building with a template:

1. Watch for patterns Agent gets wrong and add them to `instructions.md`
2. Create new skills when Agent solves a problem well — capture the solution
3. Update base dependencies and configurations as your stack evolves
4. Test changes by creating a new app from the template to verify the experience

### Template updates and existing apps

Changes to the template app are reflected in **new** apps created from it. Existing apps that were previously forked from the template are independent copies and do not receive updates.

## Related resources

* [Agent Skills](/core-concepts/agent/skills) — Learn how skills work and how to create them
* [Agent Skills tutorial](/tutorials/agent-skills) — Hands-on guide to building and using skills
* [replit.md](/core-concepts/agent/replit-dot-md) — Customize Agent's behavior with project-level context
* [Design Systems](/teams/custom-design-system) — Set up your organization's design system for Agent
* [App configuration](/replit-app/configuration) — Configure your `.replit` file
* [Developer Frameworks](/replit-workspace/templates) — Community templates and how to publish them
* [Enterprise overview](/category/teams) — Learn about Enterprise features


# Enterprise Privacy Settings
Source: https://docs.replit.com/teams/enterprise-privacy-settings

Configure organization-wide privacy, security, and source control settings to protect your team's code and deployments.

As an enterprise admin, you can configure organization-wide settings that control how team members interact with code, deployments, and external platforms. These settings help maintain security standards, protect intellectual property, and ensure compliance with enterprise policies.

## Accessing privacy settings

<Accordion title="How to access Privacy Settings">
  1. Navigate to your enterprise workspace
  2. Select **Settings**
  3. Select **Advanced** to view all available settings
</Accordion>

## Privacy settings

Privacy settings control how apps are published and accessed within your organization.

<CardGroup>
  <Card title="Private deployments" icon="lock">
    Require all new apps to be published as private, restricting access to authenticated team members only
  </Card>

  <Card title="Password-protected deployments" icon="key">
    Allow team members to add password protection to their published apps
  </Card>

  <Card title="Private development URLs" icon="shield-halved">
    Require authentication for all app development URLs, including SSO for SAML-enabled organizations
  </Card>

  <Card title="Ban public apps" icon="eye-slash">
    Prevent team members from creating public apps that can be forked or viewed by anyone
  </Card>
</CardGroup>

### Private deployments

When enabled, all new apps must be published as private. Private apps are only accessible to authenticated members of your organization.

**When to use this setting:**
**When to use this setting:**

* The organization handles sensitive data or proprietary applications
* You need to ensure apps are not accidentally made public
* Compliance requirements mandate restricted access to published applications
* You need to ensure apps are not accidentally made public
* Compliance requirements mandate restricted access to published applications

<Note>
  This setting applies only to newly published apps. Existing published apps retain their current visibility settings.
</Note>

### Password-protected deployments

Control whether team members can create password-protected deployments. When enabled, builders can add an additional layer of security by requiring a password to access their published apps.

**When to use this setting:**

* You want to allow sharing apps with external stakeholders without making them fully public
* Teams need to demo applications to clients before wider release
* You require granular access control beyond organization membership

### Require private development URLs

When enabled, all app development URLs require authentication. If your organization has enabled SAML, development URLs require SSO authentication.

**When to use this setting:**
**When to use this setting:**

* You need to prevent unauthorized access to in-progress applications
* Security policies require all development environments to be protected
* You want to ensure only authenticated team members can view development previews
* Your security policy requires all development environments to be protected
* You want to ensure only authenticated team members can view development previews

<Warning>
  This setting applies retroactively to all existing apps in your organization.
</Warning>

### Ban public apps

When enabled, all new apps are automatically set to private within your organization. Public apps can be forked and have their source code viewed by anyone on the internet.

**When to use this setting:**
**When to use this setting:**

* Organizational intellectual property must remain confidential
* You need to prevent accidental exposure of proprietary code
* Compliance requirements prohibit public code repositories
* You need to prevent accidental exposure of proprietary code
* Compliance requirements prohibit public code repositories

### Ban source code export

When enabled, team members cannot export app source code as a zip file. This prevents code from being downloaded and shared outside of the Replit platform.

**When to use this setting:**
**When to use this setting:**

* You need to maintain strict control over where source code resides
* Security policies prohibit local copies of code
* You want to ensure all development happens within managed environments
* Your security policy prohibits local copies of code
* You want to ensure all development happens within your managed environment

## Security settings

Security settings help you enforce vulnerability scanning and other protective measures.

### Require security scan

Configure whether all apps must pass a security scan before publishing. Security scans detect vulnerabilities, exposed secrets, and other security issues in your code.

Available options:

| Setting     | Description                                          |
| ----------- | ---------------------------------------------------- |
| **Off**     | Security scans are optional                          |
| **Require** | All apps must pass a security scan before publishing |

**When to use this setting:**
**When to use this setting:**

* Security compliance requirements must be met
* You want to prevent accidental exposure of API keys or secrets
* You need to ensure consistent security standards across all published apps
* You want to prevent accidental exposure of API keys or secrets
* You need to ensure consistent security standards across all published apps

<Note>
  This setting does not apply to apps that were published before the setting was enabled.
</Note>

## Source control settings

Source control settings help you enforce version control practices and protect your organization's code repositories.

### Require Git remote

When enabled, all apps must have local changes pushed to a Git remote before publishing. This ensures that all code changes are tracked in your organization's version control system.

**When to use this setting:**
**When to use this setting:**

* All code must be backed up in Git
* You need an audit trail of all code changes
* Workflows require code review before publishing
* You need an audit trail of all code changes
* Your workflow requires code review before publishing

<Note>
  This setting does not apply to apps that were published before the setting was enabled.
</Note>

### Private remotes

Control whether team members can use public Git repositories. When set to require private remotes, team members can only push to private repositories on platforms like GitHub.

Available options:

| Setting                    | Description                                                       |
| -------------------------- | ----------------------------------------------------------------- |
| **Off**                    | Team members can use public or private repositories               |
| **Require for non-admins** | Non-admin team members must use private repositories              |
| **Require for all**        | All team members, including admins, must use private repositories |

**When to use this setting:**
**When to use this setting:**

* Public code repositories are prohibited
* You need to ensure proprietary code is not accidentally pushed to public repos
* Compliance requirements mandate private version control
* You need to ensure proprietary code is not accidentally pushed to public repos
* Compliance requirements mandate private version control

## Best practices

<AccordionGroup>
  <Accordion title="Start with private-by-default" icon="shield">
    Enable **Private deployments** and **Ban public apps** to ensure all new apps are private by default. This prevents accidental exposure of sensitive applications.
  </Accordion>

  <Accordion title="Enforce security scanning" icon="magnifying-glass">
    Set **Require security scan** to catch vulnerabilities before apps go live. This helps maintain consistent security standards across your organization.
  </Accordion>

  <Accordion title="Protect development environments" icon="code">
    Enable **Require private development URLs** to ensure even in-progress work is protected. This is especially important for organizations handling sensitive data.
  </Accordion>

  <Accordion title="Control source code access" icon="code-branch">
    <Accordion icon="code-branch">
      Combine **Ban source code export** with **Private remotes** requirements to maintain complete control over code location and access.
    </Accordion>
  </Accordion>
</AccordionGroup>

## Related resources

* [Information Security](/teams/information-security/overview) - Learn about Replit's security practices and compliance standards
* [SAML authentication](/teams/identity-and-access-management/saml) - Configure single sign-on for your organization
* [Groups and permissions](/teams/identity-and-access-management/groups-and-permissions) - Manage team member access with roles and groups


# Audit Logs
Source: https://docs.replit.com/teams/identity-and-access-management/audit-logs

Track and monitor security-relevant actions in your Replit Enterprise organization with comprehensive audit logs and SIEM integration.

## Introduction

<Note>
  Audit logs are available exclusively for Enterprise customers. Contact our sales team at [sales@replit.com](mailto:sales@replit.com) to enable this feature for your organization.
</Note>

Audit logs provide a detailed record of security-relevant actions within your Replit organization. They allow you to track who did what, when, and where — giving your security and compliance teams the visibility they need to monitor and investigate activity.

Replit's audit log system is powered by [WorkOS](https://workos.com/), ensuring enterprise-grade reliability and security for log storage, retrieval, and streaming.

## Key Features

<CardGroup>
  <Card title="Comprehensive Event Tracking" icon="list-check">
    Monitor user lifecycle events including provisioning, deprovisioning, invitations, and role changes
  </Card>

  <Card title="Audit Log Portal" icon="magnifying-glass">
    Search, filter, and review audit events through a dedicated log viewer portal
  </Card>

  <Card title="SIEM Integration" icon="arrow-right-arrow-left">
    Stream audit logs in real time to your existing security tools via log streaming
  </Card>

  <Card title="Admin-Only Access" icon="shield">
    Only organization admins can view audit logs and configure streaming, keeping your security data protected
  </Card>
</CardGroup>

## Getting Started

<Steps>
  <Step title="Enable Audit Logs">
    Navigate to **Settings** > **Advanced** > **Audit Logs** and select **Enable audit logs**. You must be an organization admin to enable this feature.

    <Warning>
      Audit logs are supported for single-workspace accounts only. Enabling audit logs will disable additional workspace creation for your organization.
    </Warning>
  </Step>

  <Step title="View Audit Logs">
    Once enabled, select **View audit logs** to open the audit log portal
  </Step>

  <Step title="Set Up SIEM Integration (Optional)">
    Select **Set up SIEM integration** to configure real-time log streaming to your security tools
  </Step>
</Steps>

## Tracked Events

Audit logs capture security-relevant events across your organization, including user lifecycle actions such as provisioning, deprovisioning, and invitation management. The set of tracked events is actively expanding.

For a full list of currently tracked events, contact your Replit account representative or reach out to [sales@replit.com](mailto:sales@replit.com).

<Note>
  Audit log events are designed with privacy in mind. Only customer-facing identifiers like email addresses and organization slugs are recorded — internal system IDs are never exposed.
</Note>

## Viewing Audit Logs

To view your organization's audit logs:

1. Go to **Settings** > **Advanced**
2. In the **Audit Logs** section, select **View audit logs**
3. The audit log portal opens, where you can search, filter, and review events

The portal provides:

* **Search** — Find specific events by keyword
* **Filters** — Narrow results by event type, date range, actor, or target
* **Export** — Download log data for offline analysis or compliance reporting

## SIEM Integration

SIEM (Security Information and Event Management) integration allows you to stream audit log events in real time to your existing security tools. This is useful for:

* Centralizing security monitoring across all your enterprise tools
* Setting up automated alerts based on audit log patterns
* Meeting compliance requirements for log retention and analysis

### Setting Up Log Streaming

1. Go to **Settings** > **Advanced**
2. In the **Audit Logs** section, select **Set up SIEM integration**
3. The log streaming configuration portal opens
4. Follow the instructions to connect your SIEM provider

Replit supports streaming to any destination compatible with WorkOS Log Streams, including:

* **Datadog**
* **Splunk**
* **Amazon S3**
* **Generic HTTP endpoint (webhook)**

<Note>
  Log streaming is configured through the WorkOS portal. Changes to your streaming configuration take effect immediately.
</Note>

## FAQs

### Who can view audit logs?

Only organization admins can access audit logs and configure SIEM integration. Non-admin members do not have access to any audit log data.

### Do I need SCIM enabled to use audit logs?

No. SCIM is not required to use audit logs. However, if your organization has [SCIM](/teams/identity-and-access-management/scim) configured, audit logs will also capture SCIM-related user lifecycle events such as provisioning and deprovisioning.

### What happens if an audit log event fails to record?

Audit log recording is designed to never interfere with the underlying operation. If an event fails to be recorded, the original action (such as user provisioning) still completes successfully. Failed events are logged internally for investigation.

### How long are audit logs retained?

Audit log retention is managed through WorkOS. By default, logs are retained in the audit log portal for viewing and search. For longer retention, set up SIEM integration to stream logs to your own storage.

### Can I export audit logs?

Yes. You can export audit log data directly from the audit log portal or by configuring a SIEM integration to stream events to your preferred storage destination.

## Related Resources

<CardGroup>
  <Card title="SCIM" icon="key" href="/teams/identity-and-access-management/scim">
    Set up automated user provisioning with SCIM integration
  </Card>

  <Card title="SAML SSO" icon="lock" href="/teams/identity-and-access-management/saml">
    Configure single sign-on authentication for your organization
  </Card>

  <Card title="Groups & Permissions" icon="shield" href="/teams/identity-and-access-management/groups-and-permissions">
    Manage user roles and access controls
  </Card>

  <Card title="Enterprise Privacy Settings" icon="eye-slash" href="/teams/enterprise-privacy-settings">
    Configure organization-wide privacy and security settings
  </Card>
</CardGroup>


# Roles, Groups and Access
Source: https://docs.replit.com/teams/identity-and-access-management/groups-and-permissions

Control member access with roles and groups. Roles provide default access levels (Admin, Member, Guest, Viewer), while custom groups—available exclusively on the Enterprise plan—offer fine-grained access control.

Manage your organization's access to resources and applications through a comprehensive system built on default roles and custom groups. This approach provides granular control over who can access what, while maintaining organizational security and structure.

## Features

Replit Enterprise provides comprehensive access control through two complementary systems that work together to manage access across your organization.

<CardGroup>
  <Card title="Admin" icon="shield-check">
    Full administrative access to organization settings and all resources
  </Card>

  <Card title="Member" icon="users">
    Can see all other members and create Apps and Projects
  </Card>

  <Card title="Guest" icon="user-plus">
    Limited access to only shared apps and resources
  </Card>

  <Card title="Viewer" icon="eye">
    Read-only access to apps and deployments
  </Card>
</CardGroup>

Key capabilities include:

* **Default roles**: Four built-in access levels that provide baseline access control for all organization members
* **Custom groups** *(Enterprise only)*: Create specialized groups for fine-grained access control beyond default role limitations
* **Flexible access control**: Use roles and groups to grant precise access for different Apps and resources
* **Easy member management**: Add, remove, and transfer members between groups with simple administrative controls

## Usage

### Roles

Every organization member must have a role that defines their baseline access level within your organization. Admins assign roles when adding new members to ensure proper access control from day one.

The four default roles provide different levels of access:

* **Admins**: Have access to every action available in your organization, including organization settings, billing, and member management
* **Members**: Can create and edit Replit Apps and see all other organization members, but cannot perform sensitive administrative actions
* **Guests**: Have the lowest access level and can only edit apps specifically shared with them. This role is useful for external contractors or interview candidates
* **Viewers**: Have read-only access to apps and deployments, making them ideal for stakeholders who need visibility without editing capabilities

### Custom groups

<Info>
  Custom groups are available exclusively on the **Enterprise** plan.
</Info>

Custom groups provide more access control beyond default roles. Create groups to grant specific access to selected organization members while maintaining their base role access.

<Note>
  For information on syncing IdP groups to Replit for easier bulk user access management, see [SCIM](https://docs.replit.com/teams/identity-and-access-management/scim).
</Note>

The list of groups is available via the "Groups" tab in the sidebar. Each group card shows the name of the group, an icon with its color, and the number of group members. Members will only see groups to which they have at least viewer access.

<Frame>
  <img alt="Viewing groups" />
</Frame>

#### Creating a group

Admins can create unlimited custom groups from the groups page. Select the **Add** button in the top right corner to open the creation modal where you can:

* **Name your group**: The group name is the only required field
* **Add visual identifiers**: Choose colors and icons to distinguish groups
* **Assign members**: Add organization members to groups individually or in bulk
* **Grant access**: Groups can later receive access to specific apps through each app's **Invite** button

<Frame>
  <img alt="Creating a custom group modal with name field and color picker" />
</Frame>

After creating the group, the group details view loads where you can add members and configure organizational permissions.

#### Managing groups

Select any group card to access its management interface. Group management includes member addition, removal, and permissions configuration.

<Frame>
  <img alt="View group members" />
</Frame>

**Adding members to groups:**

To add a member to a group, select the **Add** button in the top right corner. This action becomes disabled if the person you're adding is not part of the organization and there are insufficient seats available.

<Frame>
  <img alt="Adding a group member dialog with search field for username or email" />
</Frame>

You can search for new members by username or email. If the new member is not part of the organization, a warning appears to confirm the action.

<Frame>
  <img alt="Warning dialog for adding non-organization members to groups" />
</Frame>

After adding the new member, they appear in the group member list. They immediately gain access to Replit Apps and other resources available to the group.

**Removing members from groups:**

To remove a group member, select the trash icon on the right side of the member row. You can also open the actions menu using the three-dot button and select **Remove from group**. This opens a confirmation modal.

<Frame>
  <img alt="Group member removal confirmation dialog" />
</Frame>

When removing members from custom groups, they retain their base role access but lose their group-specific access.

#### Setting group permissions

Assign organizational permissions to groups to define what level of access group members must have in your organization. To set group permissions, select the created group and choose the **permissions** tab in the left navigation.

The available permissions levels are:

* **Owner**: Can perform all organization actions, including deleting the organization
* **Billing manager**: Can update the organization's payment information, add and remove seats, and set spending limits
* **Manager**: Can create and manage groups, add and remove organization members, and view billing information
* **Editor**: Can create new Apps and view usage information
* **Viewer**: Can see basic information about the organization

These group permissions are separate from app-specific access, which you manage through individual apps using the Access feature.

You can see which apps groups have access to by selecting a group. Select **permissions** in the left navigation, and then go to **Apps**.

### App access control

Control who can access and collaborate on your apps using Replit's Access feature. Assign access to roles and groups to share specific apps with the right members while maintaining security across your organization.

#### Setting app access

<Accordion title="How to manage app access">
  From any app, select **Invite** in the upper right corner (to the left of **Publish**) to open the Access panel.
</Accordion>

The Access panel displays all available roles and allows you to search for custom groups:

* **Default roles**: Admin, Members, Guests, and Viewers appear automatically in the Access panel
* **Custom groups**: Use the search functionality to find and grant app access to specific custom groups

#### Access levels

You can assign different access levels to each role and group for fine-grained control:

* **Owner**: Full access including app deletion and administrative control
* **Publisher**: Can edit code, republish apps, and manage app resources, and settings
* **Editor**: Can edit code and view app resources without publishing capabilities
* **Viewer**: Read-only access to code with the ability to fork apps for their own use
* **None**: No access to search, view, or edit the app

Select the appropriate access level for each role or group based on collaboration requirements and security needs.


# Managing Members
Source: https://docs.replit.com/teams/identity-and-access-management/managing-members

You can manage members on your Replit team to control access, collaboration, and permissions across your organization's apps and projects.

Managing members is one of the most important functions of Replit Teams, allowing you to add collaborators to your organization and control who has access to your team's resources.

## Features

The **Members** tab displays a list of current organization members, showing their default group and recent activity. From this view, you can manage your team through several key capabilities:

* **Add Members**: Invite new collaborators to join your organization and assign them appropriate permissions
* **Remove Members**: Remove people from your organization when they no longer need access
* **Assign Roles**: Set member permissions with Admin, Member, Guest, or Viewer roles
* **Manage Invitations**: Send email invitations to non-Replit users and track invitation status
* **Seat Management**: Control billing capacity and monitor available seats

<CardGroup>
  <Card title="Add Members" icon="person">
    Add team members so you can share apps and ideas.
  </Card>

  <Card title="Remove Members" icon="trash">
    Remove members or change who's on your team.
  </Card>
</CardGroup>

## Usage

### Adding members

<Note>
  For automated user management and bulk operations, see [SCIM](/teams/identity-and-access-management/scim) instead.
  *Note: SCIM is available for enterprise customers only.*
</Note>

Selecting the **Add** button in the corner of the Members page opens a modal with a search input. The **Add** button may become disabled if there are not enough seats available or if you don't have permissions to add new organization members.

You can find existing Replit members via username or email, while you can add non-Replit members by email. After selecting someone or entering an email address, you can set the member's group with the following options:

* **Admin**: Admins have full administrative access to organization settings and all resources.
* **Member**: Members can see all other members, and can create Apps and Projects.
* **Guest**: Guests can only edit and access apps shared with them.
* **Viewer**: Viewers have read-only access to apps and deployments in your organization.

Existing members join immediately, and the seat becomes active immediately. Non-Replit members join the organization after creating an account. The seat won't become active until this happens. The invitation sent via email expires after seven days.

<Frame>
  <img alt="Invitation email" />
</Frame>

Additional documentation:

* [SCIM](/teams/identity-and-access-management/scim)
* [SAML](/teams/identity-and-access-management/saml)
* [Viewer Seats](/teams/identity-and-access-management/viewer-seats)

### Removing members

Eligible members can remove people from the organization using the trash can icon. You can also use the context menu opened from the triple dot to the right of each member row.

Removing someone from the organization requires a confirmation step. After you remove them, a seat becomes available immediately and you can use it to invite a new organization member.

<Frame>
  <img alt="Removing a member" />
</Frame>

### Managing seats

Managing seats is different from managing members. While member management involves adding or removing people from your team, seat management controls your billing capacity—how many seats you're paying for.

For detailed information on adding seats and removing seats, see [Managing Seats](/billing/teams-billing/managing-seats).


# Access Management
Source: https://docs.replit.com/teams/identity-and-access-management/repl-access-management

Learn how to control access and visibility settings for Replit Apps through the workspace interface, including group permissions and user roles.

Replit App access may be managed either from the [group permissions interface](/teams/identity-and-access-management/groups-and-permissions#repl-permissions), or from the workspace using the "Invite" button in the header. Users with edit access can change the role for existing groups or individuals, or add roles to new groups or users. All users with access to the Replit App workspace are able to see who has access to the Replit App, even if they can't manage it.

<Frame>
  <img alt="Access popover" />
</Frame>

To grant access to a group or member, use the search to locate them by name or username.

<Frame>
  <img alt="Access popover search" />
</Frame>

After selecting the result, a dropdown for the role selection will appear. After choosing the role, the group or user will be added to the "Groups with access" or "People with access" sections below.

This popover also controls whether the Replit App is private or public, using selector in the bottom left corner. If the Replit App is marked as internal, it is private within the organization. Only users with access can see that it exists. If the Replit App is public, anyone on Replit (regardless of whether they are logged in) can see, but not edit, the Replit App.

<Frame>
  <img alt="Access popover visibility toggle" />
</Frame>


# SAML
Source: https://docs.replit.com/teams/identity-and-access-management/saml

Learn how to set up and manage SAML single sign-on authentication for your Replit Enterprise Team, including domain configuration and Identity Provider setup.

## Introduction

<Note>
  Only organizations with an Enterprise plan are able to use SAML SSO. [Contact us](https://replit.com/teams#inlineForm) to get started with Enterprise.
</Note>

[SAML](https://en.wikipedia.org/wiki/Security_Assertion_Markup_Language) SSO allows you to use your Identity Provider to authenticate users logging into replit.com. Your Organization's users will be directed to your Identity Provider to authenticate, and your Identity Provider will provide an response back to Replit verifying the user's identity, which Replit uses to log the user into replit.com.

Setting up SAML requires communication with the Replit team. Once you’re familiar with what’s required below, [contact us](https://replit.com/teams#inlineForm) to get started.

## Set up SAML SSO

### Choose your email domains

You can claim multiple email domains and subdomains for your Organization. Any user that attempts to sign up with an email domain that matches your claimed domain will be required to use SAML SSO. Your claimed domains should match what your Identity Provider will report for your users. If you use email domain aliases, you should provide them to Replit as well to prevent your users from signing up without using SAML.

For example, if your company uses email domains matching `acmeco.com`, `foo.acmeco.com`, and `acmebiz.com` you should provide all of these to Replit.

Replit must be able to verify that your organization owns these domains. If you need to add additional domains in the future you can contact us at [support@replit.com](mailto:support@replit.com).

### Setup Replit in your Identity provider

Create a new application or service in your Identity Provider using the following

* **Service Provider (SP) Entity ID**: Your Replit representative will provide this.
* **SSO URL**: `https://replit.com/__/auth/handler`

### Replit enables your SAML SSO

Once you've setup Replit in your Identity Provider, please provide your Replit representative with the following:

* **Identity Provider (IdP) entity ID**: This identifies your IdP to Replit
* **IdP SSO URL**: This is the URL Replit will send users to when authenticating with your IdP
* **Signature Certificate**: An X509 certificate that Replit uses to verify authentication responses from your IdP.

Once we have confirmed setup completion, your Organization is ready to use SAML SSO.

## Using SAML SSO

<Note>
  Signing up in with SAML will not automatically invite users to your organization. For automated user management and bulk operations, see [SCIM](/teams/identity-and-access-management/scim) instead.
</Note>

Once SAML SSO is configured, your users can log in to [replit.com](http://replit.com) using the "Continue with SSO" button.

## FAQ

### What happens to users who already have accounts on replit.com before SAML SSO was setup?

Once SAML SSO is enabled for your organization, all users with captured SSO email domains will be required to use SSO to log in. Existing users will no longer be able to use their previous authentication methods (email or social login) if their email has the SSO domain. They will not be automatically added to your Organization.

### Are users automatically deprovisioned in Replit when my IdP removes access?

No, SAML SSO only handles authentication. For automated user provisioning and deprovisioning, you can use [SCIM](/teams/identity-and-access-management/scim) integration, which is available for Enterprise customers. SCIM allows you to sync your IdP's directory to automatically manage user roles and provisioning.

### Are Organization seats automatically consumed when users are given access in our IdP?

No, seats are only consumed once a user accepts the invitation to your Organization.

## Related Resources

<CardGroup>
  <Card title="SCIM" icon="key" href="/teams/identity-and-access-management/scim">
    Learn about automating user management with SCIM integration
  </Card>

  <Card title="Groups & Permissions" icon="shield" href="/teams/identity-and-access-management/groups-and-permissions">
    Understand how to manage user roles and access
  </Card>
</CardGroup>


# SCIM
Source: https://docs.replit.com/teams/identity-and-access-management/scim

Learn how to set up and manage SCIM to simplify provisioning and managing user roles within your Replit Enterprise Team.

## Introduction

<Note>
  SCIM is available exclusively for Enterprise customers. Contact our sales team at [sales@replit.com](mailto:sales@replit.com) to enable this feature for your organization.
</Note>

System for Cross-domain Identity Management ([SCIM](https://en.wikipedia.org/wiki/System_for_Cross-domain_Identity_Management)) is a standardized protocol that automates user provisioning and deprovisioning between your enterprise identity provider (IdP) and Replit.

The SCIM integration is built on the [WorkOS](https://workos.com/) platform, ensuring enterprise-grade reliability and security.

## Key Features

<CardGroup>
  <Card title="Automated User Management" icon="user-plus">
    Automatically provision and deprovision users based on your IdP's directory
  </Card>

  <Card title="Role Synchronization" icon="shield">
    Keep user roles and permissions in sync with your organizational structure
  </Card>

  <Card title="Bulk Operations" icon="users">
    Efficiently manage large teams with bulk user operations
  </Card>

  <Card title="Major IdP Support" icon="plug">
    Direct integration with Azure AD, Okta, and other leading identity providers
  </Card>
</CardGroup>

## Benefits

SCIM integration provides several advantages for Enterprise teams:

* **Enhanced Security**: Leverage your existing identity management systems for robust access control
* **Simplified Administration**: Automatically manage team members through your identity provider
* **Efficient Onboarding**: Seamlessly provision large teams without manual intervention
* **Consistent Access Control**: Maintain uniform access policies across your organization

## Getting Started

<Steps>
  <Step title="Enable SCIM">
    Go to your **Organization Settings** > **Authentication** tab to enable SCIM for your Enterprise organization
  </Step>

  <Step title="Configure Your IdP">
    Access the SCIM onboarding portal directly from the Authentication settings page. The onboarding portal provides step-by-step instructions specific to your identity provider for synchronizing your user directory
  </Step>

  <Step title="Test Integration">
    Verify the connection by provisioning a test user
  </Step>

  <Step title="Go Live">
    Begin using SCIM for automated user management
  </Step>
</Steps>

## Best Practices

* Document role allocations for existing Replit users before enabling SCIM
* Configure groups for each Replit role, keeping in mind that users without a group will default to the **Viewer** role
* Test your configuration by provisioning a small group of users before enabling bulk provisioning
* After initial sync, review and configure permissions for custom groups based on your organization's access control needs
* Dedicate role-control groups to control access levels of provisioned users in Replit and use other push groups for user categorization and bulk permission management
* Document your SCIM configuration for future reference

## Role Assignment

All provisioned accounts are created in your Replit organization as "Viewers", which grants the most limited set of permissions and no ability to create apps.

You can bulk edit member roles within your organization by selecting "Assign roles" in your SCIM portal and specifying which role to assign to each push group. For example, you can use this to assign the "Admin" role to the synced "Managers" group, and the "Guest" role to the synced "Contractors" group.

To learn more about viewer access, see [Viewer Seats](/teams/identity-and-access-management/viewer-seats).

## Group Synchronization

All pushed groups from your IdP will be synchronized to Replit with the same members. For example, if you start pushing an "Engineering" group via SCIM, a corresponding "Engineering" group will be created in Replit that includes the same members.

Group membership will be automatically updated to reflect the group membership in your IdP. You can use these synchronized groups for bulk editing member permissions, such as sharing an app with everyone in the "Engineering" group.

For detailed information about groups, see [Groups & Permissions](/teams/identity-and-access-management/groups-and-permissions).

## FAQs

### What happens to users who already have accounts on replit.com before SCIM was setup?

When SCIM is enabled, existing users are handled in two ways:

1. **Users provisioned through SCIM**:
   * Their roles will be updated to match those provided by your IdP
   * These users can only be added, removed, or have their roles changed through your IdP
   * To ensure permissions remain synchronized, admins will no longer be able to edit roles or invite new users within Replit
2. **Users not provisioned through SCIM**:
   * These users remain unchanged and are considered "legacy" users
   * Their organization membership and role is not automatically removed to prevent accidental deprovisioning
   * Legacy users can be removed through the Replit interface by organization admins if needed

<Warning>
  After implementing SCIM, all users provisioned through your IdP must be managed through your identity provider to maintain synchronization. Only legacy users (those not provisioned through SCIM) can be deprovisioned directly in Replit.
</Warning>

### What roles can be provisioned with SCIM?

SCIM users can be assigned to three roles:

* **Admin**: Full access to organization settings and resources
* **Member**: Standard access to create and edit Replit Apps
* **Viewer**: Read-only access to published applications

During the SCIM onboarding process, you configure the mapping between your IdP groups and Replit roles. For example, you might map your "Engineering" group to the Member role and your "Stakeholders" group to the Viewer role.

### What if I need to edit the role mapping later?

Organization admins can edit SCIM configuration at any time by navigating to **Organization Settings** > **Authentication** > **SCIM**. Here you can access the SCIM portal to update group mappings and manage your integration settings.

## Related Resources

<CardGroup>
  <Card title="SAML SSO" icon="key" href="/teams/identity-and-access-management/saml">
    Learn about SAML single sign-on integration
  </Card>

  <Card title="Groups & Permissions" icon="shield" href="/teams/identity-and-access-management/groups-and-permissions">
    Understand how to manage user roles and access
  </Card>
</CardGroup>


# Transfer App to Teams
Source: https://docs.replit.com/teams/identity-and-access-management/transfer-app-to-teams

Move personal apps to team workspaces for collaboration

Transfer your personal Replit Apps to team workspaces to enable collaboration and centralized project management. This process allows you to:

* Share apps with team members instantly
* Centralize project management within your organization
* Maintain deployment uptime and URLs during transfer

## What is app transfer?

App transfer moves ownership of a Replit App from your personal workspace to a team workspace. Once transferred, the app becomes accessible to team members according to workspace permissions and is managed under the team's resources and billing.

The transfer process is immediate and irreversible, but maintains all deployment configurations and URLs.

## Getting started

You must be a member of the target team workspace before transferring apps. Verify your team membership by selecting your profile or workspace selector in the upper-right corner to view available teams.

<Note>
  * Transferring a Replit App to a team workspace is irreversible
  * Published apps experience zero downtime during transfer
  * Deployment URLs remain unchanged
  * You must be a member of the team you want to transfer the app to before initiating transfer
</Note>

## How it works

<Steps>
  <Step title="Access your Apps">
    Navigate to your personal Apps by selecting the **Apps** tab from your Replit home page.
  </Step>

  <Step title="Select the app">
    Locate the application you want to transfer in your Apps list.
  </Step>

  <Step title="Open transfer options">
    Select the **three dots (•••)** menu next to the app name.

    <Frame>
      <img alt="Three dots menu next to app name showing transfer options" />
    </Frame>
  </Step>

  <Step title="Choose transfer option">
    Select **Transfer To Organization** from the dropdown menu.
  </Step>

  <Step title="Select destination">
    Choose the target team workspace from the available organizations dialog.
  </Step>

  <Step title="Confirm transfer">
    Select **Transfer To Organization** to confirm the action.
  </Step>

  <Step title="Verify completion">
    You'll see a "Transfer success" notification in the bottom-right corner of the page. Refresh your Apps page to verify the app no longer appears in your personal workspace, then navigate to your team workspace to confirm the app appears there.
  </Step>
</Steps>

## Bulk transfer options

For transferring multiple applications, use CLUI commands:

* **Core to team workspace**: Use `org transfer-repls`
* **Team to team workspace**: Use `org transfer-repls-org-to-org`

## Next steps

To learn more about team collaboration and workspace management, see the following resources:

* [Replit Teams overview](https://docs.replit.com/category/teams) - Learn about team workspace features
* [CLUI commands reference](https://docs.replit.com/additional-resources/clui-graphical-cli) - Explore bulk transfer options


# Viewer Seats
Source: https://docs.replit.com/teams/identity-and-access-management/viewer-seats

Learn how to set up and manage viewer seats for your Replit Team.

## About viewer seats

Viewers get read-only access to your team's apps and deployments. This makes it easier to share your work with stakeholders and collaborators who don't need edit permissions or a full team license.

Viewer seats are perfect for:

* Internal tool users who are not creating applications
* Stakeholders who need to review project progress
* Teammates who are exploring capabilities of Replit

Teams get 50 viewer seats included in their plan, allowing you to scale your collaboration efficiently.

If you would like to add more than 50 viewers, contact our sales team at [sales@replit.com](mailto:sales@replit.com) regarding an Enterprise plan.

## Inviting a viewer

1. Navigate to the **Members** tab in your Organization
2. Select **+ Add**
3. Choose the Viewer option
4. Enter the email addresses of viewers you would like to add in a comma-separated list
5. Select **Send invites**

<Frame>
  <img alt="Send invites to viewers" />
</Frame>

Invited users without a Replit account will receive an email with instructions to create an account and join your team. Users who already have a Replit account will be added automatically.

## Viewer access

<Note>
  **Updated Default Access Behavior (Effective June 9, 2025)**: Apps created in organizations will now be **private by default**. Viewers will need to be explicitly granted access to new apps through the Access panel.
</Note>

Viewers will need to be explicitly granted access to new apps through the Access panel. For existing apps created before this change, viewers may still have access based on previous settings.

<Frame>
  <img alt="Viewer access control" />
</Frame>


# Information Security
Source: https://docs.replit.com/teams/information-security/overview

Learn about Replit's security practices, data protection, and compliance standards

Replit provides an AI-powered, cloud-based development environment used by millions of developers worldwide. Security is fundamental to our platform, ensuring users can confidently build, collaborate, and publish applications across multiple devices and platforms.

## Data protection

Data protection is a top priority at Replit. We implement comprehensive security measures to protect your data and ensure the integrity of our platform.

### Hosting and infrastructure

Replit hosts data primarily in Google Cloud Platform (GCP) data centers in the United States, with an optional hosting region in India for users who opt in. We leverage GCP's enterprise-grade backup and recovery tools to ensure:

<CardGroup>
  <Card title="High Availability" icon="server">
    Redundant systems and automated failover mechanisms protect against service interruptions and data loss
  </Card>

  <Card title="Data Segregation" icon="layer-group">
    Strong logical separation prevents unauthorized access between different users and organizations
  </Card>
</CardGroup>

GCP is an industry-leading cloud provider, certified for compliance with **ISO 27001** and **SOC 2 Type 2**. Additionally, **Replit has achieved SOC 2 Type 2 Attestation of Compliance**, demonstrating our ongoing commitment to security best practices and controls.

Every client request must be rigorously **authenticated and authorized** before accessing any private information.

### Encryption standards

<Note>
  Replit implements comprehensive encryption across all data states to ensure the confidentiality, integrity, and security of your information.
</Note>

<AccordionGroup>
  <Accordion title="Transit encryption" icon="shield-halved">
    Industry-standard **TLS 1.2+** encryption secures all communications between clients and our servers, protecting data as it moves across networks. This includes all API calls, web traffic, real-time collaboration data, and other communications.
  </Accordion>

  <Accordion title="Data at rest" icon="database">
    Data stored in GCP is protected using [**AES-256 server-side encryption**](https://cloud.google.com/docs/security/encryption/default-encryption). This military-grade encryption standard safeguards all stored data, including code, configurations, user information, and system metadata.
  </Accordion>

  <Accordion title="Database security" icon="lock">
    We use **Google Cloud SQL** for [database encryption](https://cloud.google.com/sql/faq#encryption-manage-rest) and [secure key management](https://cloud.google.com/secret-manager), ensuring that sensitive data remains protected with automatic encryption, regular key rotation, and granular access controls.
  </Accordion>
</AccordionGroup>

## Infrastructure security

All data-processing components operate in Replit's **private network** within a secure cloud environment, protected by:

<CardGroup>
  <Card title="Load Balancing" icon="server">
    Intelligent traffic distribution for optimal performance and reliability
  </Card>

  <Card title="WAF Protection" icon="shield">
    Advanced web application firewall prevents malicious traffic and sophisticated attacks
  </Card>

  <Card title="Vendor Security" icon="user-check">
    Rigorous subprocessor standards with regular security assessments and monitoring
  </Card>
</CardGroup>

We conduct thorough **due diligence** on all subprocessors to ensure they meet our strict security standards and compliance requirements.

## Security teams

<CardGroup>
  <Card title="Security Team" icon="shield-halved">
    Dedicated in-house team that continuously monitors, assesses, and strengthens our platform's security across infrastructure, product features, and operational processes
  </Card>

  <Card title="Trust & Safety Team" icon="users-gear">
    Ensures compliance with our **Terms of Service** and community guidelines, fostering a safe and respectful environment for all users
  </Card>
</CardGroup>

Security is a fundamental priority at the executive level, with direct oversight and engagement from company leadership.

## Legal framework

Our security and data handling practices are governed by these key documents:

<CardGroup>
  <Card title="Terms of Service" icon="file-contract" href="https://replit.com/terms-of-service">
    For Free and Core users
  </Card>

  <Card title="Teams Agreement" icon="users" href="https://replit.com/teams-agreement">
    For Teams users
  </Card>

  <Card title="Privacy Policy" icon="shield-check" href="https://replit.com/privacy-policy">
    For all users
  </Card>
</CardGroup>

## Additional resources

For more detailed information about our security policies, certifications, and best practices, visit our [**Trust Center**](http://trust.replit.com).

At Replit, we believe that security is not just a requirement—it's a core part of delivering an exceptional developer experience. By maintaining rigorous security standards, we empower individuals and teams to build with complete confidence.

<Warning>
  If you discover a security vulnerability, please report it immediately following our [responsible disclosure policy](/legal-and-security-info/security).
</Warning>


# Projects Overview
Source: https://docs.replit.com/teams/projects/overview

Learn how to use Projects in Replit Teams for collaborative development, version control, and managing multiple Replit Apps with git-based workflows.

<Warning>
  **Projects will be removed on March 3rd, 2026.** We're replacing Projects (collaboration feature for merging apps) with improved functionality soon. All of your existing apps and data will remain accessible, but you'll no longer be able to merge changes between them. No action needed at this time.
</Warning>

<Frame>
  <div>
    <iframe title="YouTube video player" />
  </div>
</Frame>

## Introduction

Projects are currently a beta feature available to Teams. A Project is a set of connected, Replit Apps for better collaborative development and versioning. Within a Project, you can:

* "Fork" a Replit App (i.e. make a copy) to work on a feature in isolation, and merge your changes back in when ready
* View all ongoing development in one place

Projects leverage a technology called [git](https://git-scm.com/) to manage version control, but you don't need to know anything about git to use Projects!

## Advantages of Projects

Projects are a great option:

* When you are collaborating with a team where you each need your own copy of the code when working on features
* When you want an easy way to leverage version control. Using a version control system has many advantages: you can trace the history of all files in your codebase to see what changed and why, you experiment and collaborate using branching & merging, you can rollback to a previous version easily when something breaks, etc.

## Project Structure

Every Project is organized around having a main Replit App that is the source of truth. In this example Project, "AnvilWebServer" is the main Replit App. Each team member has their own fork where they can work, e.g. "MadisonFitch-07-03" is a fork off of the main Replit App.

<Frame>
  <img alt="Project Dashboard" />
</Frame>

The best practice for working within a Project is to:

* Make changes in a fork, e.g. "MadisonFitch-07-03"
* Use the Project tool in the workspace to preview your changes
* Use that tool to merge your changes into the main Replit App when they are ready

## Creating a Project

To get started, fork any Replit App in your organization and you'll be prompted to turn it into a Project:

<Frame>
  <img alt="Create Project Fork" />
</Frame>

<Frame>
  <img alt="Create Project Prompt to Convert" />
</Frame>

If you choose the "Fork & start a Project" option, the Replit App you are in will become your main Replit App for the Project and you will be moved to a new fork where you can work on a feature.

## Previewing and merging changes

When you open the fork in the workspace, you'll see a Project tool open which informs you that you have no changes from the main Replit App yet:

<Frame>
  <img alt="Create Project No Changes" />
</Frame>

If you were to make some changes, you would see them previewed in the Project tool. You can create a basic express server and see the changes:

<Frame>
  <img alt="Create Project Changes in Workspace" />
</Frame>

You can run your Replit App and test your changes. When you are ready, you can click the "Merge changes..." button, and your changes will be pulled into the main Replit App. In the main AnvilWebServer Replit App, you would be able to now see the express server changes, and you can run the Replit App to see the server in action:

<Frame>
  <img alt="Run Main Replit App" />
</Frame>

## Using `git`

In the previous section, the "Merge changes..." button did some magic by executing a few git commands. You don't need to know anything about git to use Projects, but if you are familiar with git, you can take more control over how changes are made in a Project.

If you modify you fork again to add a joke endpoint, you'll see changes in the Project tool:

<Frame>
  <img alt="Git Changes" />
</Frame>

Instead of hitting "Merge," you can use the git tool (or use the `git` command in the shell) to commit specific changes when merging:

<Frame>
  <img alt="Git Staging" />
</Frame>

<Frame>
  <img alt="Git Committed" />
</Frame>

If you switch back to the Projects tool, you will see "Committed" changes and now can click the "Merge" button to pull only your committed changes into the main Replit App.

<Frame>
  <img alt="Git Merging" />
</Frame>

## Project Navigation in the Workspace

When in the workspace, the header bar will provide some extra navigation options and controls:

* Switch to other Replit Apps in the Project
* Go to the dashboard
* Create a new fork

<Frame>
  <img alt="Workspace Header" />
</Frame>

## Project Dashboard

You can visit the Project's dashboard from the sidebar, or via the workspace header link. You'll see:

* The main replit app
* All forks
* Everyone who is online currently in the Project
* Settings

<Frame>
  <img alt="Project Dashboard" />
</Frame>


# Conflict Resolution in Projects
Source: https://docs.replit.com/teams/projects/resolving-conflicts

Learn how to handle and resolve merge conflicts when multiple team members make changes to the same files in a Replit Project.

<Warning>
  **Projects will be removed on March 3rd, 2026.** We're replacing Projects (collaboration feature for merging apps) with improved functionality soon. All of your existing apps and data will remain accessible, but you'll no longer be able to merge changes between them. No action needed at this time.
</Warning>

## Overview

When two teammates make changes to the same files in a Project, it is possible to end up with a [merge conflict](https://www.atlassian.com/git/tutorials/using-branches/merge-conflicts).

## Resolving a merge conflict

In this example, the main Replit App has a change to the joke endpoint. In your Replit App, if you also change the joke endpoint and attempt to sync or merge your changes, you'll hit a merge warning:

<Frame>
  <img alt="Merge Conflict on Pull" />
</Frame>

If you click the "resolve manually" button, the git tool will open up in conflict resolution mode to help you resolve the conflict:

<Frame>
  <img alt="Merge Conflict View Conflict" />
</Frame>

You will see conflict markers `<<<<<<< HEAD`, `=======` and `>>>>>>> dd936daa...`. This is git's way of showing you the conflict it encountered and the two different version of the code it found. The bit between `<<<<<<< HEAD` and `=======` is the version of the joke endpoint found in the main Replit App (which was merged in between the time when you created your fork and the time you attempted to merge your fork), and the bit between `=======` and `>>>>>>> dd936daa...` is your change to the joke endpoint.

Resolving a merge conflict simply means editing the file to remove the conflict markers. Sometimes this means picking one change or the other. Other times this means picking parts of each version to create a blended version. In this situation, you can pick your version of the change:

<Frame>
  <img alt="Merge Conflict Resolve Conflict" />
</Frame>

The "Complete merge and commit" button will be enabled when you have resolved all the conflicts. When you click it, you'll end up with a new commit that resolves the conflict:

<Frame>
  <img alt="Merge Conflict Commit" />
</Frame>

You will now be able to merge your changes back into the main Replit App.


# Public Profiles
Source: https://docs.replit.com/teams/public_profiles

Learn how to create and customize your organization's public profile on Replit to showcase your brand, products, and public Replit Apps to the community.

## Overview

Public profiles on Replit enable Organizations to showcase their brand, products, libraries, or templates to a broader audience. Here are some key use cases for public profiles:

* **Developer Relations**: Developer-centric companies can share documentation, examples, demos, and self-hosted solutions.
* **Pre-Sales and Sales Flows**: Organizations can share content with clients or customers to demonstrate how something works during introductory calls.
* **Building Brand Awareness**: Companies can tap into Replit’s community by promoting their content and increasing visibility.

## Creating a public profile

Each Organization has a public profile, which will not have any information other than the Organization name by default.

<Frame>
  <img alt="Private Profile" />
</Frame>

To enable the profile page, an Organization admin needs to navigate to the Organization profile settings page and switch the profile visibility to public. This allows them to manage the contents of the public profile.

<Frame>
  <img alt="Private Profile Settings" />
</Frame>

Once the profile visibility is set to public, admins can update the contents of the public profile.

<Frame>
  <img alt="Public Profile Settings" />
</Frame>

## Profile page content

* **Avatar** - Upload your brand logo image to represent your organization.
* **Social Links** - Promote your website and cross-link to your social profiles.
* **Bio** - Describe your organization to give visitors a clear understanding of who you are.
* **Public Replit Apps** - Showcase all the Replit Apps your organization has made public to the Replit community.

## Accessing the profile

Once you create public Replit Apps, each Replit App has its own cover page, which is publicly accessible.

<Frame>
  <img alt="Replit App Cover Page" />
</Frame>

Users can navigate to your Organization's public profile by hovering over the organization name and selecting the logo or name. This is how the finalized public profile will appear.

<Frame>
  <img alt="Public Profile" />
</Frame>

## Creating public Replit Apps

In the Replit App creation modal, you will find two options:

* **Internal to (Organization Name)** - Creates a private Replit App that is accessible only within the organization, based on the defined access rules.
* **Public to Replit** - Creates a public Replit App that is accessible to anyone.

<Frame>
  <img alt="Public Replit App Creation" />
</Frame>

* Public visibility can also be managed from the Access modal within the workspace.

<Frame>
  <img alt="Public Replit App Access" />
</Frame>


# Replit Core Sponsorships
Source: https://docs.replit.com/teams/replit-core-sponsorships

Learn how to gift Replit Core subscriptions to developers outside your organization through sponsorships for hackathons, bootcamps, and other events.

# Replit Core sponsorships

## Overview

Sponsorships allow you to gift Replit Core to users outside of your Organization. Sponsorships can be a great fit for situations like Developer Relations teams and coding bootcamps. Example use cases:

* hosting a hackaton or contest and giving away Replit Core as a prize for participants
* running a bootcamp where each student should get their own Replit Core account

Sponsored users will not have any direct access to your Organization, and you won't have any direct access to the sponsored user's content. A sponsorship is simply a way to gift Replit Core to users and give them [the benefits of Replit Core](https://replit.com/pricing) (e.g. more powerful workspaces, private Replit Apps and monthly credits).

## Sponsorships flow

### Purchasing sponsorships

[Contact us](https://replit.com/teams#inlineForm) to enable this feature for your Organization.

### Granting a sponsorship

Once sponsorships have been enabled for your Organization, you can grant sponsorships from the settings page:

<Frame>
  <img alt="Sponsorships page" />
</Frame>

Click the "Add" button, enter an email (or multiple emails) and choose how many months of Replit Core you would like to grant (e.g. in this case, we are granting 2 months):

<Frame>
  <img alt="Sponsorships Invite Page" />
</Frame>

They will receive an email with a link to claim the sponsorship:

<Frame>
  <img alt="Sponsorships Email Page" />
</Frame>

The sponsorship invite link will expire after 7 days. If the recipient claims the sponsorship, they will receive Replit Core automatically. When the sponsorship ends (e.g. in our example, after 2 months), the recipient can decide whether or not they want to pay for Replit Core or not.


# Security Center
Source: https://docs.replit.com/teams/security-center

Scan your organization's apps for vulnerabilities, view CVE details by severity, and export SBOMs for compliance.

<Info>
  Security Center is available exclusively for Enterprise customers.
</Info>

Security Center gives Enterprise admins visibility into vulnerabilities across the organization's Replit Apps. Scan all apps with a single click, view CVE details organized by severity, and export Software Bill of Materials (SBOM) reports for compliance.

## Features

### CVE detection

See vulnerabilities across all dependencies in your organization:

* View CVEs organized by severity (critical, high, medium, and low)
* See affected package names and versions
* Access remediation guidance for each vulnerability

### Affected apps view

Identify which apps contain vulnerabilities:

* See a detailed breakdown of affected Replit Apps
* Filter by severity level to prioritize remediation
* View dependency chains to understand how vulnerabilities were introduced

### SBOM export

Export Software Bill of Materials for compliance and auditing:

* Download SBOMs in standard formats (SPDX, CycloneDX)
* Generate reports for individual apps or your entire organization
* Meet compliance requirements for software supply chain transparency

## Accessing Security Center

To open Security Center:

1. Go to [replit.com](https://replit.com) and sign in to your Enterprise account.
2. Select **Security Center** from the left navigation on the home page.

## Scanning your organization

1. Open Security Center.

2. Select **Scan All Apps** to initiate a scan across the organization.

3. Review the results organized by severity level.

4. Open Security Center.

5. Select **Scan All Apps** to initiate a scan across your organization.

6. Review the results organized by severity level.

Scans analyze all dependencies in the organization's Replit Apps and flag known vulnerabilities from public CVE databases.

<Note>
  Contact the dedicated account manager for help configuring Security Center or integrating SBOM exports into compliance workflows.
</Note>


# Connect Snowflake
Source: https://docs.replit.com/teams/snowflake-connector

Set up a Snowflake connector to build data-driven applications with Replit Agent.

<Info>
  The Snowflake connector is available exclusively on the **Enterprise** plan.
</Info>

Warehouse Connectors let Replit Agent query your organization's data warehouses. With the Snowflake connector, builders can create dashboards, reporting tools, and data applications using natural language — no SQL expertise required.

Setup is a one-time process that requires a Snowflake admin and a Replit workspace admin. Once configured, any organization member can sign in and start building with Snowflake data.

This guide walks you through the full setup. Three roles are involved:

1. **Snowflake Account Admin** — Creates the OAuth integration in Snowflake
2. **Replit Workspace Admin** — Configures the connector in Replit
3. **Builder** — Signs in and starts building

## Create the OAuth integration in Snowflake

The Snowflake Account Admin creates an OAuth Security Integration that allows Replit to authenticate with Snowflake.

### Prerequisites

* `ACCOUNTADMIN` role in Snowflake
* Access to run SQL in Snowflake worksheets

### Run the setup script

<Steps>
  <Step title="Log in to Snowflake">
    Open your Snowflake account and make sure you are using the `ACCOUNTADMIN` role. You can verify this in the role dropdown in the top-right corner.
  </Step>

  <Step title="Open a SQL worksheet">
    Click **Worksheets** in the left sidebar and create a new worksheet.
  </Step>

  <Step title="Run the OAuth integration script">
    Copy and paste the following SQL script and run it:

    ```sql Create OAuth integration theme={null}
    -- Drop existing integration if needed
    DROP INTEGRATION IF EXISTS REPLIT_OAUTH;

    -- Create OAuth integration for Replit
    CREATE SECURITY INTEGRATION REPLIT_OAUTH
      TYPE = OAUTH
      ENABLED = TRUE
      OAUTH_CLIENT = CUSTOM
      OAUTH_CLIENT_TYPE = 'CONFIDENTIAL'
      OAUTH_REDIRECT_URI = 'https://replit.com/connectors/oauth/callback'
      OAUTH_ISSUE_REFRESH_TOKENS = TRUE
      OAUTH_REFRESH_TOKEN_VALIDITY = 7776000
      OAUTH_ALLOW_NON_TLS_REDIRECT_URI = FALSE
      BLOCKED_ROLES_LIST = ()
      COMMENT = 'OAuth integration for Replit connector';
    ```

    <Warning>
      The redirect URI must be exactly `https://replit.com/connectors/oauth/callback`. Any other value causes a 404 error during authentication.
    </Warning>

    <Note>
      Setting `BLOCKED_ROLES_LIST = ()` ensures no roles are blocked from using the integration. Without this, you may get "invalid consent request" or "role blocked" errors when connecting.
    </Note>
  </Step>

  <Step title="Retrieve your OAuth credentials">
    Run this query to get the Client ID and Client Secret:

    ```sql Get OAuth credentials theme={null}
    -- View integration details
    DESCRIBE INTEGRATION REPLIT_OAUTH;

    -- Get Client ID and Secret
    WITH secrets AS (
      SELECT PARSE_JSON(
        SYSTEM$SHOW_OAUTH_CLIENT_SECRETS('REPLIT_OAUTH')
      ) as creds
    )
    SELECT
      creds:OAUTH_CLIENT_ID::STRING as CLIENT_ID,
      creds:OAUTH_CLIENT_SECRET::STRING as CLIENT_SECRET
    FROM secrets;
    ```

    Copy the **Client ID** and **Client Secret** from the output. You need these for the next step.
  </Step>
</Steps>

## Configure the connector in Replit

The Replit Workspace Admin adds the Snowflake credentials to Replit. Once configured, anyone in the organization can sign in.

<Note>
  This step requires an Enterprise plan with admin access.
</Note>

<Steps>
  <Step title="Open Integrations">
    Go to your organization's settings and select the **Integrations** tab.
  </Step>

  <Step title="Add the Snowflake connector">
    Click **Add New Connector** and select **Snowflake**.
  </Step>

  <Step title="Enter credentials">
    Provide the **Client ID** and **Client Secret** from the previous step.
  </Step>

  <Step title="Set the scope">
    Set the connector scope to `refresh_token`.

    <Warning>
      Only use the `refresh_token` scope. Other scopes like `session:role-any` or `session:role:PUBLIC` may cause an "invalid scope" error.
    </Warning>
  </Step>

  <Step title="Save">
    Click **Save** to enable the connector.
  </Step>
</Steps>

## Sign in to Snowflake

Any organization member with access to the connector can sign in. Sign in from the **Integrations** page first to verify the connection before using it with Agent.

<Steps>
  <Step title="Find the Snowflake connector">
    Go to **Integrations** in Replit. Under **Connectors**, find **Snowflake**.
  </Step>

  <Step title="Click Sign In">
    Click **Sign In** on the Snowflake connector.
  </Step>

  <Step title="Enter your Snowflake Account ID">
    The OAuth prompt asks for your Snowflake Account ID.

    To find your Account ID, look at your Snowflake URL:

    ```
    https://app.snowflake.com/myorg/myaccount
    ```

    Take the two parts after `app.snowflake.com/` and join them with a hyphen:

    ```
    myorg-myaccount
    ```

    <Note>
      The URL uses a `/` between the two parts, but the Account ID uses a `-` instead.
    </Note>
  </Step>

  <Step title="Authenticate">
    Snowflake redirects you to the login page. Enter your Snowflake credentials to complete the OAuth flow.
  </Step>
</Steps>

## Start building with your Snowflake data

After connecting, you can use the Snowflake connector with Agent in two ways:

* **Slash command** — Type `/snowflake` in the prompt to use the connector
* **Natural language** — Ask Agent to use your Snowflake data directly

Here is an example prompt:

```
Build me a dashboard using my Snowflake data. Show total revenue
by region with a bar chart, a trend line by quarter, and a table
of top 10 customers. Dark theme, clean and modern.
```

Agent writes and executes SQL queries against your Snowflake data and builds a working application.

## Troubleshooting

<AccordionGroup>
  <Accordion title="Invalid consent request or role blocked error">
    Your Snowflake integration may have roles blocked by default.

    Verify your integration was created with `BLOCKED_ROLES_LIST = ()`. If you already created it without this setting, run:

    ```sql Fix blocked roles theme={null}
    CREATE OR REPLACE SECURITY INTEGRATION REPLIT_OAUTH
      TYPE = OAUTH
      ENABLED = TRUE
      OAUTH_CLIENT = CUSTOM
      OAUTH_CLIENT_TYPE = 'CONFIDENTIAL'
      OAUTH_REDIRECT_URI = 'https://replit.com/connectors/oauth/callback'
      OAUTH_ISSUE_REFRESH_TOKENS = TRUE
      OAUTH_REFRESH_TOKEN_VALIDITY = 7776000
      OAUTH_ALLOW_NON_TLS_REDIRECT_URI = FALSE
      BLOCKED_ROLES_LIST = ()
      COMMENT = 'OAuth integration for Replit connector';
    ```

    If the error persists, check that your default role is not blocked:

    ```sql Set default role theme={null}
    ALTER USER "YOUR_USERNAME" SET DEFAULT_ROLE = 'PUBLIC';
    ```
  </Accordion>

  <Accordion title="404 error on authentication">
    Verify that the redirect URI in your Snowflake integration is exactly:

    ```
    https://replit.com/connectors/oauth/callback
    ```

    Any mismatch causes a 404 during the OAuth flow.
  </Accordion>

  <Accordion title="Invalid scope error">
    Make sure the connector scope in Replit is set to `refresh_token` only. Remove any other scopes like `session:role-any` or `session:role:PUBLIC`.
  </Accordion>

  <Accordion title="Failed to connect error">
    Verify that the Client ID and Client Secret in Replit match what Snowflake generated. Re-check by running:

    ```sql Verify credentials theme={null}
    WITH secrets AS (
      SELECT PARSE_JSON(
        SYSTEM$SHOW_OAUTH_CLIENT_SECRETS('REPLIT_OAUTH')
      ) as creds
    )
    SELECT
      creds:OAUTH_CLIENT_ID::STRING as CLIENT_ID,
      creds:OAUTH_CLIENT_SECRET::STRING as CLIENT_SECRET
    FROM secrets;
    ```
  </Accordion>
</AccordionGroup>

## Related documentation

* [Warehouse Connectors](/replitai/warehouse-connectors) — Overview of all supported warehouse connectors
* [Managing your connectors](/replitai/managing-connectors) — Connector management and configuration
* [Snowflake — Configure OAuth for custom clients](https://docs.snowflake.com/en/user-guide/oauth-custom) — Snowflake's OAuth documentation


# How to use Agent Skills in your projects
Source: https://docs.replit.com/tutorials/agent-skills

Learn how Agent Skills extend what you can build with Replit Agent - what they are, how to apply them, and a framework for getting better results.

Skills are Markdown files that teach Agent new capabilities. They let you share your expertise, preferred patterns, and specialized knowledge with Agent so it produces better, more consistent results - especially for things it wouldn't know how to do well on its own.

<WistiaEmbed title="Master Agent Skills: The game-changing framework for AI-assisted development" />

## Why skills matter

Every time you build with Agent, you create useful context - solutions to problems, design decisions, framework preferences. But that context disappears when the chat ends. Skills preserve it.

A GSAP animation skill teaches Agent how to use a specific library correctly. A design system skill ensures it applies your exact colors and spacing rules. A bug fix skill captures a solution so Agent doesn't repeat the same mistake. Tasks that were previously inconsistent become reliable.

Skills are also an [open standard](https://agentskills.io/specification). They work with any agent - not just Replit Agent - so you can carry them between tools.

## Core primitives

Before diving into skills, it helps to understand the pieces that make up agentic development:

| Primitive       | What it does                                                                                 |
| --------------- | -------------------------------------------------------------------------------------------- |
| **Agents**      | AI that takes action for you - Replit Agent, Claude Code, and others                         |
| **Skills**      | Markdown files that teach agents how to do things (context-efficient, loaded on demand)      |
| **MCP servers** | External processes that expose tools and connect to services (context-heavy, loaded upfront) |
| **Permissions** | Controls what runs and when to ask for approval                                              |

Under the hood, skills are just Markdown files stored in your project's `/.agents/skills` directory. Each skill has a name and description - only the description loads into Agent's context until the skill is actually invoked, which keeps things lightweight.

## Applying skills in a project

Skills become useful the moment you add them to a project. There are three ways to do that.

### Install from the Skills pane

Open the **Skills pane** in your Replit Workspace to browse and install community-contributed skills. Select a skill and it's added to your project's `/.agents/skills` directory automatically.

For example, when building a [portfolio site](https://palmer.gg) with advanced animations, you might install:

* **GSAP React** - Teaches Agent scroll-triggered animations, text reveals, and SVG path drawing
* **Tailwind design system** - Gives Agent knowledge of Tailwind CSS patterns for typography, spacing, and view transitions
* **Find skills** - Teaches Agent how to discover and install new skills on your behalf

<Tip>
  You can also install skills via the [npx skills CLI](https://github.com/vercel-labs/skills):

  ```bash theme={null}
  npx skills <skill> -a replit
  ```
</Tip>

### Create skills through conversation

The most natural way to create a skill is through conversation with Agent. After solving a problem together or researching a new library, ask Agent to capture what it learned:

<AiPrompt>
  Research best practices for GSAP React integration and create a skill for this project.
</AiPrompt>

Agent uses the full conversation context to write a detailed skill file. This works particularly well after debugging sessions where you've built up shared understanding of a problem.

### Write custom skills

For advanced use cases, write skills directly following the [Agent Skills specification](https://agentskills.io/specification). Toggle **Show Hidden Files** in the file sidebar, open `/.agents/skills/`, and create a new Markdown file. This gives you complete control over what Agent knows and how it behaves.

## Proactive vs. reactive skills

This is a framework for thinking about when and how to create skills. Understanding both patterns makes you more effective.

### Proactive skills

Proactive skills are ones you add *before* you start building. You research the libraries or patterns you want to use, find or create skills for them, and then start prompting.

**Real example:** Before building a portfolio site with handwritten SVG animations, you research animation libraries and find GSAP. You install a GSAP React skill, then prompt Agent to build the animations. Agent has the specialized knowledge it needs from the start - it understands the library's API, best practices, and common patterns. Without the skill, it might produce something generic or incorrect.

This pattern works well when:

* You're using a library that's popular but has nuanced patterns Agent may not nail on its own
* You want consistent design choices across the project (typography, spacing, animation style)
* You're starting a project and already know the technical direction

### Reactive skills

Reactive skills are ones you create *after* solving a problem. You encounter an issue, debug it with Agent, fix it, and then capture the solution so it doesn't happen again.

**Real example:** While building a canvas for a mobile app, you notice jagged edges on images that get worse when zooming in. Debugging with Agent reveals this is minification aliasing - a rendering issue where images look worse as they shrink, counterintuitively. After implementing a fix, you ask Agent to create a skill:

<AiPrompt>
  Create a skill that captures what we just learned about fixing minification aliasing. Include the root cause, the solution, and when this issue typically occurs so you can prevent it in the future.
</AiPrompt>

Agent uses the conversation history to write a project-specific skill. Next time the issue comes up, you can point Agent to the skill instead of debugging from scratch.

This pattern works well when:

* You've fixed a non-obvious bug and want to prevent it from recurring
* You've learned something about your app's architecture during a debugging session
* You want to encode a solution that took significant effort to discover

## Being selective with skills

Think of skills like directions you'd give a friend to find your apartment. A targeted list of instructions works. A binder full of documentation doesn't - nobody has time to read that, and the important details get lost.

The same applies to Agent. If you add too many skills, Agent can get confused. Be deliberate about which skills you enable for a given project, and remove ones you no longer need.

<Note>
  Skills work best when they capture specific, repeatable patterns rather than general guidance. Focus on concrete workflows, established conventions, and proven solutions.
</Note>

## Security considerations

Skills from the Replit Skills pane are audited for safety. But skills can be installed from anywhere—they come from an [open source repository](https://github.com/vercel-labs/skills) where anyone can contribute.

Since skills are instructions that Agent follows, a malicious skill could tell Agent to exfiltrate sensitive data from your project. Before installing any skill from an external source:

1. **Open the file** - Skills are just markdown. Read the contents in `/.agents/skills/` before using them.
2. **Check the source** - Verify the skill comes from a trusted repository or author.
3. **Review what it instructs** - Make sure the skill doesn't reference suspicious external URLs or request sensitive information.

<Warning>
  Always review skills from external sources before installing them. Skills in the Replit Skills pane have been audited, but skills installed via CLI or copied from the internet have not.
</Warning>

## Skills vs. MCP servers

These are the two main ways to extend agents in 2026, and they serve different purposes.

**Skills** are context-efficient. Only a brief description loads until the skill is invoked. Use skills for:

* Workflows and conventions ("how to deploy," "code review checklist")
* Reference materials (API patterns, style guides, design systems)
* Reusable prompts and specialized knowledge (animation libraries, framework patterns)

**MCP servers** are context-heavy. All tool descriptions load upfront, which can degrade output quality if you add too many. Use MCP servers for:

* Connecting to external services (Notion, Linear, Figma)
* Actions that need API access
* Tools that *do* things, not just instruct

The key distinction: skills define *how* your agent should work. MCP servers define *what* your agent can access. Both work for coding agents like Replit Agent and for agents you build yourself with tools like the [Claude Agent SDK](/tutorials/claude-agent-sdk).

## Next steps

* Read the [Agent Skills reference](/core-concepts/agent/skills) for technical details on skill structure and management
* Browse community skills at [skills.sh](https://skills.sh)
* Review the [Agent Skills specification](https://agentskills.io/specification) to write your own
* Learn more about [Agent](/core-concepts/agent) and how it builds applications
* Explore [MCP servers on Replit](/replitai/mcp/overview) for connecting Agent to external services


# Build a Notion-powered website
Source: https://docs.replit.com/tutorials/build-a-notion-powered-website

Learn how to build a website that uses Notion as a Content Management System (CMS) with Replit Agent.

## Build a Notion-powered blog with Replit Agent

Notion is a powerful tool for organizing information, and it excels as a Content Management System (CMS). By integrating Notion with Replit, you can manage your website's content—like blog posts, portfolio items, or product listings—directly from your Notion workspace.

Replit, powered by [Replit Agent](/core-concepts/agent), handles the coding, hosting, and deployment, letting you go from idea to a published application quickly. Effective prompting is key to guiding Agent; for a comprehensive guide, see [Efficient prompting with Replit AI](/tutorials/effective-prompting) and [How to vibe code effectively](/tutorials/how-to-vibe-code).

<WistiaEmbed title="Vibe coding a custom website with Notion as a CMS" />

This tutorial guides you through building a minimalistic blog that pulls its posts from a Notion table. You will:

* Use Replit Agent to generate the initial application
* Connect your Replit app to a Notion database
* Learn to guide the AI and troubleshoot common issues using effective prompting techniques
* Publish your blog for the world to see

<Frame>
  <img alt="Screenshot of the final Notion-powered blog application with minimalist design" />
</Frame>

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](/core-concepts/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.

<Steps>
  <Step title="Create a Notion integration">
    1. In Notion, go to **Settings & members** (usually in the top-left sidebar).
    2. Navigate to **Connections** (previously "Integrations").
    3. Select **Develop or manage integrations**.
    4. Select **+ New integration**.

    <Frame>
      <img alt="Notion developer portal showing the New integration button" />
    </Frame>

    5. Name your integration (e.g., "My Replit Blog Integration").
    6. Associate it with your desired workspace.

    <Frame>
      <img alt="Notion integration configuration screen with name and workspace selection" />
    </Frame>

    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.

    <Frame>
      <img alt="Notion integration secrets page showing the integration token" />
    </Frame>

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

    <Info>
      Create a new integration for each project to manage permissions granularly. This is a security best practice.
    </Info>

    For more detailed instructions, refer to [Notion's official documentation on creating an integration](https://developers.notion.com/docs/create-a-notion-integration).

    You can directly access Notion's integrations dashboard at [notion.so/my-integrations](https://notion.so/my-integrations).
  </Step>

  <Step title="Create a Notion page with a database">
    1. Create a new page in Notion for your blog content.
    2. On this page, add a new **Table** database.
    3. Name your table (e.g., "Blog Posts").
    4. Define columns for your posts. **Specify** these clearly in your mind, as you'll soon tell Agent about them:
       * `Title` (Text, default title property)
       * `Body` (Text, for main post content)
       * `Slug` (Text, for URL-friendly identifiers)
       * `PublishedDate` (Date, or use "Created time" / "Last edited time")
       * `ReadingTime` (Text or Number, e.g., "5 min read")
       * `Description` (Text, short summary for previews)

    <Frame>
      <img alt="Notion database configured with columns for blog posts" />
    </Frame>

    5. Add a few sample posts. You can use Notion's AI features to help generate content!
  </Step>

  <Step title="Connect your integration to the page">
    1. Open the Notion page containing your database.
    2. Click the **•••** (three dots) menu in the top-right corner.

    <Frame>
      <img alt="Notion connections menu showing how to add your integration to the page" />
    </Frame>

    3. Select **+ Add connections**.
    4. Search for and select the integration you created (e.g., "My Replit Blog Integration").

    <Frame>
      <img alt="Notion page showing the three dots menu to add integrations" />
    </Frame>

    5. Confirm the connection. This allows Replit (via the integration token) to access this page and its database.
  </Step>
</Steps>

## Step 2: Prompt Replit Agent

With Notion set up, let's get Replit Agent to build our blog's foundation. **Plan before you prompt**: a clear outline of features leads to more focused prompts.

<Steps>
  <Step title="Open Replit Agent">
    Navigate to the Replit homepage and open **Agent**.
  </Step>

  <Step title="Write your prompt">
    Provide Agent with a detailed prompt. **Simplify** your language, but be **specific** about requirements, constraints, and desired outputs. Here's an example:

    ```text theme={null}
    Help me create a hyper-minimalistic blog using Notion as a CMS.
    The blog should pull posts from a Notion page.
    The table on the Notion page has the following columns: Title, Body, Slug, PublishedDate, ReadingTime, Description.
    You should generate a slug for each post based on its title if the Slug column is empty.
    Make the blog theme black with white text. Keep it extremely minimal.
    The posts should be listed on the homepage, and clicking a post should navigate to a page displaying the full post content.
    ```

    <Tip>
      For more tips on writing effective prompts, see our guide on [Efficient prompting with Replit AI](/tutorials/effective-prompting).
      You can also **show** Agent what you mean by providing a URL to scrape for initial styling or content ideas (e.g., your personal portfolio) by adding: `Scrape the content of [URL] for initial design inspiration and placeholder text.`
    </Tip>

    Agent will generate a plan. Review it to ensure it aligns with your expectations, then approve it. This is your first **checkpoint** in the AI-assisted building process.
  </Step>

  <Step title="Review the initial preview">
    Agent will then generate a visual preview. Check if the basic layout and styling are heading in the right direction. Refinements will come later.
  </Step>
</Steps>

## Step 3: Connect Replit to Notion with Secrets

Agent will likely need your Notion integration details to fetch data.

<Steps>
  <Step title="Add Secrets in Replit">
    Typically, you'll need:

    1. `NOTION_API_KEY`: Your Internal Integration Secret from Step 1.
    2. `NOTION_DATABASE_ID`: The ID of your Notion database.

    **How to find your Notion Database ID:**

    * Open your Notion page with the database in a browser.
    * The URL might be `https://www.notion.so/your-workspace/PAGE_TITLE-PAGE_ID?v=DATABASE_VIEW_ID`. The `PAGE_ID` is often the database ID if the database is the page's main element.
    * **More reliably**: Click the **•••** menu on your database view, select **Copy link to view**, and paste it. The link `https://www.notion.so/your-workspace/DATABASE_ID?v=VIEW_ID` contains the `DATABASE_ID` before `?v=`.

    Go to the **Secrets** tool (🔒 icon) in your Replit Workspace. Add these:

    * Key: `NOTION_API_KEY`, Value: `[Your_Notion_Integration_Secret]`
    * Key: `NOTION_DATABASE_ID`, Value: `[Your_Notion_Database_ID]`

    <Frame>
      <img alt="Replit Secrets tool with Notion API key and Database ID added" />
    </Frame>

    Agent should automatically use these secrets and attempt to connect. The app will likely restart.
  </Step>
</Steps>

## Step 4: Debugging and refining with Agent

Building with AI is iterative. Expect errors or imperfections. This is where guiding the AI effectively—often called "vibe coding"—is key. For a deeper dive into this skill, check out our tutorial on [How to vibe code effectively](/tutorials/how-to-vibe-code). **Master context** by providing only relevant information for each debugging step.

<Tip>
  Keep the **Console** in your Replit Workspace open. It provides valuable error messages and logs.
</Tip>

<Frame>
  <img alt="Replit Console showing error messages while debugging the Notion integration" />
</Frame>

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.

<Note>
  Don't hesitate to examine Agent-generated code. Even without expertise in the language, you can often spot logical issues or understand data flow, helping you write better prompts. Files like `notionService.js` usually handle Notion API calls.
</Note>

## Step 5: Further enhancements

Once core functionality works, ask Agent to add features. Use positive, direct language (**Instruct** principle). Here are ideas:

<AccordionGroup>
  <Accordion title="Implement caching and prefetching">
    Ask Agent: "Implement post caching and prefetching from Notion for a super-fast site."
    This reduces Notion API calls and speeds up page loads.
  </Accordion>

  <Accordion title="Enhance styling">
    Ask Agent: "Add a hover effect to homepage blog post links." or "Improve post typography for readability."
    Small visual tweaks significantly improve user experience. You can **show** Agent examples of styles you like.
  </Accordion>

  <Accordion title="Configure data refresh strategy">
    Consider how often to fetch new Notion data. For simple blogs, on page load or server restart might be enough.
    For dynamic content, ask Agent: "Explore options to auto-refresh Notion posts hourly." This might involve background polling (adds complexity but keeps content current).
  </Accordion>
</AccordionGroup>

## Step 6: Publish your website

Happy with your site? Time to share it!

1. Select **Publish** in the Replit Workspace (top right).
2. Review publishing settings (project name, tier). For more details, see [About Deployments](/cloud-services/deployments/about-deployments).
3. Select **Publish**.

<Frame>
  <img alt="Replit publishing interface showing how to publish your Notion-powered website" />
</Frame>

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](/core-concepts/agent/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:

<AccordionGroup>
  <Accordion title="Experiment with content types">
    Try adding diverse content from Notion: image galleries, embedded videos, or categorized items.
  </Accordion>

  <Accordion title="Leverage advanced Notion features">
    Explore Notion's formulas, rollups, and relations for complex data structures. Work with Agent to display this rich data on your Replit site.
  </Accordion>

  <Accordion title="Combine with other Replit integrations">
    Enhance your app by merging Notion data with other [Replit AI](/core-concepts/how-replit-works) tools or [Agent integrations](/replitai/integrations). For example, use Replit Auth for private content or OpenAI for AI-generated summaries from Notion data within your app.
  </Accordion>
</AccordionGroup>

Happy building! We can't wait to see what you create.


# Build and launch a mobile app
Source: https://docs.replit.com/tutorials/build-and-launch-a-mobile-app

Build a native iOS app with Agent, test it on your phone with Expo Go, and publish through TestFlight to the App Store.

## What you’ll do

In this tutorial, you’ll:

* Create a mobile app from a prompt with Agent
* Preview it locally on your phone with Expo Go
* Publish to Expo Go so anyone can access your app
* Promote to TestFlight for beta testing
* Submit to the App Store for public release

<Note>
  Apple sets the requirements for TestFlight and App Store submissions. You’ll use App Store Connect to manage testing and releases.
</Note>

## What you’ll need

* A Replit account with access to mobile apps
* A phone with Expo Go installed
* An Apple Developer Program membership (required by Apple for TestFlight and the App Store)

## Part 1: Build your app with Agent

<Steps>
  <Step title="Create a mobile app">
    On the Replit home screen, describe what you want to build, then select **Mobile app** as the app type.
  </Step>

  <Step title="Let Agent build">
    Agent scaffolds your project and builds your first version. Keep the chat open to follow progress and request changes.
  </Step>
</Steps>

## Part 2: Test on your phone with Expo Go

Expo Go runs a native preview of your app on your device.

<Steps>
  <Step title="Install Expo Go">
    Install Expo Go on your iPhone or Android device.
  </Step>

  <Step title="Open the QR code">
    In your Workspace, select **Preview on mobile device** to display a QR code.
  </Step>

  <Step title="Scan and preview">
    Scan the QR code with your phone to open a native preview in Expo Go.
  </Step>
</Steps>

<Frame>
  <img alt="Mobile app running in the Replit Workspace preview with the Preview on device panel and QR code" />
</Frame>

<Tip>
  If your preview looks out of date, refresh in Expo Go. On your device, shake your phone to open the developer menu, then select **Refresh**.
</Tip>

## Part 3: Publish to Expo Go

Publishing to Expo Go makes your app available to anyone with the Expo Go app installed. This is the fastest way to share your app for feedback without going through Apple's review process.

<Steps>
  <Step title="Publish from your Workspace">
    Open the publishing pane and select **Publish**. This deploys your app and backend to Replit's infrastructure.
  </Step>

  <Step title="Share your app">
    After publishing, anyone with Expo Go can open your app using the shareable link. No Apple Developer account is required at this stage.
  </Step>
</Steps>

<Tip>
  Use Expo Go publishing to quickly share prototypes, gather early feedback, and iterate before committing to the App Store process.
</Tip>

## Part 4: Promote to TestFlight

After publishing to Expo Go, you can promote your app to TestFlight for more formal beta testing. TestFlight requires an Apple Developer account but provides a native app experience without Expo Go.

### Apple publishing prerequisites

Apple requires specific accounts and configurations before you can publish. Complete these steps before attempting to submit.

#### Join the Apple Developer Program

You need an Apple Developer Program membership to publish to TestFlight and submit to the App Store.

<Callout type="note">
  Apple requires two-factor authentication on your Apple Account.
</Callout>

#### Individual vs. organization enrollment

* **Individual accounts**: Publish under your legal name as the seller.
* **Organization accounts**: Publish under the organization name as the seller. Apple requires a D‑U‑N‑S Number for organizations, which can take time to obtain.

#### Typical enrollment steps

1. Sign in at `https://developer.apple.com/programs/enroll/`
2. Complete identity verification
3. Accept the Apple Developer Program license agreement
4. Pay the annual fee set by Apple
5. Wait for Apple approval (time varies by account type)

### Understand TestFlight vs. the App Store

TestFlight is Apple’s beta testing system. The App Store is the public marketplace where anyone can download your app.

| Aspect             | TestFlight                                        | App Store                                |
| ------------------ | ------------------------------------------------- | ---------------------------------------- |
| **Audience**       | Invited testers (up to 10,000 external testers)   | Public                                   |
| **Purpose**        | Beta testing and feedback                         | Public release                           |
| **Review**         | First build of a version goes through beta review | Every submission goes through App Review |
| **Build lifetime** | Expires after 90 days                             | Permanent until you remove it            |

<Tip>
  TestFlight is the fastest way to catch crashes, performance issues, and device-specific problems before launch.
</Tip>

<Steps>
  <Step title="Open the publishing pane">
    With your app already published to Expo Go, open the publishing pane in your Workspace.
  </Step>

  <Step title="Select App Store publishing">
    Select **Publish to App Store** to promote your app to TestFlight.
  </Step>

  <Step title="Connect Apple and submit">
    Sign in with your Apple Developer account when prompted. Replit builds a native app in the cloud and submits it to TestFlight.
  </Step>
</Steps>

<Note>
  The first build of a version typically requires a TestFlight beta review. After approval, you can usually push additional builds to testers faster.
</Note>

### Enable external testing

To share your TestFlight build with other people, configure external testing in App Store Connect:

1. In App Store Connect, open your app.
2. Go to **TestFlight**, then **External Testing**.
3. Create a testing group and add your build.
4. Submit for Beta App Review (required by Apple for external testers).
5. Share the public TestFlight link after approval.

## Part 5: Submit to the App Store

When your build is ready for release, submit it through App Store Connect:

1. In App Store Connect, open your app.
2. Go to the **App Store** tab.
3. Fill out required metadata (description, screenshots, category, pricing, and privacy details).
4. Select your TestFlight build to promote.
5. Submit for review.

### Complete your App Store Connect listing

Replit creates your app listing in App Store Connect, but you still need to complete required metadata before Apple will accept a submission. The following fields are commonly required:

* **App name and subtitle**
* **Category** (primary, optional secondary)
* **Pricing and availability** (free or paid, and regions)
* **Privacy policy URL** (publicly accessible)
* **App Privacy details** (data collection “nutrition labels”)
* **Screenshots** (required)
* **Support URL** (required)
* **App Review contact information** (required)

<Callout type="note">
  If your app requires sign-in, add demo credentials for App Review in App Store Connect so Apple can test your app.
</Callout>

### Privacy requirements

Apple requires you to:

* Provide a public **privacy policy URL**
* Declare your **App Privacy** data practices (including third-party SDKs and services you use)

If you use third-party services (analytics, payments, crash reporting, ads), review their privacy disclosures and include them in your App Privacy answers.

### Screenshots

Screenshots are required and strongly influence conversion on the App Store.

<Tip>
  Use real screenshots from your app. Make sure screenshots match the current build you’re submitting.
</Tip>

### Common rejection reasons

| Issue                             | How to avoid it                                             |
| --------------------------------- | ----------------------------------------------------------- |
| Crashes or obvious bugs           | Test on TestFlight first and fix issues before submission   |
| Missing privacy policy            | Add a public privacy policy URL before submission           |
| Screenshots don’t match the app   | Upload screenshots from the current build                   |
| Reviewers can’t access the app    | Provide demo credentials and instructions in review notes   |
| Incomplete or placeholder content | Remove “coming soon” flows and incomplete screens           |
| Permission prompts lack context   | Explain why you need camera, location, or other permissions |

### Timelines to expect

| Stage                                             | Typical duration                                                  |
| ------------------------------------------------- | ----------------------------------------------------------------- |
| Apple Developer Program approval                  | Varies (often 1–2 days for individuals; longer for organizations) |
| Build processing in App Store Connect             | Often 10–15 minutes                                               |
| TestFlight beta review (first build of a version) | Often about a day                                                 |
| App Store review                                  | Often 1–2 days                                                    |

### Updating your app after launch

* **UI and content updates**: Publish again to release updates quickly.
* **Native changes** (for example, app icons or permissions): Submit a new App Store build.

## Checklist

Use this checklist to verify you're ready for each stage.

**Before you publish to Expo Go:**

* You can run the app on a real device via Expo Go
* Your app has no obvious crashes or broken flows

**Before you promote to TestFlight:**

* Your app is published and running on Replit
* You have an Apple Developer Program membership
* You know whether your Apple account is individual or organization

**Before you submit to the App Store:**

* App Store Connect metadata is complete (name, category, regions, and support URL)
* Privacy policy URL is public and accurate
* App Privacy details are complete (including third-party services)
* Screenshots are uploaded and match the submitted build
* App Review contact info is set
* Demo credentials are provided (if your app requires sign-in)

## Next steps

* Learn how mobile apps work on Replit: [Native Mobile Apps](/replitai/building-mobile-apps)
* Learn how Agent works: [Agent](/core-concepts/agent)
* Build on your phone: [Replit Mobile App](/platforms/mobile-app)
* Learn more about Expo: [Expo docs](https://docs.expo.dev/)


# Build and publish a Claude Agent SDK app
Source: https://docs.replit.com/tutorials/claude-agent-sdk

Learn how to build and publish autonomous AI agents using the Claude Agent SDK and Replit, with a step-by-step Todoist automation example.

The [Claude Agent SDK](https://docs.anthropic.com/en/docs/agents-and-tools/claude-code/sdk) is Claude Code as a library. It lets you programmatically create the same agents that power Claude Code, then execute them as code. Turn repetitive tasks into automated workflows and publish them on Replit.

<WistiaEmbed title="Build and publish a Claude Agent SDK app on Replit" />

In this tutorial, you build an agent that organizes a Todoist inbox—fetching tasks, applying labels, and sorting them into projects—then publish it to run on a schedule.

## What you'll learn

* How the Claude Agent SDK works and when to use it
* Core primitives: agents, tools, MCP servers, skills, and permissions
* How to build a task automation agent on Replit using [Integrations](/replitai/integrations)
* How to publish your agent on a schedule with [Scheduled Deployments](/cloud-services/deployments/scheduled-deployments)

## Prerequisites

* A [Replit](https://replit.com) account (Core or Pro plan recommended for Deployments)
* An [Anthropic API key](https://console.anthropic.com/)
* A [Todoist](https://todoist.com) account (or another service you want to automate)

## How the Claude Agent SDK works

An agent is a loop: you send a prompt, the agent picks tools to execute, observes the results, and repeats until the task is complete.

You provide the prompt. The SDK handles the loop.

But the SDK goes further. It lets you build **multi-agent architectures** where an orchestrator agent delegates tasks to specialized sub-agents, each with their own tools and context windows.

<Tip>
  Multi-agent architectures keep each agent focused. Sub-agents get only the tools and context they need, which prevents context bloat and improves performance.
</Tip>

### Core primitives

| Primitive       | What it does                                                                                        |
| --------------- | --------------------------------------------------------------------------------------------------- |
| **Query loop**  | The foundation: prompt, pick tools, execute, observe, repeat                                        |
| **Agents**      | Specialized configurations with their own tools and instructions                                    |
| **Tools**       | Actions agents can take—run commands, call APIs, edit files                                         |
| **MCP servers** | External processes that expose collections of tools (context-heavy, loaded upfront)                 |
| **Skills**      | Markdown instruction files that teach agents how to do things (context-efficient, loaded on demand) |
| **Permissions** | Granular controls over what each agent can access and execute                                       |

### Skills vs. MCP servers

These are the two main ways to extend your agents:

**Skills** are markdown files with instructions your agent follows. Only a brief description loads until invoked, keeping the context window lean. Use skills for:

* Workflows and conventions ("how to deploy," "code review checklist")
* Reference materials (API patterns, style guides)
* Reusable prompts triggered by name

**MCP servers** are processes that expose tools. All tool descriptions load upfront, making them context-heavy. Use MCP servers for:

* Connecting to external services (Notion, Linear, databases)
* Actions that need API access (create tasks, query data)
* Tools that *do* things, not just instruct

<Info>
  Skills define *how* your agent should work. MCP servers define *what* your agent can access. Both work for coding agents (like Replit Agent) and agents you build with the SDK.
</Info>

### When to use the SDK vs. the API

| Use case                    | Choose           |
| --------------------------- | ---------------- |
| Automating multi-step tasks | Claude Agent SDK |
| Multi-agent workflows       | Claude Agent SDK |
| Simple chat apps            | Anthropic API    |
| Single-turn tasks           | Anthropic API    |

## Build a Todoist organizer agent

This walkthrough uses a Replit template that scaffolds a Claude Agent SDK project with the right structure—agents, tools, MCP servers, skills, and permissions directories already in place.

### Step 1: Remix the template

<Steps>
  <Step title="Open the template">
    Open the [Claude Agent SDK template](https://replit.com/@matt/Claude-Agent-SDK) on Replit and select **Remix** to create your own copy.
  </Step>

  <Step title="Name your project">
    Give it a descriptive name (e.g., "My Todoist Agent") and select **Use Template**.
  </Step>

  <Step title="Review the project structure">
    Once the environment loads, open the file sidebar. Toggle **Show Hidden Files** if needed to see the full structure:

    * `.agents/skills/` — Skills that teach Replit Agent how to build Claude Agent SDK apps
    * `src/agents/` — Agent definitions
    * `src/mcpServers/` — MCP server configurations
    * `src/permissions/` — Permission definitions
    * `src/skills/` — Skills for your agents (markdown files)
    * `src/tools/` — Custom tool definitions
  </Step>
</Steps>

<Tip>
  The template includes a skill that teaches Replit Agent how to build Claude Agent SDK apps. This means Agent already understands the framework when you prompt it.
</Tip>

### Step 2: Connect Todoist via Replit Integrations

Before prompting Agent, connect the service your agent needs to interact with.

1. Go to **replit.com/integrations** in your Replit account.
2. Find **Todoist** and connect your account.
3. Authorize Replit to access your Todoist data.

<Info>
  Replit Integrations handle OAuth and authentication for you. Your agent can access the Todoist API without managing tokens directly. This is simpler than configuring a separate MCP server that requires its own OAuth flow.
</Info>

### Step 3: Prompt Agent to build your agent

Switch Replit Agent into **Plan Mode** for best results—it reviews the plan before building, giving you a chance to verify the approach.

<AiPrompt>
  Use the Claude Agent SDK skill. Build an agent that looks at my Todoist inbox and organizes my tasks by applying relevant labels or supporting information.

  You should create tools that allow the agent to interact with Todoist using the SDK.

  The result should be an agent that, when triggered, loads all tasks and available projects, polishes them, then organizes them appropriately.

  Be sure to use the Replit Todoist integration for all authentication. Use custom tools with the Todoist REST API rather than the Todoist MCP server, since the MCP server requires OAuth which doesn't work in this context.

  The agent should also fetch a list of projects and assign a relevant project to each item in my inbox, clearing the inbox completely.
</AiPrompt>

<Note>
  The final two paragraphs of this prompt were added after debugging. Being specific about *how* to authenticate (Replit Integrations, not MCP OAuth) and *what* the end state should look like (inbox completely cleared) saves iteration time.
</Note>

### Step 4: Review the plan and build

When Agent presents its plan, verify it includes:

1. **Custom tools** for the Todoist API (not the Todoist MCP server)
2. **An organizer agent** that fetches tasks, labels, and projects
3. **Proper permissions** scoped to the tools your agent needs
4. **An entry point** that triggers the workflow

Once satisfied, approve the plan, set Agent to **high autonomy**, and let it build.

### Step 5: Add your Anthropic API key

The Claude Agent SDK requires an Anthropic API key to call Claude.

1. Open the **Secrets** pane in your Replit Workspace.
2. Add a secret named `ANTHROPIC_API_KEY` with your API key value.

<Info>
  If you've saved your Anthropic API key in your [Replit vault in Settings](https://replit.com/settings), it's automatically available across all your projects.
</Info>

### Step 6: Test and debug

Run the agent and verify it processes your Todoist inbox correctly. Common issues to watch for:

* **"Inbox is empty" when it's not** — The API response format for detecting inbox tasks may need adjustment. Check that the agent filters tasks by the inbox project, not a different property.
* **Tasks get labels but don't move to projects** — Be explicit in your prompt that the agent should fetch available projects and assign each task to one.
* **Authentication errors** — Verify the Todoist integration is connected in Replit Integrations and that your agent code uses it (not a separate OAuth flow).

<Tip>
  Debugging is part of building with AI. When something doesn't work, look at the output, identify *what* the agent did differently than expected, and provide a more specific prompt. Each correction teaches you what to include upfront next time.
</Tip>

## Publish your agent

Once your agent works correctly, publish it to run automatically.

<Steps>
  <Step title="Open the Publish tab">
    In your Replit Workspace, select the **Publish** tab.
  </Step>

  <Step title="Choose Scheduled Deployment">
    Select **Scheduled Deployment** for time-based automation. Enter your desired schedule (e.g., "Every day at 5pm PST").
  </Step>

  <Step title="Verify configuration">
    Confirm the run command points to your main entry point file and that your `ANTHROPIC_API_KEY` secret is included in the deployment secrets.
  </Step>

  <Step title="Publish">
    Select **Publish**. Your agent is now live and runs on schedule.
  </Step>
</Steps>

For agents that need to respond to events (webhooks, incoming messages), use a [Reserved VM Deployment](/cloud-services/deployments/reserved-vm-deployments) instead.

## Extend your agent

Once the basics work, you can build more sophisticated agents on Replit:

* **Add persistent memory** — Use [Replit Database](/cloud-services/storage-and-databases/sql-database) to store state between runs
* **Store files** — Use [App Storage](/cloud-services/storage-and-databases/object-storage) for file-based data
* **Connect more services** — Add more [Integrations](/replitai/integrations) (Slack, Linear, GitHub, Notion) for multi-service workflows
* **Use skills** — Add markdown skill files to give your agents specialized knowledge and instructions

## Next steps

* Explore the [Claude Agent SDK documentation](https://docs.anthropic.com/en/docs/agents-and-tools/claude-code/sdk) for the full API reference
* Learn about [Agents & Automations](/core-concepts/agent/agents-and-automations) for building chatbots and event-driven workflows on Replit
* Read about [Scheduled Deployments](/cloud-services/deployments/scheduled-deployments) and [Reserved VM Deployments](/cloud-services/deployments/reserved-vm-deployments) for deployment options
* Check out the [Claude Agent SDK template](https://replit.com/@matt/Claude-Agent-SDK) to start building


# Design vs. App Mode
Source: https://docs.replit.com/tutorials/design-vs-build-mode

Learn the difference between Design and App modes in Replit, and when to use each for your projects.

Replit offers two ways to create apps: **Design Mode** and **App Mode**. The best part? You can use them together—start with a beautiful design, refine it, then convert to a fully functional app when you're ready.

## What is Design Mode?

[Design Mode](/replitai/design-mode) lets you create beautiful, interactive websites and app designs in just a few minutes. Simply describe your idea and Replit builds it for you.

Design Mode is perfect for:

* **Testing your ideas quickly**: Visualize your app's design before building functionality
* **Creating polished websites**: Landing pages, portfolios, restaurant menus, event pages
* **Fine-tuning your design**: Adjust colors, layouts, and content instantly

<Info>
  Design Mode apps look and feel like real apps, but they don't store data or connect to external services yet. When you're happy with how everything looks, you can convert your design into a full app with one click. The steps below show you how.
</Info>

## What is App Mode?

App Mode creates real, working applications that can save data, let people sign in, and connect to other services.

Use App Mode when your app needs to:

* **User accounts**: Let people create accounts and log in
* **Save information**: Store data like orders, messages, or user preferences
* **Connect to other services**: Process payments, send emails, or pull in data from other apps
* **Handle complex tasks**: Run an online store, manage bookings, or power a dashboard

## See the difference in action

This comparison shows the same restaurant menu built in both modes using an identical prompt. Switch between tabs to see what each mode created:

<Card>
  <Tabs>
    <Tab title="Design Mode">
      <Frame>
        <video aria-label="Design Mode restaurant menu example showing polished design with elegant typography built in one minute" />
      </Frame>

      <Info>
        **Design Mode** — Built in 1 minute
      </Info>

      * Beautiful, polished design
      * Elegant typography and layout
      * Perfect for showcasing your vision
      * Static menu (no ordering functionality)
    </Tab>

    <Tab title="App Mode">
      <Frame>
        <video aria-label="App Mode restaurant menu example showing fully functional ordering system with database built in seven minutes" />
      </Frame>

      <Info>
        **App Mode** — Built in 7 minutes
      </Info>

      * Simple design
      * Fully functional ordering system
      * Database for orders and inventory
      * Ready for production use
    </Tab>
  </Tabs>
</Card>

## Using both modes together

**Design Mode and App Mode are built to work together**. You don't have to choose one or the other. You can start with design and evolve into a full app.

<Steps>
  <Step title="Design first">
    Start in Design Mode to quickly visualize your idea. Focus on how your app looks and feels—the layout, colors, buttons, and user experience.
  </Step>

  <Step title="Refine and iterate">
    Use the [Visual Editor](/replitai/visual-editor) to click directly on elements and adjust them, or chat with Agent to describe changes you want. The changes will appear immediately.

    <Frame>
      <video aria-label="Demonstration of using the select element tool to click and adjust design elements" />
    </Frame>
  </Step>

  <Step title="Convert to a full app">
    When you're happy with your design and ready to add real functionality, click the **Design** button on the top left, then click **"Convert to App"** in the menu. Agent will add the ability to save data, handle user accounts, and connect to services—all while keeping your design intact.

    <Frame>
      <video aria-label="Demonstration of converting a Design Mode project to App Mode by clicking Design button and selecting Convert to App" />
    </Frame>

    <Note>
      Agent will prompt you to convert to App Mode when you try to add a database or advanced features.
    </Note>
  </Step>

  <Step title="Publish and share">
    Once your app is built, publish it so anyone can access it online. Replit handles all the technical infrastructure so your app works reliably for your audience.
  </Step>
</Steps>

## When to use each mode

<CardGroup>
  <Card title="Start with Design Mode" icon="paintbrush">
    * You want to see your idea quickly
    * You're creating a simple website
    * You want to test different designs
    * Speed is your priority
  </Card>

  <Card title="Go straight to App Mode" icon="cube">
    * You know exactly what you need
    * Your app must save data from day one
    * People need to log in
    * You're connecting to other services
  </Card>
</CardGroup>

<Tip>
  **Not sure which to pick?** Start with Design Mode. It's faster, and you can always convert to App Mode later. Your work is never wasted—it carries over when you upgrade.
</Tip>

## Key differences

| Feature                    | Design Mode                 | App Mode                           |
| -------------------------- | --------------------------- | ---------------------------------- |
| **Speed**                  | A few minutes               | About 10 minutes for complete apps |
| **Data storage**           | Visual only (no saving)     | Saves and retrieves real data      |
| **User accounts**          | Shows what login looks like | Actual login functionality         |
| **Connecting to services** | Not available               | Payments, emails, external data    |
| **Hosting**                | Simple static hosting       | Scales with your audience          |

## Next steps

<CardGroup>
  <Card title="Design Mode" icon="paintbrush" href="/replitai/design-mode">
    Learn more about creating designs
  </Card>

  <Card title="Visual Editor" icon="edit" href="/replitai/visual-editor">
    Make visual changes with clicks
  </Card>

  <Card title="Agent" icon="robot" href="/core-concepts/agent">
    Explore what Agent can build for you
  </Card>

  <Card title="Learn" icon="graduation-cap" href="https://learn.replit.com">
    Learn the complete workflow
  </Card>
</CardGroup>


# Efficient prompting with Replit AI
Source: https://docs.replit.com/tutorials/effective-prompting

Learn principles and see examples for writing effective prompts when using Replit Agent.

Effective prompting is about giving clear instructions to a capable assistant. Guide [**Agent**](/core-concepts/agent) well, and you'll go from idea to app fast.

<WistiaEmbed title="10 tips for better vibe coding" />

## Quick examples

See the difference between vague and effective prompts:

<AccordionGroup>
  <Accordion title="Fixing code" icon="bug">
    **Vague:** "Fix my code."

    **Effective:** "My script fails when processing user input. The error seems to be in the validation function. Can you help debug the `validate_input` part? Here's the error message: \[details]"

    The effective prompt identifies the problem area, suspected function, and provides context.
  </Accordion>

  <Accordion title="Building features" icon="hammer">
    **Vague:** "Make a website."

    **Effective:** "Create a simple portfolio website with sections for Home, About Me, and Contact Form. Use a clean, modern design theme and placeholder content."

    The effective prompt defines the purpose, core features, and desired aesthetic.
  </Accordion>

  <Accordion title="Performance improvements" icon="gauge-high">
    **Vague:** "Don't make it slow."

    **Effective:** "Refactor the data processing function to handle larger inputs more efficiently. Could we use a different algorithm or data structure?"

    Tell Agent *how* to improve rather than using negative constraints.
  </Accordion>

  <Accordion title="UI changes" icon="paintbrush">
    **Vague:** "Add animation."

    **Effective:** "Animate the main image on the landing page so it gently fades in when the page first loads to create a welcoming effect."

    Identify the specific element, desired effect, timing, and intended experience.
  </Accordion>

  <Accordion title="Complex systems" icon="server">
    **Vague:** "Build the backend."

    **Effective:** "Set up the server-side logic. Implement user authentication (signup/login) and create an API endpoint to retrieve user profile data securely."

    Break large tasks into specific functionalities.
  </Accordion>
</AccordionGroup>

## Core principles

<Frame>
  <img alt="Ten tips for effective prompting with Replit Agent" />
</Frame>

### Plan first

<Tip>Before prompting, outline your app's features and user flows. A clear plan leads to more focused prompts.</Tip>

Think through your application's structure like a product manager would. Break the overall goal into logical stages.

**Instead of:** "Build a task manager app."

**Try:** "1. Create the basic HTML structure with an input field and task list. 2. Add JavaScript to add tasks. 3. Use a database to store tasks. 4. Add functionality to mark tasks complete."

Then prompt Agent for each step.

### Build incrementally

Use [**Checkpoints**](/core-concepts/agent#checkpoints) to save progress after each successful step. If something breaks, you can roll back to a working state and try a different approach.

**Instead of:** "Build a complete e-commerce platform."

**Try:** "Set up a basic full-stack project for an e-commerce site with user sign-up and login using Replit Auth." Then follow with prompts for product listings, cart, and checkout.

### Be specific

Define exactly what you need: output formats, constraints, edge cases.

**Instead of:** "Add a contact form."

**Try:** "Create a contact form page at `/contact` with fields for:

* Name (required)
* Email (required, must be valid format)
* Message (required, min 10 characters)

On submit, send the form data to `contact@mydomain.com`."

### Use positive language

State what you *want*, not what to avoid.

**Instead of:** "Don't make the user profile page confusing."

**Try:** "Design a clean user profile page. Display the username prominently, followed by email and join date. Include an 'Edit Profile' button."

### Keep it simple

Use clear, straightforward language. Break complex requests into bullet points.

**Instead of:** "Implement the necessary server-side infrastructure to facilitate the dynamic generation and retrieval of user-generated content artifacts."

**Try:** "Create backend functionality for users to submit blog posts. Users should enter a title and body content. Store posts in the database."

## Working with context

### Provide relevant files

Mention specific files rather than attaching your entire project.

**Instead of:** (Attaching everything) "Implement the user profile page based on our design system."

**Try:** "Create the user profile page. Fetch user data from the server endpoint. Style according to \[URL to design docs] and match this mockup: \[attach `profile_mockup.jpg`]."

<Tip>Start a new chat when switching to unrelated tasks. This prevents confusion from accumulated context.</Tip>

### Show examples

Reduce ambiguity by providing concrete examples—code snippets, sample data, or screenshots.

**Instead of:** "Make the product cards look better."

**Try:** "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: \[attach screenshot]. Use a light gray border."

## Debugging effectively

When errors occur, provide:

* The **exact** error message
* Relevant code snippets
* File names where the error occurs
* What you were trying to achieve
* Steps you've already tried

**Instead of:** "My login page is broken."

**Try:** "When I log in with correct credentials on `/login`, I get a 'User not found' error in the browser console. The database check doesn't seem to work. Here's the login handling code in `auth.js`."

## Ask for guidance

<Tip>Switch to Plan mode to explore options before building. Ask Agent about libraries, approaches, and trade-offs.</Tip>

**Instead of:** "Add payments."

**Try:** "What are some good options for accepting credit card payments in a web app built on Replit? I need something relatively simple to integrate."

## Iterate on your prompts

Your first prompt might not be perfect—that's normal. If the result isn't right:

* Add more detail
* Provide an example
* Simplify the instruction
* Try a different way of explaining

**Initial:** "Create a header for my website."

**Refined:** "Create a sticky header component with the site logo on the left and navigation links (Home, About, Contact) on the right."

## Summary

Effective prompting comes down to:

* **Planning** before you prompt
* **Building** incrementally with Checkpoints
* **Being specific** about requirements
* **Providing context** through examples and relevant files
* **Iterating** when results aren't quite right

Master these principles and you'll build apps faster with Agent.


# How to vibe code effectively
Source: https://docs.replit.com/tutorials/how-to-vibe-code

Learn essential skills to effectively guide Replit Agent, turning your ideas into functional applications faster.

## How to think about vibe coding

Replit Agent is incredibly powerful, capable of generating code, configuring environments, and even building entire applications.

However, they work best when guided effectively. "Vibe coding" is about developing the intuition and skills to steer these AI partners efficiently.

Think about yourself like a manager, or rather, a *leader* your job is to guide your "team" to success—that's done by providing direction, resources, and feedback.

Replit is your team, and you're the leader.

<Frame>
  <iframe title="5 Skills for Vibe Coding" />
</Frame>

Without vibe coding skills, you might find yourself:

* Stuck in unproductive loops with the AI.
* Building features that don't quite meet your vision.
* Unsure how to debug when things inevitably break.
* Overwhelmed by the possibilities and unsure where to start.

Mastering these five skills helps you provide the right guidance at the right time, enabling you to leverage AI to go from idea to app, fast.

## What is Vibe Coding?

Vibe coding is a practical approach to prompt engineering focused on application development. It involves a blend of technical understanding, clear communication, and iterative refinement.

It's less about knowing every programming language feature and more about understanding how to break down problems, ask the right questions, and guide an AI collaborator.

<Frame>
  <iframe title="What is Vibe Coding?" />
</Frame>

The five key skills are:

1. **Procedural Thinking**: Planning your app like a product manager and engineer combined.
2. **Leveraging Frameworks**: Knowing which tools to use and asking the AI for help.
3. **Building in Checkpoints**: Making incremental progress and using AI snapshots.
4. **Debugging Methodically**: Systematically finding and fixing errors with AI assistance.
5. **Mastering Context**: Giving the AI the right information (and only the right information).

## The Skills

Let's break down each skill with practical steps you can apply when building with Replit Agent.

See our guide on [Effective Prompting](/tutorials/effective-prompting) for detailed tips and examples.

### Think Procedurally

<Frame>
  <img alt="Procedural Thinking" />
</Frame>

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.

<Frame>
  <img alt="Question Asking App" />
</Frame>

### 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 on Plan mode: "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. Agent 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.

<Info>
  LLMs have training data cutoffs. Very recent frameworks might require you to provide documentation or examples as context for best results.
</Info>

### Build in Checkpoints

AI doesn't always get it right on the first try. Building large features in one go increases the risk of complex errors. Work incrementally.

* **Define Small Goals**: Prompt the AI to build one small piece of functionality at a time.
* **Test Each Step**: After the AI completes a task, run the code. Does it work as expected?
* **Use Checkpoints**: Replit Agent automatically creates **Checkpoints** that capture your complete development state—workspace contents, AI conversation context, and connected databases. If something breaks, don't keep prompting with the same request. Select **Rollback to here** on a previous checkpoint and try a different approach or prompt.
* **Version Control Principles**: Think of Checkpoints like comprehensive commits that preserve your entire development environment. They provide safe points to return to if you go down the wrong path.

<Frame>
  <iframe title="Checkpoints" />
</Frame>

<Note>
  Using **Rollback** allows you to explore different implementation paths without losing progress on what already works. Rollbacks restore your entire development environment, including workspace contents and AI conversation context. Connected databases can also be restored when you select "Restore databases" under "Additional rollback options."
</Note>

<Info>
  Learn more about comprehensive checkpoint and rollback capabilities in [Checkpoints and Rollbacks](/core-concepts/agent/checkpoints-and-rollbacks).
</Info>

### Debug Methodically

<Frame>
  <img alt="Debug Methodically" />
</Frame>

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 Agent 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 to ensure the AI isn't confused by previous, unrelated context.

<Tip>
  Imagine explaining a task to a human expert. You wouldn't start by telling them your life story if you just need help fixing a specific bug. Give the AI the focused information it needs.
</Tip>

## Putting It All Together: The Vibe Coding Loop

Mastering these skills enables an effective iterative loop for building with AI:

<Frame>
  <img alt="Vibe Coding Loop" />
</Frame>

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.

<Note>
  Vibe coding isn't just about interacting with AI; it enhances your fundamental skills in problem-solving, planning, and critical thinking.
</Note>

## Next Steps: Practice Your Skills

The best way to improve is by building!

<AccordionGroup>
  <Accordion title="Try Building a Project">
    * Start a new project using [Replit Agent](https://replit.com/ai/agent) with a simple idea.
    * Practice breaking the idea down (Procedural Thinking).
    * Use Agent to build it step-by-step, focusing on clear prompts and context (Mastering Context, Leveraging Frameworks).
    * Utilize **Checkpoints** frequently (Building in Checkpoints).
    * When errors occur, practice systematic debugging (Debugging Methodically).
  </Accordion>

  <Accordion title="Explore Replit AI Documentation">
    * Learn more about [Replit Agent](/core-concepts/agent) features like Checkpoints and Rollback.
    * Discover tips for writing [effective prompts](/tutorials/effective-prompting) for Replit Agent.
  </Accordion>
</AccordionGroup>

Vibe coding is an evolving practice. By focusing on these core skills, you'll be well-equipped to navigate the exciting landscape of AI-assisted development and build amazing applications on Replit.


# Learn about MCP in 3 minutes
Source: https://docs.replit.com/tutorials/mcp-in-3

Learn how to use Model Context Protocol (MCP) to give AI models access to tools, data sources, and real-world capabilities in just 3 minutes.

## Why AI models need MCP to connect with the real world

AI models like Claude and GPT are powerful but limited to what they were trained on. Without access to external tools and data sources, they can't:

* Access up-to-date information
* Interact with external systems
* Perform actions in the real world
* Work with your private data

## What MCP does: The universal connector for AI apps

Model Context Protocol (MCP) solves this by creating a universal way for AI to connect to tools and data sources - similar to how USB-C standardized device connections.

<Frame>
  <img />
</Frame>

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

<AccordionGroup>
  <Accordion title="What's an MCP client?">
    An MCP client is something like Claude or a command-line interface that connects to a large language model (LLM). It's the device that needs to plug into external tools or data sources.

    Examples of MCP clients:

    * Claude in the browser
    * Command-line interfaces for AI
    * Custom applications built with AI SDKs
  </Accordion>

  <Accordion title="What's an MCP server?">
    An MCP server provides tools and capabilities to AI models. Think of it like giving AI a set of specialized tools to solve problems.

    Examples of what MCP servers enable:

    * Accessing specific data sources to answer questions
    * Connecting AI to APIs so it can go online
    * Enabling video summarization or transcript fetching
    * Writing files to your computer
    * Making calculations or running code
  </Accordion>
</AccordionGroup>

## MCP capabilities that extend AI functionality

MCP provides several key features that make it powerful for AI applications:

* **Resources**: Share data and content with AI models
* **Tools**: Let AI models perform actions through your services
* **Prompts**: Create reusable templates for consistent AI interactions
* **Sampling**: Allow your services to request information from AI models
* **Transports**: Connect clients and servers efficiently

## Try MCP yourself: Build an AI tool in minutes

<Frame>
  <iframe title="Mastering MCP: The Ultimate Guide to AI Connectivity" />
</Frame>

<Steps>
  <Step title="Set up an MCP environment">
    Replit provides Templates that let you experiment with MCP without installing anything. These Templates include all the necessary components to connect AI models to useful tools.

    To get started quickly:

    1. Remix this template: [Learn about MCP](https://replit.com/@matt/Learn-about-MCP?v=1\&utm_source=matt\&utm_medium=blog\&utm_campaign=mcp-in-3)
    2. Wait for the environment to load completely
    3. You'll have a ready-to-use MCP setup with no configuration needed
  </Step>

  <Step title="Run a practical example">
    A simple demonstration shows how MCP enables AI to:

    1. Fetch a YouTube video using just a URL
    2. Get the content or transcript of that video
    3. Write a summary to a file on your system

    Try this command in our MCP Template:

    ```bash theme={null}
    llm "Summarize this video https://youtu.be/1qxOcsj1TAg and write the summary to summary.txt"
    ```

    This demonstrates how MCP gives AI models abilities they wouldn't normally have.
  </Step>

  <Step title="Customize for your needs">
    Once you understand the basics, you can connect MCP servers to your own data sources or create custom tools that your AI can use to solve specific problems.
  </Step>
</Steps>

## Real-world applications you can build with MCP

MCP enables a wide range of powerful AI applications:

* **Customer service systems** that can access company databases to answer specific questions
* **Research assistants** that can search and summarize content from multiple sources
* **Productivity tools** that can interact with your files and applications
* **Content creation tools** that can access media libraries and publishing platforms

## Benefits of using MCP for your AI projects

MCP offers three key benefits:

* Ready-to-use integrations your AI can connect to immediately
* The ability to switch between different AI providers without rewriting your connections
* Security features that keep your sensitive data protected

This is transformative for developers building AI applications and for users who want AI that can do more than just generate text.

<Note>
  MCP is an emerging standard with growing support across the AI ecosystem. More tools and integrations are being added regularly.
</Note>

## Next steps: Go further with MCP development

<AccordionGroup>
  <Accordion title="Explore more MCP examples">
    * Check out Templates on Replit to experiment without installing anything
    * Look through the MCP protocol documentation to understand how it works
    * Join the MCP community to see what others are building
  </Accordion>

  <Accordion title="Build your own MCP server">
    * Create custom tools that connect to your data sources
    * Develop specialized capabilities for your AI applications
    * Share your MCP servers with the community
  </Accordion>

  <Accordion title="Resources">
    * [MCP Protocol Documentation](https://modelcontextprotocol.io)
    * [Anthropic MCP Starter](https://github.com/anthropics/mcp-starter)
    * [Everything you need to know about MCP](https://blog.replit.com/everything-you-need-to-know-about-mcp)
  </Accordion>
</AccordionGroup>

MCP might sound technical, but the concept is simple—it's about giving AI models access to tools and data through a standardized connection. This expands what AI can accomplish and makes building powerful AI applications more accessible to everyone.


# Mobile app troubleshooting
Source: https://docs.replit.com/tutorials/mobile-app-troubleshooting

Fix common issues when building mobile apps with Expo and React Native on Replit.

When building mobile apps on Replit, you may encounter issues with previews, bundling, or package dependencies. This guide helps you resolve common problems, starting with quick fixes and progressing to deeper debugging steps.

## Quick fixes

Try these first—they resolve most issues:

| Problem                           | What to try                                                 |
| --------------------------------- | ----------------------------------------------------------- |
| Changes not showing on your phone | Shake your phone to open the Expo menu, then tap **Reload** |
| Changes not showing in preview    | Press **R** in the console to rebundle                      |
| App stuck or unresponsive         | Stop and restart the app from the console                   |

## Common issues

<AccordionGroup>
  <Accordion title="Changes aren't appearing on my device">
    When you make changes but don't see them on your phone:

    1. **Shake your phone** to open the Expo developer menu
    2. Tap **Reload** to redownload the bundle

    On the web preview, press **R** in the console to trigger a rebundle.

    If changes still don't appear, try clearing the cache (see [Clear the Metro cache](#clear-the-metro-cache) below).
  </Accordion>

  <Accordion title="Red error screen in Expo Go">
    A red error screen usually indicates a JavaScript error or missing module. Read the error message—it often points to the specific file and line.

    **Common causes:**

    * A package isn't installed or is the wrong version
    * A module works on web but not on native (or vice versa)
    * Syntax error in your code

    **What to try:**

    1. Read the error message carefully—it often tells you exactly what's wrong
    2. Ask Agent to help fix the error by sharing the message
    3. If the error mentions a specific package, try reinstalling dependencies (see [Reinstall packages](#reinstall-packages))
  </Accordion>

  <Accordion title="App works on web but crashes on phone (or vice versa)">
    Some packages or features work differently across platforms. React Native compiles to three targets: iOS, Android, and web. A library that works on web might not support native, or might need different configuration.

    **What to try:**

    1. Check if the package supports your platform in its documentation
    2. Ask Agent: "Is this package compatible with Expo Go?"
    3. Consider moving the functionality to your server if it's not supported on mobile

    <Tip>
      When researching packages, look for "Expo compatible" or check the [Expo SDK documentation](https://docs.expo.dev/versions/latest/) for supported modules.
    </Tip>
  </Accordion>

  <Accordion title="QR code won't scan or app won't connect">
    **Check your network:**

    * Your phone and computer must be on the same WiFi network
    * Some corporate or public networks block the connection

    **Try tunnel mode:**
    If you're on a restricted network, tunnel mode routes traffic through Expo's servers. Ask Agent to start the app with tunnel mode, or run `npx expo start --tunnel` in the shell.

    **Restart Expo Go:**
    Close Expo Go completely and reopen it before scanning.
  </Accordion>

  <Accordion title="Build takes a long time">
    The first build is always slower because there's no cache. Subsequent builds should be faster.

    **What affects build time:**

    * Number of packages in your project
    * First run after clearing the cache
    * Network speed when downloading packages

    If builds are consistently slow, check if you have unnecessary packages installed.
  </Accordion>

  <Accordion title="Module not found errors">
    When you see "Unable to resolve module" or "Module not found":

    1. The package might not be installed—ask Agent to install it
    2. The package might be installed but the cache is stale—clear the cache
    3. The package might not exist or be misspelled—check the package name

    Try [reinstalling packages](#reinstall-packages) if the module should exist.
  </Accordion>
</AccordionGroup>

## Debugging commands

When quick fixes don't work, these commands help reset various caches and states. Run them in the Shell.

### Clear the Metro cache

Metro is the bundler that compiles your React Native code. Clearing its cache forces a fresh build.

In the shell, run:

```bash theme={null}
npx expo start --clear
```

This clears the bundler cache and restarts the development server. You'll see "Bundler cache is empty. Rebuilding." in the output.

<Tip>
  If you're frequently hitting cache issues, you can add `-c` to your start command. Ask Agent to update the dev command to include the clear flag.
</Tip>

### Reinstall packages

If you're seeing module errors or version mismatches, reinstalling packages often helps.

In the shell, run:

```bash theme={null}
rm -rf node_modules && npm install
```

This deletes all installed packages and reinstalls them from scratch based on your `package.json`.

<Note>
  If your project uses a different package manager (like `bun` or `pnpm`), use the appropriate install command: `bun install` or `pnpm install`.
</Note>

### Check for version mismatches

Expo Doctor scans your project for common issues like version mismatches between packages.

In the shell, run:

```bash theme={null}
npx expo-doctor
```

Review the output for warnings. If it suggests fixes, evaluate them carefully—don't blindly upgrade packages, as this can introduce new issues.

<Warning>
  Only update packages when there's a specific reason to do so. Upgrading "just because" can break your app if the new version has incompatible changes.
</Warning>

## Full reset

When nothing else works, a full reset clears all caches and reinstalls everything.

<Accordion title="Nuclear option: Full reset command">
  This command removes all caches and reinstalls packages from scratch. Use it as a last resort.

  ```bash theme={null}
  rm -rf node_modules .expo && npm cache clean --force && npm install && npx expo start --clear
  ```

  **What this does:**

  1. `rm -rf node_modules` — Deletes installed packages
  2. `rm -rf .expo` — Deletes Expo's local cache
  3. `npm cache clean --force` — Clears npm's global cache
  4. `npm install` — Reinstalls all packages
  5. `npx expo start --clear` — Starts with a fresh Metro cache

  After running this, your next build will take longer as everything rebuilds from scratch.
</Accordion>

### Clear cache on your device

If the app on your phone seems stuck with old code even after reloading:

* **iOS**: In Expo Go, go to **Settings** and tap **Clear Cache**
* **Android**: Go to **Settings > Apps > Expo Go > Storage > Clear Cache**

## Quick reference

| Problem                   | Try first                | Then try                 |
| ------------------------- | ------------------------ | ------------------------ |
| Changes not showing       | Shake phone → Reload     | Clear Metro cache        |
| Bundler errors            | `npx expo start --clear` | Delete node\_modules     |
| Module not found          | Reinstall dependencies   | Full reset               |
| Version mismatch warnings | Run `npx expo-doctor`    | Evaluate suggested fixes |
| New package not working   | Restart the server       | Clear Metro cache        |
| Changed app.json          | Restart the server       | —                        |

## Getting more help

If you're still stuck:

* **Ask Agent**: Describe the error and what you've tried. Agent can often diagnose and fix issues.
* **Check Expo docs**: The [Expo troubleshooting guide](https://docs.expo.dev/troubleshooting/overview/) covers additional scenarios.
* **Search the error**: Copy the exact error message and search—someone has likely encountered it before.

## Next steps

* Return to [Native Mobile Apps](/replitai/building-mobile-apps)
* Learn the full publishing flow: [Build and launch a mobile app](/tutorials/build-and-launch-a-mobile-app)


# Plan vs. Build Mode
Source: https://docs.replit.com/tutorials/plan-vs-build-mode

Learn the difference between Plan and Build modes in Replit, and how to combine them for more effective development.

Replit Agent offers two interaction modes: **Plan Mode** and **Build Mode**. Use them together to think through your ideas first, then implement with confidence.

## What is Plan Mode?

[Plan Mode](/core-concepts/agent/plan-mode) lets you brainstorm, ask questions, and plan your work with Agent—without modifying any code. Think of it as a collaborative planning session where you can explore ideas freely.

Plan Mode is perfect for:

* **Brainstorming ideas**: Explore different approaches before committing to one
* **Breaking down complex projects**: Get a structured task list before building
* **Learning and understanding**: Ask questions about technologies, patterns, or your codebase
* **Planning architecture**: Design your app's structure before writing code

<Info>
  In Plan Mode, Agent reads your project and provides guidance, but it won't make any changes to your files. When you're ready to implement, switch to Build Mode or approve a plan to start building automatically.
</Info>

## What is Build Mode?

Build Mode is the default mode where Agent writes code, modifies files, and implements features directly in your project. This is where ideas become reality.

Use Build Mode when you're ready to:

* **Create new features**: Let Agent write the code for your next feature
* **Set up your app**: Install dependencies, configure databases, and connect services
* **Fix issues**: Let Agent debug and resolve problems in your codebase
* **Refactor code**: Improve existing code structure and organization

## Using both modes together

**Plan Mode and Build Mode work best as a sequence.** Start by planning to clarify your thinking, then build with a clear direction.

<Steps>
  <Step title="Start in Plan Mode">
    Switch to Plan Mode and describe what you want to build. Agent will help you think through the requirements, suggest approaches, and identify potential challenges—all without touching your code.
  </Step>

  <Step title="Generate a task list">
    Ask Agent to create a development plan. It will break down your project into specific, actionable tasks with clear priorities and dependencies.

    <Frame>
      <img alt="Generated task list with priorities and dependencies" />
    </Frame>
  </Step>

  <Step title="Review and refine">
    Review the proposed plan. Ask follow-up questions, request changes, or explore alternative approaches. Keep iterating until the plan matches your vision.
  </Step>

  <Step title="Start building">
    When you're satisfied with the plan, select **Start building**. Agent automatically switches to Build Mode and begins implementing the approved tasks.

    <Frame>
      <img alt="Mode selector showing Plan mode and Build mode options" />
    </Frame>
  </Step>

  <Step title="Track progress">
    Monitor Agent's progress as it works through the task list. Each completed task creates a checkpoint, so you can review changes and roll back if needed.
  </Step>
</Steps>

## When to use each mode

<CardGroup>
  <Card title="Use Plan Mode when" icon="lightbulb">
    * You're starting a new project and need direction
    * You want to explore different approaches
    * The task is complex and needs breaking down
    * You want to learn before implementing
    * You're unsure about the best solution
  </Card>

  <Card title="Use Build Mode when" icon="hammer">
    * You know exactly what you want
    * You have a clear plan ready to execute
    * You're making quick fixes or small changes
    * You're following an approved task list
    * Speed of implementation is the priority
  </Card>
</CardGroup>

<Tip>
  **Not sure which to pick?** If your request involves multiple features or significant changes, start with Plan Mode. For simple, well-defined tasks, go straight to Build Mode.
</Tip>

## Key differences

| Feature          | Plan Mode                        | Build Mode                     |
| ---------------- | -------------------------------- | ------------------------------ |
| **Purpose**      | Brainstorm, plan, and learn      | Implement and build            |
| **Code changes** | None—read-only                   | Writes and modifies files      |
| **Output**       | Ideas, task lists, guidance      | Working code and features      |
| **Best for**     | Complex projects, exploration    | Clear tasks, implementation    |
| **Transition**   | Click "Start building" to switch | Already in implementation mode |

## Best practices

### Getting the most from Plan Mode

* **Be specific about requirements**: The more detail you provide, the better the plan
* **Ask follow-up questions**: Clarify suggestions you don't understand
* **Request examples**: Ask Agent to show code snippets or patterns
* **Discuss trade-offs**: Explore pros and cons of different approaches
* **Iterate on ideas**: Refine the plan until it feels right

### Seamless transitions

* **Review before building**: Always review the task list before approving
* **Start small**: Begin with a subset of tasks if the full plan feels overwhelming
* **Use checkpoints**: Agent creates checkpoints as it builds, so you can always roll back

## Next steps

<CardGroup>
  <Card title="Plan Mode" icon="lightbulb" href="/core-concepts/agent/plan-mode">
    Deep dive into planning features
  </Card>

  <Card title="Agent" icon="robot" href="/core-concepts/agent">
    Explore all Agent capabilities
  </Card>

  <Card title="Checkpoints" icon="clock-rotate-left" href="/core-concepts/agent/checkpoints-and-rollbacks">
    Learn about rollbacks and recovery
  </Card>

  <Card title="Effective Prompting" icon="message" href="/tutorials/effective-prompting">
    Write better prompts for Agent
  </Card>
</CardGroup>


# Share a database across multiple apps
Source: https://docs.replit.com/tutorials/share-database-across-apps

Learn how to expose your Replit database as a REST API to share data securely across multiple apps and external services.

Share your database across multiple apps by exposing it as a REST API. This lets other apps securely read and write your data through HTTP requests while keeping everything in one place.

## Add an API to your existing app

Ask **Agent** to create a REST API for your database. Agent will set up endpoints, add authentication, and protect your data.

<Steps>
  <Step title="Open your app">
    Open the app that contains the database you want to share.
  </Step>

  <Step title="Ask Agent to create the API">
    <AiPrompt>
      Expose my database as a REST API secured with an API key. Create endpoints for all CRUD operations on my existing tables. Use Drizzle ORM for safe database queries. Store the API key in Secrets as API\_KEY.
    </AiPrompt>

    Agent will set up everything you need automatically.
  </Step>

  <Step title="Add your API key">
    1. Open the **Secrets** tab
    2. Add a secret: `API_KEY` with a secure password
    3. This key protects your database from unauthorized access
  </Step>

  <Step title="Publish your app">
    1. Select **Run** to test your API
    2. Select **Publish** > **Autoscale** to get a public URL
    3. Your database is now accessible to other apps
  </Step>
</Steps>

## Example: Database API template

See a working example with the [Database API Example template](https://replit.com/@matt/Replit-Database-API-Example?utm_source=replit\&utm_medium=docs\&utm_campaign=database-helium). Fork it to start a new database API from scratch, or explore the code to understand how it works.

The template includes:

* Automatic database setup with sample data
* API endpoints for all CRUD operations
* API key authentication
* Drizzle ORM for safe queries

<Steps>
  <Step title="Fork the template">
    Open the [Database API Example template](https://replit.com/@matt/Replit-Database-API-Example?utm_source=replit\&utm_medium=docs\&utm_campaign=database-helium) and fork it.
  </Step>

  <Step title="Add an API key">
    1. Open the **Secrets** tab
    2. Add `API_KEY` with a secure password
  </Step>

  <Step title="Run and publish">
    1. Select **Run** to start the API
    2. Select **Publish** > **Autoscale** when ready
  </Step>
</Steps>

## Connect from other apps

Ask **Agent** to write the connection code in any of your other apps:

<AiPrompt>
  Create a backend endpoint that connects to my database API at https\://\[YOUR-APP].replit.app. Use the API key from secrets (API\_KEY) on the server side. Create routes to fetch and display data from the API.
</AiPrompt>

Be sure to replace \[YOUR-APP] with your app's name. Agent will handle authentication and error handling automatically, keeping your API key secure on the server.

### API endpoints reference

Your database uses standard REST endpoints. For an `items` table:

| Action   | Method | Endpoint         |
| -------- | ------ | ---------------- |
| List all | GET    | `/api/items`     |
| Get one  | GET    | `/api/items/:id` |
| Create   | POST   | `/api/items`     |
| Update   | PUT    | `/api/items/:id` |
| Delete   | DELETE | `/api/items/:id` |

All requests need an `X-API-KEY` header with your API key.

### Write your own connection code

If you prefer to code the connection yourself, use these backend examples:

<CodeGroup>
  ```javascript Node.js (Backend) theme={null}
  const API_URL = 'https://your-app.replit.app';
  const API_KEY = process.env.API_KEY;

  const response = await fetch(`${API_URL}/api/items`, {
    headers: { 'X-API-KEY': API_KEY }
  });
  const items = await response.json();
  ```

  ```python Python (Backend) theme={null}
  import os
  import requests

  API_URL = 'https://your-app.replit.app'
  API_KEY = os.environ['API_KEY']

  response = requests.get(
      f'{API_URL}/api/items',
      headers={'X-API-KEY': API_KEY}
  )
  items = response.json()
  ```
</CodeGroup>

<Warning>
  These examples are for **backend code only**. Never use API keys in frontend/browser code - they will be exposed to anyone viewing your page source. For frontend apps, create a backend endpoint that proxies requests to your database API.

  Always store your API key in **Secrets**, not in your code.
</Warning>

## Add more tables

Extend your database as your app grows:

<AiPrompt>
  Add a users table with email, name, and role columns. Create API endpoints for users with the same authentication as the existing endpoints.
</AiPrompt>

Agent will update your schema, create endpoints, and apply authentication automatically.

## How it works

Your API acts as a central hub. When an app needs data, it sends a request to your API. The API checks the API key, then reads or writes to your database. Multiple apps share one database securely.

## Security

Your API includes built-in protection:

* **API key authentication**: Only apps with the correct key can access your database
* **SQL injection protection**: Drizzle ORM prevents malicious queries
* **Data validation**: The API checks all data before saving

<Warning>
  Store your API key in **Secrets**, never in code.
</Warning>

Only share your API key with apps you trust.

## Troubleshooting

<AccordionGroup>
  <Accordion title="Can't connect from another app">
    * Publish your database API app (not just run it)
    * Use your published URL ending in `.replit.app`
    * Verify both apps have the same API key in Secrets
    * Check the secret is named `API_KEY` in both apps
  </Accordion>

  <Accordion title="Authentication errors">
    * Store the API key in **Secrets**, not in code
    * Verify the API key matches in both apps
    * Check the secret is named `API_KEY` (all caps)
  </Accordion>

  <Accordion title="Need help">
    Ask **Agent** to troubleshoot:

    <AiPrompt>
      I'm trying to connect to my database API but getting errors. Can you help me debug the connection?
    </AiPrompt>
  </Accordion>
</AccordionGroup>

## Next steps

* [Database](/cloud-services/storage-and-databases/sql-database) - Create and manage databases
* [Connect to a database](/getting-started/quickstarts/database-connection) - Learn connection methods
* [Production databases](/cloud-services/storage-and-databases/production-databases) - Set up production databases


# Replit's built-in security features
Source: https://docs.replit.com/tutorials/vibe-code-securely

Learn about the security features built into Replit.

When you're vibe coding—focusing on creativity and rapid iteration—it's easy to overlook security. Replit has designed the platform to push you towards security best practices by providing robust security features that work automatically.

<iframe title="Security features in Replit" />

Replit provides several security features out of the box that make it easier to build secure applications.

<Steps>
  <Step title="Version control">
    Replit offers native version control with Git integration. Additionally, you can access file history directly in the Workspace:

    * Use the **History** panel to see every keystroke and revert changes
    * Access Git features through the **Git** pane
    * Roll back to checkpoints when using Agent
  </Step>

  <Step title="Google Cloud infrastructure">
    All Replit deployments are backed by Google Cloud Platform (GCP):

    * Deployments run on GCP
    * Object storage uses Google Cloud Storage (GCS)
    * Resource isolation between projects
    * DDoS protection through Google Cloud Armor
  </Step>

  <Step title="Encrypted secrets storage">
    Secrets are encrypted using Google Cloud's secure storage and are safely accessible from your application's code.

    To add a secret:

    1. Go to the **Secrets** pane in your Workspace
    2. Select **Add a new secret**
    3. Enter a key and value
    4. Select **Add secret**

    Keep sensitive information like API keys secure:

    ```javascript theme={null}
    // Don't do this
    const apiKey = "sk_test_abcdef12345";

    // Do this instead
    const apiKey = process.env.API_KEY;
    ```
  </Step>

  <Step title="Object storage">
    When using Replit's object storage:

    * Files are backed by Google Cloud Storage
    * Only your app can access stored files by default
    * No need to worry about public access control
    * Agent can set up Object Storage with advanced authentication and access controls

    Ask Agent to add secure file storage:

    ```
    Add Object Storage with authentication for user file uploads
    ```
  </Step>

  <Step title="Replit Auth">
    Implement authentication without building it from scratch.

    Benefits of Replit Auth:

    * Handles login securely
    * Manages sessions
    * Reduces authentication implementation errors

    Ask Agent:

    ```
    Help me implement authentication for my application with Replit Auth
    ```
  </Step>

  <Step title="Secure architecture with Agent">
    Agent builds applications with:

    * Proper separation of front-end and back-end
    * Secure back-end communication with databases
    * Front-end that communicates only with your back-end API
  </Step>

  <Step title="Database security with ORMs">
    Agent uses Object-Relational Mapping (ORM) tools when building applications with databases:

    * Protection against SQL injection
    * Schema validation
    * Type safety
    * Managed database connections
  </Step>
</Steps>


# Security checklist for vibe coding
Source: https://docs.replit.com/tutorials/vibe-code-security-checklist

Follow this comprehensive security checklist to ensure your vibe coded applications follow best security practices.

This guide provides a comprehensive security checklist to ensure your vibe coded applications follow best security practices.

While Replit provides many security features [out of the box](/tutorials/vibe-code-securely), it's important to understand and implement more security measures for your specific application needs.

<iframe title="Vibe code security checklist" />

## Prerequisites

* A Replit account
* Basic understanding of your preferred programming language
* Familiarity with the Replit Workspace
* An application you're building on Replit

## Front-end security

<AccordionGroup>
  <Accordion title="HTTPS everywhere" icon="lock">
    Replit uses HTTPS by default for all applications. So you don't need to worry about it!
  </Accordion>

  <Accordion title="Input validation and sanitization" icon="shield-check">
    Always validate and sanitize user input to prevent cross-site scripting (XSS) attacks:

    ```javascript theme={null}
    // Bad: Direct use of user input
    element.innerHTML = userInput;

    // Good: Sanitize input before using
    import { sanitize } from 'some-sanitizer-library';
    element.innerHTML = sanitize(userInput);
    ```

    Switch to [Lite mode](/core-concepts/agent/agent-modes) and ask Agent:

    ```
    Help me validate and sanitize inputs to protect against XSS attacks
    ```
  </Accordion>

  <Accordion title="Keep sensitive data out of the browser" icon="eye-slash">
    You should use Replit Secrets to store sensitive information like API keys.

    Be sure you don't pass secrets to the client side or put them in the following places:

    * Local storage
    * Session storage
    * Client-side JavaScript
    * Cookies without proper security attributes

    Switch to [Lite mode](/core-concepts/agent/agent-modes) and ask Agent:

    ```
    Help me keep sensitive data out of the browser. Am I doing this correctly?
    ```
  </Accordion>

  <Accordion title="CSRF protection" icon="shield">
    Implement Cross-Site Request Forgery (CSRF) protection for forms:

    ```javascript theme={null}
    // Example of CSRF token implementation
    const csrfToken = generateToken();
    session.csrfToken = csrfToken;
    ```

    Switch to [Lite mode](/core-concepts/agent/agent-modes) and ask Agent:

    ```
    Help me implement CSRF tokens for forms
    ```
  </Accordion>
</AccordionGroup>

## Back-end security

<AccordionGroup>
  <Accordion title="Authentication fundamentals" icon="key">
    When implementing authentication:

    * Use Replit Auth when possible
    * If building custom auth, use established libraries
    * Never store plain text passwords

    Ask Agent:

    ```
    Help me implement authentication for my application with Replit Auth
    ```
  </Accordion>

  <Accordion title="Authorization checks" icon="user-lock">
    Always verify permissions before performing actions:

    ```javascript theme={null}
    // Example authorization check
    if (!user.canAccess(resource)) {
      return res.status(403).send('Access denied');
    }
    ```

    Ask Agent:

    ```
    Help me implement authorization checks for my application
    ```
  </Accordion>

  <Accordion title="API endpoint protection" icon="shield">
    Secure your API endpoints:

    * Add authentication to sensitive endpoints
    * Implement proper CORS settings
    * Consider rate limiting

    Switch to [Lite mode](/core-concepts/agent/agent-modes) and ask Agent:

    ```
    How do I properly authenticate endpoints in my app?
    ```
  </Accordion>

  <Accordion title="SQL injection prevention" icon="database">
    Agent uses ORMs by default, which helps prevent SQL injection. If writing custom database queries:

    ```javascript theme={null}
    // Bad: String concatenation in queries
    db.query(`SELECT * FROM users WHERE username = '${username}'`);

    // Good: Parameterized queries with ORM
    db.query('SELECT * FROM users WHERE username = ?', [username]);
    ```
  </Accordion>

  <Accordion title="Security headers" icon="code">
    Add important security headers to your application:

    ```html theme={null}
    <!-- In index.html or through your back-end -->
    <meta http-equiv="X-Frame-Options" content="DENY">
    <meta http-equiv="X-Content-Type-Options" content="nosniff">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'">
    ```

    You can scan your site at [securityheaders.com](https://securityheaders.com) for recommendations.

    Switch to [Lite mode](/core-concepts/agent/agent-modes) and ask Agent:

    ```
    Can you add the security headers to my application?
    ```
  </Accordion>
</AccordionGroup>

## Ongoing security practices

<AccordionGroup>
  <Accordion title="Keep dependencies updated" icon="arrow-rotate-right">
    Regularly check for outdated packages that might have vulnerabilities:

    ```bash theme={null}
    npm audit
    ```
  </Accordion>

  <Accordion title="Proper error handling" icon="exclamation">
    Don't expose sensitive information in error messages:

    ```javascript theme={null}
    // Bad: Exposing sensitive details
    catch (err) {
      res.status(500).send(`Database error: ${err.message}`);
    }

    // Good: Generic error message
    catch (err) {
      console.error(err); // Log internally
      res.status(500).send('An error occurred');
    }
    ```

    Ask Agent:

    ```
    Help me implement proper error handling for my application
    ```
  </Accordion>

  <Accordion title="Secure cookies" icon="cookie">
    When using cookies:

    * Set HttpOnly flag to prevent JavaScript access
    * Use Secure attribute to require HTTPS
    * Implement SameSite attribute to prevent CSRF

    Ask Agent:

    ```
    Help me secure my cookies for my application
    ```
  </Accordion>

  <Accordion title="File upload security" icon="upload">
    If your application allows file uploads:

    * Restrict file types and sizes
    * Scan for malware if possible
    * Store files in Replit's object storage
    * Generate new filenames rather than using user-provided ones

    Ask Agent:

    ```
    Help me secure my file uploads for my application
    ```
  </Accordion>

  <Accordion title="Rate limiting" icon="clock">
    Implement rate limiting for API endpoints, especially authentication-related ones:

    ```javascript theme={null}
    // Example rate limiting middleware
    const rateLimit = require('express-rate-limit');

    const limiter = rateLimit({
      windowMs: 15 * 60 * 1000, // 15 minutes
      max: 100 // limit each IP to 100 requests per windowMs
    });

    app.use('/api/', limiter);
    ```

    Ask Agent:

    ```
    Help me implement rate limiting for my application
    ```
  </Accordion>
</AccordionGroup>

## Checklist

Here's the above in a checklist to help you stay on top of your security practices.

## Front-end security

|   | Security Measure                          | Description                                                      |
| - | ----------------------------------------- | ---------------------------------------------------------------- |
| ☐ | Use HTTPS everywhere                      | Prevents basic eavesdropping and man-in-the-middle attacks       |
| ☐ | Input validation and sanitization         | Prevents XSS attacks by validating all user inputs               |
| ☐ | Don't store sensitive data in the browser | No secrets in local storage or client-side code                  |
| ☐ | CSRF protection                           | Implement anti-CSRF tokens for forms and state-changing requests |
| ☐ | Never expose API keys in frontend         | API credentials should always remain server-side                 |

## Back-end security

|   | Security Measure            | Description                                                           |
| - | --------------------------- | --------------------------------------------------------------------- |
| ☐ | Authentication fundamentals | Use established libraries, proper password storage (hashing+salting)  |
| ☐ | Authorization checks        | Always verify permissions before performing actions                   |
| ☐ | API endpoint protection     | Implement proper authentication for every API endpoint                |
| ☐ | SQL injection prevention    | Use parameterized queries or ORMs, never raw SQL with user input      |
| ☐ | Basic security headers      | Implement X-Frame-Options, X-Content-Type-Options, and HSTS           |
| ☐ | DDoS protection             | Use a CDN or cloud service with built-in DDoS mitigation capabilities |

## Practical security habits

|   | Security Measure          | Description                                                            |
| - | ------------------------- | ---------------------------------------------------------------------- |
| ☐ | Keep dependencies updated | Most vulnerabilities come from outdated libraries                      |
| ☐ | Proper error handling     | Don't expose sensitive details in error messages                       |
| ☐ | Secure cookies            | Set HttpOnly, Secure and SameSite attributes                           |
| ☐ | File upload security      | Validate file types, sizes, and scan for malicious content             |
| ☐ | Rate limiting             | Implement on all API endpoints, especially authentication-related ones |


# Vibe coding 101: from idea to published app
Source: https://docs.replit.com/tutorials/vibe-coding-101

Learn how to go from an idea to a published application using Replit Agent, featuring an interactive map visualization project.

This tutorial walks you through the "vibe coding" process on Replit—taking an idea from concept to a fully published application. This tutorial will build an interactive map visualization of San Francisco parks, pulling in external data and using modern frameworks. You'll see how to leverage [Replit Agent](/core-concepts/agent) for initial development, refinements and debugging.

<WistiaEmbed title="Vibe Coding 101" />

## The vibe coding philosophy

Vibe coding is less about writing every line of code and more about guiding AI tools with your vision and domain knowledge. It's an iterative process of prompting, reviewing, and refining.

Key takeaways from the video:

* **Conceptualize First**: Start with a clear idea of what you want to build. Visualizing the end product helps, especially when prompting AI.
* **Domain Knowledge is Power**: Knowing relevant frameworks (like Leaflet.js for maps) or data sources (like OpenStreetMap) significantly improves AI-generated results.
* **Iterative Development**: Expect to debug and refine. AI tools are powerful, but they're collaborators, not magic wands.

## Project: San Francisco parks map

The goal is to build an interactive map displaying parks and public spaces in San Francisco.

**Problem Statement**: The goal is an interactive map to discover parks and public spaces in San Francisco.
**Solution**: An interactive tool using Leaflet.js and OpenStreetMap data.
**Key lessons**:

* Prompting AI effectively.
* Processing external data.
* Debugging and handling errors.

## Building with Replit Agent

Replit Agent can scaffold entire projects, set up environments, and generate initial code.

<Steps>
  <Step title="Crafting the Initial Prompt">
    A good prompt is specific. We tell Agent:

    * The goal: "Help me create a minimalist maps app to visualize San Francisco's parks."
    * Key technologies: "You should use leaflet for map visualization and fetch data from OpenStreetMap."
    * Specific data types from OpenStreetMap (after research): Natural formations (woods, beaches, islets, cave entrances) and leisure locations (parks, gardens).

    <AiPrompt>
      Help me create a minimalist maps app to visualize San Francisco's parks. You should use leaflet for map visualization and fetch data from OpenStreetMap. Include the following OpenStreetMap data types for San Francisco: natural formations (woods, beaches, islet, cave entrance) and leisure (park, gardens).
    </AiPrompt>

    To learn more about how to write effective prompts, check out [this article](tutorials/effective-prompting).
  </Step>

  <Step title="Attaching a Mockup">
    Visual aids help Agent understand the desired layout and features. A simple sketch or mockup can be attached directly to the prompt.

    <Frame>
      <img alt="Wireframe sketch of the maps app" />
    </Frame>
  </Step>

  <Step title="Agent's Process">
    1. **Plan Creation**: [Agent](/core-concepts/agent) outlines the steps it will take. Review and approve this plan.

       <Frame>
         <img alt="Replit Agent plan creation" />
       </Frame>
    2. **Visual Preview**: Agent streams a visual preview of the app's UI.

       <Frame>
         <img alt="Replit Agent visual preview" />
       </Frame>
    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](/core-concepts/workspace/version-control)) so you can roll back if something goes wrong.
  </Step>

  <Step title="Debugging with Agent">
    Errors happen. Use the browser's DevTools (specifically the Console and Network tabs) to find error messages.

    * **Observe**: The map loaded, but no data points appeared.
    * **Investigate**: The console showed an error: "Failed to fetch map features error cannot read properties of undefined reading natural."
    * **Inform Agent**: Paste the error message directly into the chat with Agent. Agent will attempt to debug and fix the issue.

      <Frame>
        <img alt="Browser console showing an error" />
      </Frame>

    In the video, Agent identified an issue with parsing the Overpass API response and added robust error handling, which resolved the problem.
  </Step>
</Steps>

## Refining with Lite mode

Once Agent builds the MVP, use [Lite mode](/core-concepts/agent/agent-modes) for smaller, more targeted edits and refinements. Lite mode is optimized for quick changes.

<AccordionGroup>
  <Accordion title="Improving Map Styling">
    The initial map was functional but could look better.
    **Prompt to Agent**: "Can you use a more minimalist carto style for OpenStreetMap? Carto lite."

    This relies on knowing that "Carto lite" is a known theme for Leaflet maps.
  </Accordion>

  <Accordion title="Adding Dark Mode">
    A common refinement is adding a dark mode.
    **Prompt to Agent**: "Can you add a dark mode to my app and use, carto dark for the map in the dark mode?"

    <Frame>
      <img alt="Replit Agent implementing dark mode" />
    </Frame>

    Agent will:

    * Read files for context.
    * Make changes to necessary files (e.g., theme providers, styles).
    * Restart the app to apply changes.
  </Accordion>

  <Accordion title="Iterative Debugging with Agent">
    Adding dark mode involved several iterations:

    1. Initial implementation had a toggle that worked for the map but then disappeared.
       **Feedback**: "The toggle theme button works for the map, but it disappears when clicked. The theme toggle should be in the side nav and the theme should be applied to the side nav."
    2. Issues with multiple toggle buttons and incorrect component references (`side nav` vs. `sidebar`).
       **Feedback & Guidance**: "Now there are two toggle themes. One controls the map, the other controls the side nav. Make them into one in the side. Now and update the CSS."
       When Agent made an incorrect assumption (e.g. `SideNav` component), explicitly pointing it to the correct file (`@Sidebar`) helps.
    3. Final fix to ensure the dark mode toggle in the sidebar correctly toggled the map theme to Carto Dark.
       **Feedback**: "Now the dark mode toggle in @Sidebar does not toggle the map to carto dark."

    This process highlights the "conversation" aspect of vibe coding. Be descriptive and guide the AI.
  </Accordion>
</AccordionGroup>

## Publishing your application

Replit makes publishing straightforward.

1. Select the **[Publish](/cloud-services/deployments/about-deployments)** button.
2. Agent suggests a publishing configuration (e.g., app name, build and run commands). Review and confirm.
3. If your app uses API keys or other sensitive information, store them in **[Secrets](/core-concepts/workspace/app-setup/secrets)**. Agent will use these securely.
4. Select **Publish**. Replit bundles your app and makes it live on the web.

   <Frame>
     <img alt="Replit deployment screen" />
   </Frame>

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, with Lite mode 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!


# September 26, 2025
Source: https://docs.replit.com/updates/2025/09/26/changelog

2 min read

## What's new

* [Security scan in deployment](#security-scan-in-deployment)
* [Agent playground testing improvements](#agent-playground-testing-improvements)

## Platform

### Security scan in deployment

Protect your applications with our new pre-publishing security scan. Toggle the scan on or off before deploying your apps to catch malicious files and security vulnerabilities. Keep your code safe with high-confidence security rules that scan for potential threats before they go live.

<Frame>
  <img alt="Security scan toggle in deployment interface" />
</Frame>

<Frame>
  <img alt="Security scan results screen" />
</Frame>

### Agent playground testing improvements

Test your AI agents and automations more effectively with enhanced playground features. Now includes visual rendering of tool calls when testing Slack and Telegram agents, plus live test results for time-based workflow automations. Get better visibility into how your agents perform before deployment.

<Frame>
  <img alt="Live test results for workflow automations" />
</Frame>

## Teams and Enterprise

### Security scan enforcement for enterprises

Enterprise admins now have the power to enforce security scans across all team deployments. Ensure consistent security standards across your organization by requiring security scans for all published applications, giving you complete control over your team's security posture


# October 3, 2025
Source: https://docs.replit.com/updates/2025/10/03/changelog

2 min read

## Platform updates

* [Vercel import integration](#vercel-import-integration)
* [Git source control enhancements](#git-source-control-enhancements)
* [Connectors platform launch](#connectors-platform-launch)
* [App Themes font improvements](#app-themes-font-improvements)

## Teams and Enterprise

* [Connectors admin management](#connectors-admin-management)

### Vercel import integration

Migrate your Vercel apps to Replit with one click! The new import flow makes it seamless to move your Next.js and other Vercel-hosted applications to Replit. Perfect timing for developers looking for Vercel alternatives. Learn more in the [Import from Vercel quickstart](/getting-started/quickstarts/import-from-vercel) and the [Import to Replit guide](/core-concepts/workspace/app-setup/import).

<Frame>
  <img alt="Vercel import dialog showing one-click migration flow for Next.js applications" />
</Frame>

### Git source control enhancements

Enhanced Git integration brings better remote management and workspace flexibility. Connect and create Git remotes with improved UX, easily switch between personal and organization workspaces, and ensure code is always up-to-date before deployment. Learn more in [Using the Git pane](/core-concepts/workspace/version-control/git-interface).

<Frame>
  <img alt="Animated demonstration of switching between personal and organization workspaces in Git interface" />
</Frame>

### Connectors platform launch

Build faster with 24 pre-built app integrations! Connect your Replit projects to popular services like Stripe, Figma, and more through our new Connectors platform. Each connector is powered by MCP (Model Context Protocol) for seamless AI-assisted development. See [Agent integrations](/replitai/integrations) and [Managing your connectors](/replitai/managing-connectors).

<Frame>
  <img alt="Connectors platform interface displaying 24 available app integrations including Stripe, Figma, and other popular services" />
</Frame>

### App Themes font improvements

Customize your apps with 19 additional Google Fonts including popular choices like Crimson, EB Garamond, Figtree, and Source Sans Pro. The font picker now renders each font in its actual typeface, making it easier to visualize your design choices. Browse fonts organized by category (Serif, Sans-Serif, Monospace) with helpful tooltips explaining each type. Learn more in [App Themes](/replitai/app-themes).

<Frame>
  <img alt="Font preview showing multiple fonts rendered in their actual typefaces including Crimson, EB Garamond, and other Google Fonts" />
</Frame>

## Teams and Enterprise

### Connectors admin management

Enterprise customers get advanced connector management with role-based access controls for shared API keys and fully-custom OAuth client configuration. Connectors are opt-in at the organization level, giving admins complete control over which integrations are available to team members. See [Managing your connectors](/replitai/managing-connectors).


# October 10, 2025
Source: https://docs.replit.com/updates/2025/10/10/changelog

2 min read

## Platform updates

* [Agent usage cost visibility](#agent-usage-cost-visibility)
* [Escape key for Visual Select/Edit mode](#escape-key-for-visual-select-edit-mode)
* [Faster agent stopping](#faster-agent-stopping)
* [GitHub import improvements](#github-import-improvements)
* [Dependency vulnerability scanning](#dependency-vulnerability-scanning)
* [Webview logging experience](#webview-logging-experience)

## Teams and Enterprise

* [Support seat access for teams](#support-seat-access-for-teams)

### Agent usage cost visibility

See Agent usage costs in real time while tasks run. Open the chat header drawer to monitor spend for active tasks—especially helpful for longer, higher‑autonomy runs.

### Escape key for Visual Select/Edit mode

Press Escape to exit Visual Select mode or return to Build mode. A small shortcut that keeps you moving.

### Faster agent stopping

Agent responds faster when you stop or start it from the workspace, reducing wait time.

### GitHub import improvements

Get real‑time progress during GitHub imports instead of generic messages, plus faster import speeds.

### Dependency vulnerability scanning

The security scanner now detects dependency vulnerabilities for Go, JavaScript, Python, and Rust, with more languages coming soon.

### Webview logging experience

View webview logs and console output in one place—the same logs Agent uses—making debugging simpler.

## Teams and Enterprise

### Support seat access for teams

Add Replit Support as a Guest account that doesn’t count toward billing. Grant scoped access to specific Apps when you need help, while keeping workspace privacy under your control.


# October 17, 2025
Source: https://docs.replit.com/updates/2025/10/17/changelog

2 min read

## What's new

* [Build mode redesign for React apps](#build-mode-redesign-for-react-apps)
* [ClickUp integration](#clickup-integration)

## Platform updates

### Build mode redesign for React apps

Build React apps that look polished from the start. The redesigned build mode follows clear design guidelines, pulls in AI‑generated and stock images during your first build, and produces production‑ready code.

<Frame>
  <img alt="Build mode redesign for React apps" />
</Frame>

## Teams and Enterprise

### ClickUp integration

Connect your Replit workspace to ClickUp to build agents and automations that work with your team’s tasks, lists, and projects. This connector is in limited Enterprise rollout while we evaluate feedback.

<Frame>
  <img alt="ClickUp connector configuration interface" />
</Frame>


# October 24, 2025
Source: https://docs.replit.com/updates/2025/10/24/changelog

2 min read

## What's new

* [Build Score rating system](#build-score-rating-system)
* [SSO support for Replit Auth in Enterprise apps](#sso-support-for-replit-auth-in-enterprise-apps)
* [Plan mode improvements](#plan-mode-improvements)

## Platform

### Build Score rating system

Help us improve Agent by sharing your experience! You'll now see an optional 1-5 rating after key milestones like your first checkpoint or when you publish. Your feedback helps us understand what's working and what needs improvement throughout your building journey.

### Plan mode improvements

Start building faster with smarter Plan mode! Agent now suggests task lists more proactively, so you spend less time prompting and more time building. Plus, a new checkpoint is automatically created when transitioning from planning to building, making it easier to roll back changes if needed.

<Frame>
  <img alt="Plan mode interface showing task list and Start building button" />
</Frame>

## Teams and Enterprise

### SSO support for Replit Auth in Enterprise apps

Enterprise customers can now seamlessly log into Replit Auth-enabled apps using their company's SSO! This fixes a critical issue where employees were previously blocked from accessing apps when their organization enforced SSO for Replit login.

<Frame>
  <img alt="SSO login interface for Replit Auth" />
</Frame>


# October 31, 2025
Source: https://docs.replit.com/updates/2025/10/31/changelog

2 min read

## What's new

* [Custom domain verification improvements](#custom-domain-verification-improvements)
* [Database soft delete and restoration](#database-soft-delete-and-restoration)
* [Slash command connector discovery](#slash-command-connector-discovery)
* [Zendesk connector](#zendesk-connector)
* [Bulk delete for organizations](#bulk-delete-for-organizations)
* [Agentmail connector](#agentmail-connector)
* [Salesforce and ClickUp connectors](#salesforce-and-clickup-connectors)
* [Domains interface redesign](#domains-interface-redesign)

## Platform

### Custom domain verification improvements

Custom domain verification is now faster and more reliable, with clearer status tracking and better error detection. Failed verifications are automatically retried, and guidance helps you fix DNS issues quickly.

### Database soft delete and restoration

Accidentally deleted a database? Deleted Neon databases now have a 7‑day retention period, so you can recover data if needed. Support can restore on request today; self‑serve restore from the trash is coming soon.

### Slash command connector discovery

Discover and connect to your favorite tools faster with the new `/` command. It works on the home page and in the Agent input, making integrations easier to find and use.

### Agentmail connector

Build email workflows with the new Agentmail connector. Agent gets a dedicated inbox to track state and automate responses—perfect for support ticket systems, capturing sales inquiries, or any workflow that reacts to incoming email.

### Domains interface redesign

Managing custom domains got a major upgrade. The redesigned interface is cleaner and adds clearer status tracking, so it’s easier to see and manage all your connected domains at a glance.

## Teams and Enterprise

### Zendesk connector

Connect your Zendesk support system to Replit with full read and write access to the Ticket API. Build custom dashboards, automate ticket escalation to Slack, sync tickets with Linear, or create customer health reports that combine support history with billing data. Available for Core and Teams.

### Bulk delete for organizations

Clean up your organization workspace efficiently with bulk delete. You can delete multiple apps at once—members can delete their own apps, and admins can delete any app in the organization. You’ll see a warning for apps with active deployments before deletion.

### Salesforce and ClickUp connectors

Teams and Enterprise customers can now connect Salesforce and ClickUp to their workflows. Build custom CRM integrations, automate project management, or create powerful cross‑platform automations between your favorite business tools.


# November 07, 2025
Source: https://docs.replit.com/updates/2025/11/07/changelog

2 min read

## What's new

* [Animated agent icon](#animated-agent-icon)
* [Agent tools dropdown in planning flow](#agent-tools-dropdown-in-planning-flow)
* [At symbol filename support in Agent](#at-symbol-filename-support-in-agent)
* [Connectors support for remixing](#connectors-support-for-remixing)
* [Analytics dashboard for enterprise admins](#analytics-dashboard-for-enterprise-admins)

## Platform updates

### Animated agent icon

The Agent icon is now animated during operation, providing better visual feedback that Agent is actively working. This improvement enhances perceived speed and makes it easier to observe Agent activity during the initial planning phase, especially in the centered chat layout where feedback is closer to your request.

### Agent tools dropdown in planning flow

The Agent tools dropdown is now available during initial planning and task list approval flows. This lets you configure your preferred Agent settings—including Autonomy Level and other preferences—right from the start of your build.

<Frame>
  <img alt="Agent tools dropdown in planning flow" />
</Frame>

Learn more about [Code Optimizations](/core-concepts/agent/code-optimizations).

### At symbol filename support in Agent

Agent now supports `@` filename mentions in addition to `/` commands, bringing design parity with popular development tools. This feature was highly requested by enterprise users and power users familiar with Cursor-style workflows.

<Frame>
  <img alt="Agent @ filename support demonstration" />
</Frame>

Learn more about [providing context to Agent](/tutorials/effective-prompting).

### Connectors support for remixing

Previously, remixing any Replit app that used a connector would break the integration, since the remixed repl wasn't automatically authorized to use the connector. We've updated the remixing flow to handle connectors gracefully:

* Users are now prompted to set up required connectors when remixing
* The remix process clearly indicates which integrations need to be configured
* No more broken integrations after remixing

Learn more about [Agent integrations](/replitai/integrations) and [Managing your connectors](/replitai/managing-connectors).

## Teams and Enterprise

### Analytics dashboard for enterprise admins

Enterprise admins now have access to a comprehensive Analytics Dashboard—a major feature request from enterprise customers including Meta and Atlassian. The dashboard provides:

* **User Activity Monitoring**: Track engagement and collaboration across your organization
* **Resource Usage Tracking**: Monitor spend by user and Replit App
* **Deployment Oversight**: Keep an eye on deployment activity
* **Cost Management**: Get visibility into resource consumption and costs

<Frame>
  <img alt="Analytics Dashboard details showing app-level resource usage" />
</Frame>

Learn more about [Enterprise features](/category/teams) and [usage tracking](/category/billing).


# November 16, 2025
Source: https://docs.replit.com/updates/2025/11/16/changelog

2 min read

## Platform updates

* [Azure Marketplace integration](#azure-marketplace-integration)
* [GitLab and Bitbucket support](#gitlab-and-bitbucket-support)

### Azure Marketplace integration

Replit is now live on Azure Marketplace! Many organizations already have dedicated budgets for Azure, and this integration allows them to use those funds directly toward Replit subscriptions and usage.

Following the GCP Marketplace integration from September, this addition makes it even easier for enterprise teams to adopt Replit using their existing cloud procurement processes and budgets.

[View on Azure Marketplace](https://marketplace.microsoft.com/en-us/product/saas/replit.replit?tab=Overview)

### GitLab and Bitbucket support

Replit now supports GitLab and Bitbucket repositories in addition to GitHub, giving you more flexibility in where you store your code. You can now import projects from GitLab and Bitbucket directly into Replit, along with improved git functionality across all supported platforms.

The enhanced git integration includes:

* **Multi-platform support**: Import and work with repositories from GitHub, GitLab, and Bitbucket
* **Improved git operations**: Faster and more reliable git commands throughout the workspace
* **Better repository management**: Streamlined workflows for cloning, pushing, and pulling from any supported git provider

Learn more about [importing projects](/core-concepts/workspace/app-setup/import) and [using git in Replit](/core-concepts/workspace/version-control/git-interface).


# November 21, 2025
Source: https://docs.replit.com/updates/2025/11/21/changelog

2 min read

## Platform updates

* [Design Mode: Create stunning websites in under 2 minutes](#design-mode-create-stunning-websites-in-under-2-minutes)
* [Fast Mode now available to everyone](#fast-mode-now-available-to-everyone)
* [Import ZIP archives directly](#import-zip-archives-directly)
* [Enhanced Atlassian connectors](#enhanced-atlassian-connectors)
* [HoundDog privacy scanning integration](#hounddog-privacy-scanning-integration)
* [New connector: Todoist](#new-connector-todoist)
* [Replit Auth UI improvements](#replit-auth-ui-improvements)
* [Replit Core available through American Express](#replit-core-available-through-american-express)

## Teams and Enterprise

* [Enterprise data warehouse connectors](#enterprise-data-warehouse-connectors)

### Design Mode: Create stunning websites in under 2 minutes

Design Mode is now live. Powered by Google's Gemini 3, Design Mode creates beautiful interactive designs and static websites in under 2 minutes—faster and better-looking than ever before on Replit.

Perfect for rapid prototyping, landing pages, and simple websites, Design Mode focuses on visual quality without backend complexity. When you need functionality, convert your design to a full app with one click.

<Frame>
  <img alt="Design Mode interface showing App and Design tabs" />
</Frame>

[Learn more about Design Mode](/replitai/design-mode)

### Fast Mode now available to everyone

Fast Mode is now available to everyone and **free until Dec 1**. Get faster execution speeds across your Replit projects to build and iterate quicker.

[Learn more about Lite mode](/core-concepts/agent/agent-modes)

### Import ZIP archives directly

Import `.zip` archives directly into a new app. Replit automatically downloads and extracts files into your Replit App, so you can start building and collaborating on existing projects immediately.

<Frame>
  <img alt="ZIP import feature showing import interface" />
</Frame>

[Learn how to import from ZIP](/getting-started/quickstarts/import-from-zip)

### Enhanced Atlassian connectors

Atlassian Connectors (Jira, Confluence) now automatically detect your site URL from your access tokens, eliminating manual setup. This streamlined connection flow reduces friction and saves configuration time.

<Frame>
  <img alt="New Atlassian connector flow with automatic site detection" />
</Frame>

[Explore Agent integrations](/replitai/integrations)

### HoundDog privacy scanning integration

HoundDog is now integrated into the Security Scanner. It automatically detects sensitive data exposure including PII, API keys, and credentials that could leak through logs or external services. Combined with Semgrep, you get comprehensive security coverage.

<Frame>
  <img alt="HoundDog privacy scanning interface showing detected vulnerabilities" />
</Frame>

[Learn more about Security Scanner](/core-concepts/workspace/auth-and-security/security-scanner)

### New connector: Todoist

Connect Todoist to manage tasks programmatically from your Replit apps. Integrate task management into your workflows and automate task creation, updates, and tracking.

[Explore all Agent integrations](/replitai/integrations)

### Replit Auth UI improvements

The Replit Auth UI has been redesigned for a more polished, user-friendly authentication experience.

<Frame>
  <img alt="Updated Replit Auth UI" />
</Frame>

[Learn about Replit Auth](/core-concepts/workspace/auth-and-security/authentication)

### Replit Core available through American Express

Replit Core is now available as a perk for American Express Cardholders. Check your AMEX account to access this exclusive offer.

<Frame>
  <img alt="AMEX benefits page showing Replit offer" />
</Frame>

[Learn about Replit Core](/billing/plans/replit-core)

### Enterprise data warehouse connectors

**BigQuery, Databricks, and Snowflake** connectors are now available to all enterprise customers. Connect your data warehouses directly to Replit and build powerful data-driven applications.

[Learn about managing your connectors](/replitai/managing-connectors)


# November 26, 2025
Source: https://docs.replit.com/updates/2025/11/26/changelog

2 min read

## What's new

* [Stripe Integrated Payments for Core Users](#stripe-integrated-payments-for-core-users)
* [Better search rankings for Custom Domains](#better-search-rankings-for-custom-domains)

## Platform

### Stripe Integrated Payments for Core Users

Integrate Stripe directly into your apps with one click. Agent sets up payments and subscriptions with real-time sync to Database for subscription statuses, so you can focus on building your product instead of wiring together payment infrastructure.

[Learn about Stripe Payments Integration](/core-concepts/monetization/stripe-payments)

### Better search rankings for Custom Domains

When you link a custom domain to your published app, search engines now index only your custom domain—not your `replit.app` subdomain. This prevents duplicate content penalties and helps your app rank better in search results.

[Learn about Custom Domains](/cloud-services/deployments/custom-domains)


# December 05, 2025
Source: https://docs.replit.com/updates/2025/12/05/changelog

1 min read

## What's new

* [Build full-stack mobile apps with Agent](#build-full-stack-mobile-apps-with-agent)
* [Database now generally available](#database-now-generally-available)
* [Fast Mode handles more autonomously](#fast-mode-handles-more-autonomously)
* [Connect third-party services faster](#connect-third-party-services-faster)

## Platform

### Build full-stack mobile apps with Agent

<Frame>
  <img />
</Frame>

Agent can now build [mobile apps](/replitai/building-mobile-apps) with a full backend server. This unlocks powerful capabilities including [AI Integrations](/replitai/integrations), [Database](/cloud-services/storage-and-databases/sql-database), [Object Storage](/cloud-services/storage-and-databases/object-storage), and connectors—everything you need for production-ready mobile development.

### Database now generally available

The new [Database](/cloud-services/storage-and-databases/sql-database) is now the default for all new Replit Apps. This upgrade delivers enhanced reliability and infrastructure control, with improved performance and easier data management for your projects.

### Fast Mode handles more autonomously

<Frame>
  <img />
</Frame>

[Lite mode](/core-concepts/agent/agent-modes) (formerly Fast Mode) can now handle more tasks on its own while recommending Agent for larger changes. Build faster with quick iterations and seamless handoffs.

### Connect third-party services faster

Connect third-party services faster with improved connector support. Add most API key-based services by simply providing their configuration—no complex setup required. Enhanced with multi-key configurations and extended health checks for more reliable [integrations](/replitai/integrations).


# December 12, 2025
Source: https://docs.replit.com/updates/2025/12/12/changelog

2 min read

## What's new

* [Agent now supports custom MCP servers](#agent-now-supports-custom-mcp-servers)
* [Plaid Connector for Enterprise (experimental)](#plaid-connector-for-enterprise-experimental)

## Platform

### Agent now supports custom MCP servers

Agent can now connect to remote Model Context Protocol (MCP) servers, giving you access to new capabilities and tools with minimal setup. This unlocks the ability for Agent to call external tools and pull context from remote systems.

With custom MCP servers, you can:

* Connect to remote servers that pull context and take actions in external tools
* Access hundreds of tools and data sources through the MCP open standard
* Automatically load tools that each server makes available

Partners can integrate their services with Agent by exposing an MCP server—no additional integration work required.

<Frame>
  <img />
</Frame>

**Learn more:**

* [MCP servers overview](/replitai/mcp/overview)
* [MCP directory](/replitai/mcp/directory)
* [Learn about MCP in three minutes](/tutorials/mcp-in-3)

## Teams and Enterprise

### Plaid Connector for Enterprise

Enterprise customers can now enable the Plaid Connector to connect bank accounts and build apps with fintech primitives. This connector is in active development, with new features and improvements being added based on customer feedback.

With the Plaid Connector, you can:

* Connect bank accounts to your applications
* Access fintech primitives for building financial features
* Manage connectors centrally through the admin dashboard

**Learn more:**

* [Managing your connectors](/replitai/managing-connectors)
* [Agent integrations](/replitai/integrations)


# December 19, 2025
Source: https://docs.replit.com/updates/2025/12/19/changelog

2m read

## What's new

* [Documentation UI Refresh](#documentation-ui-refresh)
* [Rollback Session Stitching](#rollback-session-stitching)
* [Custom MCP Server Icons](#custom-mcp-server-icons)

### Documentation UI Refresh

<Frame>
  <img alt="Before: Old docs appearance" />
</Frame>

The documentation site received a visual update to better align with Replit's Workspace design and brand colors. This creates a more cohesive experience between the docs and the main application.

* Updated color scheme to match brand colors
* Design now more closely resembles the Workspace interface
* Improved visual consistency across Replit properties

### Rollback Session Stitching

<Frame>
  <img />
</Frame>

Rollbacks now automatically connect consecutive sessions, making it easier to rewind through multiple work sessions. This quality-of-life improvement helps you navigate your project history more smoothly.

### Custom MCP Server Icons

<Frame>
  <img />
</Frame>

Custom MCP servers now display proper icons using Google Favicon API, plus an MCP tag for easier identification in your Workspace.

### Status Dot Design Update

Status indicator dots now have a cleaner visual appearance with the removal of box shadows.


# December 26, 2025
Source: https://docs.replit.com/updates/2025/12/26/changelog

2 min read

## What's new

* [Gift cards](#gift-cards)
* [Replit Rewind 2025](#replit-rewind-2025)
* [Replit ChatGPT App](#replit-chatgpt-app)
* [Credit packs holiday sale](#credit-packs-holiday-sale)
* [Fast Build](#fast-build)
* [learn.replit.com brand refresh](#learnreplitcom-brand-refresh)
* [Security Center for Enterprise](#security-center-for-enterprise)

## Platform

### Gift cards

Gift cards are now available just in time for the holidays. You can purchase gift cards in denominations from \$50 to \$1,000 and redeem them on existing accounts, making them perfect for last-minute gifts for builders and developers.

### Replit Rewind 2025

Replit Rewind 2025 is your personalized year-in-review experience. If you have created at least two apps this year, you can see your building highlights, including total apps created and published, your building persona, and year over year activity insights. Share your achievements and celebrate your creative journey.

<Frame>
  <img alt="Replit Rewind 2025 showing user stats including apps built, published, views, messages sent, and ranking" />
</Frame>

### Replit ChatGPT App

The Replit ChatGPT App enables you to build Replit Apps directly from ChatGPT conversations. This integration connects Replit's development platform with ChatGPT's conversational interface, allowing you to build and publish apps without leaving ChatGPT.

**Learn more:** [Replit in ChatGPT](/platforms/chatgpt)

### Credit packs holiday sale

Credit packs are now available to all builders with a special end-of-year promotion: \$200 off the \$1,000 credit pack through December 31, 2025.

### Fast Build

Agent now builds your first app significantly faster. First build time has been reduced from 15 to 20 minutes down to 3 to 5 minutes, while Build mode design quality now matches Design mode.

### Learn brand refresh

The learning platform at learn.replit.com has been updated with a fresh visual design that matches the Workspace aesthetic.

<Frame>
  <img alt="learn.replit.com after the brand refresh with updated styling" />
</Frame>

## Teams and Enterprise

### Security Center for Enterprise

Security Center is now available for all Enterprise users. As an Enterprise admin, you can scan your entire organization's Replit Apps with a single click and receive:

* CVE detection across all dependencies, organized by severity
* A detailed view showing which Replit Apps are affected
* SBOM (Software Bill of Materials) export capabilities

<Frame>
  <img alt="Security Center dashboard showing total scans, vulnerabilities, and CVEs organized by severity" />
</Frame>

<Frame>
  <img alt="Security Center CVE detail view showing affected packages and versions" />
</Frame>


# January 02, 2026
Source: https://docs.replit.com/updates/2026/01/02/changelog

2 min read

The Replit team is spending time with friends and family to celebrate the holiday season. Stay tuned for more updates and improvements next week.

In the meantime, you can read about all the updates from 2025 [here](https://blog.replit.com/2025-replit-in-review?utm_source=Matt\&utm_medium=docs\&utm_campaign=changelog).


# January 09, 2026
Source: https://docs.replit.com/updates/2026/01/09/changelog

2 min read

## What's new

* [Automation preview for Agent users](#automation-preview-for-agent-users)
* [Private apps for free accounts](#private-apps-for-free-accounts)
* [Made with Replit badge](#made-with-replit-badge)
* [AI command in Shell](#ai-command-in-shell)
* [New AI models in Integrations](#new-ai-models-in-integrations)

## Platform

### Automation preview for Agent users

<Frame>
  <video />
</Frame>

Automation preview is now available to all Agent builders. Get a preview of the automation step graph in seconds, instead of waiting minutes to see visual progress.

### Private apps for free accounts

Builders on free accounts can now create private apps. Free tier limits still apply on how many apps you can create.

### Made with Replit badge

<Frame>
  <img alt="Made with Replit badge" />
</Frame>

A "Made with Replit" badge now appears on free published apps. Remove it by upgrading to Replit Core. Select the badge to learn more about Replit.

### AI command in Shell

<Frame>
  <img alt="Shell showing the replit ai command output" />
</Frame>

Interact with LLMs in Shell using the `replit ai` command. This works for both direct Shell access and Agent workflows.

### New AI models in Integrations

Support for newly-launched AI models is now available in AI Integrations:

| Model                        | Description                                                                                                                 |
| ---------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
| `gpt-5.2`                    | OpenAI's most capable model for professional knowledge work. First model above 90% on ARC-AGI-1 with a 400K context window. |
| `claude-opus-4.5`            | Anthropic's flagship model optimized for coding, agents, and computer use. Achieves 80.9% on SWE-bench Verified.            |
| `gemini-3-flash-preview`     | Google's high-speed model for agentic workflows with 1M token context. Near Pro-level reasoning at lower latency and cost.  |
| `gemini-3-pro-preview`       | Google's advanced multimodal model with state-of-the-art reasoning and real-world knowledge.                                |
| `gemini-3-pro-image-preview` | Google's Nano Banana Pro model for high-quality image generation and editing with accurate text rendering.                  |


# January 16, 2026
Source: https://docs.replit.com/updates/2026/01/16/changelog

3 min read

## What's new

* [Mobile Apps on Replit](#mobile-apps-on-replit)
* [Redesigned tool calls UI in Agent chat](#redesigned-tool-calls-ui-in-agent-chat)
* [Node.js security patch](#nodejs-security-patch)

## Platform

### Mobile Apps on Replit

<WistiaEmbed title="Mobile Apps on Replit" />

Build native iOS apps from a simple prompt. Agent creates full React Native apps, and you can add features like databases, Stripe payments, or OpenAI integrations as you go. Preview your app instantly by scanning a QR code with Expo Go, then publish to the App Store with one click.

Ready to build your first mobile app? Check out [Native Mobile Apps](/replitai/building-mobile-apps) to get started, or follow the [Build and launch a mobile app](/tutorials/build-and-launch-a-mobile-app) tutorial.

<Callout>
  **\$15K Mobile Buildathon**: Join the Mobile Buildathon to build something amazing and compete for prizes. [Learn more](https://replit.com/buildathon).
</Callout>

### Redesigned tool calls UI in Agent chat

Agent chat now features a cleaner, more compact interface for tool calls. Tool calls collapse into grouped rows with stacked icons, making it easier to see what's happening at a glance. File edits and creations link directly to the diff panel for easy review. This streamlined design helps you follow Agent runs with less noise and more clarity.

<Frame>
  <img alt="Agent chat before redesign showing verbose output" />

  <img alt="Tool calls after redesign showing compact grouped actions" />
</Frame>

### Node.js security patch

A critical security vulnerability was announced in Node.js this week. All Agent development environments and Replit's Node.js applications have been patched to use secure versions. Your apps will also update to the secure version when you republish them.


# January 23, 2026
Source: https://docs.replit.com/updates/2026/01/23/changelog

2 min read

## What's new

* [Audio support in AI integrations](#audio-support-in-ai-integrations)
* [Web search in Agent automations](#web-search-in-agent-automations)
* [RulesSync support for replit.md](#rulesync-support-for-replitmd)

## Platform

### Audio support in AI integrations

<Frame>
  <img alt="AI integrations audio settings showing transcription and output options" />
</Frame>

AI integrations now supports audio capabilities with four new models:

* `gpt-4o-transcribe` and `gpt-4o-transcribe-mini` for speech-to-text transcription
* `gpt-4o-audio` and `gpt-4o-audio-mini` for audio output generation

Build applications that process or generate audio content—transcribe podcasts, create voice assistants, or add speech interfaces to your apps.

### Web search in Agent automations

<Frame>
  <img alt="Agent delivering research summary via automation" />
</Frame>

Create automations that use web search without requiring API keys. Agent integrates LLM-native web search through AI integrations, enabling scheduled research, news summaries, or educational content delivery.

### RulesSync support for replit.md

The open source project [RulesSync](https://github.com/dyoshikawa/rulesync) now supports `replit.md` files. Keep your AI agent configuration files (`CLAUDE.md`, `AGENT.md`, and `replit.md`) synchronized across multiple projects.


# January 30, 2026
Source: https://docs.replit.com/updates/2026/01/30/changelog

1 min read

## What's new

* [LinkedIn skills verification built on Replit](#linkedin-skills-verification-built-on-replit)
* [Open in Replit links with prefilled prompts](#open-in-replit-links-with-prefilled-prompts)

## Platform

### LinkedIn skills verification built on Replit

LinkedIn launched AI-powered skills verification, built on Replit. Verify your coding skills directly on LinkedIn with interactive challenges that test real-world programming abilities.

<Frame>
  <img alt="LinkedIn skills verification demo showing interactive coding challenge" />
</Frame>

### Open in Replit links with prefilled prompts

"Open in Replit" links now support prefilled prompts. Create links that open Replit with a pre-written prompt, making it easier for others to get started building. This feature is available in ChatPRD and Replit Docs.

<Frame>
  <img alt="Open in Replit button with prefilled prompt" />
</Frame>


# February 06, 2026
Source: https://docs.replit.com/updates/2026/02/06/changelog

2 min read

## What's new

* [Agent Inbox](#agent-inbox)
* [Replit + Gemini CLI extension](#replit--gemini-cli-extension)
* [Replit Learn lessons 5-7](#replit-learn-lessons-5-7)
* [Updated Quickstart and tutorials](#updated-quickstart-and-tutorials)

## For Teams

* [Custom OpenAI key support](#custom-openai-key-support)

## Platform

### Agent Inbox

<Frame>
  <img alt="Agent Inbox interface displaying visitor feedback" />
</Frame>

Leave feedback directly on [published apps](/cloud-services/deployments/about-deployments) with [Agent Inbox](/cloud-services/deployments/enable-feedback). When visitors use the feedback widget on your published app, you can use [Agent](/core-concepts/agent) to implement their suggestions. Available for all paid users.

### Replit + Gemini CLI extension

Create and interact with projects through the Gemini CLI. The Replit extension is now live in the Gemini CLI Extensions directory, available alongside 300+ other developer extensions.

### Replit Learn lessons 5-7

Lessons 5-7 are now live on [Replit Learn](https://learn.replit.com), completing the AI Foundations Module. Learn what makes an "app" an app, how AI works, and what vibe coding is through hands-on projects. Perfect for builders new to AI and Replit.

### Updated Quickstart and tutorials

<Frame>
  <img alt="Updated quickstart showing interactive demo app" />
</Frame>

Updated [Quickstart](/getting-started/quickstarts/ask-ai) and [Design vs Build Mode tutorial](/tutorials/design-vs-build-mode) with new interactive demo projects.

### Custom OpenAI key support

Use your own OpenAI key with [AI integrations](/replitai/replit-ai-integrations) instead of the default model provider. Available for Teams customers.


# February 13, 2026
Source: https://docs.replit.com/updates/2026/02/13/changelog

2 min read

## What's new

* [Claude Opus 4.5 support](#claude-opus-45-support)
* [Open in Replit button (Beta)](#open-in-replit-button-beta)
* [Agent production SQL database access](#agent-production-sql-database-access)
* [Bitbucket integration improvements](#bitbucket-integration-improvements)
* [User/group level budgets](#usergroup-level-budgets)
* [Connection reliability improvements](#connection-reliability-improvements)

## Platform

### Claude Opus 4.5 support

Claude Opus 4.5 is now supported in AI Integrations, giving you access to Anthropic's latest AI capabilities optimized for coding and agents.

### Open in Replit button (Beta)

You can now tackle Linear tickets directly on Replit with the new 'Open In Replit' button. This beta feature needs to be enabled in preferences and automatically populates the prompt with issue details. The team is working with Linear to improve the integration.

<Frame>
  <img alt="Linear integration showing Open in Replit button in ticket sidebar" />
</Frame>

<Frame>
  <img alt="Replit workspace with Linear issue details automatically filled in the prompt" />
</Frame>

<Frame>
  <img alt="Linear Connector configuration menu showing Replit integration options" />
</Frame>

### Agent production SQL database access

Agent can now view and query your production SQL database in read-only mode, allowing it to work with real production data without risk of accidental modifications.

<Frame>
  <img alt="Database explorer showing production database in read-only mode with Agent accessing SQL data" />
</Frame>

### Bitbucket integration improvements

Enhanced Bitbucket import support makes it easier for you to migrate your repositories into Replit alongside GitHub and GitLab.

<Frame>
  <img alt="Import to Replit screen showing Bitbucket as an available import source" />
</Frame>

### Connection reliability improvements

Several improvements to enhance the Integrations experience:

* Connection tokens are less likely to expire due to an improved background reconnection process
* Clear display when connections are in an unhealthy/error state
* Ability to re-connect integrations directly from the error state

## Teams and Enterprise

### User/group level budgets

Budget management capabilities are now enabled for all enterprise customers:

* Enterprise team admins can set default usage budgets on all members
* Admins can set budgets on specific groups (e.g., Admins/Members and custom groups)
* Coming soon: admins will be able to set override budgets on individual users

<Frame>
  <img alt="Group agent usage alerts management interface showing budget thresholds for different groups" />
</Frame>

<Frame>
  <img alt="Organization alerts settings showing per-user and group-level budget configurations" />
</Frame>


# February 20, 2026
Source: https://docs.replit.com/updates/2026/02/20/changelog

2 min read

## What's new

* [Pro Plan launch](#pro-plan-launch)
* [Background memory compression](#background-memory-compression)
* [Production deployment logs access](#production-deployment-logs-access)
* [Skills Search](#skills-search)
* [Razorpay MCP integration](#razorpay-mcp-integration)
* [Expanded default MCP list](#expanded-default-mcp-list)
* [Video Stack](#video-stack)
* [Deployment visibility settings](#deployment-visibility-settings)

## Pro Plan launch

Replit Pro is here, and Core now offers even better value. We've made plans clearer and more purpose-built:

* **Replit Pro**: For serious builders—Turbo Mode (2.5x faster Agent, separate toggle), tiered credits with rollover, up to 15 builders with no per-seat fees, priority support, and 4× data retention. [Learn about Pro](/billing/plans/replit-pro).
* **Core**: Invite up to 5 collaborators at no extra cost. See the [pricing page](https://replit.com/pricing) for current Core pricing.
* **Teams plan sunset**: Teams is being replaced by Pro. Existing Teams customers are upgraded to Pro at no additional cost for the remainder of their term. Migration starts . [Details and timeline](https://blog.replit.com/pro-plan).
* **Agent modes**: Choose **Economy** (cost-optimized) or **Power** (performance); **Turbo** is a separate toggle (Pro/Enterprise only, 2.5x faster). [Agent modes guide](/core-concepts/agent/agent-modes).
* **Fast Mode is now Lite Mode**: Same lightning-quick, scoped changes—updated name in the product and docs. [Lite mode](/core-concepts/agent/agent-modes).
* **Code Optimizations**: The setting that controls how Agent reviews its own code (formerly Autonomy Level) is now called Code Optimizations. [Code Optimizations](/core-concepts/agent/code-optimizations).
* **Collaboration**: Better collaboration on all paid plans—unlimited workspaces, simplified sharing, unified settings, per-workspace usage tracking. Core: 5 collaborators; Pro: 15 builders.

## Platform

### Background memory compression

Agent no longer pauses your workflow to optimize its memory. Previously, you'd see an "Optimized Agent memory" message that blocked progress for 30+ seconds. Now this happens seamlessly in the background, so Agent stays responsive while you work.

<Frame>
  <img alt="Agent memory compression running in the background without interrupting the workflow" />
</Frame>

### Production deployment logs access

Agent now has access to production Deployment logs, enabling it to find and fix errors based on real production data. Expect more production debugging enhancements coming soon.

### Skills Search

Skills Search lets you browse and install popular skills directly from within Replit without needing to prompt Agent or manually upload files.

<Frame>
  <img alt="Skills Search interface showing available skills to install" />
</Frame>

### Razorpay MCP integration

The Razorpay MCP integration is now available, expanding payment capabilities for builders in India. Connect Razorpay to your Replit project to accept payments, manage orders, and handle refunds directly through Agent.

<Frame>
  <img alt="Razorpay MCP integration configuration in Replit" />
</Frame>

### Expanded default MCP list

The default MCP list on [replit.com/integrations](https://replit.com/integrations) has expanded, letting you connect new integrations with a single click.

### Video Stack

Video Stack lets you create animated videos with code by leveraging generated images and videos for creative motion visuals. Build animated videos entirely with code directly in your Replit project.

## Teams and Enterprise

### Deployment visibility settings

Deployment visibility settings let organizations deploy apps with visibility scoped to admins, members, or viewers of your Team. Control exactly who can access deployed applications within your organization.

<Frame>
  <img alt="Deployment visibility dropdown with organization-level access controls" />
</Frame>


# February 27, 2026
Source: https://docs.replit.com/updates/2026/02/27/changelog

2 min read

## What's new

* [Password manager keyboard navigation](#password-manager-keyboard-navigation)
* [Agent performance improvements](#agent-performance-improvements)
* [System theme support](#system-theme-support)
* [Quick feedback widget improvements](#quick-feedback-widget-improvements)

## Platform

### Password manager keyboard navigation

<Frame>
  <img alt="Password manager navigation dropdown showing keyboard navigation between email field and saved accounts" />
</Frame>

You can now log into Replit via your password manager extension using only the keyboard. Previously, pressing the down arrow to navigate to the email field would refocus on it, requiring you to use a mouse.

### Agent performance improvements

Agent performance has been improved with new optimizations and an improved architecture.

### System theme support

<Frame>
  <img alt="System theme settings menu showing Light, Dark, and System theme options" />
</Frame>

Replit now follows your system theme preference, or you can manually select light or dark mode from the quick menu, the Settings Pane, or the Workspace command palette.

### Feedback widget improvements

<Frame>
  <img alt="Feedback widget configuration panel showing position, icon, and background color customization options" />
</Frame>

The feedback widget has shipped with improvements based on user feedback:

* Full i18n support so browser translation works in other languages
* Customize position, background color, and icon on widget


# March 06, 2026
Source: https://docs.replit.com/updates/2026/03/06/changelog

2 min read

## What's new

* [Connectors and AI Integrations now enabled by default for Teams and Enterprise](#connectors-and-ai-integrations-now-enabled-by-default-for-teams-and-enterprise)
* [AI Chat message truncation](#ai-chat-message-truncation)
* [GPT-Codex-5.3 support in AI Integrations](#gpt-codex-53-support-in-ai-integrations)
* [RevenueCat integration now generally available](#revenuecat-integration-now-generally-available)

## Platform

### AI Chat message truncation

Long messages in AI Chat are now truncated with a "Show more" button, keeping your chat history readable.

### GPT-Codex-5.3 support in AI Integrations

You can now use `gpt-codex-5.3` in AI Integrations.

### RevenueCat integration now generally available

RevenueCat integration is now generally available and makes it easy to monetize your mobile apps. Ask Agent to add a subscription and it handles the app store setup for you.

## Teams and Enterprise

### Connectors and AI Integrations now enabled by default for Teams and Enterprise

Connectors and AI Integrations are now enabled by default for Teams and Enterprise — no opt-in required.

Connectors is now powering over 100k active repl connections (with over 450k created to date).


# March 13, 2026
Source: https://docs.replit.com/updates/2026/03/13/changelog

2 min read

## What's new

* [Introducing Replit Agent 4](#introducing-replit-agent-4)

## Agent

### Introducing Replit Agent 4

<WistiaEmbed title="Introducing Replit Agent 4" />

Agent 4 is here. Built for creativity, Agent is your AI creative partner - turning your ideas into apps, designs, slides, and more, all from plain language. No coding required.

With Agent 4, you can:

* **Build anything**: create web apps, mobile apps, data dashboards, AI-powered tools, and more
* **Design before you build**: explore mockups on the [Design Canvas](/replitai/canvas) before committing to code
* **Plan your project**: use [Plan mode](/core-concepts/agent/plan-mode) to map out your build before any code is written
* **Run tasks in parallel**: Agent handles multiple tasks at once so you can move faster
* **Collaborate with teammates**: invite others to your project and build simultaneously
* **Connect your tools**: pull data from BigQuery, Linear, Slack, Notion, and more directly from chat

<Card title="Start building with Agent 4" icon="arrow-up-right" href="https://replit.com">
  Describe your idea and let Agent bring it to life. No setup required.
</Card>


# March 20, 2026
Source: https://docs.replit.com/updates/2026/03/20/changelog

2 min read

## What's new

* [Replit PWA on Microsoft App Store](#replit-pwa-on-microsoft-app-store)
* [Empty project creation](#empty-project-creation)
* [Enterprise Audit Log Portal](#enterprise-audit-log-portal)

## Platform

### Replit PWA on Microsoft App Store

Replit is now available as a Progressive Web App (PWA) on the Microsoft App Store, making it easier for Windows builders to discover and install Replit as a native-like application.

### Empty project creation

You can now create an empty project from the import page. Empty projects don't trigger Agent on start—no credits consumed on creation—and give you full control over framework and tooling setup. The option is available on the import page for builders who want this level of control.

## Teams and Enterprise

### Enterprise Audit Log Portal

Enterprise Audit Log Portal (v1) is now available to all enterprise customers. Admins can view events performed by members of their organization and configure event stream integrations with their SIEM platform of choice—including S3, Datadog, Splunk, Google Cloud Storage, and Microsoft Sentinel.


# March 27, 2026
Source: https://docs.replit.com/updates/2026/03/27/changelog

1 min read

## What's new

* [Application-level analytics](#application-level-analytics)

## Platform

### Application-level analytics

<Frame>
  <img alt="Application-level analytics page showing requests, top URLs, HTTP statuses, and request durations" />
</Frame>

You can now view analytics at the application level, not just the deployment level. This gives you a clearer picture of your app's overall performance—including requests, top URLs, HTTP statuses, and response times.


# April 3, 2026
Source: https://docs.replit.com/updates/2026/04/03/changelog

1 min read

## What's new

* [Stock and AI-generated images in Library](#stock-and-ai-generated-images-in-library)
* [Plan Mode fix](#plan-mode-fix)
* [Slide export improvements](#slide-export-improvements)

## Agent

### Stock and AI-generated images in Library

Stock images and AI-generated images now appear in the Library sidebar. Previously, these images were created in your project but not surfaced in the Library for easy browsing. You can now find and reuse any image Agent downloaded or generated directly from the Library sidebar.

<Frame>
  <video />
</Frame>

Learn more about [artifacts and the Library sidebar](/replitai/artifacts#library-sidebar).

### Plan Mode fix

Plan Mode now correctly activates when you toggle it on after sending your first message. Previously, toggling Plan Mode mid-conversation was silently ignored.

### Slide export improvements

Exporting large slide decks (150 slides or more) is now more reliable. Export timeouts now scale with the number of slides, supporting decks with up to 200+ slides.


# December 13, 2024
Source: https://docs.replit.com/updates/2024/12/13/changelog

Assistant launch, improved Agent, usage updates, and more.

## What's new

* [Assistant Features](#assistant-features)
* [Rollback with Ease](#rollback-with-ease)
* [Build Beautiful Apps](#build-beautiful-apps)
* [Rapid Scraping / Screenshots](#rapid-scraping---screenshots)
* [Usage Updates You'll Love](#usage-updates-youll-love)

<Frame>
  <img alt="Assistant" />
</Frame>

This week, Assistant launched—a new AI tool that allows you to edit multiple files and apply changes directly.

<Note>
  **Update (December 2025):** Assistant has been deprecated. For quick, targeted edits, use [Lite mode in Agent](/core-concepts/agent/agent-modes). For discussions and planning, use [Plan mode in Agent](/core-concepts/agent/plan-mode).
</Note>

Assistant is optimized for chat and quick edits. A common workflow is creating an MVP with Agent, then performing quick edits with Assistant.

Here are some highlights of Assistant:

* **Lightweight:** Assistant is optimized for chat and quick edits, now with the ability to edit multiple files and apply changes directly.
* **Mentions and screenshots:** Mention files or URLs in your prompts. Assistant can scrape the URL or take a screenshot for you.
* **Rollbacks:** Assistant automatically creates checkpoints, allowing you to easily preview edits as diff and roll back with a single click.
* **Flexibility:** Assistant works in any Replit App, regardless of the tech stack. Bring your existing projects or start fresh with Agent.
* **More Beautiful Apps:** Improved support for responsive React apps allows you to create stunning apps.
* **Billing updates:** All usage limits for Agent have been removed, and the credits included in your subscription have been increased.

## Platform updates

### Assistant Features

Replit Assistant is a lightweight AI tool built for chat and quick edits. It can edit multiple files and apply them directly on it's own.

Assistant excels when you give it context—that might mean specific features, files (mention them with `@file`), or URLs (just paste them in).

Assistant can help you iterate faster and uses about 5x less credits than Agent.

<Frame>
  <img alt="Intro to Assistant" />
</Frame>

### Rollback with Ease

Assistant automatically creates checkpoints, allowing you to easily preview edits as diffs and roll back with a single click if anything looks off.

<Frame>
  <img alt="Apply Edits" />
</Frame>

### Build Beautiful Apps

Improved support for **React apps** ensures your apps appear and function at their peak.

<Frame>
  <img alt="Beautiful Apps with React" />
</Frame>

### Rapid Scraping / Screenshots

Screenshot or scrape the contents of any site directly into your prompts with **Assistant** or **Agent**.

Simply paste a URL and Replit offers to take a screenshot or scrape the contents of the page.

As always, you can always attach images to your prompts or mention files with `@file`.

<Frame>
  <img alt="Scraping" />
</Frame>

### Usage Updates You’ll Love

* **No More Usage Quotas:** Say goodbye to limits for Agent usage.
* **More Credits for Subscribers:** Core subscribers now receive increased credits.

<Frame>
  <img alt="Billing" />
</Frame>

New billing tools allow you to monitor and limit your spend. Head over to the "usage" tab in Replit to see your usage and set limits.

<Frame>
  <img alt="Billing" />
</Frame>


# December 20, 2024
Source: https://docs.replit.com/updates/2024/12/20/changelog

Snow Mode, custom Assistant prompts, package installs, Agent updates, and platform improvements.

## What's new

* [Snow Mode](#snow-mode)
* [Custom prompts](#custom-prompts)
* [Package installs](#package-installs)
* [Replit App theming](#replit-app-theming)
* [Database notifications](#database-notifications)
* [Recommendation system](#recommendation-system)
* [Integration visibility](#integration-visibility)
* [Workflows](#workflows)
  Updates have been rolling out straight into the holiday season. Before getting into product updates, here's some cheer with *Snow Mode*. Try it out today!

## Platform updates

### Snow Mode

<Frame>
  <img alt="Snow Mode animation showing falling snow effect in the Replit IDE" />
</Frame>

### Custom prompts

<Note>
  **Update (December 2025):** Assistant has been deprecated. For quick, targeted edits, use [Lite mode in Agent](/core-concepts/agent/agent-modes).
</Note>

Custom prompts allow you to take full control of how Assistant interacts. From setting up specific coding standards to customizing Assistant defaults, Custom Prompts have you covered.

You might add things like:

* A specific coding style or framework
* Specific problem solving techniques
* Package management preferences

For example, you might add:

```
use pnpm for package management
use motion/react instead of framer-motion
always use claude-3-5-sonnet-20241022 as your model
```

<Frame>
  <img alt="Screenshot of Custom Prompts interface showing prompt configuration options" />
</Frame>

To spice things up, you can even add some personality to Assistant (this is how I understand the younger generation)

<Frame>
  <img alt="Screenshot showing Gen Z style conversation with Assistant" />
</Frame>

### Package installs

Assistant can now install your packages for you in a single click.

<Frame>
  <img alt="Animation demonstrating one-click package installation feature" />
</Frame>

### Replit App theming

Your projects just got a major glow-up. No code required 💅

Now, you can ask Agent to build a React Replit App and customize it effortlessly with no-code theming tools:

* Change the primary color
* Switch between light and dark modes
* Personalize your app's aesthetics to be truly yours

<Frame>
  <img alt="Animation demonstrating the Replit App theming feature" />
</Frame>

Copy paste this prompt to Agent to try it out!

```
Build me a todo list app in React
```

### Database notifications

You now get a notification when Agent adds a database to your Replit App. Keep an eye out for it in the bottom left.

<Frame>
  <img alt="Screenshot showing database notification interface in Replit" />
</Frame>

### Recommendation system

Agent now suggests the next cool features to build in your app, acting as your creative brainstorming partner.

It works like an infinite idea generator that helps guide you from idea to publish-ready software, fast.

<Frame>
  <img alt="Animation showing feature recommendations and suggestions" />
</Frame>

### Integration visibility

Agent now features enhanced integration visibility, allowing you to better track and manage integrations throughout your workflow.

Supported integrations include OpenAI, Stripe, Firebase, and more!

<Frame>
  <img alt="Animation showing integration visibility features and options" />
</Frame>

### Workflows

A Workflow is an easily configurable "Run" button that can run any command(s) you'd like.

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](https:/.replit.com/replit-workspace/workflows#creating-workflows), go to the Workflows pane by using the tools sidebar menu, or search for the Workflows pane using **`Command + K`**.

Check it out [here](https:/.replit.com/replit-workspace/workflows).


# December 27, 2024
Source: https://docs.replit.com/updates/2024/12/27/changelog

Integrations improvements, Replit Teams updates, build notifications, and database polish.

## What's new

* [Integrations](#integrations)
* [Build notifications](#build-notifications)
* [Database polish](#database-polish)
* [Agent improvements](#agent-improvements)
* [Replit Teams updates](#replit-teams-updates)

Happy Holidays!

## Platform updates

### Integrations

Integrations are now *front and center* in the Agent UI. You can easily add your favorite services to your Agent apps. Several new integrations have been launched and polished—check them out. Some highlights:

* Perplexity
* Firebase
* OpenAI
* Anthropic
* Google Services

<Frame>
  <img alt="Animation showing how to access and add integrations in the Agent UI" />
</Frame>

### Build notifications

Agent now sends you notifications when it's done working—listen for the audio notification.

<Frame>
  <img alt="Screenshot showing the audio notification feature for Agent build completion" />
</Frame>

If you're a more visual person, check out the favicon of the browser tab for status updates.

<Frame>
  <img alt="Screenshot showing different favicon states indicating Agent build status" />
</Frame>

### Database polish

A new database notification now appears in the dock when Agent adds a database to your project.

<Frame>
  <img alt="Screenshot showing the database notification in the dock" />
</Frame>

### Agent improvements

Agent now pauses immediately when requested, rather than completing its current execution. This should make it easier to stop Agent when you've changed your mind.

You might also notice some fancy new "Run" buttons in the Agent UI.

<Frame>
  <img alt="Screenshot showing the database notification in the dock" />
</Frame>

## Teams and Enterprise

### Replit Teams updates

Here are a few exciting updates for Teams:

* Teams may now customize Replit App icons and cover images
* Solid color covers have been replaced with custom images
* Replit Teams is now available on Mobile!

Now you can create shareholder value from practically anywhere 🤯

<Frame>
  <img alt="Screenshot of Replit Teams interface on a mobile device" />
</Frame>


# January 3, 2025
Source: https://docs.replit.com/updates/2025/01/03/changelog

2 min read

## What's new

* [xAI integration](#xai-integration)
* [Custom domain error handling](#custom-domain-error-handling)
* [Menu search feature](#menu-search-feature)
* [Neon database improvements](#neon-database-improvements)
* [React by default](#react-by-default)
* [Replit Teams login](#replit-teams-login)

🎆 Happy New Year!

The team took some time to recharge, but updates keep coming.

## Platform updates

### xAI integration

Agent can now add xAI directly to your apps.

<Frame>
  <img alt="xAI integration announcement" />
</Frame>

Add Grok to your projects and publish them in seconds. Just mention "add AI features with xAI" in your prompts or select xAI from integrations—Agent builds with the API.

<Frame>
  <img alt="xAI in product" />
</Frame>

More of your favorite integrations are coming to Agent.

### Custom domain error handling

Specific error messages for custom domain verification failures are now available, helping you debug issues faster.

### Menu search feature

You can now search the menu items in the sidebar in your Replit Apps.

### Neon database improvements

The Neon database integration has been optimized. Databases added with Agent are now more cost friendly and performant.

### React by default

The default template for new frontend Replit Apps now uses React. Your projects are more polished and functional out of the box.

## Teams and Enterprise

### Replit Teams login

The Teams login flow has been updated to make it easier to get started. This includes a new login experience with a team context selection page and improved account switching for Teams customers.


# January 10, 2025
Source: https://docs.replit.com/updates/2025/01/10/changelog

2 min read

## What's new

* [Slack integration](#slack-integration)
* [Agent and Assistant improvements](#agent-and-assistant-improvements)
* [Shell bash completion](#shell-bash-completion)
* [Elixir ecosystem fix](#elixir-ecosystem-fix)
* [Custom domain UX improvement](#custom-domain-ux-improvement)
* [Enhanced project featuring controls](#enhanced-project-featuring-controls)
* [Teams mobile search](#teams-mobile-search)

Another great week of updates!

## Platform updates

### Slack integration

Agent now integrates with the Slack API. That means you can use Agent to build apps that:

* Post messages
* Read history

from/to all your favorite Slack channels.

<Frame>
  <img alt="Slack integration" />
</Frame>

Submit what you build to the [Agent Showcase](https://forms.gle/qxpfr82wNpKsCdok9).

### Agent and Assistant improvements

* Agent now loads faster from the homepage so you can get to building faster.
* A floating popup now provides quick access to Assistant when selecting text in Console and Shell. Simply select text and select the Assistant icon to ask a question.

<Frame>
  <img alt="Ask assistant" />
</Frame>

### Shell bash completion

Shell now has autocomplete! Hit tab twice to autocomplete a command.

<Frame>
  <img alt="Tab tab" />
</Frame>

### Elixir ecosystem fix

Resolved issues with Elixir's mix tooling, the language now works as expected.

### Custom domain UX improvement

You can now paste a URL into the custom domain input and Replit automatically extracts the domain for you.

## Teams and Enterprise

### Enhanced project featuring controls

It's now easier to feature and un-feature your organization's public projects!

<Frame>
  <img alt="Featured project on profile" />
</Frame>

Now you can control a project's featured state directly from the workspace via the project info modal and from the projects index table.

<Frame>
  <img alt="Profile preview" />
</Frame>

Plus, when you feature a project, you'll get a sneak peek of how it will appear on your public profile.

### Teams mobile search

You can now search for your Teams Replit Apps on mobile.

<Frame>
  <img alt="Teams search" />
</Frame>


# January 17, 2025
Source: https://docs.replit.com/updates/2025/01/17/changelog

2 min read

## What's new

* [SendGrid integration](#sendgrid-integration)
* [Web view mobile support](#web-view-mobile-support)
* [DNS record format update](#dns-record-format-update)
* [Flask deployment upgrade](#flask-deployment-upgrade)
* [Assistant inline shell commands](#assistant-inline-shell-commands)

## Platform updates

### SendGrid integration

You can now build email integrations with Agent. This allows you to send emails from your new Agent projects using the SendGrid API.

<Frame>
  <img alt="SendGrid integration" />
</Frame>

### Web view mobile support

We've added the ability to scale web view to common mobile screen sizes. In addition, we've added a QR code in the URL dropdown and networking pane for easier mobile device testing.

As a reminder—even while you're building your project, it's accessible from the internet. Just visit the dev URL from any device.

<Frame>
  <img />
</Frame>

<Frame>
  <img alt="Mobile QR code" />
</Frame>

### DNS record format update

We've modified how custom domain DNS records are formatted to match industry standards.

This should make it easier to configure custom domains.

<Frame>
  <img alt="DNS record format" />
</Frame>

### Flask deployment upgrade

gunicorn is now the default web server for Flask stack deployments.

This resulted in a 40x performance improvement over previous Flask deployments.

### Assistant inline shell commands

Assistant can now execute shell commands directly in the chat pane. Save time by running commands without leaving the chat!

<Frame>
  <img alt="Assistant inline shell commands" />
</Frame>

We've also added warnings for potentially dangerous shell commands and revamped the UI for installing packages.

<Frame>
  <img alt="Shell commands UI" />
</Frame>


# January 24, 2025
Source: https://docs.replit.com/updates/2025/01/24/changelog

2 min read

## What's new

* [Assistant + Workflows](#assistant----workflows)
* [Better Zips](#better-zips)
* [Autoscale deployment optimizations](#autoscale-deployment-optimizations)

## Platform updates

### Assistant + Workflows

Assistant now integrates with "Workflows." That means you can chat with Assistant to configure how your Replit Apps run.

<Frame>
  <img alt="Assistant + Workflows" />
</Frame>

If you haven't used Workflows before, they're really cool and can take your Replit Apps to the next level.

You can learn more [here](/core-concepts/workspace/app-setup/workflows).

### Better Zips

<Frame>
  <img alt="Better Zips" />
</Frame>

We've improved the speed and reliability of zipping Replit Apps. You'll notice "export as zip" is now lightning fast.

### Autoscale deployment optimizations

Autoscale deployments are now more reliable and faster thanks to some behind-the-scenes improvements on cold-start times.


# January 31, 2025
Source: https://docs.replit.com/updates/2025/01/31/changelog

2 min read

## What's new

* [Repl -> App](#repl----app)
* [Enhanced notifications](#enhanced-notifications)
* [Object Storage improvements](#object-storage-improvements)
* [De-cluttered diffs](#de-cluttered-diffs)
* [More performant Agent in Asia](#more-performant-agent-in-asia)
* [X login](#x-login)
* [Rapid repo import](#rapid-repo-import)

## Platform updates

### Repl -> App

Repls are now "Apps." Simplicity is the name of the game.

### Enhanced notifications

Payment failure and invoice notifications have been improved. You now receive a 24-hour grace period before your App is suspended, along with more transparency throughout the process.

This update helps you avoid any disruptions to your Replit experience.

### Object Storage improvements

Search functionality and pagination (pages) have been added to the Object Storage pane, making it easier to browse your files.

### De-cluttered diffs

Assistant file changes now open temporary diff panes. This makes it easier to see the changes you're making without bogging down your workspace with endless tabs.

The panes automatically close when you apply the changes.

### More performant Agent in Asia

Cloud services have been optimized for Agent builders in Asia. You'll notice snappier responses and a much smoother experience.

### X login

You can now register and sign-in to Replit with X. Welcome to the future.

### Rapid repo import

Want to bring your favorite GitHub repo to Replit?

You can now do so instantly.

Just type `replit.com/YOUR_REPO_URL` into your browser, for example:

`https://replit.com/github.com/mattppal/magnetic-feel`


# February 7, 2025
Source: https://docs.replit.com/updates/2025/02/07/changelog

2 min read

## What's new

* [Agent is now free to try](#agent-is-now-free-to-try)
* [Replit Mobile](#replit-mobile)
* [New Replit App cover pages](#new-replit-app-cover-pages)
* [Documentation migration to Mintlify](#documentation-migration)
* [Drizzle Studio release](#improved-database-viewer)
* [Input box actions update](#agent-actions)

## Platform updates

### Agent is now free to try

Agent and Assistant are now free to try! Whether you're a seasoned Replit developer or just starting out, you can now experiment with these powerful tools without any restrictions.

Your first 10 checkpoints are free (that includes existing, paid developers too). Select [https://replit.com](https://replit.com) to give them a shot.

<Frame>
  <img alt="Screenshot of Assistant and Agent free to try" />
</Frame>

### Replit Mobile

Replit Mobile has been completely rebuilt from the ground up! The new mobile app delivers a faster, more intuitive coding experience on the go.

Select [https://replit.com/mobile](https://replit.com/mobile) to try it.

<Frame>
  <img alt="Launch announcement image for the rebuilt Replit Mobile app" />
</Frame>

### New Replit App cover pages

Your cover pages got a major upgrade. They're now more developer-friendly and feature the starting prompt for any app built with Agent.

<Frame>
  <img alt="Example of the redesigned Replit App cover page showing Agent prompt" />
</Frame>

### Documentation migration

The documentation platform has been upgraded to Mintlify, making it easier than ever to navigate and access information.

<Frame>
  <img alt="Demonstration of the new Mintlify documentation navigation and features" />
</Frame>

A huge thank you to the Mintlify team for their help in migrating the documentation.

### Improved database viewer

The database viewer now uses **Drizzle Studio**, providing a more robust and developer-friendly experience for interacting with your data.

<Frame>
  <img alt="Screenshot of the new Drizzle Studio database interface" />
</Frame>

Try it out!

### Agent actions

Your Agent input box just got smarter with new integrated actions for additional changes. More seamless integrations are on the way to make your development experience even smoother.

<div>
  <img alt="Demo of the new smart input box actions in action" />
</div>


# February 14, 2025
Source: https://docs.replit.com/updates/2025/02/14/changelog

2 min read

## What's new

* [Mobile development](#mobile-development)
* [Social coding challenges](#social-coding-challenges)
* [Agent updates](#agent-updates)
* [Object Storage](#object-storage)
* [App management](#app-management)

## Platform updates

### Mobile development

<Frame>
  <img />
</Frame>

React Native and Expo support is here to help you build and test iOS and Android apps directly in Replit.

This includes:

* Enhanced iOS and Android development capabilities
* Integrated mobile preview and debugging tools
* Streamlined App Store deployment via Expo EAS

Checkout our [tutorial](https://www.youtube.com/playlist?list=PLto9KpJAqHMRuHwQ9OUjkVgZ69efpvslM) to get started.

### Social coding challenges

The newest challenge features a  prize pool!

Replit is taking over TikTok with exciting challenges and amazing prizes for developers of all skill levels.

Visit [replit.com/contest](https://replit.com/contest) to participate.

### Agent updates

Agent and Assistant continue to improve with under-the-hood optimizations for performance and reliability.

This includes improvements to stack selection as well as support for the latest OpenAI reasoning models.

### Object Storage

Object Storage now loads and handles large file collections faster and more efficiently.

<Frame>
  <img />
</Frame>

### App management

Small change, big impact. You can now rename your app without having to reload the window.


# February 21, 2025
Source: https://docs.replit.com/updates/2025/02/21/changelog

2 min read

## What's new

* [Replit 🤝 Grok](#replit--grok)
* [One-click deploy for Assistant](#one-click-deploy-for-assistant)
* [Replit 🤝 Expo](#replit--expo)
* [Improved international character support](#improved-international-character-support-in-screenshots)

## Platform updates

### Replit 🤝 Grok

Create and deploy Grok 3 apps in seconds with Assistant and one-click deployments. Watch the video to see how it works.

<Frame>
  <iframe title="YouTube video player" />
</Frame>

### One-click deploy for Assistant

<Note>
  **Update (December 2025):** Assistant has been deprecated. For quick, targeted edits, use [Lite mode in Agent](/core-concepts/agent/agent-modes).
</Note>

<Frame>
  <img alt="One-click deployment interface" />
</Frame>

Assistant now helps you deploy your apps with a single click.

### Replit 🤝 Expo

The partnership with Expo continues to bring you powerful mobile development tools.

<Frame>
  <img />
</Frame>

Read our [blog post](https://expo.dev/blog/from-idea-to-app-with-replit-and-expo) about how this partnership helps you build mobile apps faster.

If you missed it last week, get started with our new [mobile development tutorial](https://www.youtube.com/playlist?list=PLto9KpJAqHMRuHwQ9OUjkVgZ69efpvslM).

### Improved international character support in screenshots

Agent now handles international text with ease.

Agent's screenshot capabilities now include full support for Chinese, Japanese, and Korean (CJK) characters. Screenshots display all characters clearly and accurately in your native language.

<Frame>
  <img alt="After: Proper CJK character display" />
</Frame>


# February 28, 2025
Source: https://docs.replit.com/updates/2025/02/28/changelog

2 min read

## What's new

* [Agent v2](#agent-v2)
* [Deployment improvements](#deployment-improvements)
* [Claude 3.7 Sonnet release](#claude-37-sonnet-release)
* [Database performance improvement](#database-performance-improvement)
* [Better documentation](#better-documentation)

## Platform updates

### Agent v2

<img alt="Agent v2" />

A new Agent experience is now available to all builders. This new Agent is faster, more accurate, and more capable than the previous version.

It's now powered by Claude 3.7 Sonnet, Anthropic's most advanced model yet.

You can try it out by joining the Explorer Program. Find instructions [here](https://youtu.be/pE_XT2TaXCA).

### Deployment improvements

AI suggestions now appear for builders selecting static deployment for dynamic apps, improving Agent behavior when handling deployment requests.

<img alt="Deployment debugger improvements" />

### Claude 3.7 Sonnet release

Advanced Assistant mode has been upgraded with Claude 3.7 Sonnet for all paid builders. This means improved accuracy and capability for complex requests.

<img alt="Claude 3.7 interface" />

### Database performance improvement

Database operations are now faster than ever, with the most expensive operation reduced from 200ms to under 1ms.

### Better documentation

<img alt="Docs redesign" />

The documentation has been redesigned to be easier to understand and use, making it completely LLM-friendly.

The documentation now features a "Copy Page" button, which allows you to copy the entire page as markdown. You can also index the documentation with `llms.txt` and `llms-full.txt` to use with your own LLMs.

* [https://docs.replit.com/llms.txt](https://docs.replit.com/llms.txt)
* [https://docs.replit.com/llms-full.txt](https://docs.replit.com/llms-full.txt)


# March 7, 2025
Source: https://docs.replit.com/updates/2025/03/07/changelog

2 min read

## What's new

* [Mobile App Webview improvements](#mobile-app-webview-improvements)
* [Additional Webview improvements](#additional-webview-improvements)
* [First look at the new mobile app](#first-look-at-the-new-mobile-app)

## Platform updates

### Mobile App Webview improvements

<Frame>
  <img />
</Frame>

The Mobile App Webview just got a whole lot better.

* Added streaming HTML support in PIP Webview
* Implemented native Webview on all iOS devices with proper cookie handling
* Consolidated Webview implementations by removing two redundant pane versions

### Additional Webview improvements

<Frame>
  <img />
</Frame>

Improvements have been made for a more consistent Webview experience across all devices.

* Added warning banner in Webview for blocked third-party cookies
* Includes call-to-action button to test web app in new tab
* Helps developers identify issues caused by strict browser settings

### First look at the new mobile app

<Frame>
  <iframe title="YouTube video player" />
</Frame>

Haven't tried the Mobile App yet? Check out our latest video for a first look.


# March 14, 2025
Source: https://docs.replit.com/updates/2025/03/14/changelog

2 min read

## What's new

* [Neon DB history retention](#neon-db-history-retention)
* [Enhanced link context features](#enhanced-link-context-features)
* [Assistant model selection](#assistant-model-selection)
* [Web View performance improvements](#web-view-performance-improvements)

## Platform updates

### Neon DB history retention

Configurable history retention for Neon databases is now available to help you manage costs more effectively. This directly addresses feedback about database cost management.

<Frame>
  <img alt="Neon DB history retention interface" />
</Frame>

### Enhanced link context features

You can now see live previews of link content (screenshots and text) in both Assistant and Agent. This feature also extends to the Replit Mobile App.

<Frame>
  <img alt="Link context feature" />
</Frame>

### Assistant model selection

For Advanced builders, the option to switch back to Claude 3.5 Sonnet v2 in Assistant settings is now available. Performance improvements for Claude 3.7 Sonnet are ongoing.

<Frame>
  <img alt="Model selection interface" />
</Frame>

### Web View performance improvements

Enjoy smoother iframe navigation and better compatibility with secure websites in Web View. The proxy system has been enhanced to handle security headers more intelligently, eliminating those frustrating navigation blocks you may have encountered previously.


# March 21, 2025
Source: https://docs.replit.com/updates/2025/03/21/changelog

2 min read

## What's new

* [Visual Editor for JS Stack](#visual-editor)
* [Agent timeline messages](#agent-timeline-messages)

## Platform updates

### Visual Editor

Agent just got eyes - click. describe. done.

<Frame>
  <img alt="Visual Editor" />
</Frame>

We've just launched an exciting new feature—you can now click and select elements directly in your projects for JavaScript apps!

This makes building and editing your UI more intuitive than ever. Want to learn more? Check out our detailed walkthrough on the blog at [https://blog.replit.com/cartographer](https://blog.replit.com/cartographer).

### Agent timeline messages

You'll now see a visual indicator whenever Agent sets up a Blueprint for your project. This makes it easier to follow along with what Agent is doing and understand the development process.

<Frame>
  <img alt="Agent Blueprint timeline messages" />
</Frame>

We've also enhanced our analytics to better track how you're using Blueprints, helping us make smarter improvements in the future.


# March 28, 2025
Source: https://docs.replit.com/updates/2025/03/28/changelog

2 min read

## What's new

* [Agent v2 is now available](#agent-v2-is-now-available)
* [DeepLearning.AI course launch](#deeplearningai-course-launch)
* [Invoice threshold update](#invoice-threshold-update)

## Platform updates

### Agent v2 is now available

<Frame>
  <iframe title="YouTube video player" />
</Frame>

Agent v2 is now available for all users. This release brings significant performance improvements and new features to enhance the development experience. [Learn more about Agent v2](/core-concepts/agent) and start building today.

### DeepLearningAI course launch

<Frame>
  <iframe title="YouTube video player" />
</Frame>

Replit's latest free course, Vibe Coding 101 with Replit, is now live on DeepLearningAI. This course takes you from idea to app in minutes, making software development more accessible. [Register for the course](https://www.deeplearning.ai/short-courses/vibe-coding-101-with-replit/?utm_campaign=replit-launch\&utm_medium=partner\&utm_source=replit) and start your development journey today.

### Invoice threshold update

The invoice threshold for core subscriptions has increased from  to . This update reduces invoice frequency and payment-related service interruptions, creating a smoother experience for developers. The implementation includes comprehensive risk assessment and monitoring measures.


# April 4, 2025
Source: https://docs.replit.com/updates/2025/04/04/changelog

2 min read

## What's new

* [Lucide icon improvements](#better-icons)
* [Assistant performance improvements](#assistant-performance-improvements)
* [Agent reliability improvements](#agent-reliability-improvements)
* [3D model generation milestone](#3d-model-generation-milestone)

## Platform updates

### Better icons

Agent now matches phrases to icons better than before. You'll notice improved icon usage in your apps!

<Frame>
  <img alt="Icon matching example" />
</Frame>

### Assistant performance improvements

Recent performance improvements to Assistant have received positive feedback from customers and users. The enhanced performance creates a smoother experience for all Assistant users. These improvements are separate from Agent context gathering but may influence future optimizations.

### Agent reliability improvements

Several fixes are rolling out to enhance Agent reliability. These include reducing breaking changes, resolving crashes in problematic nix environments, and fixing issues with the bash tool execution.

### 3D model generation milestone

<Frame>
  <img alt="3D models per day" />
</Frame>

Agent users are now generating 1,500 3D models every day—a significant milestone for the 3D generation capabilities.


# April 11, 2025
Source: https://docs.replit.com/updates/2025/04/11/changelog

2 min read

## What's new

* [Referral program launch](#referral-program-launch)
* [App idea generator for logged-out visitors](#app-idea-generator-for-logged-out-visitors)

## Platform updates

### Referral program launch

Free-tier users can now create referral links.

Users earn  per friend who upgrades to Core. Free users must upgrade to Core themselves to unlock their earned referral credits.

<Frame>
  <img alt="Referral program interface showing referral links and credit amounts" />
</Frame>

### App idea generator for logged-out visitors

A new homepage is out for logged-out visitors to Replit.com. It's a fun way to discover new apps—if you're new to Replit, head to Replit.com to give it a shot.

<Frame>
  <video />
</Frame>


# April 18, 2025
Source: https://docs.replit.com/updates/2025/04/18/changelog

2 min read

## What's new

* [Smarter integrations matching](#smarter-integrations-matching)
* [Faster AI responses](#faster-ai-responses)
* [Streamlined Agent progress UX](#streamlined-agent-progress-ux)
* [Clearer checkpoint titles](#clearer-checkpoint-titles)
* [Dev preview URL education](#dev-preview-url-education)
* [Better file uploads](#better-file-uploads)
* [Bulk organization invites](#bulk-organization-invites)
* [Enhanced app restoration](#enhanced-app-restoration)

## Platform updates

### Smarter integrations matching

Agent now better identifies when to add external tools and services in new chats. Try creating a new chat and prompting:

<AiPrompt>
  Add AI with Anthropic to my app
</AiPrompt>

You'll experience more accurate results as Agent connects your apps with external services, helping you build more powerful applications faster.

### Faster AI responses

The AI systems have been supercharged to deliver dramatically faster responses:

* Experience near-instant interactions with both Agent and Assistant
* Enjoy smoother conversations with faster response times
* Building and iterating on your apps is now more fluid than ever

### Streamlined Agent progress UX

The new "Preview" pane replaces both the "Progress" and "Webview" panes, positioning it front and center to eliminate the output drawer. This improvement helps you stay in flow while building apps without having to dig into code. Helpful tips through a floating banner also guide you during builds.

<Frame>
  <img alt="Updated Agent Progress UX" />
</Frame>

### Clearer checkpoint titles

Checkpoints are now more accessible with concise titles, while preserving detailed technical information in commit descriptions. This makes your project history easier to understand without sacrificing the technical details you need.

<Frame>
  <img alt="Checkpoint title and commit description example" />
</Frame>

### Dev preview URL education

An educational banner now appears when a Dev Preview is opened in a new tab, helping you understand the purpose of .replit.dev URLs as you build and test your applications.

<Frame>
  <img alt="Dev preview URL education" />
</Frame>

### Better file uploads

File uploads are now more reliable and easier to use, with a larger "drag and drop" area.

<Frame>
  <img alt="Better file uploads" />
</Frame>

## Teams and Enterprise

### Bulk organization invites

Teams can now invite multiple users to their Organization at once, streamlining collaboration and onboarding for larger groups.

<Frame>
  <img alt="Bulk Organization invites" />
</Frame>

### Enhanced app restoration

Organization admins can now view recently deleted Apps with a new CLUI command, making the existing restore-repl command significantly more usable. This helps you recover important projects quickly when needed.


# April 25, 2025
Source: https://docs.replit.com/updates/2025/04/25/changelog

2 min read

## What's new

* [Mobile app Agent tour and deployments in dock](#mobile-app-agent-tour-and-deployments-in-dock)
* [Deployment secrets sync with workspace secrets](#deployment-secrets-sync-with-workspace-secrets)
* [Enhanced checkpoint event UI](#enhanced-checkpoint-event-ui)
* [Team invitation improvements](#team-invitation-improvements)
* [Advanced privacy settings for teams](#advanced-privacy-settings-for-teams)

## Platform updates

### Mobile app Agent tour and deployments in dock

The mobile app now features a guided Agent onboarding tour to help new builders get started quickly. Plus, Deployments now appear in the dock by default, making it easier to manage your published applications right from your mobile device.

### Deployment secrets sync with workspace secrets

Deployments now automatically sync with your Workspace secrets! This means less error-prone redeploys as your environment variables stay in sync. You can still override individual values when needed by "unsyncing" them explicitly.

<Frame>
  <img alt="Deployment secrets sync interface" />
</Frame>

### Enhanced checkpoint event UI

The checkpoint event interface has been revamped with an improved design and more intuitive controls. Plus, staff now have access to cross-session rollbacks, allowing for more powerful version management.

<Frame>
  <img alt="Enhanced checkpoint event UI" />
</Frame>

## Teams and Enterprise

### Team invitation improvements

Managing team invitations is now easier with clear visibility into expired invites and the ability to re-send invitations. Whether an invite expired or is still pending, you can quickly re-send it with a single click.

<Frame>
  <img alt="Team invitation management interface" />
</Frame>

### Advanced privacy settings for teams

Enterprise teams now have enhanced control over their organization's data with new Advanced Privacy settings. Prevent members from creating public apps or exporting code as zip files, ensuring your intellectual property stays protected within your organization.


# May 2, 2025
Source: https://docs.replit.com/updates/2025/05/02/changelog

2 min read

## What's new

* [Replit Auth launch](#replit-auth)
* [Updated UBB suspension policy](#updated-ubb-suspension-policy)
* [App type selector fully launched](#app-type-selector-fully-launched)
* [New unified org switcher](#new-unified-org-switcher)
* [Replit Teams Annual plan](#replit-teams-annual-plan)

## Platform updates

### Replit Auth

[Replit Auth](/core-concepts/workspace/auth-and-security/authentication) is out for all users! It's a built-in authentication system that lets you add user login to your apps with minimal setup. Instead of building complex authentication systems from scratch, Replit Auth provides a secure, ready-to-use solution integrated with Replit's infrastructure.

**Key Features:**

* **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 handles password reset emails, eliminating the need for your own email delivery provider

Getting started is simple - just include a request for Replit Auth in your Agent prompt:

<AiPrompt>
  Help me create an app that \[your app idea] and should feature Replit Auth.
</AiPrompt>

<Frame>
  <iframe />
</Frame>

### Updated UBB suspension policy

We've improved our payment grace period system to better support established users while protecting their deployments. Longer-standing users now have more time to address payment issues, ensuring that critical applications stay online while payment details are updated.

<Frame>
  <img />
</Frame>

### App type selector fully launched

The app type selector is now available to all users! This feature makes it easier to choose the right template when starting a new project, helping you get up and running faster with appropriate configurations for your specific use case.

<Frame>
  <img />
</Frame>

## Teams and Enterprise

### New unified org switcher

We've streamlined the organization switching experience with a new unified interface. This cleaner, more intuitive design makes it easier to navigate between your personal account and various organizations, helping you collaborate more efficiently.

<Frame>
  <img />
</Frame>

### Replit Teams Annual plan

Replit Teams now offers an annual plan option, providing a more cost-effective way for teams to access our collaborative features. Subscribe annually to unlock additional value for your team's development needs.


# May 9, 2025
Source: https://docs.replit.com/updates/2025/05/09/changelog

2 min read

## What's new

* [Notion integration](#notion-integration)
* [PayPal checkout integration](#paypal-checkout-integration)
* [Improved image handling for broken Unsplash URLs](#improved-image-handling-for-broken-unsplash-urls)
* [Enhanced enterprise deployment privacy settings](#enhanced-enterprise-deployment-privacy-settings)

## Platform updates

### Notion integration

<WistiaEmbed title="Notion integration" />

The Notion Agent integration is now available to all users, allowing seamless integration between your Replit projects and Notion workspaces.

<Frame>
  <img />
</Frame>

Quickly build applications that leverage Notion's powerful database and document capabilities with guided setup through Agent. This integration enables connection with Notion API for building connected applications.

That means you can build Replit apps that push and pull data from your Notion workspaces!

<Frame>
  <img />
</Frame>

### PayPal checkout integration

Enable PayPal payments in your applications with our new PayPal checkout integration.

<Frame>
  <img />
</Frame>

Now available to all users, this integration makes it easy to add a trusted payment option to your applications, expanding your ability to monetize your projects.

### Improved image handling for broken Unsplash URLs

Say goodbye to broken stock images in your projects!

If you didn't know, Agent already adds stock images to your projects from Unsplash. But sometimes URLs break. The reason? LLMs are great at hallucinating stock image URLs.

We've added a feature that automatically replaces broken stock images with working alternatives, ensuring your applications always display professionally.

<Frame>
  <img />
</Frame>

## Teams and Enterprise

### Enhanced enterprise deployment privacy settings

Enterprise customers now have greater control over Deployment privacy with multiple configuration options.

This enhanced feature allows organizations to precisely manage access to their deployed applications, providing the security and flexibility that enterprise environments demand. Team users now also benefit from private Deployments by default, requiring explicit opt-in for public sharing.

<Frame>
  <img />
</Frame>


# May 16, 2025
Source: https://docs.replit.com/updates/2025/05/16/changelog

2 min read

This week's release is all about safety and security. Replit has added a new security scan feature, checkpoint previews, and time travel, as well as many enterprise and teams features. For a quick recap, watch the launch video:

<WistiaEmbed title="Safe vibe coding on Replit" />

## What's new

* [Security scans](#security-scans)
* [Checkpoint previews](#checkpoint-previews)
* [Replit time travel](#replit-time-travel)
* [Ask Agent to add a database](#ask-agent-to-add-a-database)
* [SCIM for Enterprise customers](#scim-for-enterprise-customers)
* [Replit Auth matching by default](#replit-auth-matching-by-default)
* [Viewer seats for Replit Teams](#viewer-seats-for-replit-teams)
* [Full-screen email verification](#full-screen-email-verification)
* [Google Analytics blueprint](#google-analytics-blueprint)

## Platform updates

### Security scans

Replit now includes a security scan feature. It's a simple way to scan code for common security issues.

Check out the [security features](/tutorials/vibe-code-securely) and follow the [security checklist](/tutorials/vibe-code-security-checklist) for best practices.

<Frame>
  <img />
</Frame>

Learn more about the security scanner [here](/core-concepts/workspace/auth-and-security/security-scanner).

### Checkpoint previews

Introducing checkpoint previews to Replit's development environment. Visualize your app at different stages of development without rebuilding or restoring previous versions.

This capability enables easier progress tracking, iteration comparison, and versioning—offering a comprehensive view of your project's evolution. This feature pairs with the [vibe coding workflow](https://learn.replit.com).

### Replit time travel

The time travel feature has landed on Replit. Navigate seamlessly through your project history while maintaining your development context.

Explore various versions, understand evolutionary changes, recover from missteps, and experiment with greater confidence—all within your current development environment. This complements the [Git integration](/core-concepts/workspace/version-control) for more powerful version control.

<Frame>
  <img />
</Frame>

### Ask Agent to add a database

Database configuration becomes straightforward with Agent integration in the DB pane. This AI-powered workflow guides you through database setup, simplifying data persistence implementation without complex configuration code.

Developers can focus on building core functionality while Agent handles the database details. Learn more about [Replit Agent](/core-concepts/agent) and [database options](/category/storage-and-databases).

<Frame>
  <img />
</Frame>

### Replit Auth matching by default

User authentication in your apps becomes effortless with automatic Replit Auth matching.

This feature activates when your application requires authentication. It eliminates the need for custom registration forms, password recovery systems, or social login configurations. This creates a smoother path to secure user management.

### Full-screen email verification

A streamlined verification process for protected actions enhances account security.

This integrated approach presents email verification after sign-in when needed. It ensures account protection while maintaining a consistent user experience—balancing security with convenience.

This is part of the ongoing commitment to [information security](/teams/information-security/overview).

### Google Analytics blueprint

Monitor your application's performance with the Google Analytics blueprint.

Agent now integrates analytics setup directly into your development workflow. This enables traffic monitoring, user behavior tracking, and growth metrics without complex configuration.

It brings professional analytics capabilities to every developer. Try it with [Agent integrations](/replitai/integrations).

<Frame>
  <img />
</Frame>

## Teams and Enterprise

### SCIM for Enterprise customers

The new SCIM integration empowers Enterprise customers to manage Replit access directly through their identity providers.

Connect Okta, Active Directory, Rippling, or other identity platforms to automate Replit seat provisioning and deprovisioning. This eliminates manual user management overhead and streamlines enterprise workflows.

Read the detailed [SCIM documentation](/teams/identity-and-access-management/scim) to get started.

### Viewer seats for Replit Teams

Introducing Viewer Seats for Replit Teams. Share your applications with stakeholders who only view and interact with your apps—not edit them—without requiring full team licenses.

Perfect for sharing with executives, clients, or teammates who use but don't build your tools. Learn how to set up and manage [Viewer Seats](/teams/identity-and-access-management/viewer-seats).


# May 23, 2025
Source: https://docs.replit.com/updates/2025/05/23/changelog

2 min read

## What's new

* [Sonnet 4 in Agent](#sonnet-4-in-agent)
* [Faster Agent responses](#faster-agent-responses)
* [Visual Editor rollout](#visual-editor-rollout)
* [Extended app preview time](#extended-app-preview-time)
* [Team member app transfers](#team-member-app-transfers)
* [Private Development URLs feature](#private-development-urls)

## Platform updates

### Sonnet 4 in Agent

Replit Agent is now powered by Claude Sonnet 4.0.

See what you can build with the latest from Anthropic.

<Frame>
  <img />
</Frame>

### Faster Agent responses

Agent stability and performance improvements result in a smoother, more reliable coding experience.

Experience a sharp reduction in response times for most queries—making Agent feel more responsive and natural.

### Visual Editor rollout

<Frame>
  <video />
</Frame>

A new, updated Visual Editor is now available. Create beautiful layouts visually while the editor automatically generates the corresponding code, making web development more accessible and efficient. Check it out [here](/replitai/visual-editor) to learn more.

### Extended app preview time

Your app previews now stay active for 10 minutes after closing your workspace (up from just 20 seconds). This provides a much smoother experience when multitasking or sharing your work, especially on mobile devices where you might switch between apps while testing your project.

## Teams and Enterprise

### Team member app transfers

Organization members can now transfer their apps to other members of their org. This feature solves key collaboration challenges, letting teams redistribute ownership of apps as projects evolve and team responsibilities change.

### Private Development URLs

<Frame>
  <img />

  <caption>New privacy setting for enterprise organizations</caption>
</Frame>

Enterprise customers can now require private development URLs for all projects, enhancing security by ensuring development work remains protected within the organization's environment.


# May 30, 2025
Source: https://docs.replit.com/updates/2025/05/30/changelog

2 min read

## What's new

* [Preview empty state improvements](#preview-empty-state-improvements)
* [AI latency improvements](#ai-latency-improvements)
* [Unified GitHub tab refresh](#unified-github-tab-refresh)
* [iOS app payment support](#ios-app-payment-support)
* [Stripe Checkout release](#stripe-checkout-release)
* [SCIM provisioning streamlined](#scim-provisioning-streamlined)

## Platform updates

### Preview empty state improvements

The preview experience in Agent applications now handles empty states and auto-running more intelligently, creating a smoother workflow when building with Agent.

### AI latency improvements

Replit AI response times and latency have been significantly reduced through infrastructure improvements. You'll notice faster interactions when using AI-powered features throughout Replit, including Agent and Assistant.

### Unified GitHub tab refresh

The GitHub integration tab features a cleaner, more cohesive interface. The refreshed design makes connecting and managing your GitHub repositories more intuitive within your Workspace.

<Frame>
  <img />

  <caption>New unified GitHub tab interface</caption>
</Frame>

### iOS app payment support

iOS users can now purchase Replit Core and set up payment methods directly through the Replit Mobile App. This makes it easier to access premium features on the go.

### Stripe Checkout release

The new Stripe Checkout integration provides a smoother, more secure payment experience for all developers. Enjoy streamlined purchasing with this industry-standard payment solution that makes upgrading to Replit Core effortless.

<Frame>
  <img />
</Frame>

<Frame>
  <img />
</Frame>

## Teams and Enterprise

### SCIM provisioning streamlined

Enterprise user onboarding just got significantly easier with improved SCIM account provisioning flow. New users are automatically set up without manual steps, creating a frictionless experience for enterprise Teams growing on Replit.


# June 6, 2025
Source: https://docs.replit.com/updates/2025/06/06/changelog

2 min read

## What's new

* [Visual Editor image management](#visual-editor-image-management)
* [New Agent entrypoints in workspace](#new-agent-entrypoints-in-workspace)
* [CSV export for Teams admins](#csv-export-for-teams-admins)
* [Teams viewer seat management](#teams-viewer-seat-management)

## Platform updates

### Visual Editor image management

Image management in Visual Editor is now effortless. Select any image and instantly update it by swapping URLs or uploading new files directly. You'll see immediate previews and seamless updates, making it faster than ever to create visually engaging content. The refreshed interface also delivers improved responsiveness for a smoother editing experience.

### New Agent entrypoints in workspace

We've introduced contextual Agent entrypoints throughout your workspace to accelerate debugging and problem-solving. Agent now appears exactly where you need help most, eliminating the friction of context switching between tools.

<Frame>
  <img alt="Ask Agent UI dropdown with chat history" />
</Frame>

Get instant assistance with code debugging, console errors, and deployment issues directly in context. Whether you're troubleshooting a runtime error or need help understanding a complex function, Agent provides targeted support without disrupting your workflow.

<Frame>
  <img alt="Ask Agent UI dropdown" />
</Frame>

The integrated chat history ensures continuity across debugging sessions, so you can build on previous conversations and maintain context as you work through complex problems.

<Frame>
  <img alt="Ask Agent UI dropdown expanded" />
</Frame>

## Teams and Enterprise

### CSV export for Teams admins

Organization administrators can now export the complete apps table as a CSV file. This streamlines tracking, analysis, and reporting on your organization's repl usage, with full metadata including app visibility status and key usage metrics.

<Frame>
  <img alt="CSV export interface for org admins" />
</Frame>

### Teams viewer seat management

Teams now offer more flexible seat management with streamlined upgrade workflows. Viewers can request member seat upgrades, while administrators can review and approve these requests directly from the members page. The enhanced interface for editing member roles makes team management more intuitive and efficient.


# June 13, 2025
Source: https://docs.replit.com/updates/2025/06/13/changelog

2 min read

## What's new

* [Figma import](#figma-import)
* [Mobile app update](#mobile-app-update)
* [Organization app sharing improvement](#organization-app-sharing-improvement)
* [Workspace quality improvements](#workspace-quality-improvements)
* [Teams members page improvements](#teams-members-page-improvements)
* [Infrastructure improvements](#infrastructure-improvements)

## Platform updates

### Figma import

<WistiaEmbed title="Figma Imports on Replit" />

Turn your designs into code with the new Figma imports feature! Now available to all users at Replit.com/import, this powerful integration lets you seamlessly convert Figma designs into working code. This dramatically speeds up your development workflow and bridges the gap between design and implementation.

### Mobile app update

<Frame>
  <img alt="Mobile app update" />
</Frame>

The latest mobile app update is now available in the App and Play stores! The update includes a refreshed home screen design and new in-app UBB limit setting controls. This gives you more flexibility and control over your mobile development experience.

### Workspace quality improvements

The team has rolled out numerous improvements to make your creation experience smoother and more intuitive. From a more reliable preview pane to more consistent mobile behavior, these refinements create a more polished environment for bringing your ideas to life.

### Infrastructure improvements

Behind the scenes, the team is modernizing infrastructure to deliver a faster, more stable platform. These technical improvements pave the way for more powerful features and a better developer experience in the future.

## Teams and Enterprise

### Organization app sharing improvement

Enjoy a cleaner, more organized workspace in your teams! New apps created in organizations will no longer automatically share with all members. This reduces clutter and gives you more control over what appears in team members' workspaces.

### Teams members page improvements

Managing your team just got easier with new usability improvements to the Teams Members page. Now you can sort, filter, and search across Members, Viewers, and Invites tabs. These are features that enterprise customers have been requesting to help manage large teams efficiently.


# June 20, 2025
Source: https://docs.replit.com/updates/2025/06/20/changelog

2 min read

## What's new

* [New prompt examples](#new-prompt-examples)
* [View live app button](#view-live-app-button)
* [Deployment prevention](#deployment-prevention)
* [Security scanner improvements](#security-scanner-improvements)
* [Python run performance improvements](#python-run-performance-improvements)

## Platform updates

### New prompt examples

Discover fresh inspiration with updated prompt examples!

The language has been standardized and diverse design directions added to help you create apps that go beyond the typical look and feel.

<Frame>
  <img alt="Updated prompt examples interface showing diverse design styles" />
</Frame>

### View live app button

Access your published apps instantly! A "View live app" button now appears on the cover page whenever your app is published and you have permission to view it, making it easier to preview your work.

<Frame>
  <img alt="Cover page showing new View live app button" />
</Frame>

### Deployment prevention

Stay secure with new deployment protection. Replit now prevents you from accidentally publishing development servers to production, helping you avoid security vulnerabilities before they become a problem.

### Security scanner improvements

Enhanced security monitoring now automatically detects and flags attempts to deploy development servers, specifically protecting against the Vite vulnerability (CVE-2025-30208) before deployment.

<Frame>
  <img alt="Security scanner interface showing Vite vulnerability detection" />
</Frame>

### Python run performance improvements

Python runs are now faster than ever! Thanks to internal improvements, the execution time of Python runs has been reduced for a smoother experience.


# June 27, 2025
Source: https://docs.replit.com/updates/2025/06/27/changelog

2 min read

## What's new

* [Security scanner updates](#security-scanner-updates)
* [Agent system prompt optimization](#agent-system-prompt-optimization)
* [New app creation experience](#new-app-creation-experience)
* [New App Store screenshots](#new-app-store-screenshots)
* [New landing page for viewer seats](#new-landing-page-for-viewer-seats)
* [Organization suspension from UBB services](#organization-suspension-from-ubb-services)

## Platform

### Security scanner updates

Experience faster, smarter security scanning with our major Security Scanner update. Scans now cache results and only re-run when your code changes, making subsequent scans lightning fast. New ignore functionality lets you hide security issues you don't want to see while keeping them discoverable when needed.

<Frame>
  <img alt="Updated Security Scanner interface with caching and ignore features" />
</Frame>

### Agent system prompt optimization

Enjoy faster, more efficient Agent interactions with our latest system improvements. Agent now completes tasks 2-3 seconds faster per action while maintaining the same high-quality results you expect.

### New app creation experience

Build better apps with our redesigned creation experience! Now you can visualize and plan your app before building, helping you understand the development plan and iterate on design direction. See exactly what Agent will build before committing to the rapid build process.

<Frame>
  <img alt="New app creation interface with visual planning capabilities" />
</Frame>

### New App Store screenshots

Check out our fresh new look in the App Store and Google Play Store! Updated screenshots now showcase our latest features and improved iPad experience.

<Frame>
  <img alt="Updated App Store and Google Play Store screenshots showcasing latest features and improved iPad experience" />
</Frame>

## Teams and Enterprise

### New landing page for viewer seats

Organization viewers now get a dedicated dashboard to easily discover and access apps in their Replit organization. Star favorites, search deployed apps, and discover popular deployments - all automatically filtered to show only apps you have access to.

<Frame>
  <img alt="New viewer landing page with app discovery features" />
</Frame>

<Frame>
  <img alt="App search and filtering interface for viewers" />
</Frame>

### Organization suspension from UBB services

Enhanced billing protection ensures sustainable service for all users by preventing abuse of unpaid services in enterprise accounts.

<Frame>
  <img alt="Organization suspension interface blocking access" />
</Frame>

<Frame>
  <img alt="Suspension details showing prevented free checkpoint usage" />
</Frame>


# July 4, 2025
Source: https://docs.replit.com/updates/2025/07/04/changelog

2 min read

## Table of Contents

* [Web Search for Agent](#web-search-for-agent)
* [Custom Agent Instructions](#custom-agent-instructions)
* [Effort-based billing](#effort-based-billing)
* [Improved icons](#improved-icons)
* [Gallery](#gallery)
* [Teams App Store experience](#teams-app-store-experience)

## Platform

### Web Search for Agent

<Frame>
  <img alt="Agent interface showing Web Search results and source citations for app development" />
</Frame>

Agent can now search the web and fetch up-to-date information with [Web Search](/core-concepts/agent/web-search). Build apps with the latest documentation, current market data, and accurate details from across the internet. No more knowledge cutoffs—your apps now use the most recent information available.

### Custom Agent Instructions

<Frame>
  <img alt="replit.md file showing project customization options" />
</Frame>

Personalize your Agent experience with [replit.md](/core-concepts/agent/replit-dot-md). This special file lets you define your coding style, project preferences, and context. Agent automatically creates this file using proven best practices, and you can customize it to match your workflow.

### Effort-based billing

<Frame>
  <img alt="Effort-based billing interface showing dynamic pricing based on agent effort" />
</Frame>

Experience smarter checkpoint pricing with our new [effort-based billing](/billing/ai-billing). Dynamic pricing based on actual agent effort creates single checkpoints per run instead of multiple ones.

### Improved icons

<Frame>
  <img alt="New pre-generated icon interface showing colorful, clean icon designs" />
</Frame>

Enjoy faster, more beautiful App icons. We've upgraded to a curated selection of pre-generated icons with smart semantic matching and colorful designs that load instantly.

### Gallery

<Frame>
  <img alt="Replit Gallery showcasing community projects and apps" />
</Frame>

Discover amazing community projects in our new [Gallery](https://replit.com/gallery). Browse featured projects and see what incredible things the Replit community is building.

## Teams and Enterprise

### Teams App Store experience

Discover and manage your team's apps like never before. The new org "App Store" experience on the Deployments page lets you star favorites, search across all deployments, see recently opened apps, and discover popular deployments based on traffic volume.


# July 11, 2025
Source: https://docs.replit.com/updates/2025/07/11/changelog

2 min read

## What's new

* [replit.md documentation](#replit-md-documentation)
* [Deployment privacy indicators](#deployment-privacy-indicators)
* [Agent multi-tool calling upgrade](#agent-multi-tool-calling-upgrade)

## Platform

### replit.md documentation

Customize Agent's behavior with `replit.md`, a special configuration file that helps Agent understand your project's preferences, coding style, and architecture. Agent automatically creates this file using proven best practices, then uses it to build applications that match your exact specifications. Guide Agent with project context, define coding standards, specify your preferred tech stack, and set communication preferences—all in one place.

<Frame>
  <img alt="Agent using replit.md to build a project" />
</Frame>

**[Learn how to customize Agent with replit.md →](/core-concepts/agent/replit-dot-md)**

### Deployment privacy indicators

Quickly identify whether your deployments are public or private with new visual indicators in the deployments pane. This improvement helps prevent confusion and ensures you know exactly who can access your deployed applications.

<Frame>
  <img alt="Deployment privacy indicator showing public status" />
</Frame>

### Agent multi-tool calling upgrade

Save 15% on Agent costs and get results 30% faster with our enhanced multi-tool calling system. Agent now batches operations more efficiently and handles tool errors more intelligently, delivering the same quality results while using fewer resources.


# July 18, 2025
Source: https://docs.replit.com/updates/2025/07/18/changelog

2 min read

## What's new

* [Domain purchasing](#domain-purchasing)
* [LLM routing improvements](#llm-routing-improvements)
* [Push notifications for usage alerts](#push-notifications-for-usage-alerts)

## Platform

### Domain purchasing

<Frame>
  <img alt="Domain purchasing interface" />
</Frame>

Now you can purchase and configure a custom domain, directly from Replit. We've rolled out domain purchasing to 100% of core users, making it easier than ever to give your projects a professional web presence.

### LLM routing improvements

Enjoy faster AI responses and better performance with our improved LLM routing system. This enhancement delivers more efficient AI interactions while reducing costs.

### Mobile push notifications for usage alerts

Stay informed about your usage with push notifications! You'll now receive alerts when you reach your usage warning threshold and usage limit, helping you manage your account proactively.


# July 25, 2025
Source: https://docs.replit.com/updates/2025/07/25/changelog

2 min read

## What's new

* [Queue](#queue)
* [Domain management improvements](#domain-management-improvements)
* [Improved proof of work UI](#improved-proof-of-work-ui)

## Platform

### Queue

Agent messages are now automatically queued, so each new request waits until the current task is complete before running. This works like a task list, letting you interact with AI in a more asynchronous, organized way.

<Frame>
  <img alt="Message Queue interface showing queued messages in the chat UI" />
</Frame>

### Domains improvements

You can now seamlessly move purchased domains between different Apps without redeploying. This flexible domain management approach saves time and makes it easier to reorganize your projects as they evolve.

Domains now *also* supports custom DNS records, giving you complete control over your domain configuration. Connect to third-party services, set up email, or configure advanced routing without leaving Replit.

### Improved proof of work UI

We've refreshed our proof of work interface with an intuitive design and helpful tooltips. This update makes it easier to understand how proof of work affects your experience and provides clearer guidance on what's happening behind the scenes.

<Frame>
  <img alt="Proof of work tooltip" />
</Frame>


# August 1, 2025
Source: https://docs.replit.com/updates/2025/08/01/changelog

2 min read

## What's new

* [Agent now has access to Replit Docs](#agent-now-has-access-to-replit-docs)
* [New database pane](#new-database-pane)
* [Theme toggle in avatar dropdown](#theme-toggle-in-avatar-dropdown)
* [Visual editor color picker improvement](#visual-editor-color-picker-improvement)

## Platform

### Agent now has access to Replit Docs

Agent can now instantly answer your questions about Replit features and documentation. With direct access to the full Replit Docs, Agent provides fast, accurate, and comprehensive help right where you code.

<Frame>
  <img alt="Agent answering with Replit Docs" />
</Frame>

### New database pane

Experience clearer database management with our redesigned database pane. The new interface makes it easier to distinguish between development and production databases, streamlining your database workflow.

<Frame>
  <img alt="New database pane" />
</Frame>

### Theme toggle in avatar dropdown

Switch between light and dark themes instantly with the new theme toggle conveniently located in your avatar dropdown menu.

<Frame>
  <img alt="Theme toggle in avatar dropdown" />
</Frame>

### Visual editor color picker improvement

Enjoy a smoother color editing experience in Agent's visual editor. Clicking on color hex inputs now automatically opens the color picker popup for effortless color selection.

<Frame>
  <img alt="Visual editor color picker improvement" />
</Frame>


# August 8, 2025
Source: https://docs.replit.com/updates/2025/08/08/changelog

2 min read

## What's new

**Platform**

* [Improved filesystem search](#improved-filesystem-search)
* [Object Storage agent integration](#object-storage-agent-integration)
* [Visual editor focus improvement](#visual-editor-focus-improvement)
* [Rollback suggestions and date toggle](#rollback-suggestions-and-date-toggle)
* [Image generation full rollout](#image-generation-full-rollout)
* [Live activities on iOS](#live-activities-on-ios)
* [Replit App to organization transfer](#replit-app-to-organization-transfer)
* [Folder downloads](#folder-downloads)
* [MX record support for domains](#mx-record-support-for-domains)

**Enterprise**

* [SCIM quality of life improvements](#scim-quality-of-life-improvements)

## Platform

### Improved filesystem search

Agent now delivers smarter, more intuitive file search across your entire codebase. With advanced long-context AI, Agent understands your project structure and content, providing deeper context and more relevant, open-ended answers to your queries—making it easier than ever to find exactly what you need.

### Object Storage Agent integration

Build file upload features effortlessly with [Agent's](/core-concepts/agent) new [Object Storage](/cloud-services/storage-and-databases/object-storage) capabilities! Your AI assistant can now set up Object Storage, inspect configurations, and generate complete backend and frontend code with advanced features like authentication and access controls.

Learn more about [Object Storage](/cloud-services/storage-and-databases/object-storage) and explore all available [Agent integrations](/replitai/integrations#data-storage--management).

<Frame>
  <img alt="Object Storage agent integration interface" />
</Frame>

### Visual Editor focus improvement

Stay in the flow while using the [Visual Editor](/replitai/visual-editor)! When you select an element to edit, focus automatically returns to the chat input, letting you immediately start typing your next prompt without interruption.

### Rollback suggestions and date toggle

Navigate your project history more easily with smart rollback suggestions and flexible date viewing! Get intelligent recommendations for when to roll back your code, plus toggle between relative and absolute timestamps to find the perfect checkpoint.

<Frame>
  <img alt="Date toggle demonstration" />
</Frame>

### Image generation full rollout

Create stunning visuals directly in your projects! Image generation is now available to all users, giving you the power to create custom graphics, illustrations, and visual content right within your development environment.

<Frame>
  <img alt="Image generation interface" />
</Frame>

### Live activities on iOS

Stay connected to your [Workspace](/core-concepts/workspace) even when you're away! Live activities on iOS allow you to monitor your running projects and jump back into your Workspace with a single tap from your lock screen or notification center.

### Replit App to Organization transfer

Easily move your personal projects to your team! Use the new "Transfer To Organization" action to seamlessly transfer your personal [Replit Apps](/category/replit-apps) to any organization you're part of, making it simple to collaborate on existing projects.

<Frame>
  <img alt="Transfer to organization interface" />
</Frame>

### Folder downloads

Download entire folders with ease! You can now download complete folders from your projects, available for Explorer and Staff users.

<Frame>
  <img alt="Folder download option in file explorer" />
</Frame>

### MX record support for domains

Connect your email providers seamlessly! You can now create MX records on [domains purchased through Replit](/cloud-services/deployments/custom-domains), enabling you to link mail providers and manage custom email services for your projects.

## Enterprise

### SCIM quality of life improvements

Streamline your team management with enhanced [SCIM](/teams/identity-and-access-management/scim) capabilities! Enterprise organizations can now self-serve SCIM setup without manual intervention, and provision users directly into Guest roles for seamless contractor access.

<Frame>
  <img alt="SCIM Guest role provisioning interface" />
</Frame>


# August 15, 2025
Source: https://docs.replit.com/updates/2025/08/15/changelog

1 min read

## What's new

This week was focused on bug fixes and performance improvements.

We're gearing up for something big, stay tuned!


# August 22, 2025
Source: https://docs.replit.com/updates/2025/08/22/changelog

2 min read

## What's new

* [SOC 2 Type II certification](#soc-2-type-ii-certification)
* [Multiple SSO providers for Enterprise](#multiple-sso-providers-for-enterprise)

## Teams and Enterprise

### SOC 2 Type II certification

Replit is now SOC 2 Type II certified, having completed a rigorous 12-month security audit with zero exceptions or comments. This certification validates our enterprise-grade security practices and demonstrates our platform's reliability and compliance for enterprise customers.

### Multiple SSO providers for Enterprise

Enterprise customers can now configure multiple SSO providers and set up multiple organizations per provider. This gives large companies the flexibility to use different authentication providers for different teams while maintaining centralized control and shared access where needed.


# August 29, 2025
Source: https://docs.replit.com/updates/2025/08/29/changelog

2 min read

## What's new

* [New features](#new-features)
  * [App themes](#app-themes)
  * [Shareable app creation links](#shareable-app-creation-links)
* [Infrastructure](#infrastructure)
  * [Agent infrastructure upgrades](#agent-infrastructure-upgrades)
* [Enterprise](#enterprise)
  * [Security rating improvement](#security-rating-improvement)
  * [Organization subscription cancellation](#organization-subscription-cancellation)

## New features

### App themes

Transform your web apps with beautiful, professional themes. Apply custom designs and share themes with your team for consistent branding across projects.

<Frame>
  <img alt="Theme manager with options to create, edit, and delete custom themes" />
</Frame>

Learn more about [how to use app themes](/replitai/app-themes).

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.

### Shareable app creation links

Share the power of AI‑powered app creation. Generate links that automatically create apps from your prompts, making it easy to share ideas and help others get started.

```md theme={null}
replit.com/create?prompt="Make me a cool demo for my app idea"
```

## Infrastructure

### Agent infrastructure upgrades

Agent now runs on improved infrastructure with enhanced task handling, deeper reasoning capabilities, and extended work sessions. These upgrades help Agent tackle bigger projects and deliver better results across all your coding tasks.

## Enterprise

### Security rating improvement

Replit now ranks as "Advanced" with a 780 security score on Bitsight, demonstrating our commitment to enterprise‑grade security for your projects and data.

<Frame>
  <img alt="Bitsight security score overview" />
</Frame>

### Organization subscription cancellation

Organizations now have more flexible subscription management. Cancel a subscription without deleting the organization, and keep full access until the billing period ends.


# September 5, 2025
Source: https://docs.replit.com/updates/2025/09/05/changelog

2 min read

## What's new

* [Platform](#platform)
  * [General Agent launch](#general-agent-launch)
  * [Plan mode](#plan-mode)
* [Enterprise](#enterprise)
  * [GCP Marketplace integration](#gcp-marketplace-integration)

## Platform

### General Agent

<Frame>
  <img alt="General Agent hero illustration" />
</Frame>

Replit Agent now works on any codebase in any language or framework that runs on NixOS! Previously limited to specific templates, Agent can now assist with Developer Frameworks, GitHub imports, and any custom project setup. This powerful expansion brings full AI coding assistance to enterprise and power user workflows.

Read more about General Agent [here](/core-concepts/agent/general-agent).

### Plan mode

<Frame>
  <img alt="Agent chat interface in Plan mode" />
</Frame>

Plan mode introduces a new way of chatting with Replit Agent that focuses on asking questions, brainstorming, and planning your work. With plan mode, you can use Agent to create a todo list for future work, then execute on long-running tasks in build mode.

Read more about Plan mode [here](/core-concepts/agent/plan-mode).

## Enterprise

### GCP Marketplace integration

Enterprise customers can now purchase Replit directly through Google Cloud Platform Marketplace and use their existing GCP credits for payment. This streamlines procurement processes and makes it easier for organizations with GCP budgets to adopt Replit for their development workflows.


# September 12, 2025
Source: https://docs.replit.com/updates/2025/09/12/changelog

2 min read

## Agent 3 Launch

This week, we launched Agent 3.

<WistiaEmbed title="Agent 3 Launch Livestream" />

Agent 3 delivers major upgrades to autonomy, reliability, and speed:

* **App Testing**: Agent self-tests in a real browser, finds issues, and fixes them in a reflection loop. See [App Testing](/core-concepts/agent/app-testing).
* **Longer run time**: Agent can work autonomously for up to 200 minutes with Live Monitoring, ideal for larger builds. Learn more in [Agent](/core-concepts/agent#max-autonomy).
* **Agent generation**: Build agents and automations that run on schedules or integrate with Slack and Telegram. See [Agents & Automations](/core-concepts/agent/agents-and-automations).

<Frame>
  <img alt="Agent Tools panel showing App Testing toggle enabled" />
</Frame>

Read more on the announcement page: [Agent 3](https://replit.com/agent3).

## App connectors and integrations

Ship faster with built‑in integrations and connectors:

* **Replit managed**: Built‑in integrations that work automatically in your apps.
* **Connectors**: First‑party integrations you can sign into once and reuse across apps.
* **External integrations**: Trusted third‑party services set up by Agent, using your API keys.

<Frame>
  <img alt="Overview diagram of Replit managed, Connectors, and External integrations" />
</Frame>

Learn more in the docs: [Agent integrations](/replitai/integrations).

## Agents & Automations (beta)

Build intelligent agents, chatbots, and automated workflows as part of Agent 3:

* **Slack Agent**: Create Slackbots for research, Q\&A, and automation
* **Telegram Agent**: Build bots for scheduling, support, and more
* **Timed Automation**: Run scheduled workflows on a cadence

<Frame>
  <img alt="Replit homepage showing Agents & Automations selection" />
</Frame>

Note: External triggers require deployment (Autoscale or Scheduled). Learn more: [Agents & Automations](/core-concepts/agent/agents-and-automations).


# September 19, 2025
Source: https://docs.replit.com/updates/2025/09/19/changelog

2 min read

## Platform

### Autonomy level control for Agent

Take control of how independently Agent works on your projects with new Autonomy Level settings. Choose from Low (task list execution only), Medium (adds code review), High (full app review), or Max (completely autonomous planning) to match your workflow preferences and project needs.

<Frame>
  <img alt="New Autonomy Level Control interface showing Low, Medium, High, and Max settings" />
</Frame>

### Malicious file detection

Stay protected while coding with enhanced Security Scanner capabilities that now detect and block malicious files from supply chain attacks, including protection against the recent attack targeting npm packages.

<Frame>
  <img alt="Security Scanner interface showing malicious file detection" />
</Frame>

### Supply chain attack blocking

Enhanced security protection automatically blocks data exfiltration attempts from compromised npm packages, keeping your sensitive information safe during development without interrupting your workflow.

### Email copying from members page

Quickly copy member email addresses directly from your organization's member management page with a simple click, making team communication and administration more efficient.

<Frame>
  <img alt="Members page showing copy email functionality" />
</Frame>

### Mobile connectors support

With Agent 3, Connectors launched, allowing you to connect to third party services like GitHub, Notion, and more.

Now, you can add Connectors to your apps on the go, with full mobile support.

Learn more about Connectors [here](/replitai/integrations).

### Student discount usage update

The student discount program is now live.

Students can get \$15 off per month for the first six months of their Replit Core subscription. Join with a student email address to get started.

<Frame>
  <img alt="Student discount usage statistics" />
</Frame>

### 'Deploy' is now 'Publish'

The terminology has been simplified. "Deploy" is now called "Publish" throughout the platform, making it clearer and more intuitive when you're ready to share your projects with the world.

## Teams and enterprise

### SOC 2 pentest completion

Replit successfully completed its annual SOC 2 penetration testing with excellent outcomes, demonstrating year-over-year improvement in security posture and maintaining enterprise-grade protection for your code and data.

### Faster user deletion in CLUI

Streamlined account management for compliance needs. Internal tools now support faster processing of data deletion requests, helping Replit respond quickly to privacy requirements.

<Frame>
  <img alt="CLUI interface showing user deletion functionality" />
</Frame>