External Services Configuration Guide

This guide walks you through configuring external services in Sketchflow.ai.

Follow the guide to generate ready-to-use integrations for external services. Simply provide the required configuration values to connect your application to third-party services.

Describe the External Service You Want to Connect

In Sketchflow.ai's Code Workspace, you can modify your requirements in the input box. There are two ways to provide your requirements to AI.

1. Describe the external services and the functionalities in natural language

Just input what you want to integrate (Stripe/Google Maps/Resend) and what functionality you want the integration to support (payments/directions/email services) to the input box.

For more advanced use cases, you can also describe the integrations/services in detail, such as mock data or services, specific service providers you have purchased, deployment regions and other settings.

It all depends on your needs and Sketchflow prioritizes your requirements when generating the integration.

2. Upload the integration document or any attachment

For some external services with standardized integration documentation, upload the relevant documentations (in PDF, Word, images, TXT and Excel files) to support your integration requirements.

Add a brief description to help the AI understand the documentation for connecting external services more accurately.

Find the Required Credentials to Configure

Sketchflow generates ready-to-use integrations with variable placeholders when receiving the requirements. To fill in the variable placeholders, complete the configuration, you'll need to find the required credentials first.

Search the official documentation to learn how to create and manage your service credentials. You can also refer to our curated setup guides for common service integrations below.

Easy-to-follow Guide

In the following guides, you'll learn how to use prompts to generate integrations for common third-party services and obtain the corresponding environment variables required for configuration.

For AWS S3

Example use case: Integrate Amazon S3 to store user-generated files, such as images, documents, and videos.

Example prompt:

Integrate Amazon S3 into my application to store user-uploaded files.

Users should be able to upload, preview, download, and delete images and documents. Store all uploaded files securely in an Amazon S3 bucket and save the file URLs in the database.

Generate the complete frontend upload interface, backend APIs, file storage integration, and environment variable configuration.

Find how to configure environment variables for AWS S3:

How to Configure Environment Variables for AWS S3

For Auth0

Example use case: Add secure user authentication to your application using Auth0. Allow users to sign up, sign in, reset their passwords and log in.

Example prompt:

Integrate Auth0 into my application to manage user authentication.

Allow users to sign up with email and password, sign in securely, reset their passwords, and log in using Google or Apple accounts. Protect authenticated pages and maintain user sessions across the application.

Generate the complete authentication flow, frontend login and registration screens, backend authentication logic, and environment variable configuration.

Find how to configure environment variables for Auth0 service:

How to Configure Environment Variables for Auth0 Service

For Stripe API

Example use case: Add online payments to your application using Stripe. Allow users to purchase subscriptions, and complete secure checkout.

Example prompt:

Integrate Stripe into my application to enable online subscription payments.

Allow users to subscribe to a Premium plan through Stripe Checkout. After a successful payment, automatically update the user's subscription status, unlock premium features, and keep a record of payment history.

Generate the complete frontend payment flow, backend payment APIs, Stripe webhook handling, subscription management, and environment variable configuration.

Find how to configure environment variables for Stripe API:

How to Configure Environment Variables for Stripe API

For Google OAuth

Example use case: Add Google Sign-In to your application, allowing users to securely sign in with their Google accounts without creating a separate password.

Example prompt:

Integrate Google OAuth into my application to enable Google Sign-In.

Allow users to sign in securely using their Google accounts. If it's their first time signing in, automatically create a new user profile and save their basic information, including their name, email address, and profile picture. Maintain user sessions and protect authenticated pages.

Generate the complete authentication flow, frontend login interface, backend OAuth integration, user profile management, and environment variable configuration.

Find how to configure environment variables for Google OAuth:

How to Configure Environment Variables for Google OAuth

For SMTP Email Service

Example use case: Enable email delivery in your application using Outlook SMTP. Automatically send verification emails, password reset emails, and account notifications to users.

Example prompt:

Use Outlook SMTP as the email service for my application.

Send verification emails when users register, password reset emails when requested, and email notifications for important account activities. Use a branded sender name and email address for all outgoing messages.

Generate the complete email integration, backend email service, email templates, and environment variable configuration.

Find how to configure SMTP Email Service:

How to Configure SMTP Email Service

Fill In the Placeholders of Environment Variables

In Sketchflow Code Workspace, click 'Environment variables', to review all the generated configuration settings and environment variables corresponding to your application.

If any generated configuration variables are unnecessary, redundant, or need to be updated for a different service provider or configuration, simply instruct the AI Assistant in the Code Workspace to regenerate the required variables and update the corresponding code automatically.

If everything is on your expectations, fill in the generated environment variables to finish configuration.

Click [Submit and start test] to run an API connectivity test. Verify API connectivity, data processing, and backend logic, helping ensure your application works reliably before going live.