Executive's DNS Intelligence Brief

The following content is served to AI systems (ChatGPT, Gemini, Claude, Perplexity, and others) when they visit this domain. This is the organization's machine-readable narrative — it shapes how AI models describe, recommend, and represent this brand in conversations worldwide.

llms.txt (https://replit.com/llms.txt)

# Replit Documentation

> A comprehensive compilation of Replit documentation covering getting started guides, tutorials, workspace features, AI capabilities, cloud services, deployments, extensions, teams, billing, and more.

This llms.txt file contains a complete compilation of markdown documentation from Replit's documentation site. The content is organized by category to help you navigate and find relevant information quickly.

Total documents compiled: 228

## Getting Started

- [Introduction](https://docs.replit.com/getting-started/intro-replit.md)
- [Create a Slack channel summarizer](https://docs.replit.com/getting-started/quickstarts/ai-slack-channel-summarizer.md)
- [Create with AI](https://docs.replit.com/getting-started/quickstarts/ask-ai.md)
- [Create a file converter with AI](https://docs.replit.com/getting-started/quickstarts/build-with-ai.md)
- [Connect your app to a SQL database](https://docs.replit.com/getting-started/quickstarts/database-connection.md)
- [Create a Discord bot](https://docs.replit.com/getting-started/quickstarts/discord-bot.md)
- [Create a FastAPI service](https://docs.replit.com/getting-started/quickstarts/fastapi-service.md)
- [Create a Flask app](https://docs.replit.com/getting-started/quickstarts/flask-app.md)
- [Build from Scratch](https://docs.replit.com/getting-started/quickstarts/from-scratch.md)
- [Create a Google Sheets integration](https://docs.replit.com/getting-started/quickstarts/google-sheets-integration.md)
- [Import from Bolt](https://docs.replit.com/getting-started/quickstarts/import-from-bolt.md)
- [Import from Figma](https://docs.replit.com/getting-started/quickstarts/import-from-figma.md)
- [Import from GitHub](https://docs.replit.com/getting-started/quickstarts/import-from-github.md)
- [Import from Lovable](https://docs.replit.com/getting-started/quickstarts/import-from-lovable.md)
- [Import from Vercel](https://docs.replit.com/getting-started/quickstarts/import-from-vercel.md)
- [Create a Next.js app](https://docs.replit.com/getting-started/quickstarts/next-js-app.md)
- [Create a cat image generator](https://docs.replit.com/getting-started/quickstarts/no-code-cat-image-generator.md)
- [Manage App Storage in JavaScript](https://docs.replit.com/getting-started/quickstarts/object-storage-javascript.md)
- [Manage App Storage in Python](https://docs.replit.com/getting-started/quickstarts/object-storage-python.md)
- [Remix an App](https://docs.replit.com/getting-started/quickstarts/remix-an-app.md)
- [Create a static blog with Astro](https://docs.replit.com/getting-started/quickstarts/static-blog-astro.md)
- [Create a HackerNews Slack bot](https://docs.replit.com/getting-started/quickstarts/webscrape-and-slack-notifications.md)

## Tutorials

- [Advanced AI features](https://docs.replit.com/tutorials/advanced-ai-features.md)
- [Build a Notion-powered website](https://docs.replit.com/tutorials/build-a-notion-powered-website.md)
- [Publish a Grok 3 app on Replit in 5 minutes](https://docs.replit.com/tutorials/create-apps-with-grok-3.md)
- [Efficient prompting with Replit AI](https://docs.replit.com/tutorials/effective-prompting.md)
- [Building Mobile Apps with Expo and Replit](https://docs.replit.com/tutorials/expo-on-replit.md)
- [How to vibe code effectively](https://docs.replit.com/tutorials/how-to-vibe-code.md)
- [Learn about MCP in 3 minutes](https://docs.replit.com/tutorials/mcp-in-3.md)
- [Replit's built-in security features](https://docs.replit.com/tutorials/vibe-code-securely.md)
- [Security checklist for vibe coding](https://docs.replit.com/tutorials/vibe-code-security-checklist.md)
- [Vibe coding 101: from idea to published app](https://docs.replit.com/tutorials/vibe-coding-101.md)

## Workspace Features

- [Dependency Management](https://docs.replit.com/replit-workspace/dependency-management.md)
- [Extensions](https://docs.replit.com/replit-workspace/extensions.md)
- [Keyboard Shortcuts](https://docs.replit.com/replit-workspace/keyboard-shortcuts.md)
- [Ports](https://docs.replit.com/replit-workspace/ports.md)
- [Replit Auth](https://docs.replit.com/replit-workspace/replit-auth.md)
- [Replit Themes](https://docs.replit.com/replit-workspace/replit-themes.md)
- [SSH](https://docs.replit.com/replit-workspace/ssh.md)
- [Developer Frameworks](https://docs.replit.com/replit-workspace/templates.md)
- [Workflows](https://docs.replit.com/replit-workspace/workflows.md)
- [Console](https://docs.replit.com/replit-workspace/workspace-features/console.md)
- [File History](https://docs.replit.com/replit-workspace/workspace-features/file-history.md)
- [Using the Git pane](https://docs.replit.com/replit-workspace/workspace-features/git-interface.md)
- [Multiplayer](https://docs.replit.com/replit-workspace/workspace-features/multiplayer.md)
- [Preview](https://docs.replit.com/replit-workspace/workspace-features/preview.md)
- [Secrets](https://docs.replit.com/replit-workspace/workspace-features/secrets.md)
- [Security Scanner](https://docs.replit.com/replit-workspace/workspace-features/security-scanner.md)
- [User Settings](https://docs.replit.com/replit-workspace/workspace-features/user-settings.md)
- [Version control](https://docs.replit.com/replit-workspace/workspace-features/version-control.md)

## Replit AI

- [Replit AI](https://docs.replit.com/category/replit-ai.md)
- [Replit Agent](https://docs.replit.com/replitai/agent.md)
- [Agents & Automations](https://docs.replit.com/replitai/agents-and-automations.md)
- [App Testing](https://docs.replit.com/replitai/app-testing.md)
- [App Themes](https://docs.replit.com/replitai/app-themes.md)
- [Replit Assistant](https://docs.replit.com/replitai/assistant.md)
- [Autonomy Level](https://docs.replit.com/replitai/autonomy-level.md)
- [Checkpoints and Rollbacks](https://docs.replit.com/replitai/checkpoints-and-rollbacks.md)
- [Connectors for Organizations](https://docs.replit.com/replitai/connectors-for-organizations.md)
- [Dynamic Intelligence](https://docs.replit.com/replitai/dynamic-intelligence.md)
- [General Agent](https://docs.replit.com/replitai/general-agent.md)
- [Image generation](https://docs.replit.com/replitai/image-generation.md)
- [Agent integrations](https://docs.replit.com/replitai/integrations.md)
- [Figma MCP integration](https://docs.replit.com/replitai/mcp/figma.md)
- [Message Queue](https://docs.replit.com/replitai/message-queue.md)
- [Plan Mode](https://docs.replit.com/replitai/plan-mode.md)
- [Replit AI Integrations](https://docs.replit.com/replitai/replit-ai-integrations.md)
- [replit.md](https://docs.replit.com/replitai/replit-dot-md.md)
- [Visual Editor](https://docs.replit.com/replitai/visual-editor.md)
- [Web Search](https://docs.replit.com/replitai/web-search.md)

## Cloud Services

- [Cloud Services](https://docs.replit.com/category/cloud-services.md)
- [Autoscale Deployments](https://docs.replit.com/cloud-services/deployments/autoscale-deployments.md)
- [Custom Domains](https://docs.replit.com/cloud-services/deployments/custom-domains.md)
- [Domain Purchasing](https://docs.replit.com/cloud-services/deployments/domain-purchasing.md)
- [Published App Monitoring](https://docs.replit.com/cloud-services/deployments/monitoring-a-deployment.md)
- [Private Deployments](https://docs.replit.com/cloud-services/deployments/private-deployments.md)
- [Reserved VM Deployments](https://docs.replit.com/cloud-services/deployments/reserved-vm-deployments.md)
- [Scheduled Deployments](https://docs.replit.com/cloud-services/deployments/scheduled-deployments.md)
- [Static Deployments](https://docs.replit.com/cloud-services/deployments/static-deployments.md)
- [Static Deployment Configuration](https://docs.replit.com/cloud-services/deployments/static-deployments-advanced.md)
- [App Storage](https://docs.replit.com/cloud-services/storage-and-databases/object-storage.md)
- [Production Databases](https://docs.replit.com/cloud-services/storage-and-databases/production-databases.md)
- [Key-Value Store](https://docs.replit.com/cloud-services/storage-and-databases/replit-database.md)
- [Database](https://docs.replit.com/cloud-services/storage-and-databases/sql-database.md)

## Deployments

- [Overview](https://docs.replit.com/category/replit-deployments.md)

## Storage and Databases

- [Storage and Databases](https://docs.replit.com/category/storage-and-databases.md)

## Extensions

- [auth API](https://docs.replit.com/extensions/api/auth.md)
- [Background Script API](https://docs.replit.com/extensions/api/background.md)
- [commands API](https://docs.replit.com/extensions/api/commands.md)
- [data API](https://docs.replit.com/extensions/api/data.md)
- [debug API](https://docs.replit.com/extensions/api/debug.md)
- [editor API](https://docs.replit.com/extensions/api/editor.md)
- [exec API](https://docs.replit.com/extensions/api/exec.md)
- [fs API](https://docs.replit.com/extensions/api/fs.md)
- [init API](https://docs.replit.com/extensions/api/init.md)
- [Extension manifest reference](https://docs.replit.com/extensions/api/manifest.md)
- [me API](https://docs.replit.com/extensions/api/me.md)
- [messages API](https://docs.replit.com/extensions/api/messages.md)
- [replDb API](https://docs.replit.com/extensions/api/replDb.md)
- [session API](https://docs.replit.com/extensions/api/session.md)
- [themes API](https://docs.replit.com/extensions/api/themes.md)
- [Create your first Replit Extension](https://docs.replit.com/extensions/basics/create-extension.md)
- [Key Concepts](https://docs.replit.com/extensions/basics/key-concepts.md)
- [Extension Devtools](https://docs.replit.com/extensions/development/devtools.md)
- [Full-Stack](https://docs.replit.com/extensions/development/full-stack.md)
- [Manual Installation](https://docs.replit.com/extensions/development/installation.md)
- [useActiveFile() Hook](https://docs.replit.com/extensions/development/react/hooks/useActiveFile.md)
- [useIsExtension() Hook](https://docs.replit.com/extensions/development/react/hooks/useIsExtension.md)
- [useReplit() Hook](https://docs.replit.com/extensions/development/react/hooks/useReplit.md)
- [useReplitEffect() Hook](https://docs.replit.com/extensions/development/react/hooks/useReplitEffect.md)
- [useTheme() Hook](https://docs.replit.com/extensions/development/react/hooks/useTheme.md)
- [useThemeValues() Hook](https://docs.replit.com/extensions/development/react/hooks/useThemeValues.md)
- [useWatchTextFile() Hook](https://docs.replit.com/extensions/development/react/hooks/useWatchTextFile.md)
- [Introduction](https://docs.replit.com/extensions/development/react/introduction.md)
- [JavaScript Commands](https://docs.replit.com/extensions/examples/javascript-commands.md)
- [JSON Editor](https://docs.replit.com/extensions/examples/json-editor.md)
- [Snippet Manager](https://docs.replit.com/extensions/examples/snippet-manager.md)
- [Extension Developer Docs](https://docs.replit.com/extensions/extensions.md)
- [Frequently Asked Questions](https://docs.replit.com/extensions/faq.md)
- [Publish your Extension](https://docs.replit.com/extensions/publish.md)

## Teams

- [Replit Teams and Enterprise](https://docs.replit.com/category/teams.md)
- [Roles, Groups and Access](https://docs.replit.com/teams/identity-and-access-management/groups-and-permissions.md)
- [Managing Members](https://docs.replit.com/teams/identity-and-access-management/managing-members.md)
- [Access Management](https://docs.replit.com/teams/identity-and-access-management/repl-access-management.md)
- [SAML](https://docs.replit.com/teams/identity-and-access-management/saml.md)
- [SCIM](https://docs.replit.com/teams/identity-and-access-management/scim.md)
- [Transfer App to Teams](https://docs.replit.com/teams/identity-and-access-management/transfer-app-to-teams.md)
- [Viewer Seats](https://docs.replit.com/teams/identity-and-access-management/viewer-seats.md)
- [Information Security](https://docs.replit.com/teams/information-security/overview.md)
- [Projects Overview](https://docs.replit.com/teams/projects/overview.md)
- [Conflict Resolution in Projects](https://docs.replit.com/teams/projects/resolving-conflicts.md)
- [Public Profiles](https://docs.replit.com/teams/public_profiles.md)
- [Replit Core Sponsorships](https://docs.replit.com/teams/replit-core-sponsorships.md)
- [Legacy Teams Pro shut down (August 14th, 2025)](https://docs.replit.com/teams/teams-pro-shutdown.md)

## Billing

- [Publishing and Database Billing](https://docs.replit.com/billing/about-usage-based-billing.md)
- [Replit AI Billing](https://docs.replit.com/billing/ai-billing.md)
- [Publishing costs](https://docs.replit.com/billing/deployment-pricing.md)
- [Managing Your Spend](https://docs.replit.com/billing/managing-spend.md)
- [App Storage Billing](https://docs.replit.com/billing/object-storage-billing.md)
- [Cancellation](https://docs.replit.com/billing/teams-billing/cancellation.md)
- [Managing Seats](https://docs.replit.com/billing/teams-billing/managing-seats.md)
- [Overview](https://docs.replit.com/billing/teams-billing/overview.md)
- [Billing](https://docs.replit.com/category/billing.md)

## Legal and Security

- [Legal and Security](https://docs.replit.com/category/legal-and-security.md)

## Updates

- [December 13, 2024](https://docs.replit.com/updates/2024/12/13/changelog.md)
- [December 20, 2024](https://docs.replit.com/updates/2024/12/20/changelog.md)
- [December 27, 2024](https://docs.replit.com/updates/2024/12/27/changelog.md)
- [January 3, 2025](https://docs.replit.com/updates/2025/01/03/changelog.md)
- [January 10, 2025](https://docs.replit.com/updates/2025/01/10/changelog.md)
- [January 17, 2025](https://docs.replit.com/updates/2025/01/17/changelog.md)
- [January 24, 2025](https://docs.replit.com/updates/2025/01/24/changelog.md)
- [January 31, 2025](https://docs.replit.com/updates/2025/01/31/changelog.md)
- [February 7, 2025](https://docs.replit.com/updates/2025/02/07/changelog.md)
- [February 14, 2025](https://docs.replit.com/updates/2025/02/14/changelog.md)
- [February 21, 2025](https://docs.replit.com/updates/2025/02/21/changelog.md)
- [February 28, 2025](https://docs.replit.com/updates/2025/02/28/changelog.md)
- [March 7, 2025](https://docs.replit.com/updates/2025/03/07/changelog.md)
- [March 14, 2025](https://docs.replit.com/updates/2025/03/14/changelog.md)
- [March 21, 2025](https://docs.replit.com/updates/2025/03/21/changelog.md)
- [March 28, 2025](https://docs.replit.com/updates/2025/03/28/changelog.md)
- [April 4, 2025](https://docs.replit.com/updates/2025/04/04/changelog.md)
- [April 11, 2025](https://docs.replit.com/updates/2025/04/11/changelog.md)
- [April 18, 2025](https://docs.replit.com/updates/2025/04/18/changelog.md)
- [April 25, 2025](https://docs.replit.com/updates/2025/04/25/changelog.md)
- [May 2, 2025](https://docs.replit.com/updates/2025/05/02/changelog.md)
- [May 9, 2025](https://docs.replit.com/updates/2025/05/09/changelog.md)
- [May 16, 2025](https://docs.replit.com/updates/2025/05/16/changelog.md)
- [May 23, 2025](https://docs.replit.com/updates/2025/05/23/changelog.md)
- [May 30, 2025](https://docs.replit.com/updates/2025/05/30/changelog.md)
- [June 6, 2025](https://docs.replit.com/updates/2025/06/06/changelog.md)
- [June 13, 2025](https://docs.replit.com/updates/2025/06/13/changelog.md)
- [June 20, 2025](https://docs.replit.com/updates/2025/06/20/changelog.md)
- [June 27, 2025](https://docs.replit.com/updates/2025/06/27/changelog.md)
- [July 4, 2025](https://docs.replit.com/updates/2025/07/04/changelog.md)
- [July 11, 2025](https://docs.replit.com/updates/2025/07/11/changelog.md)
- [July 18, 2025](https://docs.replit.com/updates/2025/07/18/changelog.md)
- [July 25, 2025](https://docs.replit.com/updates/2025/07/25/changelog.md)
- [August 1, 2025](https://docs.replit.com/updates/2025/08/01/changelog.md)
- [August 8, 2025](https://docs.replit.com/updates/2025/08/08/changelog.md)
- [August 15, 2025](https://docs.replit.com/updates/2025/08/15/changelog.md)
- [August 22, 2025](https://docs.replit.com/updates/2025/08/22/changelog.md)
- [August 29, 2025](https://docs.replit.com/updates/2025/08/29/changelog.md)
- [September 5, 2025](https://docs.replit.com/updates/2025/09/05/changelog.md)
- [September 12, 2025](https://docs.replit.com/updates/2025/09/12/changelog.md)
- [September 19, 2025](https://docs.replit.com/updates/2025/09/19/changelog.md)
- [September 26, 2025](https://docs.replit.com/updates/2025/09/26/changelog.md)
- [October 3, 2025](https://docs.replit.com/updates/2025/10/03/changelog.md)
- [October 10, 2025](https://docs.replit.com/updates/2025/10/10/changelog.md)
- [October 17, 2025](https://docs.replit.com/updates/2025/10/17/changelog.md)
- [October 24, 2025](https://docs.replit.com/updates/2025/10/24/changelog.md)
- [October 31, 2025](https://docs.replit.com/updates/2025/10/31/changelog.md)

## Additional Resources

- [Add a Replit Badge to your app](https://docs.replit.com/additional-resources/add-a-made-with-replit-badge-to-your-app.md)
- [Earning with Replit Bounties](https://docs.replit.com/additional-resources/bounties/bounty-hunting.md)
- [Bounty Templates](https://docs.replit.com/additional-resources/bounties/bounty-templates.md)
- [Frequently Asked Questions (FAQ)](https://docs.replit.com/additional-resources/bounties/faq.md)
- [Resources for Bounty Hunters](https://docs.replit.com/additional-resources/bounties/hunter-resources.md)
- [Posting and awarding a Bounty](https://docs.replit.com/additional-resources/bounties/posting-a-bounty.md)
- [Replit Cheat Sheet](https://docs.replit.com/additional-resources/cheat-sheet.md)
- [The Graphical Command Line Interface](https://docs.replit.com/additional-resources/clui-graphical-cli.md)
- [Google Authentication in Python and Flask](https://docs.replit.com/additional-resources/google-auth-in-flask.md)
- [Streaming native graphics using VNC](https://docs.replit.com/additional-resources/streaming-native-graphics-vnc.md)
- [Bounties](https://docs.replit.com/category/bounties.md)

## Reference

- [App Storage JavaScript SDK](https://docs.replit.com/reference/object-storage-javascript-sdk.md)
- [App Storage Python SDK](https://docs.replit.com/reference/object-storage-python-sdk.md)

## Other

- [Replit Apps](https://docs.replit.com/category/replit-apps.md)
- [Replit Core](https://docs.replit.com/category/replit-core.md)
- [Overview](https://docs.replit.com/category/replit-workspace.md)
- [Workspace Features](https://docs.replit.com/category/workspace-features.md)
- [FAQ](https://docs.replit.com/faq.md)
- [Reporting Abuse on Replit](https://docs.replit.com/legal-and-security-info/abuse-report.md)
- [Account Inactivity](https://docs.replit.com/legal-and-security-info/account-inactivity.md)
- [Copyright claims and takedown requests](https://docs.replit.com/legal-and-security-info/copyright-claims-takedown-requests.md)
- [Deleting your data](https://docs.replit.com/legal-and-security-info/deleting-your-data.md)
- [Licensing information](https://docs.replit.com/legal-and-security-info/licensing-info.md)
- [Security](https://docs.replit.com/legal-and-security-info/security.md)
- [Strike system FAQ](https://docs.replit.com/legal-and-security-info/strike-system-faq.md)
- [Support Policy](https://docs.replit.com/legal-and-security-info/support-policy.md)
- [Trust and Safety at Replit](https://docs.replit.com/legal-and-security-info/trust-and-safety.md)
- [Usage Quota & Limits](https://docs.replit.com/legal-and-security-info/usage.md)
- [Replit web accessibility statement](https://docs.replit.com/legal-and-security-info/web-accessibility.md)
- [Replit Desktop App](https://docs.replit.com/platforms/desktop-app.md)
- [Replit Mobile App](https://docs.replit.com/platforms/mobile-app.md)
- [Replit App Embed](https://docs.replit.com/replit-app/app-embed.md)
- [Collaboration](https://docs.replit.com/replit-app/collaborate.md)
- [Replit App Configuration](https://docs.replit.com/replit-app/configuration.md)
- [Import](https://docs.replit.com/replit-app/import-to-replit.md)
- [Replit App Visibility](https://docs.replit.com/replit-app/visibility.md)
- [Replit Core](https://docs.replit.com/replit-core/replit-core.md)

llms-full.txt (https://replit.com/llms-full.txt)

# Replit Documentation

> A comprehensive compilation of Replit documentation covering getting started guides, tutorials, workspace features, AI capabilities, cloud services, deployments, extensions, teams, billing, and more.

This llms.txt file contains a complete compilation of markdown documentation from Replit's documentation site. The content is organized by category to help you navigate and find relevant information quickly.

Total documents compiled: 228

## Getting Started

- [Introduction](https://docs.replit.com/getting-started/intro-replit.md)
- [Create a Slack channel summarizer](https://docs.replit.com/getting-started/quickstarts/ai-slack-channel-summarizer.md)
- [Create with AI](https://docs.replit.com/getting-started/quickstarts/ask-ai.md)
- [Create a file converter with AI](https://docs.replit.com/getting-started/quickstarts/build-with-ai.md)
- [Connect your app to a SQL database](https://docs.replit.com/getting-started/quickstarts/database-connection.md)
- [Create a Discord bot](https://docs.replit.com/getting-started/quickstarts/discord-bot.md)
- [Create a FastAPI service](https://docs.replit.com/getting-started/quickstarts/fastapi-service.md)
- [Create a Flask app](https://docs.replit.com/getting-started/quickstarts/flask-app.md)
- [Build from Scratch](https://docs.replit.com/getting-started/quickstarts/from-scratch.md)
- [Create a Google Sheets integration](https://docs.replit.com/getting-started/quickstarts/google-sheets-integration.md)
- [Import from Bolt](https://docs.replit.com/getting-started/quickstarts/import-from-bolt.md)
- [Import from Figma](https://docs.replit.com/getting-started/quickstarts/import-from-figma.md)
- [Import from GitHub](https://docs.replit.com/getting-started/quickstarts/import-from-github.md)
- [Import from Lovable](https://docs.replit.com/getting-started/quickstarts/import-from-lovable.md)
- [Import from Vercel](https://docs.replit.com/getting-started/quickstarts/import-from-vercel.md)
- [Create a Next.js app](https://docs.replit.com/getting-started/quickstarts/next-js-app.md)
- [Create a cat image generator](https://docs.replit.com/getting-started/quickstarts/no-code-cat-image-generator.md)
- [Manage App Storage in JavaScript](https://docs.replit.com/getting-started/quickstarts/object-storage-javascript.md)
- [Manage App Storage in Python](https://docs.replit.com/getting-started/quickstarts/object-storage-python.md)
- [Remix an App](https://docs.replit.com/getting-started/quickstarts/remix-an-app.md)
- [Create a static blog with Astro](https://docs.replit.com/getting-started/quickstarts/static-blog-astro.md)
- [Create a HackerNews Slack bot](https://docs.replit.com/getting-started/quickstarts/webscrape-and-slack-notifications.md)

## Tutorials

- [Advanced AI features](https://docs.replit.com/tutorials/advanced-ai-features.md)
- [Build a Notion-powered website](https://docs.replit.com/tutorials/build-a-notion-powered-website.md)
- [Publish a Grok 3 app on Replit in 5 minutes](https://docs.replit.com/tutorials/create-apps-with-grok-3.md)
- [Efficient prompting with Replit AI](https://docs.replit.com/tutorials/effective-prompting.md)
- [Building Mobile Apps with Expo and Replit](https://docs.replit.com/tutorials/expo-on-replit.md)
- [How to vibe code effectively](https://docs.replit.com/tutorials/how-to-vibe-code.md)
- [Learn about MCP in 3 minutes](https://docs.replit.com/tutorials/mcp-in-3.md)
- [Replit's built-in security features](https://docs.replit.com/tutorials/vibe-code-securely.md)
- [Security checklist for vibe coding](https://docs.replit.com/tutorials/vibe-code-security-checklist.md)
- [Vibe coding 101: from idea to published app](https://docs.replit.com/tutorials/vibe-coding-101.md)

## Workspace Features

- [Dependency Management](https://docs.replit.com/replit-workspace/dependency-management.md)
- [Extensions](https://docs.replit.com/replit-workspace/extensions.md)
- [Keyboard Shortcuts](https://docs.replit.com/replit-workspace/keyboard-shortcuts.md)
- [Ports](https://docs.replit.com/replit-workspace/ports.md)
- [Replit Auth](https://docs.replit.com/replit-workspace/replit-auth.md)
- [Replit Themes](https://docs.replit.com/replit-workspace/replit-themes.md)
- [SSH](https://docs.replit.com/replit-workspace/ssh.md)
- [Developer Frameworks](https://docs.replit.com/replit-workspace/templates.md)
- [Workflows](https://docs.replit.com/replit-workspace/workflows.md)
- [Console](https://docs.replit.com/replit-workspace/workspace-features/console.md)
- [File History](https://docs.replit.com/replit-workspace/workspace-features/file-history.md)
- [Using the Git pane](https://docs.replit.com/replit-workspace/workspace-features/git-interface.md)
- [Multiplayer](https://docs.replit.com/replit-workspace/workspace-features/multiplayer.md)
- [Preview](https://docs.replit.com/replit-workspace/workspace-features/preview.md)
- [Secrets](https://docs.replit.com/replit-workspace/workspace-features/secrets.md)
- [Security Scanner](https://docs.replit.com/replit-workspace/workspace-features/security-scanner.md)
- [User Settings](https://docs.replit.com/replit-workspace/workspace-features/user-settings.md)
- [Version control](https://docs.replit.com/replit-workspace/workspace-features/version-control.md)

## Replit AI

- [Replit AI](https://docs.replit.com/category/replit-ai.md)
- [Replit Agent](https://docs.replit.com/replitai/agent.md)
- [Agents & Automations](https://docs.replit.com/replitai/agents-and-automations.md)
- [App Testing](https://docs.replit.com/replitai/app-testing.md)
- [App Themes](https://docs.replit.com/replitai/app-themes.md)
- [Replit Assistant](https://docs.replit.com/replitai/assistant.md)
- [Autonomy Level](https://docs.replit.com/replitai/autonomy-level.md)
- [Checkpoints and Rollbacks](https://docs.replit.com/replitai/checkpoints-and-rollbacks.md)
- [Connectors for Organizations](https://docs.replit.com/replitai/connectors-for-organizations.md)
- [Dynamic Intelligence](https://docs.replit.com/replitai/dynamic-intelligence.md)
- [General Agent](https://docs.replit.com/replitai/general-agent.md)
- [Image generation](https://docs.replit.com/replitai/image-generation.md)
- [Agent integrations](https://docs.replit.com/replitai/integrations.md)
- [Figma MCP integration](https://docs.replit.com/replitai/mcp/figma.md)
- [Message Queue](https://docs.replit.com/replitai/message-queue.md)
- [Plan Mode](https://docs.replit.com/replitai/plan-mode.md)
- [Replit AI Integrations](https://docs.replit.com/replitai/replit-ai-integrations.md)
- [replit.md](https://docs.replit.com/replitai/replit-dot-md.md)
- [Visual Editor](https://docs.replit.com/replitai/visual-editor.md)
- [Web Search](https://docs.replit.com/replitai/web-search.md)

## Cloud Services

- [Cloud Services](https://docs.replit.com/category/cloud-services.md)
- [Autoscale Deployments](https://docs.replit.com/cloud-services/deployments/autoscale-deployments.md)
- [Custom Domains](https://docs.replit.com/cloud-services/deployments/custom-domains.md)
- [Domain Purchasing](https://docs.replit.com/cloud-services/deployments/domain-purchasing.md)
- [Published App Monitoring](https://docs.replit.com/cloud-services/deployments/monitoring-a-deployment.md)
- [Private Deployments](https://docs.replit.com/cloud-services/deployments/private-deployments.md)
- [Reserved VM Deployments](https://docs.replit.com/cloud-services/deployments/reserved-vm-deployments.md)
- [Scheduled Deployments](https://docs.replit.com/cloud-services/deployments/scheduled-deployments.md)
- [Static Deployments](https://docs.replit.com/cloud-services/deployments/static-deployments.md)
- [Static Deployment Configuration](https://docs.replit.com/cloud-services/deployments/static-deployments-advanced.md)
- [App Storage](https://docs.replit.com/cloud-services/storage-and-databases/object-storage.md)
- [Production Databases](https://docs.replit.com/cloud-services/storage-and-databases/production-databases.md)
- [Key-Value Store](https://docs.replit.com/cloud-services/storage-and-databases/replit-database.md)
- [Database](https://docs.replit.com/cloud-services/storage-and-databases/sql-database.md)

## Deployments

- [Overview](https://docs.replit.com/category/replit-deployments.md)

## Storage and Databases

- [Storage and Databases](https://docs.replit.com/category/storage-and-databases.md)

## Extensions

- [auth API](https://docs.replit.com/extensions/api/auth.md)
- [Background Script API](https://docs.replit.com/extensions/api/background.md)
- [commands API](https://docs.replit.com/extensions/api/commands.md)
- [data API](https://docs.replit.com/extensions/api/data.md)
- [debug API](https://docs.replit.com/extensions/api/debug.md)
- [editor API](https://docs.replit.com/extensions/api/editor.md)
- [exec API](https://docs.replit.com/extensions/api/exec.md)
- [fs API](https://docs.replit.com/extensions/api/fs.md)
- [init API](https://docs.replit.com/extensions/api/init.md)
- [Extension manifest reference](https://docs.replit.com/extensions/api/manifest.md)
- [me API](https://docs.replit.com/extensions/api/me.md)
- [messages API](https://docs.replit.com/extensions/api/messages.md)
- [replDb API](https://docs.replit.com/extensions/api/replDb.md)
- [session API](https://docs.replit.com/extensions/api/session.md)
- [themes API](https://docs.replit.com/extensions/api/themes.md)
- [Create your first Replit Extension](https://docs.replit.com/extensions/basics/create-extension.md)
- [Key Concepts](https://docs.replit.com/extensions/basics/key-concepts.md)
- [Extension Devtools](https://docs.replit.com/extensions/development/devtools.md)
- [Full-Stack](https://docs.replit.com/extensions/development/full-stack.md)
- [Manual Installation](https://docs.replit.com/extensions/development/installation.md)
- [useActiveFile() Hook](https://docs.replit.com/extensions/development/react/hooks/useActiveFile.md)
- [useIsExtension() Hook](https://docs.replit.com/extensions/development/react/hooks/useIsExtension.md)
- [useReplit() Hook](https://docs.replit.com/extensions/development/react/hooks/useReplit.md)
- [useReplitEffect() Hook](https://docs.replit.com/extensions/development/react/hooks/useReplitEffect.md)
- [useTheme() Hook](https://docs.replit.com/extensions/development/react/hooks/useTheme.md)
- [useThemeValues() Hook](https://docs.replit.com/extensions/development/react/hooks/useThemeValues.md)
- [useWatchTextFile() Hook](https://docs.replit.com/extensions/development/react/hooks/useWatchTextFile.md)
- [Introduction](https://docs.replit.com/extensions/development/react/introduction.md)
- [JavaScript Commands](https://docs.replit.com/extensions/examples/javascript-commands.md)
- [JSON Editor](https://docs.replit.com/extensions/examples/json-editor.md)
- [Snippet Manager](https://docs.replit.com/extensions/examples/snippet-manager.md)
- [Extension Developer Docs](https://docs.replit.com/extensions/extensions.md)
- [Frequently Asked Questions](https://docs.replit.com/extensions/faq.md)
- [Publish your Extension](https://docs.replit.com/extensions/publish.md)

## Teams

- [Replit Teams and Enterprise](https://docs.replit.com/category/teams.md)
- [Roles, Groups and Access](https://docs.replit.com/teams/identity-and-access-management/groups-and-permissions.md)
- [Managing Members](https://docs.replit.com/teams/identity-and-access-management/managing-members.md)
- [Access Management](https://docs.replit.com/teams/identity-and-access-management/repl-access-management.md)
- [SAML](https://docs.replit.com/teams/identity-and-access-management/saml.md)
- [SCIM](https://docs.replit.com/teams/identity-and-access-management/scim.md)
- [Transfer App to Teams](https://docs.replit.com/teams/identity-and-access-management/transfer-app-to-teams.md)
- [Viewer Seats](https://docs.replit.com/teams/identity-and-access-management/viewer-seats.md)
- [Information Security](https://docs.replit.com/teams/information-security/overview.md)
- [Projects Overview](https://docs.replit.com/teams/projects/overview.md)
- [Conflict Resolution in Projects](https://docs.replit.com/teams/projects/resolving-conflicts.md)
- [Public Profiles](https://docs.replit.com/teams/public_profiles.md)
- [Replit Core Sponsorships](https://docs.replit.com/teams/replit-core-sponsorships.md)
- [Legacy Teams Pro shut down (August 14th, 2025)](https://docs.replit.com/teams/teams-pro-shutdown.md)

## Billing

- [Publishing and Database Billing](https://docs.replit.com/billing/about-usage-based-billing.md)
- [Replit AI Billing](https://docs.replit.com/billing/ai-billing.md)
- [Publishing costs](https://docs.replit.com/billing/deployment-pricing.md)
- [Managing Your Spend](https://docs.replit.com/billing/managing-spend.md)
- [App Storage Billing](https://docs.replit.com/billing/object-storage-billing.md)
- [Cancellation](https://docs.replit.com/billing/teams-billing/cancellation.md)
- [Managing Seats](https://docs.replit.com/billing/teams-billing/managing-seats.md)
- [Overview](https://docs.replit.com/billing/teams-billing/overview.md)
- [Billing](https://docs.replit.com/category/billing.md)

## Legal and Security

- [Legal and Security](https://docs.replit.com/category/legal-and-security.md)

## Updates

- [December 13, 2024](https://docs.replit.com/updates/2024/12/13/changelog.md)
- [December 20, 2024](https://docs.replit.com/updates/2024/12/20/changelog.md)
- [December 27, 2024](https://docs.replit.com/updates/2024/12/27/changelog.md)
- [January 3, 2025](https://docs.replit.com/updates/2025/01/03/changelog.md)
- [January 10, 2025](https://docs.replit.com/updates/2025/01/10/changelog.md)
- [January 17, 2025](https://docs.replit.com/updates/2025/01/17/changelog.md)
- [January 24, 2025](https://docs.replit.com/updates/2025/01/24/changelog.md)
- [January 31, 2025](https://docs.replit.com/updates/2025/01/31/changelog.md)
- [February 7, 2025](https://docs.replit.com/updates/2025/02/07/changelog.md)
- [February 14, 2025](https://docs.replit.com/updates/2025/02/14/changelog.md)
- [February 21, 2025](https://docs.replit.com/updates/2025/02/21/changelog.md)
- [February 28, 2025](https://docs.replit.com/updates/2025/02/28/changelog.md)
- [March 7, 2025](https://docs.replit.com/updates/2025/03/07/changelog.md)
- [March 14, 2025](https://docs.replit.com/updates/2025/03/14/changelog.md)
- [March 21, 2025](https://docs.replit.com/updates/2025/03/21/changelog.md)
- [March 28, 2025](https://docs.replit.com/updates/2025/03/28/changelog.md)
- [April 4, 2025](https://docs.replit.com/updates/2025/04/04/changelog.md)
- [April 11, 2025](https://docs.replit.com/updates/2025/04/11/changelog.md)
- [April 18, 2025](https://docs.replit.com/updates/2025/04/18/changelog.md)
- [April 25, 2025](https://docs.replit.com/updates/2025/04/25/changelog.md)
- [May 2, 2025](https://docs.replit.com/updates/2025/05/02/changelog.md)
- [May 9, 2025](https://docs.replit.com/updates/2025/05/09/changelog.md)
- [May 16, 2025](https://docs.replit.com/updates/2025/05/16/changelog.md)
- [May 23, 2025](https://docs.replit.com/updates/2025/05/23/changelog.md)
- [May 30, 2025](https://docs.replit.com/updates/2025/05/30/changelog.md)
- [June 6, 2025](https://docs.replit.com/updates/2025/06/06/changelog.md)
- [June 13, 2025](https://docs.replit.com/updates/2025/06/13/changelog.md)
- [June 20, 2025](https://docs.replit.com/updates/2025/06/20/changelog.md)
- [June 27, 2025](https://docs.replit.com/updates/2025/06/27/changelog.md)
- [July 4, 2025](https://docs.replit.com/updates/2025/07/04/changelog.md)
- [July 11, 2025](https://docs.replit.com/updates/2025/07/11/changelog.md)
- [July 18, 2025](https://docs.replit.com/updates/2025/07/18/changelog.md)
- [July 25, 2025](https://docs.replit.com/updates/2025/07/25/changelog.md)
- [August 1, 2025](https://docs.replit.com/updates/2025/08/01/changelog.md)
- [August 8, 2025](https://docs.replit.com/updates/2025/08/08/changelog.md)
- [August 15, 2025](https://docs.replit.com/updates/2025/08/15/changelog.md)
- [August 22, 2025](https://docs.replit.com/updates/2025/08/22/changelog.md)
- [August 29, 2025](https://docs.replit.com/updates/2025/08/29/changelog.md)
- [September 5, 2025](https://docs.replit.com/updates/2025/09/05/changelog.md)
- [September 12, 2025](https://docs.replit.com/updates/2025/09/12/changelog.md)
- [September 19, 2025](https://docs.replit.com/updates/2025/09/19/changelog.md)
- [September 26, 2025](https://docs.replit.com/updates/2025/09/26/changelog.md)
- [October 3, 2025](https://docs.replit.com/updates/2025/10/03/changelog.md)
- [October 10, 2025](https://docs.replit.com/updates/2025/10/10/changelog.md)
- [October 17, 2025](https://docs.replit.com/updates/2025/10/17/changelog.md)
- [October 24, 2025](https://docs.replit.com/updates/2025/10/24/changelog.md)
- [October 31, 2025](https://docs.replit.com/updates/2025/10/31/changelog.md)

## Additional Resources

- [Add a Replit Badge to your app](https://docs.replit.com/additional-resources/add-a-made-with-replit-badge-to-your-app.md)
- [Earning with Replit Bounties](https://docs.replit.com/additional-resources/bounties/bounty-hunting.md)
- [Bounty Templates](https://docs.replit.com/additional-resources/bounties/bounty-templates.md)
- [Frequently Asked Questions (FAQ)](https://docs.replit.com/additional-resources/bounties/faq.md)
- [Resources for Bounty Hunters](https://docs.replit.com/additional-resources/bounties/hunter-resources.md)
- [Posting and awarding a Bounty](https://docs.replit.com/additional-resources/bounties/posting-a-bounty.md)
- [Replit Cheat Sheet](https://docs.replit.com/additional-resources/cheat-sheet.md)
- [The Graphical Command Line Interface](https://docs.replit.com/additional-resources/clui-graphical-cli.md)
- [Google Authentication in Python and Flask](https://docs.replit.com/additional-resources/google-auth-in-flask.md)
- [Streaming native graphics using VNC](https://docs.replit.com/additional-resources/streaming-native-graphics-vnc.md)
- [Bounties](https://docs.replit.com/category/bounties.md)

## Reference

- [App Storage JavaScript SDK](https://docs.replit.com/reference/object-storage-javascript-sdk.md)
- [App Storage Python SDK](https://docs.replit.com/reference/object-storage-python-sdk.md)

## Other

- [Replit Apps](https://docs.replit.com/category/replit-apps.md)
- [Replit Core](https://docs.replit.com/category/replit-core.md)
- [Overview](https://docs.replit.com/category/replit-workspace.md)
- [Workspace Features](https://docs.replit.com/category/workspace-features.md)
- [FAQ](https://docs.replit.com/faq.md)
- [Reporting Abuse on Replit](https://docs.replit.com/legal-and-security-info/abuse-report.md)
- [Account Inactivity](https://docs.replit.com/legal-and-security-info/account-inactivity.md)
- [Copyright claims and takedown requests](https://docs.replit.com/legal-and-security-info/copyright-claims-takedown-requests.md)
- [Deleting your data](https://docs.replit.com/legal-and-security-info/deleting-your-data.md)
- [Licensing information](https://docs.replit.com/legal-and-security-info/licensing-info.md)
- [Security](https://docs.replit.com/legal-and-security-info/security.md)
- [Strike system FAQ](https://docs.replit.com/legal-and-security-info/strike-system-faq.md)
- [Support Policy](https://docs.replit.com/legal-and-security-info/support-policy.md)
- [Trust and Safety at Replit](https://docs.replit.com/legal-and-security-info/trust-and-safety.md)
- [Usage Quota & Limits](https://docs.replit.com/legal-and-security-info/usage.md)
- [Replit web accessibility statement](https://docs.replit.com/legal-and-security-info/web-accessibility.md)
- [Replit Desktop App](https://docs.replit.com/platforms/desktop-app.md)
- [Replit Mobile App](https://docs.replit.com/platforms/mobile-app.md)
- [Replit App Embed](https://docs.replit.com/replit-app/app-embed.md)
- [Collaboration](https://docs.replit.com/replit-app/collaborate.md)
- [Replit App Configuration](https://docs.replit.com/replit-app/configuration.md)
- [Import](https://docs.replit.com/replit-app/import-to-replit.md)
- [Replit App Visibility](https://docs.replit.com/replit-app/visibility.md)
- [Replit Core](https://docs.replit.com/replit-core/replit-core.md)

---

# Content

## Getting Started

### Introduction
Source: [https://docs.replit.com/getting-started/intro-replit.md](https://docs.replit.com/getting-started/intro-replit.md)

# Introduction

> Replit is the fastest way to go from idea to app. Create and publish full-stack apps from your browser with AI at your fingertips—no installation or setup required.

export const YouTubeEmbed = ({videoId, title = "YouTube video", startAt}) => {
  if (!videoId) {
    return null;
  }
  let url = "https://www.youtube.com/embed/" + videoId;
  if (startAt) {
    url = url + "?start=" + startAt;
  }
  return <Frame>
      <iframe src={url} title={title} allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen></iframe>
    </Frame>;
};

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.

<Frame>
  <img src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/workspace.jpg?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=d254d021e7ba96a358f070a4700031bd" alt="Replit Workspace" data-og-width="1920" width="1920" data-og-height="1011" height="1011" data-path="images/getting-started/workspace.jpg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/workspace.jpg?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=50dca2489861404a46662d9c96e91010 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/workspace.jpg?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=bfa0e5b1a9f711e17bf97b4f1f6c3734 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/workspace.jpg?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=9370b9bc21ba9f4db2ee5ea86cbeef01 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/workspace.jpg?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=996477e5ff7c0496513e7f76913ff38a 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/workspace.jpg?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=3934c3a7458f8b4c2af1d8a6e0cd6718 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/workspace.jpg?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=ed11d6614e7a830524ed3a00a04267fe 2500w" />
</Frame>

Building apps traditionally requires installing programs, languages, and packages—a time-consuming setup process.
On Replit, the platform configures your environment instantly, so you can start building whether you're a beginner or experienced developer.

You have everything required to create apps from one browser tab—no installation required.
With AI coding tools, real-time collaboration, and instant sharing, Replit gets you from idea to app, fast.

## Quickstart guides

To create your app on Replit, choose the guide that matches your needs:

### Create new apps

<CardGroup cols={2}>
  <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>

  <Card title="Ask AI" icon="robot" href="/getting-started/quickstarts/ask-ai/">
    ⏱️ *7 minutes*

    Use the AI-powered Replit tools to create, explain, and debug your app.
  </Card>

  <Card title="Build from Scratch" icon="user-chef" href="/getting-started/quickstarts/from-scratch/">
    ⏱️ *15 minutes*

    Create a full-stack app with complete control.
  </Card>
</CardGroup>

### Import existing projects

<CardGroup cols={2}>
  <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](/replit-workspace/workspace-features/preview) of your app
* [Publish in minutes](/category/replit-deployments)
* Browser native app that requires zero installation and configuration
* [Full-featured code editor](/category/workspace-features)
* [Mobile app](/platforms/mobile-app) for building apps from your phone or tablet
* [AI-assisted app creation](/replitai/agent)
* [Version control integration](/replit-workspace/workspace-features/version-control) for tracking changes
* [Team collaboration](/teams/public_profiles) for building together

### AI companion capabilities

<Frame>
  <img src="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/agent.jpg?fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=408152e9cbfce44f10bda3881e4183cb" alt="Replit AI Agent" data-og-width="1920" width="1920" data-og-height="700" height="700" data-path="images/getting-started/agent.jpg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/agent.jpg?w=280&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=d719a6d2c995683586cf797a21bdcdc4 280w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/agent.jpg?w=560&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=78a70340cead543bfda076142897adb8 560w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/agent.jpg?w=840&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=142d6f67d44c7913b07888edacc06495 840w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/agent.jpg?w=1100&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=5bb6ee43430ffab30266d7750d661902 1100w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/agent.jpg?w=1650&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=ccd99b75fe0b7f8a77b02554730127b1 1650w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/agent.jpg?w=2500&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=3e6267c7a46b0d72452f3992fe04db9c 2500w" />
</Frame>

Replit AI [Agent](/replitai/agent) and [Assistant](/replitai/assistant) accelerate app creation with the following capabilities:

* Complete app generation and setup from natural language descriptions
* Code suggestions and autocomplete
* Automated error detection and debugging assistance
* Documentation generation for your app

### Share in minutes

Publish your apps in minutes using the following tools:

* App publishing to the cloud in a few clicks
* Database integration and hosting
* Custom domain support and connection encryption for your applications

## Additional information

<Frame>
  <img src="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/mobile.jpg?fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=33376aefc09f439b7d925f44ed670c19" alt="Replit Mobile" data-og-width="1920" width="1920" data-og-height="1080" height="1080" data-path="images/getting-started/mobile.jpg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/mobile.jpg?w=280&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=2c4c045af7241193c1d19d1eba704f81 280w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/mobile.jpg?w=560&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=8b2f0d2cbe45b1ca6dbe759fa044689c 560w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/mobile.jpg?w=840&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=5c9f90c79cd2bbc3fc9f52be45d0c230 840w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/mobile.jpg?w=1100&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=f4e84ebf0d794fa37fb71f29bc84a574 1100w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/mobile.jpg?w=1650&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=504d9b63b67d4c1bb40dec89262b5c5e 1650w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/mobile.jpg?w=2500&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=edfa29f71ca9d2bff06804ed0440d1e3 2500w" />
</Frame>

To learn more about all of Replit's features, see the following resources:

* Learn about the Workspace features from [Workspace Features](/category/workspace-features).
* Learn about the capabilities of the Replit AI-powered features from [Replit Agent](/replitai/agent/) and [Replit Assistant](/replitai/assistant/).
* Learn how to share your creations from [Sharing Your Replit App](/replit-app/collaborate/).
* [Download the mobile app](https://replit.com/mobile/) for iOS or Android devices.


---

### Create a Slack channel summarizer
Source: [https://docs.replit.com/getting-started/quickstarts/ai-slack-channel-summarizer.md](https://docs.replit.com/getting-started/quickstarts/ai-slack-channel-summarizer.md)

# Create a Slack channel summarizer

> Build a Slack bot that summarizes channel activity using GPT-4. Learn how to integrate AI with Slack's API.

Turn your Slack conversations into concise summaries with AI. This guide shows you how to create a bot that summarizes channel activity using GPT-4.

## Features

<CardGroup cols={2}>
  <Card title="Channel Summaries" icon="message-bot">
    Summarize Slack channel activity for any time period
  </Card>

  <Card title="GPT-4 Integration" icon="brain-circuit">
    Generate intelligent, context-aware summaries using OpenAI's GPT-4
  </Card>
</CardGroup>

## Create your summarizer

<Steps>
  <Step title="Fork the template">
    1. Sign in to Replit
    2. Navigate to the [AI Slack summary template](https://replit.com/@replit-matt/Slack-Channel-Summary-Bot)
    3. Select **+ Use Template** in the upper-right corner
    4. Follow the prompts to create your Replit App
  </Step>

  <Step title="Create a Slack app">
    1. Go to the [Slack Apps page](https://api.slack.com/apps)
    2. Select **Create an App**
    3. Choose **From an app manifest**
    4. Select your workspace from the dropdown
    5. Replace the manifest content with the [manifest.json](https://replit.com/@replit-matt/Slack-Channel-Summary-Bot#assets/manifest.json) file
    6. Review the configuration and select **Create**
    7. Select **Install the App**

    <Note>
      You may need administrator approval to install the app depending on your organization's settings.
    </Note>
  </Step>

  <Step title="Configure your tokens">
    Add the following secrets to your Replit App's **Secrets** tab:

    1. **SLACK\_BOT\_TOKEN**
       * Navigate to Settings > Install App in your Slack App
       * Copy the **Bot User OAuth Token**

    2. **SLACK\_SIGNING\_SECRET**
       * Go to Settings > Basic Information
       * Copy the **Signing Secret** from App Credentials

    3. **SLACK\_APP\_TOKEN**
       * Go to Settings > Basic Information
       * Under App-Level Tokens, select **Generate Token and Scopes**
       * Add a token name and select permissions
       * Copy the generated token

    4. **OPENAI\_API\_KEY**
       * Get your API key from OpenAI's platform
  </Step>

  <Step title="Publish your bot">
    1. Select **Publish** in the Workspace header
    2. Choose **Reserved VM Deployments**
    3. Select **Set up your published app**
    4. Select **Publish**
  </Step>
</Steps>

## Using your summarizer

Add your bot to a channel and send it a direct message with the following command:

```bash  theme={null}
/summarize-channel #channel-name duration
```

For example, to summarize the last 24 hours of activity in #general:

```bash  theme={null}
/summarize-channel #general 24
```

## Customization options

<AccordionGroup>
  <Accordion title="Summarization criteria">
    Customize your summaries by modifying the prompt to focus on specific
    keywords or topics.
  </Accordion>

  <Accordion title="Platform integrations">
    Extend functionality by connecting with additional platforms and services.
  </Accordion>

  <Accordion title="Alert messages">
    Customize the format and content of Slack alert messages.
  </Accordion>

  <Accordion title="Summary frequency">
    Configure different summarization intervals for channels or topics.
  </Accordion>
</AccordionGroup>


---

### Create with AI
Source: [https://docs.replit.com/getting-started/quickstarts/ask-ai.md](https://docs.replit.com/getting-started/quickstarts/ask-ai.md)

# Create with AI

> Learn how to create a Replit App using AI-powered tools.

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block font-sans whitespace-pre-wrap break-words">
      <div className="pr-7">
        {children}
      </div>
    </CodeBlock>;
};

## Create your app using AI

⏰ *Estimated time: 7 minutes*

Learn how to create your Replit App using the **Agent** and **Assistant** AI tools in this guide.

<CardGroup cols={2}>
  <Card title="Agent" icon="robot">
    Specializes in generating new projects and building complex features.
  </Card>

  <Card title="Assistant" icon="wand-magic-sparkles">
    Specializes in describing your code, making quick fixes, and adding new features.
  </Card>
</CardGroup>

Follow the steps below to build a polished business website. Use Replit's
AI features to create an app, and refine it until it matches your desired design.

<Frame>
  <img src="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_complete.png?fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=c9f8c70074726fcaa44932037d722af6" width="500" alt="image of the Completed App" data-og-width="768" data-og-height="525" data-path="images/getting-started/quickstart_ai_complete.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_complete.png?w=280&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=2d9e1c79c775c2e02e8bc4c4d4b1de6e 280w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_complete.png?w=560&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=ab822e9fcb92dc7c6308cedd5ae68a36 560w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_complete.png?w=840&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=392e9033727e4679dd1df2ce3ecfa9d8 840w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_complete.png?w=1100&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=5be58a7f01703a8d7e201cc6d554c9c4 1100w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_complete.png?w=1650&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=3a8973fa47ba7f085548dad9fdc38e45 1650w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_complete.png?w=2500&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=c8b10d174fc0c263ebf0569e2135ebb5 2500w" />
</Frame>

<Steps>
  <Step title="Create an App">
    Navigate to the Home screen and select **Create App**:

    <img src="https://mintcdn.com/replit/0UCOQvZyQpUEM03B/images/shared/buttons/create_app.png?fit=max&auto=format&n=0UCOQvZyQpUEM03B&q=85&s=705d40879ca0ed04e8cc315c1e34649d" width="250" alt="image of the Create App button" data-og-width="448" data-og-height="66" data-path="images/shared/buttons/create_app.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/0UCOQvZyQpUEM03B/images/shared/buttons/create_app.png?w=280&fit=max&auto=format&n=0UCOQvZyQpUEM03B&q=85&s=5bcc3b3ab117756f9eb1f3689e805b28 280w, https://mintcdn.com/replit/0UCOQvZyQpUEM03B/images/shared/buttons/create_app.png?w=560&fit=max&auto=format&n=0UCOQvZyQpUEM03B&q=85&s=16c6ebca5e404c320629982c94b0b7b0 560w, https://mintcdn.com/replit/0UCOQvZyQpUEM03B/images/shared/buttons/create_app.png?w=840&fit=max&auto=format&n=0UCOQvZyQpUEM03B&q=85&s=91c5acdfbe73b75b10bc0b187cae01e5 840w, https://mintcdn.com/replit/0UCOQvZyQpUEM03B/images/shared/buttons/create_app.png?w=1100&fit=max&auto=format&n=0UCOQvZyQpUEM03B&q=85&s=8a98e12c8c472ce59126459419e8653f 1100w, https://mintcdn.com/replit/0UCOQvZyQpUEM03B/images/shared/buttons/create_app.png?w=1650&fit=max&auto=format&n=0UCOQvZyQpUEM03B&q=85&s=aa9af47d3deb715adc7ea76997991841 1650w, https://mintcdn.com/replit/0UCOQvZyQpUEM03B/images/shared/buttons/create_app.png?w=2500&fit=max&auto=format&n=0UCOQvZyQpUEM03B&q=85&s=2c93fdb671fbcf3d6291d84f19819d30 2500w" />

    Select the **Create with Replit Agent** tab as shown in the following image:

    <Frame>
      <img src="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_agent_tab.png?fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=2a090cd16e6106b66d7d1d99cff7c2e5" alt="image of the Create with Replit Agent tab" data-og-width="593" width="593" data-og-height="290" height="290" data-path="images/getting-started/quickstart_ai_agent_tab.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_agent_tab.png?w=280&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=f94588d4e35cdd8fa29f5d9682ee536d 280w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_agent_tab.png?w=560&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=c5fc185a25d44275c591833ecaebd49b 560w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_agent_tab.png?w=840&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=1eb897115040ae9b02cfe511657b8185 840w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_agent_tab.png?w=1100&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=cb094b1cf650bf9f1fa71be8c2122b25 1100w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_agent_tab.png?w=1650&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=b5f1afd199d576bae30c4b9f28135ee6 1650w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_agent_tab.png?w=2500&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=f2bd31622c31f662f1c3b3efd3d4db13 2500w" />
    </Frame>
  </Step>

  <Step title="Craft your prompt">
    To ask Agent to create your Replit App, enter your **prompt** in the text area.
    A prompt is a description of the task you want AI to perform.

    You can include text and file attachments in your prompt. Follow these steps to submit both in your prompt:

    1. Copy the following image:
       <Frame>
         <img src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/saas_website.png?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=2067b8c5135a6721522ae743de44000c" alt="image of a SaaS business website" data-og-width="2466" width="2466" data-og-height="1482" height="1482" data-path="images/getting-started/saas_website.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/saas_website.png?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=ad8d46c262cf535875f0321fe9ca1734 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/saas_website.png?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=b36180ace49d7c0da958799b7e6b811a 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/saas_website.png?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=4b055c0827ed387ac7a0e0e1cc55b95f 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/saas_website.png?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=be99cdf4897bc649b3e3f97ba613fdfc 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/saas_website.png?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=a8ae5bb9fb2ac3d3c575a62ad048eb15 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/saas_website.png?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=dd80df9d5f9f9b11ae9a266d114da714 2500w" />
       </Frame>
    2. Paste the image into Agent text area.
    3. Enter the following prompt in the text area:
       <AiPrompt>
         Build a website for a SaaS B2B website that looks like the attached file.
       </AiPrompt>
    4. Select **Start building**.
  </Step>

  <Step title="Review and approve Agent's plan">
    After you submit your prompt, Agent sets up your Replit App and provides updates on its status in real time.
    You can monitor and view the history in the **Progress** tab.

    When Agent finishes setup, it prompts you with what it intends to build and options to include additional features as shown in the following image:

    <Frame>
      <img src="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_agent_approve.png?fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=e0e12411ed9022c097f53675f38cf08b" alt="image of Agent's approve dialog" data-og-width="566" width="566" data-og-height="360" height="360" data-path="images/getting-started/quickstart_ai_agent_approve.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_agent_approve.png?w=280&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=2dbe7e3c85bfd3f66b2035e6fe32fcaf 280w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_agent_approve.png?w=560&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=a32d797cca0bdd4bbbfeb07d3f5bff7d 560w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_agent_approve.png?w=840&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=b89b8c97b50dfb2c78e3f3f472a16a0b 840w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_agent_approve.png?w=1100&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=7542ea7f3919310aafc2daf71f7411aa 1100w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_agent_approve.png?w=1650&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=5724aa246549a9266eb8687724830c06 1650w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_agent_approve.png?w=2500&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=9c534d6330106dc83b46075af6b82ebb 2500w" />
    </Frame>

    Leave the additional options unchecked and select **Approve plan & start**.
  </Step>

  <Step title="Test the app">
    After Agent builds your app, navigate to the **Preview** tab, where you can interact with the website.
    The website should resemble the following image:

    <Note>The generated website might differ since Agent can return different results for the same prompt.</Note>

    <Frame>
      <img src="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_agent_generated_page.png?fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=a43537d5d2f2fd7de129ad7d89832bd6" alt="image of the Preview tool showing the website created by Agent" data-og-width="850" width="850" data-og-height="861" height="861" data-path="images/getting-started/quickstart_ai_agent_generated_page.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_agent_generated_page.png?w=280&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=d8e31458f5ce3d036ef117fe4e05aac5 280w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_agent_generated_page.png?w=560&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=92e6f7c86b9b399379ff4935cbc05ceb 560w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_agent_generated_page.png?w=840&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=b9fc2750ed6a19bf20618c703dcf5f79 840w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_agent_generated_page.png?w=1100&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=910a14b12a65320e49033d73c47cccac 1100w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_agent_generated_page.png?w=1650&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=690c04f3ede8132b9db0e5c8d3978bb1 1650w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_agent_generated_page.png?w=2500&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=507c2b8ab056a5130778466d25ff5b32 2500w" />
    </Frame>

    Since the prompt only includes information about the landing page, Agent might omit content creation for the links on the page.

    The next step demonstrates how to use Assistant to add those pages.
  </Step>

  <Step title="Improve the app using the Assistant">
    Navigate to the **Assistant** tab, which should resemble the following image:

    <Frame>
      <img src="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_assistant_new.png?fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=1cff00bfb352263664b4a2ecf5a5c8bb" alt="image of the Assistant tab" data-og-width="522" width="522" data-og-height="664" height="664" data-path="images/getting-started/quickstart_ai_assistant_new.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_assistant_new.png?w=280&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=f894896d7e260e1722888770810bca88 280w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_assistant_new.png?w=560&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=501d1f532ed03e5fe0c2d47a8f680e85 560w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_assistant_new.png?w=840&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=5691689aeecac0f6c0f840a9948aa3eb 840w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_assistant_new.png?w=1100&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=39fa58d0cc324cab2957ca88b611e8c6 1100w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_assistant_new.png?w=1650&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=2a8d1ed962680558721f893838f1d0da 1650w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_assistant_new.png?w=2500&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=2f5934835636997f5ebbdc76dfb2af8c 2500w" />
    </Frame>

    Enter the following prompt in the text area and submit it:

    <AiPrompt>
      Create pages for each of the links in the navigation bar.
    </AiPrompt>

    You can select **Preview code changes** to view the Assistant's planned changes.

    Select **Apply All** and confirm your selection if prompted.

    <Note>
      Assistant and Agent, which rely on popular AI models, occasionally produce results that don't fulfill your request.
      If you encounter issues, follow up with a prompt that describes the error messages or the incorrect behavior.
      Alternatively, you can use the Rollback feature to restore your Replit App to a previously known working state.
    </Note>

    At this point, you should have a navigable website that includes sample text and functional links.
  </Step>
</Steps>

## Explore

Try the tasks in the following sections to build your knowledge of Replit.

### Undo an Agent change

Agent lets you perform a rollback, a feature that reverts your app to a previous checkpoint, discarding all changes made after that point.
Follow these steps to revert the app to a specific checkpoint:

<Warning>
  When you use the rollback feature, you restore the Replit App to a previous state. This action removes all changes made after that point. This includes edits by you or AI-powered features and AI conversation context. Database data can also be restored if you select "Restore databases" under "Additional rollback options." The rollback affects your entire development environment.
</Warning>

For detailed information about checkpoints and rollbacks, see [Checkpoints and Rollbacks](/replitai/checkpoints-and-rollbacks).

<Steps>
  <Step title="Locate the checkpoint">
    Navigate to the **Agent** tab and locate the checkpoint you want to restore.

    Select **Rollback to here** to undo all changes after that point as shown in the following image:

    <Frame>
      <img src="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_agent_rollback.png?fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=f13073a05de87b7898a5b14b5a03e51f" alt="image of Rollback to here button in the Agent tab" data-og-width="539" width="539" data-og-height="110" height="110" data-path="images/getting-started/quickstart_ai_agent_rollback.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_agent_rollback.png?w=280&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=3a41d3ffa64d399cfc9547e68e62ee06 280w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_agent_rollback.png?w=560&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=1577e2dfafda016ab654ad8d0ae43168 560w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_agent_rollback.png?w=840&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=b8ed596c7d844a7abfb3e21bd43ac045 840w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_agent_rollback.png?w=1100&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=1aa5af329fa8fd153717404ee5dea20f 1100w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_agent_rollback.png?w=1650&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=fb0fd28b491ec1d1f27067801a747f62 1650w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_agent_rollback.png?w=2500&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=022131732e113df9f62b26c300d76741 2500w" />
    </Frame>
  </Step>

  <Step title="Verify the rollback">
    After Agent completes your request, check that the **Agent** tab displays "Rollback completed".

    Confirm that your app functionality matches its state before the checkpoint.
  </Step>
</Steps>

### Undo an Assistant change

Assistant lets you perform a rollback, a feature that reverts your app to a previous checkpoint, discarding all changes made after that point.
Follow these steps to revert the app to a specific checkpoint:

<Warning>
  When you use the rollback feature, you restore the Replit App to a previous state. This action removes all changes made after that point. This includes edits by you or AI-powered features and AI conversation context. Database data can also be restored if you select "Restore databases" under "Additional rollback options." The rollback affects your entire development environment.
</Warning>

<Steps>
  <Step title="Locate the checkpoint">
    Navigate to the **Assistant** tab and locate the checkpoint you want to restore.

    Select **Undo these changes**\* to revert all changes from the checkpoint after that point in time as shown in the following image:

    <Frame>
      <img src="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_assistant_rollback.png?fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=3c2572c20df0c108d45a4cdbfbf7dd06" alt="image of Undo these changes button in the Assistant tab" data-og-width="490" width="490" data-og-height="99" height="99" data-path="images/getting-started/quickstart_ai_assistant_rollback.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_assistant_rollback.png?w=280&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=f5747e68266869e32d93a34cb845c91a 280w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_assistant_rollback.png?w=560&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=e1ea9058c05a84dc92edb2e80de73835 560w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_assistant_rollback.png?w=840&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=7a694298484fa76ecbe0d399c9f99e17 840w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_assistant_rollback.png?w=1100&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=a97fe57000d75204a8a575873c6ec914 1100w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_assistant_rollback.png?w=1650&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=39c7ba2e6cc3a90296e679447ce531a3 1650w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_ai_assistant_rollback.png?w=2500&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=72c3c124ace3d1884eaf59dc5bcf2dc7 2500w" />
    </Frame>
  </Step>

  <Step title="Verify the rollback">
    After Assistant completes your request, the **Undo these changes** button label should be replaced with **Restore checkpoint**.

    Confirm that your app functionality matches its state before the checkpoint.
  </Step>
</Steps>

## Continue your journey

Now that you've completed this tutorial, you're ready to explore more possibilities with your Replit App.
Try the following next steps to enhance your skills:

* Use Agent to create a new Replit App using your own prompt. If your prompt needs more direction or details, select the pen icon labeled **Improve prompt**.
* Add features to your app using Assistant. Navigate to the **Assistant** tab and try one of the recommended prompts.
* Publish your Replit App to make it publicly available. Learn more about publishing options and billing from [About Deployments](/category/replit-deployments/).
* Learn more about the AI-powered Replit features from the following guides:

  * [Replit Agent](/replitai/agent/)
  * [Replit Assistant](/replitai/agent/)


---

### Create a file converter with AI
Source: [https://docs.replit.com/getting-started/quickstarts/build-with-ai.md](https://docs.replit.com/getting-started/quickstarts/build-with-ai.md)

# Create a file converter with AI

> Build a file conversion app in 15 minutes using Replit's AI tools. Learn how to use Agent and Assistant to create apps through natural language.

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block font-sans whitespace-pre-wrap break-words">
      <div className="pr-7">
        {children}
      </div>
    </CodeBlock>;
};

Learn how to replace line-by-line coding with AI-powered conversations. This guide shows you how to effectively communicate your vision and leverage Replit's AI tools to bring your ideas to life.

## What you'll learn

<CardGroup cols={2}>
  <Card title="AI Tool Mastery" icon="wand-magic-sparkles">
    Use Agent and Assistant effectively for different development tasks
  </Card>

  <Card title="Clear Communication" icon="comments">
    Learn the art of describing your vision to AI tools
  </Card>

  <Card title="Best Practices" icon="list-check">
    Discover how to provide context and specifications effectively
  </Card>

  <Card title="Rapid Development" icon="rocket">
    Build and publish a working app in just 15 minutes
  </Card>
</CardGroup>

<Note>
  You'll need a Replit account and Core subscription to access Agent.
</Note>

<AccordionGroup>
  <Accordion title="Quick access">
    * [View the finished template](https://replit.com/@matt/msftmd-Office-Markdown-Converter?v=1\&utm_source=matt\&utm_medium=youtube\&utm_campaign=msftmd-app)
    * [Try the live demo](https://msftmd.replit.app/)
  </Accordion>
</AccordionGroup>

<Frame type="glass">
  <iframe src="https://www.youtube.com/embed/JNH2g53T3zE" title="Building a File Converter App with AI Tools" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen height="400" width="100%" />
</Frame>

## Start with Agent

<Steps>
  <Step title="Understand the library">
    We'll use [MarkItDown](https://github.com/microsoft/markitdown), Microsoft's file conversion library. Since it's new, provide Agent with context about its capabilities:

    <AiPrompt>
      MarkItDown is a utility for converting various files to Markdown (e.g., for indexing, text analysis, etc). It supports:

      * PDF
      * PowerPoint
      * Word
      * Excel
      * Images (EXIF metadata and OCR)
      * Audio (EXIF metadata and speech transcription)
      * HTML
      * Text-based formats (CSV, JSON, XML)
      * ZIP files (iterates over contents)

      [https://github.com/microsoft/markitdown](https://github.com/microsoft/markitdown)
    </AiPrompt>

    <Tip>
      Hover over URLs and select "copy content" to give Agent additional context.
    </Tip>
  </Step>

  <Step title="Create your prompt">
    Craft a clear prompt explaining your vision:

    <AiPrompt>
      I'd like to build a simple app that converts office files to markdown. It should have a drag and drop interface and be both desktop and mobile friendly.
    </AiPrompt>
  </Step>

  <Step title="Review the plan">
    Agent will create a development plan outlining:

    * Required files
    * Code structure
    * Implementation steps

    <Frame type="glass">
      <img src="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/building-with-ai/02-approve-plan.png?fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=42f3bdef25ac30df361cb12d64e68eaa" alt="Reviewing and approving Agent's initial plan" data-og-width="1896" width="1896" data-og-height="2004" height="2004" data-path="images/getting-started/building-with-ai/02-approve-plan.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/building-with-ai/02-approve-plan.png?w=280&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=aa6c8f828c8217519d3f16ceb9105704 280w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/building-with-ai/02-approve-plan.png?w=560&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=94016d6078a411eebd84361f0a1aa3ce 560w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/building-with-ai/02-approve-plan.png?w=840&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=bd207a8e0a8e537a4ea0cdc6ddd34ef7 840w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/building-with-ai/02-approve-plan.png?w=1100&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=32241029f9022446691e66cfbdcd5ee6 1100w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/building-with-ai/02-approve-plan.png?w=1650&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=b79e0cbfcfcdae80866f699341d2b3fc 1650w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/building-with-ai/02-approve-plan.png?w=2500&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=df6a648bcc20b8cf12bc5584c27fc0ae 2500w" />
    </Frame>
  </Step>
</Steps>

## Develop iteratively

### Using Agent for major changes

Agent excels at handling structural changes and core functionality. When you encounter issues:

1. Copy error messages directly into the chat
2. Be descriptive about what's not working
3. Provide clear requirements for new features

<Frame type="glass">
  <img src="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/building-with-ai/04-fix-errors-paste.png?fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=49132ee62a6f26940d8df50c1368e702" alt="Fixing JSON parse error by sharing with Agent" data-og-width="1896" width="1896" data-og-height="2004" height="2004" data-path="images/getting-started/building-with-ai/04-fix-errors-paste.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/building-with-ai/04-fix-errors-paste.png?w=280&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=af3da2bb9de02b93f5d932c3c461e241 280w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/building-with-ai/04-fix-errors-paste.png?w=560&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=792baf8a597d04bd4c4274c4134dc8a7 560w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/building-with-ai/04-fix-errors-paste.png?w=840&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=312771e122d771af7504a71d480455a3 840w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/building-with-ai/04-fix-errors-paste.png?w=1100&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=4f02a6000f78fac643e7a96876d3f723 1100w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/building-with-ai/04-fix-errors-paste.png?w=1650&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=dbcf45b5ed47ddcb365a9c80a4207190 1650w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/building-with-ai/04-fix-errors-paste.png?w=2500&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=6c79ef32b697108a792f48618f966fdf 2500w" />
</Frame>

Example prompts for adding features:

<AiPrompt>
  * Make the app more responsive and mobile friendly, the copy and download buttons are cut off on narrow screens
</AiPrompt>

### Refining with Assistant

Switch to Assistant for detailed improvements and UI refinements. Use the `@` symbol to reference specific files:

<AiPrompt>
  * Remove 'Powered by MarkItDown Library' and add a description to the top of the app
  * Add a footer with links to social profiles
</AiPrompt>

<Tip>
  Use web development terms like "responsive," "mobile-friendly," and "grid interface" to communicate effectively.
</Tip>

## Publish your app

<Steps>
  <Step title="Start publishing">
    Select **Publish** or search for "Deployments" in the command bar.
  </Step>

  <Step title="Configure resources">
    For auto-scale published apps, configure:

    * Basic resources (1 CPU, 1GB RAM per instance)
    * Maximum machines (start with 6)
    * Environment variables
    * Run commands
  </Step>

  <Step title="Launch">
    1. Name your app
    2. Select **Publish**
    3. Wait 1-5 minutes for it to go live
    4. Access your app via the provided URL
  </Step>
</Steps>

## Best practices

<CardGroup cols={2}>
  <Card title="Use Agent for">
    * Initial setup
    * Core functionality
    * Major structural changes
    * Error resolution
  </Card>

  <Card title="Use Assistant for">
    * UI refinements
    * Small feature additions
    * Code optimization
    * Documentation
  </Card>
</CardGroup>

<Note>
  Success with AI tools depends more on clear communication than coding expertise. Focus on describing your vision effectively using web development terminology.
</Note>

## Resources

<CardGroup cols={3}>
  <Card title="Template" icon="code" href="https://replit.com/@matt/msftmd-Office-Markdown-Converter?v=1&utm_source=matt&utm_medium=youtube&utm_campaign=msftmd-app">
    Fork the template
  </Card>

  <Card title="Demo" icon="play" href="https://msftmd.replit.app/">
    Try the live demo
  </Card>

  <Card title="Tutorial" icon="video" href="#">
    Watch the video above
  </Card>
</CardGroup>

<Frame type="glass">
  <img src="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/building-with-ai/msftmd.jpg?fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=b5244db8793852c7b37d85ee9123a933" alt="Published file converter app interface" data-og-width="1920" width="1920" data-og-height="1080" height="1080" data-path="images/getting-started/building-with-ai/msftmd.jpg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/building-with-ai/msftmd.jpg?w=280&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=d1831f9ab7b57b19eccf966491c66417 280w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/building-with-ai/msftmd.jpg?w=560&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=c66a929a74756804d9d2f84f3d42bb70 560w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/building-with-ai/msftmd.jpg?w=840&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=4c0e268a0bf5f93255be0b065663fe6c 840w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/building-with-ai/msftmd.jpg?w=1100&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=ed3dc02b2e2a46d0d04feb9544ff3938 1100w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/building-with-ai/msftmd.jpg?w=1650&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=42d6ebd6ed5381d277df1851a8586ebc 1650w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/building-with-ai/msftmd.jpg?w=2500&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=b3b95d39d059de1e8261e76e5e6af498 2500w" />
</Frame>


---

### Connect your app to a SQL database
Source: [https://docs.replit.com/getting-started/quickstarts/database-connection.md](https://docs.replit.com/getting-started/quickstarts/database-connection.md)

# Connect your app to a SQL database

> Learn how to connect to your Replit database from your Replit App.

This guide shows you how to connect to your Replit App's database
from your code using the connection methods:

* **Direct connection**: Connection for development and lighter workloads
* **Connection pooling**: Efficient connection management for high-traffic production applications

To determine which type of connection you need, see
<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** or **Assistant** 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 Assistant 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 src="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/database-connection/database-connection-test-workflow.png?fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=b8ec65a4114de3e46addcc73206c0a5e" alt="screenshot of an example workflow" data-og-width="3018" width="3018" data-og-height="1070" height="1070" data-path="images/getting-started/database-connection/database-connection-test-workflow.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/database-connection/database-connection-test-workflow.png?w=280&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=b321c09dbf96d839d460121a80010139 280w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/database-connection/database-connection-test-workflow.png?w=560&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=84d2b7006a82459709f613a0311efa93 560w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/database-connection/database-connection-test-workflow.png?w=840&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=e036985556e0b0cbbeb47899005c76de 840w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/database-connection/database-connection-test-workflow.png?w=1100&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=29e995f83449a4ce156bd329f91fec66 1100w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/database-connection/database-connection-test-workflow.png?w=1650&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=165c9d35836af0e5033d8e7d2c65d00c 1650w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/database-connection/database-connection-test-workflow.png?w=2500&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=34e977d6533f39e31371b9ae5ae7edbe 2500w" />
    </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>

## 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](/replit-workspace/workflows/): learn how to create and run custom workflows.


---

### Create a Discord bot
Source: [https://docs.replit.com/getting-started/quickstarts/discord-bot.md](https://docs.replit.com/getting-started/quickstarts/discord-bot.md)

# Create a Discord bot

> Build a fun Discord bot that tells jokes. Learn how to use the Discord API and publish your bot on Replit.

Learn how to create an interactive Discord bot. This guide shows you how to build and publish a bot that responds to commands with jokes.

## What you'll learn

<CardGroup cols={2}>
  <Card title="Discord API" icon="discord">
    Build interactive bot features
  </Card>

  <Card title="Bot Commands" icon="terminal">
    Handle user interactions
  </Card>

  <Card title="Publishing" icon="cloud">
    Host your bot 24/7
  </Card>

  <Card title="Authentication" icon="key">
    Manage bot tokens securely
  </Card>
</CardGroup>

## Create your bot

<Steps>
  <Step title="Fork the template">
    Sign in to Replit and fork the [Discord bot template](https://replit.com/@replit-matt/Discord-Python-Quickstart?v=1#main.py). Select **+ Use Template** and follow the prompts to create your Replit App.
  </Step>

  <Step title="Set up Discord developer portal">
    1. Go to the [Discord Developer Portal](https://discord.com/developers/applications)
    2. Navigate to your application's Bot section
    3. Under Build-A-Bot, select **Reset Token**
    4. Copy the token

    <Warning>
      Keep your bot token secret! Never share it or commit it to version control.
    </Warning>
  </Step>

  <Step title="Configure your bot">
    Add your bot token to your Replit App:

    1. Open the Secrets tab
    2. Create a new secret named `DISCORD_BOT_TOKEN`
    3. Paste your bot token as the value

    <Tip>
      Use Replit Secrets to securely store sensitive information like API tokens.
    </Tip>
  </Step>
</Steps>

## Publish your bot

<Steps>
  <Step title="Set up publishing">
    1. Select **Publish** in the workspace header
    2. Choose **Reserved VM** deployment
    3. Select **Publish**
  </Step>

  <Step title="Test">
    1. Invite your bot to a server
    2. Try the `/tell-me-a-joke` command
    3. Verify the bot responds correctly

    <Note>
      Reserved VM deployments ensure your bot stays online continuously.
    </Note>
  </Step>
</Steps>

## Customization options

<CardGroup cols={2}>
  <Card title="Commands">
    * Add new commands - Create custom responses - Handle different events
  </Card>

  <Card title="Features">
    * Add moderation tools - Create games - Integrate with APIs
  </Card>
</CardGroup>

## Next steps

<CardGroup cols={3}>
  <Card title="Databases" icon="database" href="/cloud-services/storage-and-databases/sql-database">
    Add persistent storage
  </Card>

  <Card title="Monitoring" icon="chart-line" href="/category/replit-deployments/">
    Track bot performance
  </Card>

  <Card title="Slash Commands" icon="terminal" href="https://discord.com/developers/docs/interactions/application-commands">
    Add more interactions
  </Card>
</CardGroup>

## Related guides

<CardGroup cols={2}>
  <Card title="Create a Slack bot" icon="slack" href="/getting-started/quickstarts/webscrape-and-slack-notifications">
    Build a Slack integration
  </Card>

  <Card title="Build with AI" icon="wand-magic-sparkles" href="/getting-started/quickstarts/build-with-ai">
    Create apps using Agent
  </Card>
</CardGroup>

<Note>
  Want to learn more about bot development? Check out our [publishing documentation](/category/replit-deployments).
</Note>


---

### Create a FastAPI service
Source: [https://docs.replit.com/getting-started/quickstarts/fastapi-service.md](https://docs.replit.com/getting-started/quickstarts/fastapi-service.md)

# Create a FastAPI service

> Build and publish a high-performance API using FastAPI on Replit. Learn how to use autoscaling for reliable API hosting.

Learn how to create a modern API service using FastAPI's powerful features. This guide shows you how to publish a Python-based API with automatic scaling.

## What you'll learn

<CardGroup cols={2}>
  <Card title="FastAPI" icon="bolt">
    Build modern Python APIs
  </Card>

  <Card title="Autoscaling" icon="arrows-up-down">
    Publish with automatic scaling
  </Card>

  <Card title="Performance" icon="gauge-high">
    Create high-performance endpoints
  </Card>

  <Card title="Documentation" icon="book">
    Auto-generate API docs
  </Card>
</CardGroup>

## Create your API

<Steps>
  <Step title="Fork the template">
    Sign in to Replit and fork the [FastAPI template](https://replit.com/@replit/FastAPI?v=1#main.py). Select **+ Use Template** and follow the prompts to create your Replit App.

    <Tip>
      FastAPI automatically generates interactive API documentation at `/docs`.
    </Tip>
  </Step>

  <Step title="Set up publishing">
    1. Select **Publish** in the workspace header
    2. Choose **Autoscale** deployment
    3. Configure your API:
       * Machine: 1vCPU, 2 GiB RAM (default)
       * Max machines: 3 (default)
       * Run command: `uvicorn main:app --host 0.0.0.0`

    <Note>
      Autoscale deployments automatically adjust resources based on API traffic.
    </Note>
  </Step>

  <Step title="Launch">
    Select **Publish** to launch your API. It will be live in a few minutes!
  </Step>
</Steps>

## Customization options

<CardGroup cols={2}>
  <Card title="Endpoints">
    * Add new routes
    * Implement validation
    * Handle authentication
  </Card>

  <Card title="Documentation">
    * Customize API docs
    * Add examples
    * Define schemas
  </Card>
</CardGroup>

## Next steps

<CardGroup cols={3}>
  <Card title="Custom Domain" icon="globe" href="/cloud-services/deployments/custom-domains">
    Add your own domain
  </Card>

  <Card title="Databases" icon="database" href="/cloud-services/storage-and-databases/sql-database/">
    Add data persistent storage
  </Card>

  <Card title="Monitoring" icon="chart-line" href="/category/replit-deployments">
    Track performance
  </Card>
</CardGroup>

## Related guides

<CardGroup cols={2}>
  <Card title="Create a Flask app" icon="flask" href="/getting-started/quickstarts/flask-app">
    Build with Flask
  </Card>

  <Card title="Build with AI" icon="wand-magic-sparkles" href="/getting-started/quickstarts/build-with-ai">
    Create apps using Agent
  </Card>
</CardGroup>

<Note>
  Want to learn more about API development? Check out our [publishing documentation](/category/replit-deployments).
</Note>


---

### Create a Flask app
Source: [https://docs.replit.com/getting-started/quickstarts/flask-app.md](https://docs.replit.com/getting-started/quickstarts/flask-app.md)

# Create a Flask app

> Build and publish a web application using Flask on Replit. Learn how to use autoscaling for reliable web hosting.

Learn how to create a web application using Flask's simple yet powerful framework. This guide shows you how to publish a Python web app with automatic scaling.

## What you'll learn

<CardGroup cols={2}>
  <Card title="Flask" icon="flask">
    Build Python web apps
  </Card>

  <Card title="Autoscaling" icon="arrows-up-down">
    Publish with automatic scaling
  </Card>

  <Card title="Web Development" icon="browser">
    Create dynamic web pages
  </Card>

  <Card title="Deployment" icon="cloud">
    Host your application
  </Card>
</CardGroup>

## Create your app

<Steps>
  <Step title="Fork the template">
    V{/* vale off */}

    Sign in to Replit and fork the [Flask template](https://replit.com/@replit/Flask?v=1#main.py). Select **+ Use Template** and follow the prompts to create your Replit App.

    <Tip>
      Flask's development server automatically reloads when you make changes to your code.
    </Tip>
  </Step>

  <Step title="Set up publishing">
    1. Select **Publish** in the workspace header
    2. Choose **Autoscale** deployment
    3. Configure your app:
       * Machine: 1vCPU, 2 GiB RAM (default)
       * Max machines: 3 (default)
       * Run command: `python3 main.py`

    <Note>
      Autoscale deployments automatically adjust resources based on website traffic.
    </Note>
  </Step>

  <Step title="Launch">
    Select **Publish** to launch your website. It will be live in a few minutes!
  </Step>
</Steps>

## Customization options

<CardGroup cols={2}>
  <Card title="Routes">
    * Add new pages
    * Handle form submissions
    * Create API endpoints
  </Card>

  <Card title="Templates">
    * Design page layouts
    * Add dynamic content
    * Style your pages
  </Card>
</CardGroup>

## Next steps

<CardGroup cols={3}>
  <Card title="Databases" icon="database" href="/cloud-services/storage-and-databases/sql-database/">
    Add data persistence
  </Card>

  <Card title="Custom Domain" icon="globe" href="/cloud-services/deployments/custom-domains">
    Add your own domain
  </Card>
</CardGroup>

## Related guides

<CardGroup cols={2}>
  <Card title="Create a FastAPI service" icon="bolt" href="/getting-started/quickstarts/fastapi-service">
    Build with FastAPI
  </Card>

  <Card title="Build with AI" icon="wand-magic-sparkles" href="/getting-started/quickstarts/build-with-ai">
    Create apps using Agent
  </Card>
</CardGroup>

<Note>
  Want to learn more about web development? Check out our [publishing documentation](/category/replit-deployments).
</Note>


---

### Build from Scratch
Source: [https://docs.replit.com/getting-started/quickstarts/from-scratch.md](https://docs.replit.com/getting-started/quickstarts/from-scratch.md)

# Build from Scratch

> Learn how to create a Replit App from scratch. Choose your language, frameworks, and databases.

## Create your app from a Template

⏰ *Estimated time: 15 minutes*

Learn how to create your Replit App from a **Template** in this guide. A Template is a set of ready-made
setup and configuration files that get you coding faster.

This tutorial demonstrates how to build a web app using a Replit Template for Express.js, a popular
backend JavaScript framework. Templates provide ready-made project configuration files to get you
coding faster, but exclude application logic to let you build your own ideas from scratch.

For tutorials on building apps in other ways, see [Quickstart Guides](/getting-started/intro-replit#quickstart-guides).

When you complete the tutorial, your app should resemble the following image:

<Frame>
  <img src="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_aloha.png?fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=f361798d7adde0187c233a3ee4e977f5" alt="image of the Preview tool showing the finished app" data-og-width="551" width="551" data-og-height="370" height="370" data-path="images/getting-started/quickstart_scratch_aloha.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_aloha.png?w=280&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=617323e7d277f2e0353eaf0f5ec13e7c 280w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_aloha.png?w=560&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=e5d42c56e3532c49815989335f904596 560w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_aloha.png?w=840&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=35eb2b1258840760c187ab4ce67e7001 840w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_aloha.png?w=1100&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=e6e01cb545908de853b628fb9332fa9c 1100w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_aloha.png?w=1650&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=ad5095b3e9827cebda7ec1d0fe7f7292 1650w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_aloha.png?w=2500&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=c6c09213083d25ae5e1f7c0f5a9a3585 2500w" />
</Frame>

<Steps>
  <Step title="Create an App">
    Navigate to the Home screen and select **Create App**:

    <img src="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_create_app_button.png?fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=2a49e7e011d640d210cb993637f6d148" width="250" alt="image of the Create App button" data-og-width="448" data-og-height="66" data-path="images/getting-started/quickstart_scratch_create_app_button.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_create_app_button.png?w=280&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=9a3ed601363c8961038d5446f9dab801 280w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_create_app_button.png?w=560&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=c0edd0f6aab85734958598d4f6de290e 560w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_create_app_button.png?w=840&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=bd6bb6ae0611e3105736eee6c3d2e42f 840w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_create_app_button.png?w=1100&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=344516bc63fe9a3ee2e8bea962070aa9 1100w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_create_app_button.png?w=1650&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=041b8a77cc50e72e3aac02ca70fe27dc 1650w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_create_app_button.png?w=2500&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=4744f5aa1c4539a3461b7b1e64060294 2500w" />
  </Step>

  <Step title="Choose a Template">
    Select the **Choose a Template** tab and enter "Express.js" in the search field to locate the corresponding Template as shown in the following image:

    <Frame>
      <img src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_express_template.png?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=ffc58dbee0c4416ff9399164adc8e897" alt="image of the Template selection in the Create App dialog" data-og-width="889" width="889" data-og-height="438" height="438" data-path="images/getting-started/quickstart_scratch_express_template.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_express_template.png?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=c17d38d2b2ad4165b3e549b4ad91e107 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_express_template.png?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=5c4bec5f8cd9aa327ebe7e71d3634b15 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_express_template.png?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=4b309cf3a763a06b72bb283e527b4ab0 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_express_template.png?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=6636ea80cc21aad56cd0c1e7b15d4fc0 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_express_template.png?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=ec2727bc3b2f32ac00c29a5ffb25bab4 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_express_template.png?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=1951319317a27cb3a6cc5239c91d98d0 2500w" />
    </Frame>

    Set the App's title in the **Title** field and make sure **Private** is selected. You can modify these values later.

    Select **Create App** to proceed.
  </Step>

  <Step title="Modify the app using Assistant">
    Navigate to the **Assistant** tab.

    Assistant is Replit's AI-powered tool that specializes in building smaller changes to your app.

    Enter the following prompt in the text area and submit it to modify a specific file:

    ```text  theme={null}
    Update the endpoint in index.js to say "Hello, Replit!" followed by a random cheerful emoji.
    ```

    <Tip>You can optionally refer to a specific filename by preceding it with the `@` character.</Tip>

    Select **Apply all** to accept changes or **Preview code changes** to view them.

    After applying the changes, you should see the updated message in the **Preview** tab as shown in the following image:

    <Frame>
      <img src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_hello.png?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=dde7eb7688f83f10abfd3c2c55ab5684" alt="image of the Preview tool showing the default endpoint" data-og-width="662" width="662" data-og-height="371" height="371" data-path="images/getting-started/quickstart_scratch_hello.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_hello.png?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=dab65d4ad80791143f0c12a7791742cd 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_hello.png?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=a46475c14d9d95411960d93d89d2378e 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_hello.png?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=245613593dd5fa41b228370271d6544d 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_hello.png?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=f980c81abb65cf1e37425065a89fcc14 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_hello.png?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=484ec5248a3d5afc2c1f0578d79c2c30 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_hello.png?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=2ba7a39c5b8f8b76089354b50ec867f8 2500w" />
    </Frame>
  </Step>

  <Step title="Modify the code directly">
    Navigate to the **Files** tab to access your Replit App's files.

    Select `index.js` to open a file editor tab.

    Locate the endpoint and change the message from "Hello, Replit!" to "Aloha, Replit!"

    If you're unsure where to edit, replace the endpoint with the following code:

    ```js  theme={null}
        app.get('/', (req, res) => {
            const emojis = ['😊', '🎉', '✨', '🌟', '💫', '🌈', '🎨', '🚀'];
            const randomEmoji = emojis[Math.floor(Math.random() * emojis.length)];
            res.send(`<h1>Aloha, Replit! ${randomEmoji}</h1>`);
        });
    ```

    Switch to the **Preview** tab and select the refresh button <Icon icon="rotate-right" iconType="regular" />.

    After the browser reloads, the page should resemble the following image:

    <Frame>
      <img src="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_aloha.png?fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=f361798d7adde0187c233a3ee4e977f5" alt="image of the Preview tool showing the new message" data-og-width="551" width="551" data-og-height="370" height="370" data-path="images/getting-started/quickstart_scratch_aloha.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_aloha.png?w=280&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=617323e7d277f2e0353eaf0f5ec13e7c 280w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_aloha.png?w=560&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=e5d42c56e3532c49815989335f904596 560w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_aloha.png?w=840&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=35eb2b1258840760c187ab4ce67e7001 840w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_aloha.png?w=1100&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=e6e01cb545908de853b628fb9332fa9c 1100w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_aloha.png?w=1650&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=ad5095b3e9827cebda7ec1d0fe7f7292 1650w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_aloha.png?w=2500&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=c6c09213083d25ae5e1f7c0f5a9a3585 2500w" />
    </Frame>
  </Step>
</Steps>

## Explore

Try the tasks in the following sections to build your knowledge of Replit.

### Add a dependency using Assistant

Follow these steps to add the `morgan` package, which lets you configure request logging for your Express.js server:

<Steps>
  <Step title="Craft a prompt">
    From the **All Tools** tab or search box, locate and select **Assistant**.
    Assistant is an AI chatbot that can modify your code to add new features or fix errors.

    Enter the following prompt in the text area and submit it:

    ```text  theme={null}
    Add the morgan HTTP request logger
    ```

    After analyzing the request and existing code, Assistant prompts you to view or accept its changes as shown in the following dialog:

    <Frame>
      <img src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_morgan.png?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=bb0a2599addfca5a3e5b9aabbba277aa" alt="image of Assistant recommending installation of the morgan npm package" data-og-width="878" width="878" data-og-height="498" height="498" data-path="images/getting-started/quickstart_scratch_morgan.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_morgan.png?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=bd9b17585938fe3b45943b762762c78b 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_morgan.png?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=d92d1c16e10c9c18f6bb43fef0f79aac 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_morgan.png?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=b4ee4d8a89ac05aa1515697bcbbd9b7b 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_morgan.png?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=89948b7ce0f60e203ab0a0bc8c398959 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_morgan.png?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=58b1e657032b21cd2122105114652f7c 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_morgan.png?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=66b265ea80a241171f36d68415e45b61 2500w" />
    </Frame>

    Select **Apply All** to add the dependency and update the configuration.
  </Step>

  <Step title="Verify the installation">
    Navigate to the **Dependencies** tab.

    The dependencies list should include the `morgan` package as shown in the following image:

    <Frame>
      <img src="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_dependency_morgan.png?fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=6c80f72c83a1978cd4375617c3d60fc5" alt="image of the Dependencies list including morgan" data-og-width="818" width="818" data-og-height="444" height="444" data-path="images/getting-started/quickstart_scratch_dependency_morgan.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_dependency_morgan.png?w=280&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=c6359899e0cdc7f125fc779f0d72aa3d 280w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_dependency_morgan.png?w=560&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=04f3404e137f8af408da29a95dee407b 560w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_dependency_morgan.png?w=840&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=765c57d74dfaf283a9ccd41212d71f9e 840w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_dependency_morgan.png?w=1100&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=d0ea0589216e6900c75447f89fd87b92 1100w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_dependency_morgan.png?w=1650&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=eae909ae97689ae9b08e9ffacbadbe2f 1650w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_dependency_morgan.png?w=2500&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=d0fa913f50e03877375f9baa7b724070 2500w" />
    </Frame>
  </Step>
</Steps>

### Add a dependency manually

You can edit the package manager configuration files or use the **Dependencies** tool to manage the frameworks and libraries your app uses.

<Steps>
  <Step title="Open the Dependencies tab">
    To access the tool, open the **All Tools** tab or search box, locate and select the **Dependencies** tab as shown in the following image:

    <Frame>
      <img src="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_dependencies_tab.png?fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=ce0d51ea0fbe412affbc4135866b77b1" alt="image of the Dependencies tab" data-og-width="929" width="929" data-og-height="508" height="508" data-path="images/getting-started/quickstart_scratch_dependencies_tab.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_dependencies_tab.png?w=280&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=806bbfe33f9ed03dc7b191b762a6466b 280w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_dependencies_tab.png?w=560&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=1d081f9beb20b392e182e7712390a423 560w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_dependencies_tab.png?w=840&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=d6c5ad886cb730eb12a84765627ea8dd 840w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_dependencies_tab.png?w=1100&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=8342afd36950cac6dd4534441a3fd32d 1100w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_dependencies_tab.png?w=1650&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=627a6f471f239aa860d2e5dbcd365d4e 1650w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_dependencies_tab.png?w=2500&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=71eaa69d9eae92c43f610fba16a2f51d 2500w" />
    </Frame>
  </Step>

  <Step title="Add a package">
    In the **Imports** tab, select **Add new package** to open a dialog. Search for and add the "express-rate-limit" package as shown in the following image:

    <Frame>
      <img src="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_dependency_search.png?fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=f38e8fee97680d7a856a076cff79f59e" alt="image of adding the express-rate-limit dependency" data-og-width="769" width="769" data-og-height="485" height="485" data-path="images/getting-started/quickstart_scratch_dependency_search.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_dependency_search.png?w=280&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=e236725a8636831efc37b5336ab06fc7 280w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_dependency_search.png?w=560&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=3a398c65ee20183810dc1bfa776ea34e 560w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_dependency_search.png?w=840&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=f171a9f8fdb3e726aa874a3e669599c7 840w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_dependency_search.png?w=1100&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=de9e4c1046d50c169c14acbbba82065a 1100w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_dependency_search.png?w=1650&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=9a174f4cdfd694738baaf5bc2f696942 1650w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_dependency_search.png?w=2500&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=4b2f3942fd360e14e377bcacc9cbdd0d 2500w" />
    </Frame>

    Alternatively, select **Open package.json** to open `package.json` in an editor tab, where you can add or edit dependencies.
  </Step>
</Steps>

### Try Assistant's recommendations

In addition to adding or modifying features in your app, Assistant can provide suggestions or ideas to extend its functionality.
Follow these steps to request a feature recommendation and implement it using Assistant:

<Steps>
  <Step title="Ask Assistant for recommendations">
    Navigate to the **Assistant** tab.

    Enter the following prompt in the text area and submit it:

    ```text  theme={null}
    What features should I consider next?
    ```

    Assistant might respond with the options shown in the following image:

    <Frame>
      <img src="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_assistant_recommendations.png?fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=ff1f9ecd3c29dcd69456b7611f0266d5" alt="image of Assistant recommendations" data-og-width="562" width="562" data-og-height="557" height="557" data-path="images/getting-started/quickstart_scratch_assistant_recommendations.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_assistant_recommendations.png?w=280&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=24092cf522e27b6746b119c2ec38ede8 280w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_assistant_recommendations.png?w=560&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=09e3fde60e35c5d05d00dd36ae686b19 560w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_assistant_recommendations.png?w=840&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=a294f52d71f634d410348dc2d10a98e1 840w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_assistant_recommendations.png?w=1100&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=772924010e7e33cdc948d2eb13d50001 1100w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_assistant_recommendations.png?w=1650&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=599737d95f3210de3aa0f01478d97c8e 1650w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_assistant_recommendations.png?w=2500&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=7e30b54ba5271c8c61aa95982a358ea6 2500w" />
    </Frame>
  </Step>

  <Step title="Request a feature">
    Enter the following prompt in the text area and submit it:

    ```text  theme={null}
    Add API endpoints that let me modify the message
    ```

    Assistant might respond with the implementation described in the following image:

    <Frame>
      <img src="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_assistant_api.png?fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=6614f13fccb9e6a568dfb168640fe45d" alt="image of Assistant implementing API endpoints" data-og-width="808" width="808" data-og-height="548" height="548" data-path="images/getting-started/quickstart_scratch_assistant_api.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_assistant_api.png?w=280&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=bbf2019799d359359446ec20838e861a 280w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_assistant_api.png?w=560&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=f1d67db1fb248b50ea0919aa4facf7f8 560w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_assistant_api.png?w=840&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=a5c0b95f9d8b006722c49cf1b98abb7f 840w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_assistant_api.png?w=1100&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=827bbf47c55c1efc77a99cd5f5e30fef 1100w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_assistant_api.png?w=1650&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=b473200f5391eeaa77e1d88602fbb502 1650w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_assistant_api.png?w=2500&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=5b2e55a053ffbc5a87836f719e8b76fb 2500w" />
    </Frame>

    Select **Apply all** to make the code changes.
  </Step>

  <Step title="Test the changes">
    Test the API endpoints by navigating to the **Shell** tab and running the shell commands recommended by Assistant.

    Alternatively, ask Assistant to test the endpoints. In the response, you should see action buttons such as **Run** and **Run in Shell**
    as shown in the following image:

    <Frame>
      <img src="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_assistant_api_test.png?fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=56c3bcdbf9e0861a96efdf894592614a" alt="image of Assistant implementing API endpoints" data-og-width="707" width="707" data-og-height="467" height="467" data-path="images/getting-started/quickstart_scratch_assistant_api_test.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_assistant_api_test.png?w=280&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=d249a9059298011c86054651071e9bc1 280w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_assistant_api_test.png?w=560&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=cc396c2e5003c621bc133a9953528740 560w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_assistant_api_test.png?w=840&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=119bb803f869959e6b6ddacb89a2101c 840w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_assistant_api_test.png?w=1100&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=87c5ea2a0b82a8b751d112dfbf8a2533 1100w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_assistant_api_test.png?w=1650&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=2fee54a87f9a445199157c30959216e1 1650w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_scratch_assistant_api_test.png?w=2500&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=9741bf82c582ae0329fe762ce2673187 2500w" />
    </Frame>

    Select these to execute the commands to retrieve the current message and update it.

    Verify changes to the message by navigating to the **Preview** tab and selecting **Refresh** in the address toolbar.
  </Step>
</Steps>

### Customize the workflow

Replit Apps include a **workflow**, a customizable sequence of steps that execute when you select **Run**.
Follow these steps to set up a new workflow using Assistant.

<Steps>
  <Step title="Customize the workflow">
    The Express.js Template includes a workflow that runs a command to start the Express.js server.
    However, the server requires a restart to view the latest changes to the files it serves which can
    inconvenience development.

    To avoid this repetitive task, you can ask Assistant to perform the following tasks:

    * Install the <a href="https://www.npmjs.com/package/nodemon" target="_blank">nodemon</a> package which automatically restarts the Express.js server when it detects file changes
    * Update the workflow to manage the Express.js server using `nodemon`.

    To request this change, navigate to the **Assistant** tab and enter the following prompt:

    ```text  theme={null}
    Install nodemon and configure the app to automatically restart the Express server whenever I make changes
    ```

    Assistant's response should resemble the following image:

    <Frame>
      <img src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_nodemon.png?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=3d81b0664303610e22c1982679adf2a8" alt="image of Assistant recommending installation of the nodemon package" data-og-width="867" width="867" data-og-height="526" height="526" data-path="images/getting-started/quickstart_scratch_nodemon.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_nodemon.png?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=d71a7960b3770e5be5065e5012862515 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_nodemon.png?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=549969f518f00b692a9b8733034a3dbc 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_nodemon.png?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=6d4f7f0edede78a96ac8064482aac9f9 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_nodemon.png?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=ef1eaa2f3ffd3122e6521eb01a42513a 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_nodemon.png?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=0d6077d6a2d20592c88c664e904730e1 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_nodemon.png?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=17d16fc6f9ec3b2a85d7d2af1bfc66eb 2500w" />
    </Frame>

    Select **Install** to add the dependencies, and **Apply All** to update the configuration.
  </Step>

  <Step title="Test the changes">
    To confirm the workflow updates, select the downward arrow next to the **Run** or **Stop** button and select **Manage Workflows** as shown in the following image:

    <img src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_workflows.png?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=53b7bad7d5612bdd74616d996157529c" width="250" alt="image of the Manage Workflows button in the menu" data-og-width="482" data-og-height="340" data-path="images/getting-started/quickstart_scratch_workflows.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_workflows.png?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=bdc53e41e753a5075fd0468f0927981d 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_workflows.png?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=b5dfcf6f612821538a3f86c7f42e4015 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_workflows.png?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=b47ce41918193211735e7c46b46f5d12 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_workflows.png?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=69a356dec39a2ad8e6e2617d269bf393 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_workflows.png?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=e2e3562cb93a2da7d3b67eb28b46409f 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_workflows.png?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=7ebf841fe37edb3787d3e840a143694b 2500w" />

    <Note>The name of the workflow generated by the Assistant might vary.</Note>

    Select the **Dev** workflow to view the details, which should resemble the following image:

    <Frame>
      <img src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_workflows_dev.png?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=8c9c17b437b16daa3afe8c45b81a6a5c" alt="image of the Dev workflow that uses nodemon" data-og-width="2688" width="2688" data-og-height="866" height="866" data-path="images/getting-started/quickstart_scratch_workflows_dev.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_workflows_dev.png?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=36a3499ad398c60c44964cd44a83f37c 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_workflows_dev.png?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=b3e881e192b75e521f9f5a832552e704 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_workflows_dev.png?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=a2f3e5d1430e8b9bfba0e4927b285b07 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_workflows_dev.png?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=b479c7c8b5898900ebf44639030d715e 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_workflows_dev.png?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=ae98a8e31b5201ffb8d49797db4ba09a 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/quickstart_scratch_workflows_dev.png?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=d7304d742a44e2ef9d20931dfbae58b9 2500w" />
    </Frame>

    To ensure your App runs using the selected workflow, select **Stop** and then **Run**.

    Try making a change to the message returned by the endpoint. After your update, you should see the updated message in the **Preview** tab.
  </Step>
</Steps>

## Continue your journey

Now that you've completed this tutorial, you're ready to explore more possibilities with your Replit App.
Try the following next steps to enhance your skills:

* Browse the Replit Templates on the <a href="https://replit.com/templates" target="_blank">Templates</a> page.
* Start a Replit App using the <a href="https://replit.com/@replit/Blank-Repl?v=1#README.md" target="_blank">Blank Repl Template</a> which omits language and framework setup.
* Share your completed Replit App as a Template by following the steps in the [Make your Replit App Public](/replit-app/collaborate#make-your-replit-app-public) guide.
* Learn more about Assistant's capabilities from the [Replit Assistant](/replitai/assistant) documentation.


---

### Create a Google Sheets integration
Source: [https://docs.replit.com/getting-started/quickstarts/google-sheets-integration.md](https://docs.replit.com/getting-started/quickstarts/google-sheets-integration.md)

# Create a Google Sheets integration

> Build an app that connects to Google Sheets using Python. Learn how to fetch and process spreadsheet data on Replit.

Learn how to create an application that interacts with Google Sheets. This guide shows you how to access and display spreadsheet data using Python and pandas.

## What you'll learn

<CardGroup cols={2}>
  <Card title="Google Sheets" icon="table">
    Connect to spreadsheet data
  </Card>

  <Card title="Data Processing" icon="database">
    Work with pandas dataframes
  </Card>

  <Card title="API Integration" icon="plug">
    Use Google's API services
  </Card>

  <Card title="Authentication" icon="lock">
    Handle OAuth and service accounts
  </Card>
</CardGroup>

## Create your app

<Steps>
  <Step title="Fork the template">
    Sign in to Replit and fork the [Google Sheets to HTML Renderer](https://replit.com/@replit-matt/Google-Sheets-to-API#README). Select **+ Use Template** and follow the prompts to create your Replit App.
  </Step>

  <Step title="Configure for public sheets">
    1. Open `main.py`
    2. Replace `WORKSHEET_URL` with your Google Sheet URL
    3. Set `require_auth=False` for public sheets

    <Tip>
      A worksheet refers to a single tab in a Google Sheet. Make sure to use the correct tab's URL.
    </Tip>
  </Step>

  <Step title="Configure for private sheets">
    1. Enable Google Sheets API access:

       * Enable Drive and Spreadsheets APIs
       * Follow the [API setup guide](https://gspread.org/en/v6.0.0/oauth2.html#enable-api-access-for-a-project)

    2. Create a [service account](https://gspread.org/en/v6.0.0/oauth2.html#for-bots-using-service-account)

    3. Add the service account JSON to your Replit App's Secrets as `SERVICE_ACCOUNT_JSON`

    4. Share your sheet with the service account email

    <Note>
      Service accounts provide secure, automated access to your sheets.
    </Note>
  </Step>
</Steps>

## Publish your app

<Steps>
  <Step title="Set up publishing">
    1. Select **Publish** in the workspace header
    2. Choose **Reserved VM** deployment
    3. Select **Publish**
  </Step>

  <Step title="Test">
    Your app will be live in a few minutes. Test it by accessing the HTML endpoint in your browser.
  </Step>
</Steps>

## Customization options

<CardGroup cols={2}>
  <Card title="Data Processing">
    * Modify data transformations
    * Add filtering options
    * Create custom views
  </Card>

  <Card title="Display">
    * Customize HTML rendering
    * Add interactive features
    * Style your output
  </Card>
</CardGroup>

## Next steps

<CardGroup cols={3}>
  <Card title="FastAPI" icon="bolt" href="/getting-started/quickstarts/fastapi-service">
    Create an API service
  </Card>

  <Card title="Databases" icon="database" href="/cloud-services/storage-and-databases/sql-database/">
    Add persistent storage
  </Card>
</CardGroup>

## Related guides

<CardGroup cols={2}>
  <Card title="Create a Slack bot" icon="slack" href="/getting-started/quickstarts/webscrape-and-slack-notifications">
    Build a Slack integration
  </Card>

  <Card title="Build with AI" icon="wand-magic-sparkles" href="/getting-started/quickstarts/build-with-ai">
    Create apps using Agent
  </Card>
</CardGroup>

<Note>
  Want to learn more about API integrations? Check out our [publishing documentation](/category/replit-deployments).
</Note>


---

### Import from Bolt
Source: [https://docs.replit.com/getting-started/quickstarts/import-from-bolt.md](https://docs.replit.com/getting-started/quickstarts/import-from-bolt.md)

# Import from Bolt

> Learn how to import Bolt projects into Replit by exporting to GitHub first, then importing with Agent assistance.

export const platform_1 = "Bolt"

export const platform_0 = "Bolt"

export const projectType_0 = "project"

export const setupDescription_0 = "Agent validates your project structure and assists with migration to optimize it for the Replit environment"

## Import your Bolt project

⏰ *Estimated time: four minutes*

<Warning>
  Agent currently only supports Vite + React apps imported from Bolt.
</Warning>

You can import your Bolt projects into Replit by exporting them to GitHub first, then importing them as Replit Agent Apps.

This quickstart covers the step-by-step process to migrate your Bolt projects to Replit.

For comprehensive import options including other platforms like GitHub, Figma, and Lovable, see the [Import feature documentation](/replit-app/import-to-replit).

<Frame>
  <img src="https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/bolt.jpg?fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=0caf2e34824e87c9aee57e3922fb8ecd" alt="Preview of Bolt project import in Replit" data-og-width="1920" width="1920" data-og-height="1080" height="1080" data-path="images/workspace/import/bolt.jpg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/bolt.jpg?w=280&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=5483a79d99f25c36185e10ebc06ddd18 280w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/bolt.jpg?w=560&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=f339ca604e9714d64ce4c25754c3d583 560w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/bolt.jpg?w=840&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=bf37b85cb66b0473bb827a5e7b50821d 840w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/bolt.jpg?w=1100&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=a3192355bf00cfeebce86edd43010958 1100w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/bolt.jpg?w=1650&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=02d298e6954056345e124e81fb713c4e 1650w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/bolt.jpg?w=2500&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=ee88ce360ab102a2540783ef5d4ef4ec 2500w" />
</Frame>

## Export and import process

1. **Export your Bolt project to GitHub** from your Bolt workspace.

2. Navigate to <a href="https://replit.com/import" target="_blank">[https://replit.com/import](https://replit.com/import)</a>.

3. Select **Bolt** from the available import sources.

4. **Connect your GitHub account to Replit** to authorize repository access.

5. **Select your new Bolt project repo** for import from the available repositories.

6. Select **Import** to start the migration process.

## What gets imported

During the import process, Replit migrates your {platform_1} project with Agent assistance:

* **Code**: All application code and logic from your {platform_1} project
* **Design and styles**: UI components, styling, and visual design elements
* **Assets**: Images, icons, and other static resources
* **Backend functionality**: If your {platform_1} project includes backend functionality, it is imported into the Replit environment.
* **Database schema**: Database structure and table definitions are imported into a Neon Postgres database, which is integrated directly into the Replit environment.

### What's not included

* **Supabase database**: Database content and data are not migrated
* **Secrets**: Environment variables and API keys must be added separately

You can ask Agent to help build out functionality, add secrets, and recreate databases in your new app.

## Configure and run your app

During the import process, {setupDescription_0}.
If your app doesn't run as expected, Replit offers the following workspace tools to help you resolve the issues:

* **[Agent](/replitai/agent)**: Use AI to add new features and refine your imported project
* **[Assistant](/replitai/assistant)**: Get help with code questions and debugging
* **[Secrets](/replit-workspace/workspace-features/secrets)**: Add your API keys and environment variables
* **[Workflows](/replit-workspace/workflows)**: Configure the Run button to your preferred command

## Continue your journey

Now that you've imported your {platform_0} {projectType_0}, learn more about what you can do with your Replit App:

* [Replit Agent](/replitai/agent): Get AI assistance with code review, testing, and feature implementation
* [Make your Replit App Public](/replit-app/collaborate#make-your-replit-app-public): Share your app as a Template for others to remix
* [Replit Deployments](/category/replit-deployments): Publish your app to the cloud with a few clicks
* [Database setup](/cloud-services/storage-and-databases/sql-database): Let Agent help you configure and optimize your database
* [Collaborate](/replit-app/collaborate): Work with others on your imported projects


---

### Import from Figma
Source: [https://docs.replit.com/getting-started/quickstarts/import-from-figma.md](https://docs.replit.com/getting-started/quickstarts/import-from-figma.md)

# Import from Figma

> Learn how to import Figma designs into Replit and convert them into functional React applications.

export const YouTubeEmbed = ({videoId, title = "YouTube video", startAt}) => {
  if (!videoId) {
    return null;
  }
  let url = "https://www.youtube.com/embed/" + videoId;
  if (startAt) {
    url = url + "?start=" + startAt;
  }
  return <Frame>
      <iframe src={url} title={title} allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen></iframe>
    </Frame>;
};

export const platform_0 = "Figma"

export const projectType_0 = "design"

export const setupDescription_0 = "Replit automatically sets up your app's environment and dependencies"

## Import your Figma design

⏰ *Estimated time: three minutes*

You can import your Figma designs and turn them into functional React apps on Replit.

<YouTubeEmbed videoId="NBiFBZaBnaE" />

This quickstart covers how to convert your designs into working applications using AI-powered code generation.

For comprehensive import options including other platforms like GitHub, Bolt, and Lovable, see the [Import feature documentation](/replit-app/import-to-replit).

<Frame>
  <img src="https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/figma.jpg?fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=38babb9582d24c957cf796a2835998ff" alt="Preview of Figma design import in Replit" data-og-width="1920" width="1920" data-og-height="1080" height="1080" data-path="images/workspace/import/figma.jpg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/figma.jpg?w=280&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=6787bd6628aa63b60cd3eb89b2b4b18a 280w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/figma.jpg?w=560&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=bbe9df9f11127e9129da4de554a989e1 560w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/figma.jpg?w=840&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=cd38d54b9474007534010144cffae99f 840w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/figma.jpg?w=1100&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=ae2da1dd78f4e144c86f0eac8958301c 1100w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/figma.jpg?w=1650&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=d1e026158873d451e0feb021297c62bc 1650w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/figma.jpg?w=2500&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=ac83eb96357667bbc2eb0e4745f086d3 2500w" />
</Frame>

## Import your design

1. Navigate to <a href="https://replit.com/import" target="_blank">[https://replit.com/import](https://replit.com/import)</a>.

<Frame>
  <img src="https://mintcdn.com/replit/Uf4zlH5lH2O96Q1m/images/workspace/import/importer.png?fit=max&auto=format&n=Uf4zlH5lH2O96Q1m&q=85&s=8876c5571e7129426779f3e154bdc702" alt="Replit import interface showing available sources" data-og-width="1936" width="1936" data-og-height="1088" height="1088" data-path="images/workspace/import/importer.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/Uf4zlH5lH2O96Q1m/images/workspace/import/importer.png?w=280&fit=max&auto=format&n=Uf4zlH5lH2O96Q1m&q=85&s=d0aa2c1c0ea3ddac46d801dbd4abc2f5 280w, https://mintcdn.com/replit/Uf4zlH5lH2O96Q1m/images/workspace/import/importer.png?w=560&fit=max&auto=format&n=Uf4zlH5lH2O96Q1m&q=85&s=328c674dcc57a2d353d46ce3e9cc8404 560w, https://mintcdn.com/replit/Uf4zlH5lH2O96Q1m/images/workspace/import/importer.png?w=840&fit=max&auto=format&n=Uf4zlH5lH2O96Q1m&q=85&s=57c117d88180ddace56619072c699b1e 840w, https://mintcdn.com/replit/Uf4zlH5lH2O96Q1m/images/workspace/import/importer.png?w=1100&fit=max&auto=format&n=Uf4zlH5lH2O96Q1m&q=85&s=caa5ecc742248485722f4d35f6970e1a 1100w, https://mintcdn.com/replit/Uf4zlH5lH2O96Q1m/images/workspace/import/importer.png?w=1650&fit=max&auto=format&n=Uf4zlH5lH2O96Q1m&q=85&s=7bb9be324f00339aeb9eb349acd58a21 1650w, https://mintcdn.com/replit/Uf4zlH5lH2O96Q1m/images/workspace/import/importer.png?w=2500&fit=max&auto=format&n=Uf4zlH5lH2O96Q1m&q=85&s=0d30c2d22327fefaeb87126d49902ad7 2500w" />
</Frame>

2. Select **Figma** from the available import sources.

3. **Connect your Figma account** to authorize access to your designs.

<Frame>
  <img src="https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/figma-auth.jpg?fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=b26e735e1ebc34e302383526641df7b4" alt="Figma authentication process in Replit" data-og-width="1920" width="1920" data-og-height="1080" height="1080" data-path="images/workspace/import/figma-auth.jpg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/figma-auth.jpg?w=280&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=45001ea054929ac43be8f4b2885a8074 280w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/figma-auth.jpg?w=560&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=52fda67a22868cd84a235ad4327344d6 560w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/figma-auth.jpg?w=840&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=bfdbd6a71982c9823bcbef08b171e538 840w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/figma-auth.jpg?w=1100&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=3556ac5efe35bdebfcc581ea1510288e 1100w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/figma-auth.jpg?w=1650&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=79280b1dbc01cc277eef4dce6a9c367e 1650w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/figma-auth.jpg?w=2500&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=db960ea332e6098306c54caf6124b002 2500w" />
</Frame>

4. **In Figma, select the frame** you want to build in Replit.

<Frame>
  <img src="https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/figma-frame.jpg?fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=1c46a57f9ac479f4e0dec81a1d6d27d7" alt="Selecting a frame in Figma for import" data-og-width="1920" width="1920" data-og-height="1080" height="1080" data-path="images/workspace/import/figma-frame.jpg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/figma-frame.jpg?w=280&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=d69039b20ca926d847d524403d469f6d 280w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/figma-frame.jpg?w=560&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=2e6c848a22b17fc683d45f21e472f132 560w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/figma-frame.jpg?w=840&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=752b18d008c275434c473145148ef927 840w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/figma-frame.jpg?w=1100&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=ca89ac4e66898794c39268ac2e850477 1100w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/figma-frame.jpg?w=1650&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=79fb7058ccaa73eb28bc57f06dcb4042 1650w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/figma-frame.jpg?w=2500&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=27ead57ec016534e1013c810f16b0dc1 2500w" />
</Frame>

5. **Copy the frame URL** from Figma and paste it into the Replit import interface.

6. Select **Import** to start the conversion process.

<Frame>
  <img src="https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/figma-progress.jpg?fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=d27e3e9f76e7381f431826ee8d90bdb4" alt="Figma import progress in Replit" data-og-width="712" width="712" data-og-height="708" height="708" data-path="images/workspace/import/figma-progress.jpg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/figma-progress.jpg?w=280&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=0b085b04ed7fd033f443ed9a394b32d6 280w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/figma-progress.jpg?w=560&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=379f2c481bccebb3fdb982d2c1790c54 560w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/figma-progress.jpg?w=840&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=acddb443b71f5459b5844e89c35679ff 840w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/figma-progress.jpg?w=1100&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=37b802bbd51bdab8d4b5cf947a09a994 1100w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/figma-progress.jpg?w=1650&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=11ccebc33e5e592f5bd08ca9a59ec94b 1650w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/figma-progress.jpg?w=2500&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=d04aa6d5d23bb713f3882bb57ace148c 2500w" />
</Frame>

## What gets imported

During the import process, Replit converts your Figma design into a functional React application:

* **Theme & components**: Design system elements, colors, typography, and reusable components
* **Assets & icons**: Images, icons, and other visual assets from your design
* **App scaffolding**: Basic application structure and layout framework

## Figma design guidelines

To copy the Figma Design frame URL:

1. Right-click the frame
2. Select **Copy/Paste as**
3. Select **Copy link to selection**

For optimal conversion results, ensure your Figma design is well-structured with clear component hierarchies complete with auto layout constraints.

Follow [these guidelines](https://support.animaapp.com/en/articles/6431384-create-responsive-designs-in-figma) for responsive designs in Figma. You can also ask Agent to help you make your design responsive.

### Tips

* Use auto layout constraints to ensure your design is responsive.
* Name your layers something short and meaningful.
* Convert any groups to frames
* Mark image assets for export

## Configure and run your app

During the import process, {setupDescription_0}.
If your app doesn't run as expected, Replit offers the following workspace tools to help you resolve the issues:

* **[Agent](/replitai/agent)**: Use AI to add new features and refine your imported project
* **[Assistant](/replitai/assistant)**: Get help with code questions and debugging
* **[Secrets](/replit-workspace/workspace-features/secrets)**: Add your API keys and environment variables
* **[Workflows](/replit-workspace/workflows)**: Configure the Run button to your preferred command

## Interact in Agent chat (beta)

After importing, you can paste Figma links into Agent chat to explore layers, extract tokens, and request code changes. These Agent chat features require a Figma <strong>Dev</strong> or <strong>Full</strong> seat; the initial import does not.

See the guide: [Figma MCP Integration](/replitai/mcp/figma).

## Continue your journey

Now that you've imported your {platform_0} {projectType_0}, learn more about what you can do with your Replit App:

* [Replit Agent](/replitai/agent): Get AI assistance with code review, testing, and feature implementation
* [Make your Replit App Public](/replit-app/collaborate#make-your-replit-app-public): Share your app as a Template for others to remix
* [Replit Deployments](/category/replit-deployments): Publish your app to the cloud with a few clicks
* [Collaborate](/replit-app/collaborate): Work with others on your imported projects


---

### Import from GitHub
Source: [https://docs.replit.com/getting-started/quickstarts/import-from-github.md](https://docs.replit.com/getting-started/quickstarts/import-from-github.md)

# Import from GitHub

> Learn how to import GitHub repositories into Replit using rapid import or guided import methods.

## Import your GitHub repository

⏰ *Estimated time: two minutes*

You can import your GitHub repositories and turn them into Replit Apps to
run, test, and publish your code. This quickstart covers the fastest methods to get your GitHub projects running on Replit.

For comprehensive import options including other platforms like Figma, Bolt, and Lovable, see the [Import feature documentation](/replit-app/import-to-replit).

<Frame>
  <img src="https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/github.jpg?fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=e85b1dcc9dd85b1c5f4f74c44406b48e" alt="Preview of GitHub repository import in Replit" data-og-width="1920" width="1920" data-og-height="1080" height="1080" data-path="images/workspace/import/github.jpg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/github.jpg?w=280&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=5ce1d724e65bf66deaea53c1ab2426b2 280w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/github.jpg?w=560&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=9db2400a02e13072b66307d2a574191a 560w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/github.jpg?w=840&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=a8df4438cc9164c276be33182a137540 840w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/github.jpg?w=1100&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=e85775ebc74208719a508375a4a2291e 1100w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/github.jpg?w=1650&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=72eb7ce6e318c6a141efc3fae7068698 1650w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/github.jpg?w=2500&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=80d6c8daaf7befe5e3affb85a60de1f8 2500w" />
</Frame>

## Rapid import

Rapid import works instantly with public repositories.
Combine the Replit import URL with your GitHub repository URL to start the import process.

<Accordion title="Import using rapid import" defaultOpen={true}>
  1. Copy the repository GitHub URL, starting with `github.com`.

  2. Type `https://replit.com/` in the browser address bar and paste your copied GitHub URL at the end (no spaces).

     **Example**:

     GitHub repository URL: `https://github.com/exampleUser/my-app`

     Import URL: `https://replit.com/github.com/exampleUser/my-app`

  3. Press Enter to start the automatic import process.
</Accordion>

## Guided import

Guided import steps you through the process of selecting a repository to import
and supports public and private repositories.

<Accordion title="Import using guided import" defaultOpen={false}>
  1. Navigate to <a href="https://replit.com/import" target="_blank">[https://replit.com/import](https://replit.com/import)</a>.

  2. Select **GitHub** from the available import sources.

  3. **Connect your GitHub account** to authorize access to your repositories.

  4. **Select the repository** you want to import.

  5. Select **Import** to start the conversion process.

  6. Configure your privacy settings and click **Import** to start the automatic import process.
</Accordion>

## Configure and run your app

During the import process, Replit attempts to set your app's language, dependencies, and workflow.
If your app doesn't run as expected, Replit offers the following workspace tools to help you resolve the issues:

* **[Assistant](/replitai/assistant)**: Diagnose and fix setup issues using AI-powered assistance.
* **[Configure Repl](/replit-app/configuration)**: Configure your app's language, dependencies, and workflow.
* **[Secrets](/replit-workspace/workspace-features/secrets)**: Securely add environment variables your app depends on.
* **[Workflows](/replit-workspace/workflows)**: Configure the Run button to your preferred command.

## Continue your journey

Now that you've set up your app, learn more about what you can do with your Replit App from the following resources:

* [Using the Git interface](/replit-workspace/workspace-features/git-interface): Learn how to manage your Git repositories in Replit
* [Make your Replit App Public](/replit-app/collaborate#make-your-replit-app-public): Share your Replit App as a Template for others to remix
* [Replit Deployments](https://docs.replit.com/category/replit-deployments): Publish your Replit App to the cloud with a few clicks
* [Secrets](/replit-workspace/workspace-features/secrets): Securely store sensitive information, including API keys and database credentials
* [Collaborate](/replit-app/collaborate): Work with others on your GitHub-imported projects


---

### Import from Lovable
Source: [https://docs.replit.com/getting-started/quickstarts/import-from-lovable.md](https://docs.replit.com/getting-started/quickstarts/import-from-lovable.md)

# Import from Lovable

> Learn how to import Lovable projects into Replit by exporting to GitHub first, then importing with Agent assistance.

export const platform_1 = "Lovable"

export const platform_0 = "Lovable"

export const projectType_0 = "project"

export const setupDescription_0 = "Agent validates your project structure and assists with migration to optimize it for the Replit environment"

## Import your Lovable project

⏰ *Estimated time: four minutes*

You can import your Lovable projects into Replit by exporting them to GitHub first, then importing them as Replit Agent Apps.
This quickstart covers the step-by-step process to migrate your Lovable projects to Replit.

For comprehensive import options including other platforms like GitHub, Figma, and Bolt, see the [Import feature documentation](/replit-app/import-to-replit).

<Frame>
  <img src="https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/lovable.jpg?fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=259c9b27b6acf2b6dcf3f86c26ffebe6" alt="Preview of Lovable project import in Replit" data-og-width="1920" width="1920" data-og-height="1080" height="1080" data-path="images/workspace/import/lovable.jpg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/lovable.jpg?w=280&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=197f9b0ff2685f6a7f38e6a9fedee597 280w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/lovable.jpg?w=560&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=b431c2a506993f7d354798942eca62a4 560w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/lovable.jpg?w=840&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=8a615e3800b9273ee28e9c34c810c7a5 840w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/lovable.jpg?w=1100&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=78a930968ea332f5c2e76314c5eb8085 1100w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/lovable.jpg?w=1650&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=58ecd62f5ef0051f6e939a6a24012661 1650w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/import/lovable.jpg?w=2500&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=b070fecc78967d63c8c9f39fbe6d92c4 2500w" />
</Frame>

## Export and import process

1. **Export your Lovable project to GitHub** from your Lovable workspace.

2. Navigate to <a href="https://replit.com/import" target="_blank">[https://replit.com/import](https://replit.com/import)</a>.

3. Select **Lovable** from the available import sources.

4. **Connect your GitHub account to Replit** to authorize repository access.

5. **Select your new Lovable project repo** for import from the available repositories.

6. Select **Import** to start the migration process.

## What gets imported

During the import process, Replit migrates your {platform_1} project with Agent assistance:

* **Code**: All application code and logic from your {platform_1} project
* **Design and styles**: UI components, styling, and visual design elements
* **Assets**: Images, icons, and other static resources
* **Backend functionality**: If your {platform_1} project includes backend functionality, it is imported into the Replit environment.
* **Database schema**: Database structure and table definitions are imported into a Neon Postgres database, which is integrated directly into the Replit environment.

### What's not included

* **Supabase database**: Database content and data are not migrated
* **Secrets**: Environment variables and API keys must be added separately

You can ask Agent to help build out functionality, add secrets, and recreate databases in your new app.

## Configure and run your app

During the import process, {setupDescription_0}.
If your app doesn't run as expected, Replit offers the following workspace tools to help you resolve the issues:

* **[Agent](/replitai/agent)**: Use AI to add new features and refine your imported project
* **[Assistant](/replitai/assistant)**: Get help with code questions and debugging
* **[Secrets](/replit-workspace/workspace-features/secrets)**: Add your API keys and environment variables
* **[Workflows](/replit-workspace/workflows)**: Configure the Run button to your preferred command

## Continue your journey

Now that you've imported your {platform_0} {projectType_0}, learn more about what you can do with your Replit App:

* [Replit Agent](/replitai/agent): Get AI assistance with code review, testing, and feature implementation
* [Make your Replit App Public](/replit-app/collaborate#make-your-replit-app-public): Share your app as a Template for others to remix
* [Replit Deployments](/category/replit-deployments): Publish your app to the cloud with a few clicks
* [Database setup](/cloud-services/storage-and-databases/sql-database): Let Agent help you configure and optimize your database
* [Collaborate](/replit-app/collaborate): Work with others on your imported projects


---

### Import from Vercel
Source: [https://docs.replit.com/getting-started/quickstarts/import-from-vercel.md](https://docs.replit.com/getting-started/quickstarts/import-from-vercel.md)

# Import from Vercel

> Learn how to import Vercel projects into Replit by linking your GitHub repository and letting Agent handle the setup.

export const platform_0 = "Vercel"

export const projectType_0 = "project"

export const setupDescription_0 = "Agent automatically sets up your app's environment and dependencies and configures run commands for the Replit environment"

## Import your Vercel project

⏰ *Estimated time: three minutes*

You can import your Vercel projects into Replit by linking the GitHub repository that backs your Vercel project. Agent scans your code and handles the setup automatically.

This quickstart covers the step-by-step process to migrate your Vercel projects to Replit with a clean workflow, live preview, and logs.

For comprehensive import options including other platforms like GitHub, Figma, Bolt, and Lovable, see the [Import feature documentation](/replit-app/import-to-replit).

<Frame>
  <img src="https://mintcdn.com/replit/Uf4zlH5lH2O96Q1m/images/workspace/import/vercel.png?fit=max&auto=format&n=Uf4zlH5lH2O96Q1m&q=85&s=c18a89efc877508ee4851115150b0be9" alt="Preview of Vercel project import in Replit" data-og-width="2754" width="2754" data-og-height="1550" height="1550" data-path="images/workspace/import/vercel.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/Uf4zlH5lH2O96Q1m/images/workspace/import/vercel.png?w=280&fit=max&auto=format&n=Uf4zlH5lH2O96Q1m&q=85&s=495c51d909fd6b983f94f88420dbbbcb 280w, https://mintcdn.com/replit/Uf4zlH5lH2O96Q1m/images/workspace/import/vercel.png?w=560&fit=max&auto=format&n=Uf4zlH5lH2O96Q1m&q=85&s=7d5e9b1cadf0753f8ab77b8c3846944f 560w, https://mintcdn.com/replit/Uf4zlH5lH2O96Q1m/images/workspace/import/vercel.png?w=840&fit=max&auto=format&n=Uf4zlH5lH2O96Q1m&q=85&s=461eb42364d426a3ac24757553c34d6a 840w, https://mintcdn.com/replit/Uf4zlH5lH2O96Q1m/images/workspace/import/vercel.png?w=1100&fit=max&auto=format&n=Uf4zlH5lH2O96Q1m&q=85&s=89de984cc38109914302b3039374943e 1100w, https://mintcdn.com/replit/Uf4zlH5lH2O96Q1m/images/workspace/import/vercel.png?w=1650&fit=max&auto=format&n=Uf4zlH5lH2O96Q1m&q=85&s=edfed361de8c7efab11e66a925a5e342 1650w, https://mintcdn.com/replit/Uf4zlH5lH2O96Q1m/images/workspace/import/vercel.png?w=2500&fit=max&auto=format&n=Uf4zlH5lH2O96Q1m&q=85&s=834f6e56d93cb2ceb5f5d0c9e2ce0dad 2500w" />
</Frame>

## Import process

1. Navigate to <a href="https://replit.com/import" target="_blank">[https://replit.com/import](https://replit.com/import)</a>.

<Frame>
  <img src="https://mintcdn.com/replit/Uf4zlH5lH2O96Q1m/images/workspace/import/importer.png?fit=max&auto=format&n=Uf4zlH5lH2O96Q1m&q=85&s=8876c5571e7129426779f3e154bdc702" alt="Replit import interface showing available sources" data-og-width="1936" width="1936" data-og-height="1088" height="1088" data-path="images/workspace/import/importer.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/Uf4zlH5lH2O96Q1m/images/workspace/import/importer.png?w=280&fit=max&auto=format&n=Uf4zlH5lH2O96Q1m&q=85&s=d0aa2c1c0ea3ddac46d801dbd4abc2f5 280w, https://mintcdn.com/replit/Uf4zlH5lH2O96Q1m/images/workspace/import/importer.png?w=560&fit=max&auto=format&n=Uf4zlH5lH2O96Q1m&q=85&s=328c674dcc57a2d353d46ce3e9cc8404 560w, https://mintcdn.com/replit/Uf4zlH5lH2O96Q1m/images/workspace/import/importer.png?w=840&fit=max&auto=format&n=Uf4zlH5lH2O96Q1m&q=85&s=57c117d88180ddace56619072c699b1e 840w, https://mintcdn.com/replit/Uf4zlH5lH2O96Q1m/images/workspace/import/importer.png?w=1100&fit=max&auto=format&n=Uf4zlH5lH2O96Q1m&q=85&s=caa5ecc742248485722f4d35f6970e1a 1100w, https://mintcdn.com/replit/Uf4zlH5lH2O96Q1m/images/workspace/import/importer.png?w=1650&fit=max&auto=format&n=Uf4zlH5lH2O96Q1m&q=85&s=7bb9be324f00339aeb9eb349acd58a21 1650w, https://mintcdn.com/replit/Uf4zlH5lH2O96Q1m/images/workspace/import/importer.png?w=2500&fit=max&auto=format&n=Uf4zlH5lH2O96Q1m&q=85&s=0d30c2d22327fefaeb87126d49902ad7 2500w" />
</Frame>

2. Select **Vercel** from the available import sources.

3. **Connect your GitHub account** to authorize access to your repositories.

4. **Select the repository** that backs your Vercel project from the available repositories.

5. **Provide environment variables** when prompted by Agent. Only non-standard secrets and environment variables will be requested.

6. Select **Import** to start the migration process.

## What gets imported

During the import process, Replit converts your Vercel project into a functional Replit App:

* **Project structure**: Complete codebase and file organization
* **Dependencies**: Package.json and dependency management
* **Build configuration**: Optimized for Replit's environment
* **Environment setup**: Runtime and framework configuration

## What's not included

The following items from your Vercel project are not automatically imported:

* **Environment variables**: You'll be prompted to provide these during import
* **Custom domains**: Set up separately in Replit Deployments
* **Vercel-specific configurations**: Edge functions and middleware may need adjustment
* **Analytics and monitoring**: Use Replit's built-in monitoring tools

## Configure and run your app

During the import process, {setupDescription_0}.
If your app doesn't run as expected, Replit offers the following workspace tools to help you resolve the issues:

* **[Agent](/replitai/agent)**: Use AI to add new features and refine your imported project
* **[Assistant](/replitai/assistant)**: Get help with code questions and debugging
* **[Secrets](/replit-workspace/workspace-features/secrets)**: Add your API keys and environment variables
* **[Workflows](/replit-workspace/workflows)**: Configure the Run button to your preferred command

## Continue your journey

Now that you've imported your {platform_0} {projectType_0}, learn more about what you can do with your Replit App:

* [Replit Agent](/replitai/agent): Get AI assistance with code review, testing, and feature implementation
* [Make your Replit App Public](/replit-app/collaborate#make-your-replit-app-public): Share your app as a Template for others to remix
* [Replit Deployments](/category/replit-deployments): Publish your app to the cloud with a few clicks
* [Collaborate](/replit-app/collaborate): Work with others on your imported projects


---

### Create a Next.js app
Source: [https://docs.replit.com/getting-started/quickstarts/next-js-app.md](https://docs.replit.com/getting-started/quickstarts/next-js-app.md)

# Create a Next.js app

> Build and publish a modern React application using Next.js on Replit. Learn how to use server-side rendering and static generation.

Learn how to create a Next.js application with server-side rendering capabilities. This guide shows you how to publish a React app using Replit's autoscaling published apps.

## What you'll learn

<CardGroup cols={2}>
  <Card title="Next.js" icon="react">
    Build modern React applications
  </Card>

  <Card title="Server-Side Rendering" icon="server">
    Enable SSR for better performance
  </Card>

  <Card title="Autoscaling" icon="arrows-up-down">
    Publish with automatic scaling
  </Card>

  <Card title="Performance" icon="gauge-high">
    Optimize for production
  </Card>
</CardGroup>

## Create your app

<Steps>
  <Step title="Fork the template">
    Sign in to Replit and fork the [Next.js template](https://replit.com/@replit/Nextjs?v=1#README). Select **+ Use Template** and follow the prompts to create your Replit App.
  </Step>

  <Step title="Set up publishing">
    1. Select **Publish** in the workspace header
    2. Choose **Autoscale** deployment
    3. Configure your app:
       * Machine: 1vCPU, 2 GiB RAM (default)
       * Max machines: 3 (default)
       * Build command: `npm run build`
       * Run command: `npm run start`

    <Note>
      Autoscale deployments automatically adjust resources based on traffic.
    </Note>
  </Step>

  <Step title="Launch">
    Select **Publish** to launch your app. It will be live in a few minutes!
  </Step>
</Steps>

## Next steps

<CardGroup cols={3}>
  <Card title="Custom Domain" icon="globe" href="/cloud-services/deployments/custom-domains">
    Add your own domain
  </Card>

  <Card title="Autoscaling" icon="server" href="/cloud-services/deployments/autoscale-deployments">
    Learn about scaling
  </Card>

  <Card title="Performance" icon="gauge-high" href="/category/replit-deployments">
    Optimize your app
  </Card>
</CardGroup>

## Related guides

<CardGroup cols={2}>
  <Card title="Create a static blog" icon="newspaper" href="/getting-started/quickstarts/static-blog-astro">
    Build a blog with Astro
  </Card>

  <Card title="Build with AI" icon="wand-magic-sparkles" href="/getting-started/quickstarts/build-with-ai">
    Create apps using Agent
  </Card>
</CardGroup>

<Note>
  Want to learn more about web development? Check out our [publishing documentation](/category/replit-deployments).
</Note>


---

### Create a cat image generator
Source: [https://docs.replit.com/getting-started/quickstarts/no-code-cat-image-generator.md](https://docs.replit.com/getting-started/quickstarts/no-code-cat-image-generator.md)

# Create a cat image generator

> Build a fun image generator in 5 minutes using Replit's AI tools. Perfect for beginners exploring no-code development.

Learn how to create apps without writing code. This guide shows you how to build a playful cat image generator using Replit's AI tools.

## What you'll learn

<CardGroup cols={2}>
  <Card title="AI Development" icon="wand-magic-sparkles">
    Create apps through natural language conversations
  </Card>

  <Card title="No-Code Building" icon="code">
    Build without writing code
  </Card>

  <Card title="Tool Selection" icon="screwdriver-wrench">
    Choose the right AI tool for each task
  </Card>

  <Card title="Deployment" icon="rocket">
    Take your app live in minutes
  </Card>
</CardGroup>

<Note>
  You'll need a Replit account and Core subscription to access Agent.
</Note>

<Frame type="glass">
  <iframe src="https://www.youtube.com/embed/ji8C1LxWyXU" title="Build a Cat Generator App in 5 Minutes" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen height="400" width="100%" />
</Frame>

## Start with Agent

<Steps>
  <Step title="Open Replit">
    Head to [Replit](https://replit.com) and sign in. You'll see the prompt editor where you can instruct Agent.

    <Frame type="glass">
      <img src="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/prompt.png?fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=f54d31b1878ca5877bc5cfbac8655637" alt="Replit's AI prompt interface showing where to enter instructions for the Agent" data-og-width="3412" width="3412" data-og-height="2672" height="2672" data-path="images/getting-started/build-without-code-cat-generator/prompt.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/prompt.png?w=280&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=05d40645e24f2ff097f4403ddfc01d84 280w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/prompt.png?w=560&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=68496669a1f6d4d4e4bc768140b80c10 560w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/prompt.png?w=840&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=8e896f445527a151c6617134293037df 840w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/prompt.png?w=1100&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=78f809a562be0034321c72e763e03553 1100w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/prompt.png?w=1650&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=6b546229e42ce130a6ab570bdc3b78f4 1650w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/prompt.png?w=2500&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=df77cc6d91563c0ae29ec2b429b59b0f 2500w" />
    </Frame>
  </Step>

  <Step title="Create your prompt">
    Start with a simple request:

    ```text  theme={null}
    Let's build a cat generator that displays a random image of a cat from the internet 
    every time I press a button.
    ```

    <Tip>
      Use the "Improve Prompt" button to add more details to your request.
    </Tip>
  </Step>

  <Step title="Review the plan">
    Agent will outline a development plan using Flask and JavaScript. Don't worry about the technical terms—Agent handles the complexity for you.

    <Frame type="glass">
      <img src="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/agent-plan.png?fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=6d0e96bbcc978708d8919c223ec20d50" alt="Agent's proposed development plan for creating the cat generator application" data-og-width="3412" width="3412" data-og-height="2672" height="2672" data-path="images/getting-started/build-without-code-cat-generator/agent-plan.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/agent-plan.png?w=280&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=44d7d67b9a50960c268ac16e93a1025a 280w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/agent-plan.png?w=560&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=b58ba0f159a30c426104a33f5fc4c6c0 560w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/agent-plan.png?w=840&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=2e5dafe13af364114033619a80782957 840w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/agent-plan.png?w=1100&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=ef6695597f15bb613f97b02a4d610b16 1100w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/agent-plan.png?w=1650&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=127e22ef3cf2206bc614f6adf00edd6e 1650w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/agent-plan.png?w=2500&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=c7b146b6d9f7e7cda510e2ca5d22af24 2500w" />
    </Frame>
  </Step>
</Steps>

## Develop iteratively

### Using Agent for major changes

Agent excels at structural changes and core functionality. Try improving the UI:

```text  theme={null}
Can you change the UI to be more beautiful and playful? Use cat emojis to improve 
the appearance of the app.
```

<Frame type="glass">
  <img src="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/agent-making-style-improvements.png?fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=7577292b23df0ba4e393253107d79b15" alt="Agent interface showing UI improvement suggestions with emoji additions" data-og-width="3412" width="3412" data-og-height="2672" height="2672" data-path="images/getting-started/build-without-code-cat-generator/agent-making-style-improvements.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/agent-making-style-improvements.png?w=280&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=6d26fcdb5585826231007f96777fa053 280w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/agent-making-style-improvements.png?w=560&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=70d6c87934b57fcaf095c8ae7ac7d5a3 560w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/agent-making-style-improvements.png?w=840&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=8953fbbfb46041eaa03ff5817306f004 840w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/agent-making-style-improvements.png?w=1100&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=fa37a4636133902be9db00d37aa10326 1100w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/agent-making-style-improvements.png?w=1650&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=477f670ed7e41bf142fbf97cc3dfcda6 1650w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/agent-making-style-improvements.png?w=2500&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=32efa6a410fe7c96a701c038bec982c4 2500w" />
</Frame>

### Refining with Assistant

Switch to Assistant for targeted improvements. For example, add dark mode:

```text  theme={null}
Can we add a dark mode to the app with a toggle button to switch between dark 
and light mode?
```

<Frame type="glass">
  <img src="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/assistant-preview-edits.png?fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=2ade567d75bf5d6aa11e49378ebdf22a" alt="Preview of code changes made by Assistant for implementing dark mode" data-og-width="3412" width="3412" data-og-height="2672" height="2672" data-path="images/getting-started/build-without-code-cat-generator/assistant-preview-edits.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/assistant-preview-edits.png?w=280&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=2c77b30bcdc802c606007cc0ecad0960 280w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/assistant-preview-edits.png?w=560&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=4167df879e5aa5b9284d2b4eb5d2ca6c 560w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/assistant-preview-edits.png?w=840&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=ce4d87c8b73ada54078c43ed01fb4cbc 840w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/assistant-preview-edits.png?w=1100&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=b254d02dbee0efe5b06fda88a3a7c68c 1100w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/assistant-preview-edits.png?w=1650&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=3e7ee0ddf784eefdae52accd6cb2d430 1650w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/assistant-preview-edits.png?w=2500&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=a5f7ba11e35659f391648371f9d421a1 2500w" />
</Frame>

<Tip>
  Ask Assistant to explain how your app works:

  ```text  theme={null}
  Help me understand the framework this app is built on.
  ```
</Tip>

<Frame type="glass">
  <img src="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/assistant-ask-about-architecture.png?fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=3e9cd5dd02a7d5a8c7708db7d25c7d71" alt="Assistant explaining the application's framework and architecture" data-og-width="3412" width="3412" data-og-height="2672" height="2672" data-path="images/getting-started/build-without-code-cat-generator/assistant-ask-about-architecture.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/assistant-ask-about-architecture.png?w=280&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=40c5af4cd8531b2ea1c77a1d91249950 280w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/assistant-ask-about-architecture.png?w=560&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=70f3cd07a77a1684917c5f19ee833c91 560w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/assistant-ask-about-architecture.png?w=840&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=9ca1c3d7afa27578148ad8f4e8aa73b9 840w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/assistant-ask-about-architecture.png?w=1100&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=a5a3308933efd4d97ca5bc56b5022520 1100w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/assistant-ask-about-architecture.png?w=1650&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=d8672f3dec7ec3fe8321e057708cc743 1650w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/assistant-ask-about-architecture.png?w=2500&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=7a5fe85d2a7f49f35a9c06bd5f7ea695 2500w" />
</Frame>

## Publish your app

<Steps>
  <Step title="Start publishing">
    Select **Publish** in the top navigation.
  </Step>

  <Step title="Configure">
    1. Choose the recommended publishing option
    2. Name your app (e.g., "whisker-wonder")
    3. Select **Publish**
  </Step>

  <Step title="Go live">
    Wait 2-3 minutes for publishing. Your app will be available at `your-app-name.replit.app`.

    <Frame type="glass">
      <img src="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/deploy.png?fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=f1ce2c914182a1b05f7b79ff2047e2de" alt="Step-by-step publishing process showing how to publish the cat generator app" data-og-width="3412" width="3412" data-og-height="2672" height="2672" data-path="images/getting-started/build-without-code-cat-generator/deploy.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/deploy.png?w=280&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=fd71f7b4372b073f349492fded31052e 280w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/deploy.png?w=560&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=05d92c5bea1bfc513e931f4993f723c7 560w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/deploy.png?w=840&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=6632e3d90929fa92b6457c04c6d784fe 840w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/deploy.png?w=1100&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=cc334fb2b9b0b27cc7daf09ae782081e 1100w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/deploy.png?w=1650&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=b42f3f6d705e7d6a0f37309669c148c3 1650w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/build-without-code-cat-generator/deploy.png?w=2500&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=20690b9fe1575f0794a78d011c1d6612 2500w" />
    </Frame>
  </Step>
</Steps>

## Best practices

<CardGroup cols={2}>
  <Card title="Development tips">
    * Start simple and iterate
    * Don't worry about technical details initially
    * Provide context in prompts
  </Card>

  <Card title="Tool selection">
    * Use Agent for broad changes
    * Switch to Assistant for specific improvements
    * Test locally before publishing
  </Card>
</CardGroup>

## Next steps

<CardGroup cols={3}>
  <Card title="Databases" icon="database" href="/cloud-services/storage-and-databases/sql-database">
    Add data persistence with ReplDB
  </Card>

  <Card title="Cloud Services" icon="cloud" href="/category/replit-deployments">
    Learn about publishing options
  </Card>

  <Card title="Custom Domain" icon="globe" href="/cloud-services/deployments/custom-domains">
    Set up your own domain name
  </Card>
</CardGroup>

## Related guides

<CardGroup cols={2}>
  <Card title="Create a file converter" icon="file-arrow-up" href="/getting-started/quickstarts/build-with-ai">
    Build a file conversion app using Agent and Assistant
  </Card>

  <Card title="Create a Slack summarizer" icon="slack" href="/getting-started/quickstarts/ai-slack-channel-summarizer">
    Build a bot that summarizes Slack channels with AI
  </Card>
</CardGroup>

<Note>
  Want to learn more about Replit's AI tools? Check out [Replit AI](/category/replit-ai/).
</Note>


---

### Manage App Storage in JavaScript
Source: [https://docs.replit.com/getting-started/quickstarts/object-storage-javascript.md](https://docs.replit.com/getting-started/quickstarts/object-storage-javascript.md)

# Manage App Storage in 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 class="icon-svg" src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=a6613ac9b303fa6dea65e5cf08ddca06" alt="plus sign" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/create-app-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=0f0aa42a2a63cca6629fe393ffb100e4 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=e6cce9e17a54ec2279d57d255e5233ba 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=6a6f30d08c7ab4811ba927af66ca7311 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=f7249d48a50a7db0713ea3f92f4c422f 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=f2a12316d646b72674a837cbe70a10f8 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=6cc3b1f288cf5086a84aadaa9b1d4fba 2500w" /> **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 src="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/typescript-template.png?fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=20d5c2a7d84cafe0bbcb2488abad6623" alt="TypeScript template selection screen" data-og-width="2590" width="2590" data-og-height="1064" height="1064" data-path="images/tutorials/typescript-template.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/typescript-template.png?w=280&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=2009d52e7c62428dfbdeaac67d4c76b7 280w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/typescript-template.png?w=560&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=4688223d56cbd924ebe5e0d5fa307d33 560w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/typescript-template.png?w=840&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=5c9e52fee4cf2b0f91e77d43cfe7f73d 840w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/typescript-template.png?w=1100&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=0b95cc7fc800d73e2fa5eddf7bc572b2 1100w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/typescript-template.png?w=1650&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=c306db4a9b98697c639b88bc08da4fcc 1650w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/typescript-template.png?w=2500&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=d3daef19ef4d0b3cbdee842e5fecde50 2500w" />
   </Frame>
4. Select <img class="icon-svg" src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=a6613ac9b303fa6dea65e5cf08ddca06" alt="plus sign" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/create-app-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=0f0aa42a2a63cca6629fe393ffb100e4 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=e6cce9e17a54ec2279d57d255e5233ba 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=6a6f30d08c7ab4811ba927af66ca7311 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=f7249d48a50a7db0713ea3f92f4c422f 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=f2a12316d646b72674a837cbe70a10f8 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=6cc3b1f288cf5086a84aadaa9b1d4fba 2500w" /> **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 class="icon-svg" src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/angled-brackets.svg?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=aa97c1d6b9eae7dfa4af01802636a8a5" alt="angled brackets icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/angled-brackets.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/angled-brackets.svg?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=27b4cca399aa3b3514339fe68a009a48 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/angled-brackets.svg?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=550894bc46ebe65b7d45c4d53f2a9b68 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/angled-brackets.svg?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=4743dfbd26844b1b4482a41e40b79f66 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/angled-brackets.svg?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=84f1640fb44502b77f4db2a553341bef 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/angled-brackets.svg?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=eeb65fe53c551e5a3f2358c28dff9524 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/angled-brackets.svg?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=d2661b0703d206906cd198357bd20efd 2500w" /> **Commands** view in the **App Storage** tab.

        The installation screen should resemble the following screenshot:

        <Frame>
          <img src="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/install-javascript-object-storage.png?fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=ea700a62d5ea5818372343210d0e832c" alt="screenshot of App Storage dependencies installation" data-og-width="2428" width="2428" data-og-height="648" height="648" data-path="images/tutorials/install-javascript-object-storage.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/install-javascript-object-storage.png?w=280&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=47cc9c9a9f0d774712bb628565b8acd1 280w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/install-javascript-object-storage.png?w=560&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=1f99137786a0d184e19a935c4b37eb13 560w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/install-javascript-object-storage.png?w=840&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=0decdb409f172102fbbe482e8e24bc47 840w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/install-javascript-object-storage.png?w=1100&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=7fc303c714863c866335d138d637f7b9 1100w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/install-javascript-object-storage.png?w=1650&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=3acb277fd457db01ebb22a99d6bb6e30 1650w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/install-javascript-object-storage.png?w=2500&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=8148259630bfa71d115708487eec6fa2 2500w" />
        </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 class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/files-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=dcf170c63430088fc4e28058849eec4f" alt="files icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/files-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/files-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=b72e6d298af9f96117a8a5492b9d8a42 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/files-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=af6a952cc85e5f742968c8a91b1e5137 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/files-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=7f13cd1bcab1279e81e042c7a80d3033 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/files-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=c4b325c9fc5e0e80d3e98b68715f2aa1 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/files-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=dcefa4a3a120cf6be1af51a67430632f 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/files-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=78a61e721c9d71f1d41541aea469befc 2500w" /> **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.md](https://docs.replit.com/getting-started/quickstarts/object-storage-python.md)

# Manage App Storage in 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 class="icon-svg" src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=a6613ac9b303fa6dea65e5cf08ddca06" alt="plus sign" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/create-app-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=0f0aa42a2a63cca6629fe393ffb100e4 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=e6cce9e17a54ec2279d57d255e5233ba 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=6a6f30d08c7ab4811ba927af66ca7311 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=f7249d48a50a7db0713ea3f92f4c422f 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=f2a12316d646b72674a837cbe70a10f8 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=6cc3b1f288cf5086a84aadaa9b1d4fba 2500w" /> **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 src="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/python-template.png?fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=3d09d96320ab531aedf15df7894f1234" alt="Python template selection screen" data-og-width="2660" width="2660" data-og-height="1110" height="1110" data-path="images/tutorials/python-template.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/python-template.png?w=280&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=99cf29da1d08f91373f25b2ae2fda816 280w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/python-template.png?w=560&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=af19b79e5bb55049de9164b9196d2779 560w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/python-template.png?w=840&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=442a0cbff0f0ba108aac818d1b094cb6 840w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/python-template.png?w=1100&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=5bc6d317357624b52b0df92007f83c2b 1100w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/python-template.png?w=1650&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=4677b5f853201d0acf98d5965685fb28 1650w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/python-template.png?w=2500&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=9ff1ec092477367a3a1af5c60d694964 2500w" />
   </Frame>
4. Select <img class="icon-svg" src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=a6613ac9b303fa6dea65e5cf08ddca06" alt="plus sign" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/create-app-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=0f0aa42a2a63cca6629fe393ffb100e4 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=e6cce9e17a54ec2279d57d255e5233ba 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=6a6f30d08c7ab4811ba927af66ca7311 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=f7249d48a50a7db0713ea3f92f4c422f 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=f2a12316d646b72674a837cbe70a10f8 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=6cc3b1f288cf5086a84aadaa9b1d4fba 2500w" /> **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 class="icon-svg" src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/angled-brackets.svg?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=aa97c1d6b9eae7dfa4af01802636a8a5" alt="angled brackets icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/angled-brackets.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/angled-brackets.svg?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=27b4cca399aa3b3514339fe68a009a48 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/angled-brackets.svg?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=550894bc46ebe65b7d45c4d53f2a9b68 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/angled-brackets.svg?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=4743dfbd26844b1b4482a41e40b79f66 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/angled-brackets.svg?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=84f1640fb44502b77f4db2a553341bef 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/angled-brackets.svg?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=eeb65fe53c551e5a3f2358c28dff9524 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/angled-brackets.svg?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=d2661b0703d206906cd198357bd20efd 2500w" /> **Commands** view in the **App Storage** tab.

        The installation screen should resemble the following screenshot:

        <Frame>
          <img src="https://mintcdn.com/replit/jSmYU1wBTvl8UMyc/images/databases/install-object-storage-deps.png?fit=max&auto=format&n=jSmYU1wBTvl8UMyc&q=85&s=c948e6bfa611ee9f80f6392e4931d212" alt="screenshot of App Storage package installation" data-og-width="1954" width="1954" data-og-height="560" height="560" data-path="images/databases/install-object-storage-deps.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/jSmYU1wBTvl8UMyc/images/databases/install-object-storage-deps.png?w=280&fit=max&auto=format&n=jSmYU1wBTvl8UMyc&q=85&s=88009a8f0a1af0f01eae08087cbf259b 280w, https://mintcdn.com/replit/jSmYU1wBTvl8UMyc/images/databases/install-object-storage-deps.png?w=560&fit=max&auto=format&n=jSmYU1wBTvl8UMyc&q=85&s=f47a835c6375877ea3ce6c833552e413 560w, https://mintcdn.com/replit/jSmYU1wBTvl8UMyc/images/databases/install-object-storage-deps.png?w=840&fit=max&auto=format&n=jSmYU1wBTvl8UMyc&q=85&s=b7a190ec85851cf595cfb9a8d67cba3e 840w, https://mintcdn.com/replit/jSmYU1wBTvl8UMyc/images/databases/install-object-storage-deps.png?w=1100&fit=max&auto=format&n=jSmYU1wBTvl8UMyc&q=85&s=ec413c2d49eee6eaeccb46209d8d7dba 1100w, https://mintcdn.com/replit/jSmYU1wBTvl8UMyc/images/databases/install-object-storage-deps.png?w=1650&fit=max&auto=format&n=jSmYU1wBTvl8UMyc&q=85&s=877244f2eb1391c0e27b06112460b30e 1650w, https://mintcdn.com/replit/jSmYU1wBTvl8UMyc/images/databases/install-object-storage-deps.png?w=2500&fit=max&auto=format&n=jSmYU1wBTvl8UMyc&q=85&s=49ee3a78d595c6a38ca6c8fb8e896bca 2500w" />
        </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 class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/files-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=dcf170c63430088fc4e28058849eec4f" alt="files icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/files-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/files-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=b72e6d298af9f96117a8a5492b9d8a42 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/files-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=af6a952cc85e5f742968c8a91b1e5137 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/files-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=7f13cd1bcab1279e81e042c7a80d3033 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/files-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=c4b325c9fc5e0e80d3e98b68715f2aa1 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/files-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=dcefa4a3a120cf6be1af51a67430632f 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/files-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=78a61e721c9d71f1d41541aea469befc 2500w" /> **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


---

### Remix an App
Source: [https://docs.replit.com/getting-started/quickstarts/remix-an-app.md](https://docs.replit.com/getting-started/quickstarts/remix-an-app.md)

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

## Create your Remix

⏰ *Estimated time: 1 minute*

Follow the steps in this guide to create a Remix of the following solar system visualization:

<Frame>
  <img src="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_remix_app_preview.png?fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=2b22cccdd1616aeec84b9ba52b0656a2" alt="image of the Remix button on the Replit App page" data-og-width="3732" width="3732" data-og-height="2100" height="2100" data-path="images/getting-started/quickstart_remix_app_preview.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_remix_app_preview.png?w=280&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=a9fcb3ca94edf00a32695a3d562d1689 280w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_remix_app_preview.png?w=560&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=5b6dd0ac9f05783d01e34b06174a86ef 560w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_remix_app_preview.png?w=840&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=8263df2809884cb319df978dff880ae9 840w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_remix_app_preview.png?w=1100&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=221280ae664ea6bd3eb777bc067a2a80 1100w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_remix_app_preview.png?w=1650&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=99119ebd6a053fe89c0dbe92eebcd5ab 1650w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_remix_app_preview.png?w=2500&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=bb9e56fbe9ab7b38bc83624507c1fd67 2500w" />
</Frame>

<Tip>
  Try the published app at [Solar System Visualization Demo Replit
  App](https://solar-system-viz.replit.app/).
</Tip>

<Steps>
  <Step title="Remix the app">
    Open the [Solar System Visualization](https://replit.com/@matt/Solar-System-Visualization?v=1) Replit App in your browser
    and select **Remix Template**:

    <img src="https://mintcdn.com/replit/0UCOQvZyQpUEM03B/images/shared/buttons/remix_button.png?fit=max&auto=format&n=0UCOQvZyQpUEM03B&q=85&s=8a951b014e4eea31767bbf22c18d7ec2" width="300" alt="image of the Remix button on the Replit App page" data-og-width="228" data-og-height="36" data-path="images/shared/buttons/remix_button.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/0UCOQvZyQpUEM03B/images/shared/buttons/remix_button.png?w=280&fit=max&auto=format&n=0UCOQvZyQpUEM03B&q=85&s=9e8687fcc4076b0bc7c2a4e302142cfb 280w, https://mintcdn.com/replit/0UCOQvZyQpUEM03B/images/shared/buttons/remix_button.png?w=560&fit=max&auto=format&n=0UCOQvZyQpUEM03B&q=85&s=31c9ef4b6f3ec486a4f9f50becf9cb3a 560w, https://mintcdn.com/replit/0UCOQvZyQpUEM03B/images/shared/buttons/remix_button.png?w=840&fit=max&auto=format&n=0UCOQvZyQpUEM03B&q=85&s=d43ec4837c3e47fe8dff411e83fd47a7 840w, https://mintcdn.com/replit/0UCOQvZyQpUEM03B/images/shared/buttons/remix_button.png?w=1100&fit=max&auto=format&n=0UCOQvZyQpUEM03B&q=85&s=6d419c6968dc0b605e2050fbb09b147a 1100w, https://mintcdn.com/replit/0UCOQvZyQpUEM03B/images/shared/buttons/remix_button.png?w=1650&fit=max&auto=format&n=0UCOQvZyQpUEM03B&q=85&s=7cb4952ca0f450271043a29d4d1465b2 1650w, https://mintcdn.com/replit/0UCOQvZyQpUEM03B/images/shared/buttons/remix_button.png?w=2500&fit=max&auto=format&n=0UCOQvZyQpUEM03B&q=85&s=17d60c5ebec7b3b331aacc582d20e49a 2500w" />
  </Step>

  <Step title="Complete the app details">
    In the **Remix App** dialog, select **Remix App** to continue. You can edit these details later.

    <Frame>
      <img src="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_remix_dialog.png?fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=7d2b6ac64b7bf6fb72a7372cb6f2352d" alt="image of the Remix App dialog" data-og-width="1026" width="1026" data-og-height="1002" height="1002" data-path="images/getting-started/quickstart_remix_dialog.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_remix_dialog.png?w=280&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=b8dbde047efe26339dfe1b249ae32de3 280w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_remix_dialog.png?w=560&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=dadfb2a6f406d4fda18581d6dc6f2249 560w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_remix_dialog.png?w=840&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=2a91a28641ca0a7621c10fe4ed84cae9 840w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_remix_dialog.png?w=1100&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=495470d92068519d42d1ccee4dacc531 1100w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_remix_dialog.png?w=1650&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=0dcc734dbaee39b04e8ac2cb8e694de2 1650w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_remix_dialog.png?w=2500&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=c7310a6150919852b3b87cba7448eabf 2500w" />
    </Frame>
  </Step>

  <Step title="Start the app">
    Select **Run** to start the app:

    <img src="https://mintcdn.com/replit/0UCOQvZyQpUEM03B/images/shared/buttons/run_button.png?fit=max&auto=format&n=0UCOQvZyQpUEM03B&q=85&s=0f045185e312ee3578d93ac2332755b8" width="100" alt="image of the Run button" data-og-width="132" data-og-height="64" data-path="images/shared/buttons/run_button.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/0UCOQvZyQpUEM03B/images/shared/buttons/run_button.png?w=280&fit=max&auto=format&n=0UCOQvZyQpUEM03B&q=85&s=6de173e07f31108d56332e6ea67507ce 280w, https://mintcdn.com/replit/0UCOQvZyQpUEM03B/images/shared/buttons/run_button.png?w=560&fit=max&auto=format&n=0UCOQvZyQpUEM03B&q=85&s=87a43869028b584412d448c76ee721c7 560w, https://mintcdn.com/replit/0UCOQvZyQpUEM03B/images/shared/buttons/run_button.png?w=840&fit=max&auto=format&n=0UCOQvZyQpUEM03B&q=85&s=fe3b88e5b8869d952a837f3944da5a1f 840w, https://mintcdn.com/replit/0UCOQvZyQpUEM03B/images/shared/buttons/run_button.png?w=1100&fit=max&auto=format&n=0UCOQvZyQpUEM03B&q=85&s=35bd09b90b96c4eceb27386982efcba8 1100w, https://mintcdn.com/replit/0UCOQvZyQpUEM03B/images/shared/buttons/run_button.png?w=1650&fit=max&auto=format&n=0UCOQvZyQpUEM03B&q=85&s=ba9f1126a352ecb46df0013279ecd9cc 1650w, https://mintcdn.com/replit/0UCOQvZyQpUEM03B/images/shared/buttons/run_button.png?w=2500&fit=max&auto=format&n=0UCOQvZyQpUEM03B&q=85&s=8d72cbe4b105fe39b5d4a33e067a7688 2500w" />

    Navigate to the **Preview** tab to confirm the app displays animated planets.

    <Frame>
      <img src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/solar_system_webview.webp?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=c5b7c2d86c9dd5025bedb952ad4879d1" alt="animated image of the Preview tab in the Solar System Visualization" data-og-width="800" width="800" data-og-height="450" height="450" data-path="images/getting-started/solar_system_webview.webp" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/solar_system_webview.webp?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=47b033cc057a921737961b490dd4d7db 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/solar_system_webview.webp?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=b825a1b6ebc08c3b8368224d229c932d 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/solar_system_webview.webp?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=2b3ed3b56a3cd8240e2e8810e3a5e07e 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/solar_system_webview.webp?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=c8f15f2a5b89d2fe06f030250408c492 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/solar_system_webview.webp?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=63f6a7703b683ab97ab42139d469cf7d 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/getting-started/solar_system_webview.webp?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=8ea3bb9747c28baeebe5395565353db4 2500w" />
    </Frame>
  </Step>

  <Step title="Interact with the app">
    You now have a fully functioning Remix that you can interact with and iteratively improve.

    To interact with the visualization, try the following controls in the **Preview** tab:

    * Drag to rotate the view
    * Scroll to zoom in and out
    * Click a planet to select it
    * Select **Planet info** while a planet is selected to view information about it
    * Select **Pause Rotation** or **Start Rotation** to toggle the animation

    Select Earth and then select **Planet Info** to read facts about it.
  </Step>
</Steps>

## Explore

Try the tasks in the following sections to learn how **Agent** and **Assistant**,
Replit's AI-powered tools can help you build your app.

Agent specializes in building projects from scratch and making complex changes to a Replit App.
Assistant specializes in smaller changes and describing the app's code.

<Note>
  Assistant and Agent, which rely on popular AI models, occasionally produce
  results that don't fulfill your request. If you encounter issues, follow up
  with a prompt that describes the error messages or the incorrect behavior.
  Alternatively, you can use the Rollback feature to restore your Replit App to
  a previously known working state.
</Note>

The following sections show examples of using them to enhance this Remix.

### Add a feature using Agent

<Tip>
  Agent is now available on all projects, including Remixes. Use [General Agent](/replitai/general-agent) to work with any framework or project type.
</Tip>

Follow these steps to add a complex feature to your Remix using Agent:

<Steps>
  <Step title="Craft a prompt">
    Navigate to the **Agent** tab.

    Enter the following prompt in the text area:

    ```text  theme={null}
    Add a button that toggles an autopilot flyby mode.
    ```

    After you submit the prompt, Agent might pause and ask for clarification or confirmation. Respond in the text area.
  </Step>

  <Step title="Test the feature">
    Navigate to the **Preview** tab to see Agent's updates to the visualization.

    Try toggling the added autopilot button.

    Since the initial prompt excluded information such as speed and position of the flyby, the result might not
    match your expectations.
  </Step>

  <Step title="Refine the feature">
    If the feature differs from your expectations, continue the conversation by entering the following prompt
    in the **Agent** text area:

    ```text  theme={null}
    Change the autopilot to slowly and continuously fly between planets.
    ```

    After Agent completes the feature, the **Preview** might resemble the following image:

    <Frame>
      <img src="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_remix_app_preview.png?fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=2b22cccdd1616aeec84b9ba52b0656a2" alt="image of the Remix button on the Replit App page" data-og-width="3732" width="3732" data-og-height="2100" height="2100" data-path="images/getting-started/quickstart_remix_app_preview.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_remix_app_preview.png?w=280&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=a9fcb3ca94edf00a32695a3d562d1689 280w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_remix_app_preview.png?w=560&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=5b6dd0ac9f05783d01e34b06174a86ef 560w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_remix_app_preview.png?w=840&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=8263df2809884cb319df978dff880ae9 840w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_remix_app_preview.png?w=1100&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=221280ae664ea6bd3eb777bc067a2a80 1100w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_remix_app_preview.png?w=1650&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=99119ebd6a053fe89c0dbe92eebcd5ab 1650w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_remix_app_preview.png?w=2500&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=bb9e56fbe9ab7b38bc83624507c1fd67 2500w" />
    </Frame>

    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](/replitai/checkpoints-and-rollbacks).
  </Step>
</Steps>

### Add a feature using Assistant

Follow these steps to add a quick enhancement to your Remix using Assistant:

<Steps>
  <Step title="Craft a prompt">
    Navigate to the **Assistant** tab and enter the following prompt:

    ```text  theme={null}
    Add a button that changes the planet orbit speeds to 0.5x, 1x, and 2x.
    ```

    After you submit the prompt, Assistant 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.

    After Assistant completes the feature, the **Preview** might resemble the following image:

    <Frame>
      <img src="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_remix_assistant_result.png?fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=54d2f6e5a2bd9d654898245a6ee9ba4a" alt="image of the solar system visualization with speed controls" data-og-width="932" width="932" data-og-height="645" height="645" data-path="images/getting-started/quickstart_remix_assistant_result.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_remix_assistant_result.png?w=280&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=f2412ad5f6910e265f6650d470f859d4 280w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_remix_assistant_result.png?w=560&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=94b6ae810c0eb2cf33131db674c4d9c5 560w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_remix_assistant_result.png?w=840&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=439fb5041217504e27012e997d681207 840w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_remix_assistant_result.png?w=1100&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=cfd56daf737804b1e2a43a0e5267a0d3 1100w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_remix_assistant_result.png?w=1650&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=68f08585bf51164d1a5af59f2d54d020 1650w, https://mintcdn.com/replit/h9U_mFqw8XzNXJwv/images/getting-started/quickstart_remix_assistant_result.png?w=2500&fit=max&auto=format&n=h9U_mFqw8XzNXJwv&q=85&s=1d92b70b96ae1fb84881e3375df34edb 2500w" />
    </Frame>

    To undo these changes, select **Undo these changes** in the **Assistant** tab.
  </Step>
</Steps>

## Continue your journey

Now that you've completed this tutorial, you're ready to explore more possibilities with your Replit App.
Try the following next steps to enhance your skills:

* Ask Agent to implement a new complex feature or to check the code for bugs.
* Ask Assistant to explain how the code works or to generate user instructions.
* View and edit the Replit App source code and configuration in the **Files** tab.
* Share your Replit App for others to remix. To learn more, see [Make your Replit App Public](/replit-app/collaborate#make-your-replit-app-public).


---

### Create a static blog with Astro
Source: [https://docs.replit.com/getting-started/quickstarts/static-blog-astro.md](https://docs.replit.com/getting-started/quickstarts/static-blog-astro.md)

# Create a static blog with Astro

> Build and publish a modern static blog using Astro on Replit. Learn how to use Static Deployments for fast, reliable content delivery.

Learn how to create a static blog using Astro's powerful features. This guide shows you how to publish a pre-configured blog template with Replit's static hosting.

## What you'll learn

<CardGroup cols={2}>
  <Card title="Static Sites" icon="globe">
    Build fast, modern static websites
  </Card>

  <Card title="Astro Framework" icon="rocket">
    Use Astro's powerful features
  </Card>

  <Card title="Content Management" icon="newspaper">
    Create and organize blog posts
  </Card>

  <Card title="Deployment" icon="cloud">
    Publish with static hosting
  </Card>
</CardGroup>

## Create your blog

<Steps>
  <Step title="Fork the template">
    Sign in to Replit and fork the [Astro starter kit template](https://replit.com/@replit-matt/Blog-with-Astro?v=1#README). Select **+ Use Template** and follow the prompts to create your Replit App.

    <Tip>
      Review the README file in the template for details about the project structure.
    </Tip>
  </Step>

  <Step title="Configure your blog">
    The template includes:

    * Pre-configured blog layout
    * Markdown support
    * Responsive design
    * SEO optimization
  </Step>

  <Step title="Publish your site">
    1. Select **Publish** in the workspace header
    2. Choose **Static** deployment
    3. Keep the default publishing values
    4. Select **Publish**

    <Note>
      Static deployments are optimized for content-focused sites like blogs.
    </Note>
  </Step>
</Steps>

## Customization options

<CardGroup cols={2}>
  <Card title="Content">
    * Add blog posts - Create new pages - Customize layouts
  </Card>

  <Card title="Styling">
    * Modify themes - Add components - Update typography
  </Card>
</CardGroup>

## Next steps

<CardGroup cols={3}>
  <Card title="Custom Domain" icon="globe" href="/cloud-services/deployments/custom-domains">
    Add your own domain
  </Card>

  <Card title="Publishing" icon="cloud" href="/cloud-services/deployments/static-deployments">
    Learn about static hosting
  </Card>

  <Card title="Developer Frameworks" icon="puzzle-piece" href="/replit-workspace/templates">
    Explore more developer frameworks
  </Card>
</CardGroup>

## Related guides

<CardGroup cols={2}>
  <Card title="Build with AI" icon="wand-magic-sparkles" href="/getting-started/quickstarts/build-with-ai">
    Create apps using Agent and Assistant
  </Card>

  <Card title="Create a file converter" icon="file-arrow-up" href="/getting-started/quickstarts/build-with-ai">
    Build a file conversion app
  </Card>
</CardGroup>

<Note>
  Want to learn more about web development? Check out our [web hosting documentation](/category/replit-deployments).
</Note>


---

### Create a HackerNews Slack bot
Source: [https://docs.replit.com/getting-started/quickstarts/webscrape-and-slack-notifications.md](https://docs.replit.com/getting-started/quickstarts/webscrape-and-slack-notifications.md)

# Create a HackerNews Slack bot

> Build a bot that scrapes HackerNews and sends updates to Slack. Learn how to use Scheduled Deployments and integrate with external services.

Learn how to create a bot that monitors HackerNews and sends notifications to Slack. This guide shows you how to use Scheduled Deployments and external APIs.

## What you'll learn

<CardGroup cols={2}>
  <Card title="Web Scraping" icon="spider-web">
    Fetch data from HackerNews
  </Card>

  <Card title="Slack Integration" icon="slack">
    Send notifications to Slack channels
  </Card>

  <Card title="Scheduling" icon="clock">
    Configure automated publishing
  </Card>

  <Card title="API Usage" icon="code">
    Work with external services
  </Card>
</CardGroup>

## Create your bot

<Steps>
  <Step title="Fork the template">
    Sign in to Replit and fork the [HackerNews webscraper template](https://replit.com/@replit-matt/Hacker-News-Alert-Slackbot?v=1#app.py). Select **+ Use Template** and follow the prompts to create your Replit App.
  </Step>

  <Step title="Create a Slack app">
    1. Go to [Slack Apps](https://api.slack.com/apps) and select **Create an App**
    2. Choose **From an app manifest**
    3. Select your workspace

    4) Replace the manifest with [this JSON](https://replit.com/@replit-matt/Hacker-News-Alert-Slackbot?v=1#manifest.json)

    (/\* vale on \*/}

    5. Review and select **Create**
    6. Select **Install the App**

    <Note>
      You may need administrator approval based on your organization's policies.
    </Note>
  </Step>

  <Step title="Configure tokens">
    Add these secrets to your Replit App's **Secrets** tab:

    1. **SLACK\_BOT\_TOKEN**

       * Go to Settings > Install App
       * Copy the **Bot User OAuth Token**

    2. **SLACK\_SIGNING\_SECRET**

       * Go to Settings > Basic Information
       * Copy the **Signing Secret** from App Credentials

    3. **SLACK\_APP\_TOKEN**
       * Go to Settings > Basic Information
       * Under App-Level Tokens, select **Generate Token and Scopes**
       * Add permissions and generate token
  </Step>

  <Step title="Customize your bot">
    Update `app.py` with your preferences:

    ```python  theme={null}
    KEYWORDS = ["h"]  # Terms to search for
    ALERT_UIDS = ["U06C34217C5"]  # Your Slack member ID
    NUM_TOP_STORIES = 25  # Number of stories to check
    ```

    <Tip>
      Get your Slack member ID from your profile settings under the ellipsis menu.
    </Tip>
  </Step>
</Steps>

## Publish with scheduling

<Steps>
  <Step title="Start publishing">
    Select **Publish** in the workspace header.
  </Step>

  <Step title="Configure schedule">
    1. Choose [Scheduled
       Deployments](/cloud-services/deployments/scheduled-deployments) 2. Set your
       preferred schedule 3. Select **Publish**
  </Step>

  <Step title="Monitor">
    Your bot will now run automatically according to your schedule.
  </Step>
</Steps>

## Customization options

<CardGroup cols={2}>
  <Card title="Enhance filtering">
    * Add more keywords - Refine matching criteria - Customize scoring
  </Card>

  <Card title="Improve notifications">
    * Format messages - Add rich previews - Include metadata
  </Card>
</CardGroup>

## Next steps

<CardGroup cols={3}>
  <Card title="AI Integration" icon="robot" href="/getting-started/quickstarts/ai-slack-channel-summarizer">
    Add AI summaries to notifications
  </Card>

  <Card title="Deployments" icon="cloud" href="/cloud-services/deployments/scheduled-deployments">
    Learn more about scheduling
  </Card>

  <Card title="Databases" icon="database" href="/cloud-services/storage-and-databases/sql-database/">
    Store historical data
  </Card>
</CardGroup>

## Related guides

<CardGroup cols={2}>
  <Card title="Create a Slack summarizer" icon="slack" href="/getting-started/quickstarts/ai-slack-channel-summarizer">
    Build a bot that summarizes Slack channels
  </Card>

  <Card title="Build with AI" icon="wand-magic-sparkles" href="/getting-started/quickstarts/build-with-ai">
    Create apps using Agent and Assistant
  </Card>
</CardGroup>

<Note>
  Want to learn more about publishing? Check out our [publishing documentation](/category/replit-deployments).
</Note>


---

## Tutorials

### Advanced AI features
Source: [https://docs.replit.com/tutorials/advanced-ai-features.md](https://docs.replit.com/tutorials/advanced-ai-features.md)

# Advanced AI features

> Learn when and how to use Dynamic Intelligence (Extended Thinking and High Power) and Web Search to maximize Agent's capabilities for complex builds and accessing current information.

export const AuthorCard = ({img = "https://replit.com/cdn-cgi/image/width=256,quality=80,format=auto/https://storage.googleapis.com/replit/images/1730840970400_e885f16578bbbb227adbfeb7b979be34.jpeg", href = "https://youtube.com/@mattpalmer", name = "Matt Palmer", role = "Head of Developer Relations"}) => {
  return <a href={href} target="_blank" className="card block not-prose font-normal group relative my-2 ring-2 ring-transparent rounded-xl bg-white/50 dark:bg-codeblock/50 border border-gray-100 shadow-md dark:shadow-none shadow-gray-300/10 dark:border-gray-800/50 overflow-hidden cursor-pointer hover:!border-primary dark:hover:!border-primary-light">
      <div className="flex items-center gap-2 p-4">
        <div className="flex-shrink-0">
          <img src={img} alt={name} className="w-12 h-12 rounded-full object-cover" />
        </div>
        <div className="flex-grow">
          <h3 className="text-base font-semibold mb-0.5 text-inherit">{name}</h3>
          <p className="text-sm text-gray-600 dark:text-gray-400 m-0">{role}</p>
        </div>
      </div>
    </a>;
};

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block font-sans whitespace-pre-wrap break-words">
      <div className="pr-7">
        {children}
      </div>
    </CodeBlock>;
};

export const HighPowerCostMultiple = '5x';

export const ExtendedThinkingCostMultiple = '1.25x';

export const AdvancedModelOutputPrice = '$75';

export const AdvancedModelInputPrice = '$15';

export const AgentCheckpointCost = '$0.25';

<AuthorCard />

Agent has three advanced features that can significantly improve your development workflow: Extended Thinking, High Power mode, and Web Search. These features work together as part of Dynamic Intelligence to help you tackle complex builds with better results.

Here's how to use them strategically while managing costs.

<Frame>
  <img src="https://mintcdn.com/replit/0UCOQvZyQpUEM03B/images/replitai/extended-thinking.png?fit=max&auto=format&n=0UCOQvZyQpUEM03B&q=85&s=396fb9c516daea6bdcaa6eeb8cca9e45" alt="Agent performing web search to gather current information for app development" data-og-width="1600" width="1600" data-og-height="1150" height="1150" data-path="images/replitai/extended-thinking.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/0UCOQvZyQpUEM03B/images/replitai/extended-thinking.png?w=280&fit=max&auto=format&n=0UCOQvZyQpUEM03B&q=85&s=bc0e2ba7fa73fc489b4f3e017febf3cf 280w, https://mintcdn.com/replit/0UCOQvZyQpUEM03B/images/replitai/extended-thinking.png?w=560&fit=max&auto=format&n=0UCOQvZyQpUEM03B&q=85&s=90dacac3c67e909f155b1854b3748eec 560w, https://mintcdn.com/replit/0UCOQvZyQpUEM03B/images/replitai/extended-thinking.png?w=840&fit=max&auto=format&n=0UCOQvZyQpUEM03B&q=85&s=d9e1d194beadd5aaa20a36af8abe1ee9 840w, https://mintcdn.com/replit/0UCOQvZyQpUEM03B/images/replitai/extended-thinking.png?w=1100&fit=max&auto=format&n=0UCOQvZyQpUEM03B&q=85&s=ddb25696bf4f4341df0982487c8b1b5c 1100w, https://mintcdn.com/replit/0UCOQvZyQpUEM03B/images/replitai/extended-thinking.png?w=1650&fit=max&auto=format&n=0UCOQvZyQpUEM03B&q=85&s=360743b657337616a5964fe6370e5b75 1650w, https://mintcdn.com/replit/0UCOQvZyQpUEM03B/images/replitai/extended-thinking.png?w=2500&fit=max&auto=format&n=0UCOQvZyQpUEM03B&q=85&s=3ca46029e9ba0bc6c18e60d88f0d0c1f 2500w" />
</Frame>

## What each feature does

**Dynamic Intelligence** enhances Agent's reasoning in two ways:

* **Extended Thinking** - Agent analyzes your request more thoroughly before coding
* **High Power mode** - Upgrades Agent to our most advanced AI model for maximum capability

**Web Search** lets Agent access current information from the internet, overcoming knowledge cutoffs.

## When to use what

| Feature               | Perfect for                                                  | Skip for                        | Cost                                    |
| :-------------------- | :----------------------------------------------------------- | :------------------------------ | :-------------------------------------- |
| **Extended Thinking** | Complex architecture, unfamiliar APIs, edge cases            | Simple bug fixes, style changes | {ExtendedThinkingCostMultiple} the cost |
| **High Power mode**   | Large codebases, critical business logic, complex algorithms | Basic features, quick fixes     | {HighPowerCostMultiple} the cost        |
| **Web Search**        | Latest packages, current docs, real-time data                | Well-known tech, static content | Standard pricing                        |

## Extended Thinking

Extended Thinking makes Agent pause and think through your request before jumping into code. It's great when you need Agent to consider multiple approaches or handle complex requirements.

**Try it for:**

* Planning app architecture and database design
* Implementing authentication or payment systems
* Building features with lots of edge cases
* Working with APIs you haven't used before

**Example:**

<AiPrompt>
  Build a web app with user login, a dashboard, and basic user management. Plan how to structure the code for easy maintenance and think about the best data structure for scalability.
</AiPrompt>

**Skip it for simple requests:**

<AiPrompt>
  Change the button color from blue to green.
</AiPrompt>

## High Power mode

High Power upgrades Agent to our most advanced AI model. It costs about 5× more but handles complex tasks that standard Agent might struggle with.

**Reserve it for:**

* Analyzing large codebases (500+ files)
* Building complex recommendation engines
* Financial or healthcare apps requiring high accuracy
* Advanced data processing pipelines

The extra cost is usually worth it when precision matters more than speed.

## Web Search

Web Search lets Agent research current information while helping you build. It's particularly valuable for discovering the latest tools and best practices.

**Use it when you need:**

* The newest React animation libraries
* Current API documentation
* Latest security best practices
* Real-time market data for your app

**Example:**

<AiPrompt>
  Research the best animation libraries for smooth transitions. Implement the most practical one into my application.
</AiPrompt>

## Combining features

The real power comes from using these features together. For complex projects, try combining all three:

<AiPrompt>
  Help me build an app that pixelates images and allows exporting them to vector graphics. Do research on the best libraries for image canvas manipulation, vectorization, and exporting. Create the app in a scalable, maintainable way.
</AiPrompt>

*Enable: Extended Thinking + High Power + Web Search*

This gives you:

1. **Web Search** finds the best current libraries
2. **Extended Thinking** plans solid architecture
3. **High Power** ensures accurate implementation

## Smart cost management

* **Plan first**: Agent's initial planning is free, so review the approach before implementing
* **Be selective**: Use Web Search for research, Extended Thinking for complexity, High Power for critical tasks
* **Test and learn**: Try different combinations to see what works for your workflow
* **Monitor value**: Compare results with and without features

## Common scenarios

**Building an MVP?**
Web Search + Extended Thinking gives you current best practices with solid architecture.

**Modernizing legacy code?**\
High Power + Extended Thinking can analyze large codebases and plan migrations effectively.

**Learning new tech?**
Web Search finds current tutorials while Extended Thinking helps you understand concepts.

**Mission-critical system?**
Use all three features for research, analysis, and maximum accuracy.

## Getting started

1. **Pick a moderately complex task** in your current project
2. **Enable Extended Thinking** and see how the analysis differs
3. **Try High Power** on something that stumped standard Agent
4. **Use Web Search** when you need current information
5. **Experiment with combinations** as you get comfortable

Start small, measure the value, and gradually use these features for your most challenging builds.

## Learn more

* [Dynamic Intelligence](/replitai/dynamic-intelligence) - Complete guide to Extended Thinking and High Power
* [Web Search](/replitai/web-search) - Full documentation on Web Search capabilities
* [Agent billing](/billing/ai-billing#agent-billing) - Pricing and cost management


---

### Build a Notion-powered website
Source: [https://docs.replit.com/tutorials/build-a-notion-powered-website.md](https://docs.replit.com/tutorials/build-a-notion-powered-website.md)

# Build a Notion-powered website

> Learn how to build a website that uses Notion as a Content Management System (CMS) with Replit Agent.

export const YouTubeEmbed = ({videoId, title = "YouTube video", startAt}) => {
  if (!videoId) {
    return null;
  }
  let url = "https://www.youtube.com/embed/" + videoId;
  if (startAt) {
    url = url + "?start=" + startAt;
  }
  return <Frame>
      <iframe src={url} title={title} allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen></iframe>
    </Frame>;
};

export const AuthorCard = ({img = "https://replit.com/cdn-cgi/image/width=256,quality=80,format=auto/https://storage.googleapis.com/replit/images/1730840970400_e885f16578bbbb227adbfeb7b979be34.jpeg", href = "https://youtube.com/@mattpalmer", name = "Matt Palmer", role = "Head of Developer Relations"}) => {
  return <a href={href} target="_blank" className="card block not-prose font-normal group relative my-2 ring-2 ring-transparent rounded-xl bg-white/50 dark:bg-codeblock/50 border border-gray-100 shadow-md dark:shadow-none shadow-gray-300/10 dark:border-gray-800/50 overflow-hidden cursor-pointer hover:!border-primary dark:hover:!border-primary-light">
      <div className="flex items-center gap-2 p-4">
        <div className="flex-shrink-0">
          <img src={img} alt={name} className="w-12 h-12 rounded-full object-cover" />
        </div>
        <div className="flex-grow">
          <h3 className="text-base font-semibold mb-0.5 text-inherit">{name}</h3>
          <p className="text-sm text-gray-600 dark:text-gray-400 m-0">{role}</p>
        </div>
      </div>
    </a>;
};

<AuthorCard />

## 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](/replitai/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).

<YouTubeEmbed videoId="AOYqTONf07o" />

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 caption="Final result: A minimalistic blog powered by Notion">
  <img src="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/final-app.png?fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=8189975b31f2c1c47e9e8577df926bd6" alt="Screenshot of the final Notion-powered blog application with minimalist design" data-og-width="3840" width="3840" data-og-height="2160" height="2160" data-path="images/tutorials/notion-cms/final-app.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/final-app.png?w=280&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=4a1d5fab430a210cca18b284813c447a 280w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/final-app.png?w=560&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=b08d3bb340b624c1408d545797dbda29 560w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/final-app.png?w=840&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=f2b1c96fb54ce94d256ba433224fd0be 840w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/final-app.png?w=1100&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=1576aade2b7a9f524bd0423af7491378 1100w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/final-app.png?w=1650&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=d4984c2b9b145af5e09aa83a76201732 1650w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/final-app.png?w=2500&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=a2d9dcbfe9c7957f5ec7e82fb688c971 2500w" />
</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](/replitai/agent).

## Step 1: Prepare your Notion database

Before prompting Agent, set up your content source in Notion. This involves thinking procedurally about what your blog needs, similar to planning a product.

<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 caption="Creating a new integration in Notion">
      <img src="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/new-integration-1.png?fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=36613d11085fa2589511be942ce03218" alt="Notion developer portal showing the New integration button" data-og-width="3794" width="3794" data-og-height="2168" height="2168" data-path="images/tutorials/notion-cms/new-integration-1.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/new-integration-1.png?w=280&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=81feec38d907347646b618ff3b0c08a1 280w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/new-integration-1.png?w=560&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=c53b0d36ec01bfa80d3fed53d8f09b7f 560w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/new-integration-1.png?w=840&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=d3343419910c313189c1a901ec13fbdb 840w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/new-integration-1.png?w=1100&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=bfea367a0c3841be7281a378263d4215 1100w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/new-integration-1.png?w=1650&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=ff9ec4fd764606038549ad76406f31b2 1650w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/new-integration-1.png?w=2500&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=f32d227d920dd933637a376e7ac883c1 2500w" />
    </Frame>

    5. Name your integration (e.g., "My Replit Blog Integration").
    6. Associate it with your desired workspace.

    <Frame caption="Configuring your Notion integration">
      <img src="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/new-integration-2.png?fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=649a346838203ef40f1293f69125916f" alt="Notion integration configuration screen with name and workspace selection" data-og-width="3796" width="3796" data-og-height="2168" height="2168" data-path="images/tutorials/notion-cms/new-integration-2.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/new-integration-2.png?w=280&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=cf5926f205c068ea4620fab22fc61b33 280w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/new-integration-2.png?w=560&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=6d1998ee508320b3367c7f017b82b385 560w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/new-integration-2.png?w=840&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=c5dcb4b683b357eb2445fe55c9b245f0 840w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/new-integration-2.png?w=1100&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=723236fdf036b128c64034dbdf4c4f85 1100w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/new-integration-2.png?w=1650&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=bb10e9c53dc7cd643ae7f984518fd687 1650w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/new-integration-2.png?w=2500&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=9e3bc12f8676abd057b0e5db679b8b21 2500w" />
    </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 caption="Obtaining your Integration Secret">
      <img src="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/new-integration-3.png?fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=22cb64a8c057b70293b955b0edcdb55d" alt="Notion integration secrets page showing the integration token" data-og-width="3796" width="3796" data-og-height="2168" height="2168" data-path="images/tutorials/notion-cms/new-integration-3.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/new-integration-3.png?w=280&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=72527c744a43e91967a81acc134e9efe 280w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/new-integration-3.png?w=560&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=8fef1d4482a0e7e8c67de1ead99bb498 560w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/new-integration-3.png?w=840&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=91c9276980d428afef4f6e49c136529a 840w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/new-integration-3.png?w=1100&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=69cb7fd38c3bec14b16d3e4ae928543e 1100w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/new-integration-3.png?w=1650&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=b7779aa0cfdadb237ba2378050312a23 1650w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/new-integration-3.png?w=2500&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=5a9b8ff8c36bc5fa6dca43edb3593962 2500w" />
    </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 caption="Example Notion database setup for blog posts">
      <img src="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/blog-posts.png?fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=18b381c19ccdddc74a2c67a523400d60" alt="Notion database configured with columns for blog posts" data-og-width="3840" width="3840" data-og-height="2160" height="2160" data-path="images/tutorials/notion-cms/blog-posts.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/blog-posts.png?w=280&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=15eedb79bc692f87683fb548b4e112d7 280w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/blog-posts.png?w=560&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=39d59dec94fcfe4a68ed5e08b0190335 560w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/blog-posts.png?w=840&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=b7a9a4fa92b23571d30c6af423ab487f 840w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/blog-posts.png?w=1100&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=5c474b2739f43e1e1b870d8eaab7fabe 1100w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/blog-posts.png?w=1650&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=7882d16ad8630a009f5cfd2fa29ef717 1650w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/blog-posts.png?w=2500&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=c22f7f3fce25c0169110b5c59f5a0b52 2500w" />
    </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 caption="Access the integration menu in Notion">
      <img src="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/add-integration.png?fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=20d1052e1ec46366a2727cce6bcf0c50" alt="Notion connections menu showing how to add your integration to the page" data-og-width="3840" width="3840" data-og-height="2160" height="2160" data-path="images/tutorials/notion-cms/add-integration.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/add-integration.png?w=280&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=6b6ecd6f718989b71b247d06f7d28deb 280w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/add-integration.png?w=560&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=d777146a4cbc6b3361f81fdedb9232f5 560w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/add-integration.png?w=840&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=417244e225be5cfb1482e80279bbd50a 840w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/add-integration.png?w=1100&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=499b8f6c584c1a635a9821a4f148208b 1100w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/add-integration.png?w=1650&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=cb2e8617bdb29d48858b83a1f1b81c65 1650w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/add-integration.png?w=2500&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=6771d45d50ddabee26b92d3fd6f8dcbd 2500w" />
    </Frame>

    3. Select **+ Add connections**.
    4. Search for and select the integration you created (e.g., "My Replit Blog Integration").

    <Frame caption="Adding your integration to the Notion page">
      <img src="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/add-integration-menu.png?fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=f3c0325b2e9e8de79b8b7b126974b636" alt="Notion page showing the three dots menu to add integrations" data-og-width="3840" width="3840" data-og-height="2160" height="2160" data-path="images/tutorials/notion-cms/add-integration-menu.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/add-integration-menu.png?w=280&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=1842e5114825b3d8122e917bb4c86d6d 280w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/add-integration-menu.png?w=560&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=3febebd4eed713135de0c7fabe9c3af0 560w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/add-integration-menu.png?w=840&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=80da050fbbb7a6d4053f754267e56423 840w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/add-integration-menu.png?w=1100&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=9f1037113c72da931b4144980bb4a377 1100w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/add-integration-menu.png?w=1650&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=290696b8009e1c9fa0ece26b371a85b3 1650w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/add-integration-menu.png?w=2500&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=1f971324bc7c8aaf9ddfef1bfa1025c1 2500w" />
    </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 caption="Adding your Notion secrets to Replit">
      <img src="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/add-secrets.png?fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=d96b903522fbf7e189c77d3c1901352e" alt="Replit Secrets tool with Notion API key and Database ID added" data-og-width="3840" width="3840" data-og-height="2160" height="2160" data-path="images/tutorials/notion-cms/add-secrets.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/add-secrets.png?w=280&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=38bed2d393b7af8798f04f5673b1f1fd 280w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/add-secrets.png?w=560&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=8429940773b23673eb3eca774b4326de 560w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/add-secrets.png?w=840&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=67c13ee1b8487c82cbdb519c7dcaaea3 840w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/add-secrets.png?w=1100&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=e32d921c6d87c3f5d50e61ae2f729e3d 1100w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/add-secrets.png?w=1650&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=dd586dce1d6e3ef089e6d34a28ec4baa 1650w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/add-secrets.png?w=2500&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=76482c549e2d36d986f63c198f1d30a5 2500w" />
    </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 caption="Debugging your Notion app using the Replit Console">
  <img src="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/console-debug.png?fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=7cc562bec25b26e5302b74793f002c00" alt="Replit Console showing error messages while debugging the Notion integration" data-og-width="3840" width="3840" data-og-height="2160" height="2160" data-path="images/tutorials/notion-cms/console-debug.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/console-debug.png?w=280&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=e6399abbb7c6c41023513d08a89e6fd0 280w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/console-debug.png?w=560&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=4ad41a570d3ccef91c7c9b380448dc83 560w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/console-debug.png?w=840&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=8ac0665c3d46ede6b4202767461420a1 840w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/console-debug.png?w=1100&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=e1c8668e8b2123ddcb54b8985f4e8f91 1100w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/console-debug.png?w=1650&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=5ab861d7d1ada3c00ae6ab69d7435597 1650w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/console-debug.png?w=2500&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=f2e0aab2d0a1714947757060644317cc 2500w" />
</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 caption="Publishing your Notion-powered website">
  <img src="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/deploy.png?fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=3f5a9b1b5946fc3461fc8e93f29dcac9" alt="Replit publishing interface showing how to publish your Notion-powered website" data-og-width="3840" width="3840" data-og-height="2160" height="2160" data-path="images/tutorials/notion-cms/deploy.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/deploy.png?w=280&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=2da4307be0e126b9b9b3328aee7bb7fa 280w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/deploy.png?w=560&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=ae31ea8f23b5d4fb416b0c08dbf9e06a 560w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/deploy.png?w=840&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=19bb17274ef2769e0bf171fcf393fa60 840w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/deploy.png?w=1100&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=d8d393879026cfcabeadfe5d233c6f3a 1100w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/deploy.png?w=1650&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=852b74fb110a9b2d2cefacb4dc6079aa 1650w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/notion-cms/deploy.png?w=2500&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=be9341bf862c08ed7ae070b88a231986 2500w" />
</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](/replitai/checkpoints-and-rollbacks).

Building with AI like Replit Agent is collaborative. Procedural thinking, clear instructions, and methodical debugging are crucial for turning ideas into reality, fast.

## Next steps

Continue developing your Notion-powered website:

<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](/category/replit-ai) 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.


---

### Publish a Grok 3 app on Replit in 5 minutes
Source: [https://docs.replit.com/tutorials/create-apps-with-grok-3.md](https://docs.replit.com/tutorials/create-apps-with-grok-3.md)

# Publish a Grok 3 app on Replit in 5 minutes

> Learn how to use Grok