diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..83368a8
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+images/.DS_Store
+.DS_store
\ No newline at end of file
diff --git a/Screenshot2025-02-03at12.44.21PM.png b/Screenshot2025-02-03at12.44.21PM.png
new file mode 100644
index 0000000..4daa973
Binary files /dev/null and b/Screenshot2025-02-03at12.44.21PM.png differ
diff --git a/Screenshot2025-02-03at12.47.42PM.png b/Screenshot2025-02-03at12.47.42PM.png
new file mode 100644
index 0000000..f290543
Binary files /dev/null and b/Screenshot2025-02-03at12.47.42PM.png differ
diff --git a/Screenshot2025-02-03at12.50.50PM.png b/Screenshot2025-02-03at12.50.50PM.png
new file mode 100644
index 0000000..1456ca4
Binary files /dev/null and b/Screenshot2025-02-03at12.50.50PM.png differ
diff --git a/Screenshot2025-02-03at12.52.30PM.png b/Screenshot2025-02-03at12.52.30PM.png
new file mode 100644
index 0000000..ba6f78c
Binary files /dev/null and b/Screenshot2025-02-03at12.52.30PM.png differ
diff --git a/Screenshot2025-02-11at1.14.17PM.png b/Screenshot2025-02-11at1.14.17PM.png
new file mode 100644
index 0000000..940d1e2
Binary files /dev/null and b/Screenshot2025-02-11at1.14.17PM.png differ
diff --git a/account/subscriptions.mdx b/account/subscriptions.mdx
index 522c3b7..243f449 100644
--- a/account/subscriptions.mdx
+++ b/account/subscriptions.mdx
@@ -49,8 +49,13 @@ You can view and upgrade your subscription at [create.xyz/pricing](https://creat
To manage your subscription:
1. Click your profile icon in the bottom left corner of the dashboard
-2. Select "Manage Subscription"
+2. Select "[Manage Subscription](https://pay.create.xyz/p/login/5kA6oDbVS22c2jedQQ)"
3. From here you can:
- Upgrade your plan
- Downgrade your plan
- Cancel your subscription
+
+
+## Invoices, Receipts, and Billing History
+
+You can access your invoices, receipts, and billing history through Create's [billing portal](https://pay.create.xyz/p/login/5kA6oDbVS22c2jedQQ) in Stripe.
\ No newline at end of file
diff --git a/auth/facebook.mdx b/auth/facebook.mdx
new file mode 100644
index 0000000..da49764
--- /dev/null
+++ b/auth/facebook.mdx
@@ -0,0 +1,270 @@
+---
+title: "Facebook Login"
+description: "Let users login to your app with their Facebook accounts"
+---
+
+Let users sign in to your app with their Facebook accounts. They'll share their email, name, and profile picture.
+
+You'll need to set up a few things in Facebook first, then add those settings to Create.
+
+## Before You Start
+
+Make sure you have:
+
+
+ A Create project with [User Accounts](/builder/user-accounts) turned on
+
+
+
+ Your app running on a custom domain through [Create's domain setup](/publish-and-share/custom-domains)
+
+
+## Overview
+
+
+
+ Create an app in Facebook
+
+
+ Add your Facebook App ID and Secret to Create
+
+
+ Make the login button look how you want
+
+
+ Make sure login works
+
+
+
+## Facebook Setup
+
+
+
+ 1. Go to [Facebook for Developers](https://developers.facebook.com)
+ 2. Sign in with your Facebook account
+ 3. Click "My Apps" in the top right
+
+
+
+
+ 1. Click "Create App" from the dashboard
+ 2. You'll be taken to the app creation screen
+
+
+
+
+ 1. Enter your app name
+ 2. Add your contact email
+ 3. Click "Create App"
+
+
+ Choose an app name that clearly represents your business or service - this will be visible to users
+
+
+
+
+ 1. On the product selection screen
+ 2. Find and select "Facebook Login"
+ 3. This will add the login capability to your app
+
+
+
+
+ 1. Choose whether to add your app to a business portfolio
+ 2. You can skip this step for now during development
+ 3. You'll need to complete this before launching
+
+
+
+
+ 1. Click "Go to Dashboard" to finalize the initial setup
+ 2. This will take you to your app's main dashboard
+
+
+
+
+ 1. Navigate to App Settings > Permissions
+ 2. Add the email permission if you want to receive user email addresses
+ 3. This is optional but recommended if your app needs to email users
+
+
+
+
+ 1. In the left sidebar, click "Facebook Login > Settings"
+ 2. This is where you'll configure the OAuth settings
+
+
+
+
+ 1. Under "Valid OAuth Redirect URIs"
+ 2. Add: `https://www.your-domain.com/api/auth/callback/facebook`
+ 3. Replace "your-domain.com" with your actual domain
+
+
+ Must include:
+ - `https://` protocol
+ - `www` prefix in the domain
+ - Exact domain used in Create's custom domain settings
+ - Valid CNAME record for `www` subdomain in DNS
+
+
+
+
+ 1. Scroll to the bottom of the settings page
+ 2. Click "Save Changes" to store your OAuth configuration
+
+
+
+
+ 1. Navigate to Settings > Basic in the left sidebar
+ 2. This section contains your app credentials and core settings
+
+
+
+
+ 1. Find your App ID
+ 2. Click "Show" to reveal your App Secret
+ 3. Save both values - you'll need them for Create setup
+
+
+ Keep your App Secret secure - never share it publicly
+
+
+
+
+
+ Before launching, you'll need to complete these additional settings:
+
+ 1. Add your domain with `www` prefix
+ 2. Add Privacy Policy URL
+ 3. Add User Data Deletion Policy URL
+ 4. Add Terms of Service URL
+
+
+ You can use services like Termly to generate these required policy documents and then host them on pages in your Create app.
+
+
+
+
+
+ Required before launching your app:
+
+ 1. Complete the business verification process
+ 2. Provide required documentation
+ 3. Wait for Facebook's review
+
+
+
+
+
+ Final step before going live:
+
+ 1. Navigate to the App Dashboard
+ 2. Switch your app from Development to Live mode
+ 3. Complete any remaining verification steps
+
+
+
+
+## Add to Create Project
+
+
+
+ You have two options:
+ 1. Prompt Create with "Let users sign in"
+ 2. Enable User Accounts from the logo menu
+
+
+
+ 1. Click the 3-dot menu at the top of the chat
+ 2. Select "Project Settings"
+
+
+
+
+ 1. Navigate to the Authentication section
+ 2. Find Facebook Login toggle
+ 3. Turn it on
+
+
+
+
+ 1. Paste in your App ID
+ 2. Paste in your App Secret
+ 3. Click Save
+
+
+
+
+ 1. Return to the chat
+ 2. Prompt Create with "Add Facebook Login as an option"
+ 3. Create will update your sign-in pages automatically
+
+
+
+
+ 1. Click the Publish button
+ 2. Review your changes
+ 3. Publish to make the Facebook Login feature live
+
+
+
+## Testing
+
+1. Publish your changes
+2. Open your app in a new incognito window
+3. Go to the sign in page
+4. Try signing in with Facebook
+5. Check the [auth_users table](/builder/databases) to see your new user
+
+## Troubleshooting
+
+
+ - Check if User Accounts is turned on
+ - Make sure Facebook Login is enabled in Project Settings
+ - Try publishing your changes again
+ - Clear your browser data and try in incognito mode
+
+
+
+ - Double check your domain is exactly the same in Create and Facebook
+ - Make sure your callback URL is right: `www.your-domain.com/api/auth/callback/facebook`
+ - Check if your App ID and Secret are pasted correctly
+ - Verify your domain is set up in Facebook
+ - Make sure your app is live at your custom domain
+
+
+
+ - Update the OAuth Redirect URIs in Facebook
+ - Update your App Domains in Facebook
+ - Re-publish your app on the new domain
+
+
+## FAQ
+
+
+ By default:
+ - Email address
+ - Name
+ - Profile picture (if they have one)
+
+ Additional information requires requesting extra permissions and may require Facebook app review.
+
+
+
+ Yes! Just:
+ 1. Go back to chat
+ 2. Tell Create how you want it to look
+ 3. Create will help style it while following Facebook's rules
+
+
+
+ - For basic login: No
+ - For extra features: Yes
+ - You'll need to submit your app to Facebook for approval
+
+
+## See Also
+
+- [User Accounts](/builder/user-accounts)
+- [Customizing Login Pages](/builder/user-accounts#customizing-auth-pages)
diff --git a/auth/google.mdx b/auth/google.mdx
new file mode 100644
index 0000000..b3f823a
--- /dev/null
+++ b/auth/google.mdx
@@ -0,0 +1,306 @@
+---
+title: "Google Sign In"
+description: "Let users sign in to your app with their Google account"
+---
+
+Let users sign in to your app with their Google accounts. They'll share their email, name, profile picture, and language settings.
+
+You'll need to set up a few things in Google first, then add those settings to Create.
+
+## Before You Start
+
+Make sure you have:
+
+
+ A Create project with [User Accounts](/builder/user-accounts) turned on
+
+
+
+ Your app running on a custom domain through [Create's domain setup](/publish-and-share/custom-domains)
+
+
+
+ Google Sign In needs a custom domain - you can't use the default `created.app` domains. You'll need:
+ - A domain you own
+ - [Create Pro subscription](https://create.xyz/pricing)
+ - DNS records properly configured
+
+
+## Overview
+
+
+
+ Set up OAuth in Google Cloud Console
+
+
+ Add Google Client ID/Secret in Create
+
+
+ Make the page look how you want
+
+
+ Make sure login works
+
+
+
+## Google Cloud Setup
+
+
+
+ 1. Go to [Google Cloud OAuth Clients](https://console.cloud.google.com/auth/clients)
+ 2. Sign in with your Google account
+
+
+
+
+ 1. Click the project selector dropdown
+ 2. Choose to create a new project or select an existing one
+
+
+
+
+ 1. If creating new: Enter a recognizable project name (internal use only)
+ 2. Choose whether to add it to an existing Organization or "No organization"
+ 3. Click "Create"
+
+
+
+
+ 1. Once project is selected/created
+ 2. Click "Get Started" on the Google Auth Platform screen
+
+
+
+
+ 1. Enter your App Name (this will be public-facing)
+ 2. Add a support email address (this will be public-facing)
+
+
+
+
+ 1. Choose your app's audience
+ 2. Select "External" unless this is an internal app for your Google Workspace organization
+
+
+
+
+ 1. Enter developer contact email address
+ 2. This will be used by Google to contact you about your application
+
+
+
+
+ 1. Navigate to credentials section
+ 2. Click "Create OAuth Client"
+
+
+
+
+ 1. Select "Web Application" as the application type
+ 2. Name your client (e.g., "Production")
+
+
+
+
+ 1. Add `www.your-custom-domain.com` as an Authorized JavaScript Origin (replace with your actual domain)
+ 2. Add `www.your-custom-domain.com/api/auth/callback/google` as an Authorized redirect URI
+
+
+
+
+ Must include:
+ - `www` prefix in both fields
+ - Exact domain used for the app in Create's custom domain settings
+ - Valid CNAME record for `www` subdomain configured in DNS ([see Custom Domains guide](/publish-and-share/custom-domains#dns-configuration))
+
+
+
+
+ 1. Create the OAuth Client
+ 2. Copy the generated Client ID
+ 3. Save it for adding to your Create project later
+
+
+
+
+ 1. Click the Edit button
+ 2. Copy the Client Secret
+ 3. Save it for adding to your Create project later
+
+
+
+
+ 1. Navigate to the Branding section
+ 2. Add your app domain, privacy policy, and terms
+ 3. These will appear on the Google Sign In page
+
+
+
+
+ 1. If your app needs additional permissions
+ 2. Request additional scopes as needed
+
+
+
+
+
+ Before going live, submit your app for verification in the Verification Center.
+ This is required for external Google users to sign in to your app.
+
+
+
+
+## Add to Create Project
+
+
+
+ You have two options:
+ 1. Prompt Create with "Let users sign in"
+ 2. Enable User Accounts from the logo menu
+
+
+ User Accounts must be enabled before proceeding with Google Sign In setup
+
+
+
+
+ 1. Click the 3-dot menu at the top of the chat
+ 2. Select "Project Settings"
+
+
+
+
+ 1. Navigate to the Authentication section
+ 2. Find Google Sign In toggle
+ 3. Make sure it's turned on
+
+
+
+
+ 1. Paste in your Client ID from the previous section
+ 2. Paste in your Client Secret from the previous section
+ 3. Click Save to store your credentials
+
+
+
+
+ 1. Return to the chat
+ 2. Prompt Create with something like "Add Google Sign In as an option"
+ 3. Create will automatically update your sign-in pages with Google Sign In
+ 4. You can customize the UI further if you'd like.
+
+
+
+
+ 1. Click the Publish button
+ 2. Review your changes
+ 3. Publish to make the Google Sign In feature live
+
+
+
+ 1. Open your published app in an incognito window
+ 2. Navigate to the sign-in page
+ 3. Click the Google Sign In button
+ 4. Complete the Google authentication flow
+ 5. Verify you're successfully logged in to your app
+ 6. Check the user is logged in by looking at the [auth_users table](/builder/databases) in your database
+
+
+ Always test the authentication flow in an incognito window to ensure it works for new users
+
+
+
+
+## Testing
+
+1. Publish your changes
+2. Open your app in a new incognito window
+3. Go to the sign in page
+4. Try signing in with Google
+5. Check the [auth_users table](/builder/databases) to see your new user
+
+## Troubleshooting
+
+
+ - Check if User Accounts is turned on
+ - Make sure Google Sign In is enabled in Project Settings
+ - Try publishing your changes again
+ - Clear your browser data and try in incognito mode
+
+
+
+
+
+ - Check that your Client ID and Client Secret are correctly pasted in Create
+ - Ensure your domain is added as an Authorized JavaScript Origin in Google Cloud
+ - Verify your app is published and accessible at your custom domain
+
+ In Google Cloud, always use 'www.your-domain.com' not just 'your-domain.com'. Many login problems happen because people forget the 'www'.
+
+
+
+
+
+ - Double check your domain is exactly the same in Create and Google Cloud
+ - Make sure your callback URL is right: `www.[your-domain].com/api/auth/callback/google`
+ - Check if your Client ID and Secret are pasted correctly
+ - Make sure your domain is set up in Google Cloud
+ - Make sure your app is live at your custom domain
+
+
+
+ - This is normal during testing
+ - You can test with up to 100 users
+ - For a live app, you'll need Google to verify it
+ - Fill out all the info Google asks for
+
+
+
+ - Update the Authorized JavaScript Origins in Google Cloud
+ - Update the Authorized redirect URIs in Google Cloud
+ - Update your domain in the OAuth consent screen
+ - Re-publish your app on the new domain
+
+
+## FAQ
+
+
+ No, Google Sign In needs your own domain. You'll need:
+ - A domain you own
+ - Create Pro subscription
+ - Properly configured DNS records
+
+
+
+ By default:
+ - Email address
+ - Name
+ - Profile picture (if they have one)
+
+ Additional information requires requesting extra scopes in Google Cloud Console.
+
+
+
+ Yes! Just:
+ 1. Go back to chat
+ 2. Tell Create how you want it to look
+ 3. Create will help style it while following Google's rules
+
+
+
+ - For testing (up to 100 users): No
+ - For a live app: Yes
+ - Internal Google Workspace apps: No
+
+
+
+ 1. Go to Google Cloud Console OAuth consent screen
+ 2. Add additional scopes in the "Scopes" section
+ 3. Provide justification for each scope
+ 4. Note: Additional scopes may require Google verification
+
+
+## See Also
+
+- [User Accounts](/builder/user-accounts)
+- [Customizing Login Pages](/builder/user-accounts#customizing-auth-pages)
diff --git a/auth/password.mdx b/auth/password.mdx
new file mode 100644
index 0000000..369cddb
--- /dev/null
+++ b/auth/password.mdx
@@ -0,0 +1,142 @@
+---
+title: "Email/Password Sign In"
+description: "Let users sign in to your app with their email and a password"
+---
+
+Let users sign in to your app with their email and password. This is Create's default authentication method and requires no external setup.
+
+## Before You Start
+
+Make sure you have:
+
+
+ A Create project with [User Accounts](/builder/user-accounts) turned on
+
+
+## Overview
+
+
+
+ Prompt Create to add users, or turn on from logo menu > Settings > User Accounts
+
+
+ By default, email/password is enabled. You can turn it off and prompt Create to remove it.
+
+
+ Make the login form look how you want
+
+
+ Make sure login works
+
+
+
+## Turn on / off
+
+
+
+ 1. Click the 3-dot menu at the top of the chat
+ 2. Select "Project Settings"
+
+
+
+
+ 1. Navigate to the Authentication section
+ 2. Find Email/Password Sign In toggle
+ 3. Make sure it's turned on (or off if you want to remove it)
+ 4. Tap "Save"
+
+
+
+
+ 1. Return to the chat
+ 2. Prompt Create with "Add email/password sign in" or "Remove email/password sign in"
+ 3. Create will update your sign-in pages automatically
+
+
+
+ 1. Click the Publish button
+ 2. Review your changes
+ 3. Publish to make the feature live
+
+
+
+## How It Works
+
+When users sign up with email/password:
+
+1. The password is securely hashed using bcrypt before storage
+
+2. The email and hashed password are stored in your database:
+ - Email in `auth_users.email`
+ - Hashed password in `auth_accounts.password`
+ - Account type set to "credentials"
+
+3. On sign in, Create:
+ - Hashes the provided password
+ - Compares it to the stored hash
+ - Creates a secure session if they match
+
+
+
+## Customizing the Form
+
+You can customize the email/password form through chat:
+
+```
+Make the sign in form match our brand colors
+```
+
+```
+Add password requirements text under the password field
+```
+
+Create will update the form while maintaining the secure authentication logic.
+
+## Testing
+
+1. Publish your changes
+2. Open your app in a new incognito window
+3. Go to the sign in page
+4. Try signing up with email/password
+5. Check the [auth_users table](/builder/databases) to see your new user
+
+## Troubleshooting
+
+
+ - Check if User Accounts is turned on
+ - Make sure Email/Password Sign In is enabled in Project Settings
+ - Try publishing your changes again
+ - Clear your browser data and try in incognito mode
+
+
+
+ - Double check the email address is correct
+ - Make sure you're using the right password
+ - Try resetting your password (see FAQ below)
+ - Check the auth_users and auth_accounts tables
+
+
+## FAQ
+
+
+ You can manually reset passwords in the database. We're adding support for automated workflows soon. For now:
+ - Delete the user from the database
+ - Ask them to sign up again
+ - Optionally update the new user's ID to match the old ID to maintain data connections
+
+
+
+ Yes! Just prompt Create with your desired requirements like:
+ "Make passwords require at least 8 characters with one number"
+
+ It will add validation to the password field.
+
+
+
+ Yes! Prompt Create to add fields like name or phone number to the sign up form.
+
+
+## See Also
+
+- [User Accounts](/builder/user-accounts)
+- [Customizing Login Pages](/builder/user-accounts#customizing-auth-pages)
diff --git a/auth/x.mdx b/auth/x.mdx
new file mode 100644
index 0000000..edfb583
--- /dev/null
+++ b/auth/x.mdx
@@ -0,0 +1,367 @@
+---
+title: "Login with X (Twitter)"
+description: "Let users sign in to your app with their X/Twitter account"
+---
+
+Let users sign in to your app with their X/Twitter accounts. They'll share their username, name, profile picture, and email.
+
+You'll need to set up a few things in X first, then add those settings to Create.
+
+## Before You Start
+
+Make sure you have:
+
+
+ A Create project with [User Accounts](/builder/user-accounts) turned on
+
+
+
+ Your app running on a custom domain through [Create's domain setup](/publish-and-share/custom-domains)
+
+
+## Overview
+
+
+
+ Create an app in X
+
+
+
+ Add your X App's Client ID/Secret in Create
+
+
+
+ Make the page look how you want
+
+
+
+ Make sure login works
+
+
+
+## X Setup
+
+##
+
+
+
+
+
+
+
+ 1. Go to [X Developer Portal](https://developer.x.com/en/apps)
+
+ 2. Sign in with your X account
+
+ 3. Click "Create an App"
+
+
+
+
+
+ 1. If you don't have a developer account, you'll need to apply
+
+ 2. Fill out the required information about your use case
+
+ 3. Submit your application
+
+
+
+
+
+ 1. Review the available developer plans
+
+ 2. You can sign up for a Free account if you prefer
+
+ 3. Select your plan and continue
+
+
+
+
+
+ 1. Review the developer terms
+
+ 2. Describe your app's purpose and that you're using Login with X
+
+ 3. Accept the terms to proceed
+
+
+
+
+
+ 1. Once approved, navigate to your dashboard
+
+ 2. Click "Create Project" to begin
+
+
+
+
+
+ 1. Choose a descriptive name for your project
+
+ 2. This is for internal organization
+
+ 3. Click continue
+
+
+
+
+
+ 1. Choose the primary use case for your app
+
+ 2. This helps X understand how you'll use their API
+
+
+
+
+
+ 1. Provide a detailed description of your project
+
+ 2. Explain how you'll use X's features
+
+ 3. Be specific about your Login with X implementation
+
+
+
+
+
+ 1. Choose a user-facing name for your app
+
+ 2. This will be visible to users during sign in
+
+
+
+
+
+ 1. You'll see initial Keys & Tokens
+
+ 2. These include API Key, API Key Secret, and Bearer Token
+
+ 3. You can skip these for now - click "App Settings"
+
+
+
+
+
+ 1. In App Settings, find "User authentication settings"
+
+ 2. Click "Set up"
+
+
+
+
+
+ 1. Choose your app permissions level
+
+ 2. You can request read/write permissions
+
+ 3. Optionally request email access for users if you want your app to send users emails
+
+
+
+
+
+ 1. Select "Web App" as your app type
+
+ 2. This enables web-based authentication
+
+
+
+
+
+ 1. Enter your callback URL:
+ `https://www.your-domain.com/api/auth/callback/twitter`
+
+ 2. Add your website URL:
+ `https://www.your-domain.com`
+
+ 3. Add privacy policy URL:
+ `https://your-domain.com/privacy`
+
+ 4. Add terms of service URL:
+ `https://your-domain.com/terms`
+
+
+
+
+ Must include:
+
+ * `https://` protocol
+
+ * `www` prefix for callback and website URLs
+
+ * Exact domain for the app used in Create's custom domain settings
+
+
+
+ You can use services like Termly to generate these required policy documents and host them on pages in your Create app
+
+
+
+
+ 1. After saving settings, go to "Keys and Tokens" section
+
+
+
+
+
+ 1. Under OAuth 2.0 Client ID and Client Secret
+
+ 2. Copy the Client ID
+
+ 3. Generate and copy the Client Secret
+
+ 4. Save both values - you'll need them in Create
+
+
+
+
+ Keep your Client Secret secure - never share it publicly
+
+
+
+
+## Add to Create Project
+
+
+
+ You have two options:
+
+ 1. Prompt Create with "Let users sign in"
+
+ 2. Enable User Accounts from the logo menu
+
+
+
+ 1. Click the 3-dot menu at the top of the chat
+
+ 2. Select "Project Settings"
+
+
+
+
+ 1. Navigate to the Authentication section
+
+ 2. Find Login with X toggle
+
+ 3. Turn it on
+
+
+
+
+ 1. Paste in your Client ID
+
+ 2. Paste in your Client Secret
+
+ 3. Click Save
+
+
+
+
+ 1. Return to the chat
+
+ 2. Prompt Create with "Add Login with X as an option"
+
+ 3. Create will update your sign-in pages automatically
+
+
+
+
+ 1. Click the Publish button
+
+ 2. Review your changes
+
+ 3. Publish to make the Login with X feature live
+
+
+
+## Testing
+
+1. Publish your changes
+
+2. Open your app in a new incognito window
+
+3. Go to the sign in page
+
+4. Try signing in with X
+
+5. Check the [auth\_users table](/builder/databases) to see your new user
+
+## Troubleshooting
+
+
+ * Check if User Accounts is turned on
+
+ * Make sure Login with X is enabled in Project Settings
+
+ * Prompt Create with "Add Login with X as an option to the sign in page"
+
+ * Try publishing your changes again
+
+ * Clear your browser data and try in incognito mode
+
+
+
+ * Double check your domain is exactly the same in Create and X
+
+ * Make sure your callback URL is right: `www.[your-domain].com/api/auth/callback/twitter`
+
+ * Check if your Client ID and Secret are pasted correctly
+
+ * Make sure OAuth 2.0 is turned on in X
+
+ * Make sure your app is live at your custom domain
+
+
+
+ * Update the callback URLs in X Developer Portal
+
+ * Update your website URL in X app settings
+
+ * Re-publish your app on the new domain
+
+
+## FAQ
+
+
+ By default:
+
+ * Username
+
+ * Display name
+
+ * Profile picture (if they have one)
+
+ Additional information requires requesting extra permissions and may require X app review.
+
+
+
+ Yes! Just:
+
+ 1. Go back to chat
+
+ 2. Tell Create how you want it to look
+
+ 3. Create will help style it while following X's rules
+
+
+
+ * For basic login: No
+
+ * For extra features: Yes
+
+ * You'll need to submit your app to X for approval
+
+
+## See Also
+
+* [User Accounts](/builder/user-accounts)
+
+* [Customizing Login Pages](/builder/user-accounts#customizing-auth-pages)
\ No newline at end of file
diff --git a/builder/databases-v1.mdx b/builder/databases-v1.mdx
new file mode 100644
index 0000000..3fdc00e
--- /dev/null
+++ b/builder/databases-v1.mdx
@@ -0,0 +1,224 @@
+---
+title: "Databases (legacy)"
+description: "This is a legacy document for projects using our prior version of databases"
+---
+
+Databases let you store information in your apps. They're essential for apps that need to remember data between uses - like user preferences, form submissions, user submissions, or content to display.
+
+
+ This is a legacy article for a prior version of databases (for apps built in Create prior to February 2025). The article for our current release is linked here!
+
+
+## Why Use Databases
+
+Databases help you:
+
+* Save user input across sessions
+
+* Store content for your app
+
+* Build apps with dynamic data
+
+* Create admin interfaces to manage information
+
+* Store information that's specific to each user to customize your app's experience per user
+
+## Creating a Database
+
+Create databases through:
+
+**Chat**
+
+* From the chat for a Page, Function, or Component
+
+* Type`/`> "Data" > "Create a database"
+
+* Name your database (e.g., "Feedback", "Products")
+
+* Describe how you want to store data:
+
+ * "Store waitlist signups with name and email in /\[WaitlistDB]"
+
+ * "Store blog posts with title, content, and author in /\[BlogDB]"
+
+ * "Store gallery submissions in /\[GalleryDB]. In the feed, retrieve submissions from /\[GalleryDB]"
+
+* Send your prompt in the chat. Create generates the database schema and queries (inserts, updates, fetches).
+
+* Test your database by using your Page/Function/Component in Demo mode.
+
+ * If you tap on the database name in the chat, you can view the data.
+
+ * From the[three dot menu](/builder/controls#top-nav)on the Page/Function/Component, you can go to Linked Data to see databases referenced by the element. This provides quick access to the database.
+
+**Dashboard**
+
+* Go to create.xyz/dashboard > Databases > New Database
+
+* Name your database and submit
+
+* Tap on the database name in the list to view its data
+
+* (Optional) You can seed the initial schema / data with a CSV file
+
+* Use it in the builder from a Page, Function, or Component with`/`> "Data" > "Select Database"
+
+
+ When you include a database in your prompt, Create generates queries based on your prompt's description. From these queries, it infers the database schema. It can:
+
+ * Design tables from your description
+
+ * Infer structure / schema from your UI
+
+ * Follow specific schema requirements you provide (e.g. "Make a table for friends with name and age")
+
+
+## Using Your Database
+
+Add databases to any page, component, or function:
+
+1. Type`/`in chat
+
+2. Select your database
+
+3. Choose how to interact (insert, update, fetch)
+
+4. Create adds the necessary queries to the code. It sets the schema for the database from the queries.
+
+Your database appears in:
+
+* Chat - tap to view data
+
+* [Three dot menu](/builder/controls#three-dot-menu)on a Page/Function/Component - Linked Data
+
+* Dashboard - create.xyz/dashboard > Databases
+
+
+ Use the same database across multiple elements or projects. This lets you build different interfaces for the same data.
+
+
+## Managing Data
+
+You can manage the data in your database from the dashboard, the database viewer, or by building your own admin pages around it.
+
+**Add Data**
+
+* From the database viewer > upload CSV files to populate tables. The table schema is inferred from the CSV column headers.
+
+* From your app after it's integrated > in either Demo mode or Publish, go through your app flows to insert into the database.
+
+* Build your own admin tools:
+
+ * Create custom admin interfaces:
+
+ * New Page > / in chat > "Data" > "Select Database"
+
+ * Describe your admin interface (e.g. "Make an admin interface for /\[your database] that lets me add/edit/delete submissions")
+
+ * Create generates forms and tables to manage your data
+
+ * Add fields, filters, and sorting as needed
+
+ * Generate test data with AI:
+
+ * New Page > / in chat > "Data" > "Select Database"
+
+ * Ask for a data generator (e.g. "Create a tool to generate test data for /\[your database] using /ChatGPT")
+
+ * Review generated entries before saving
+
+ * Bulk add approved data to your database
+
+ * Works with ChatGPT, Sonnet 3.5, and other AI models
+
+**Update Schema**
+
+* Upload new CSV with modified columns from the database viewer
+
+* Create custom update tools with pages/functions from the builder
+
+* Contact support for manual changes. Email us at[hello@create.xyz](mailto:hello@create.xyz)
+
+**Joining Data**
+
+You can create multiple related tables in your database:
+
+* Describe the different tables you want in your prompt
+
+* Create generates the appropriate schema and relationships
+
+* Each table gets unique IDs automatically
+
+Each row in your database has a unique ID. This lets you:
+
+* Join data across tables in the same database
+
+* Connect data between different databases
+
+* Build relationships between user data and content
+
+For example, imagine building a blog with user accounts:
+
+1. Create a BlogPostsDB to store AI-generated posts
+
+2. Enable User Accounts which creates UsersDB
+
+3. When storing posts, include the current user's ID
+
+4. Later, fetch posts filtered by user ID
+
+The flow works because:
+
+* Create stores the user ID from UsersDB with each blog post
+
+* This connection lets you query posts by user
+
+* You can join the data to show user details with posts
+
+
+ Create handles the relationship logic automatically when you describe how you want to connect the data in your prompt.
+
+
+## Other Actions
+
+From the database viewer you can:
+
+* Rename database
+
+* Delete database
+
+* Download data as CSV
+
+## Pro Tips
+
+* AI excels at database design. In ChatGPT or other LLMs, ask "What schema would work for \[your use case]?" and use the response in your database creation prompt
+
+* Create your own admin pages to manage your data. You don't need to publish these, but they can help for managing.
+
+* Use the same database across multiple pages for different views of your data
+
+## Examples
+
+You can use databases to build:
+
+* Contact form submissions
+
+* Content management systems
+
+* CRMs
+
+* Gallery submissions
+
+* Storing image urls
+
+* User feedback collection
+
+* Catalogs
+
+* And more
+
+👉 Watch our [video tutorial](https://www.youtube.com/watch?v=cUcd3t6yJdM) for a detailed walkthrough.
+
+
+
+
\ No newline at end of file
diff --git a/builder/databases.mdx b/builder/databases.mdx
index 2894ba3..47c72da 100644
--- a/builder/databases.mdx
+++ b/builder/databases.mdx
@@ -1,223 +1,443 @@
---
-title: "Databases (beta)"
-description: "Store data in your apps"
+title: "Databases"
+description: "Store and manage data in your apps"
+hidden: true
---
-Databases let you store information in your apps. They're essential for apps that need to remember data between uses - like user preferences, form submissions, user submissions, or content to display.
+
+
+
-
-Database support is in early beta. It works well for simple use cases with more features coming soon.
+## Overview
-For complex database needs, you can connect external databases (like Supabase or Xano) using [Functions](/builder/functions).
-
+Every Create project comes with a free database built in. As you chat with Create, it handles all database details - from designing the structure to writing the code that lets your app save and retrieve data from it.
-## Why Use Databases
+Use databases to:
-Databases help you:
+* Store user submissions (forms, feedback, uploads)
-* Save user input across sessions
+* Save content (blog posts, products, galleries)
-* Store content for your app
+* Persist data between uses of the app
-* Build apps with dynamic data
+* Build dynamic data-driven features
-* Create admin interfaces to manage information
+
+ Interested in upgrading an existing database? We're planning on offering a direct path to support you here, work is ongoing. Please reach out in the meantime via hello@create.xyz for assistance with this.
+
-* Store information that's specific to each user to customize your app's experience per user
+## Chat
-## Creating a Database
+Create automatically updates your database structure & how your app retreives and stores data as you chat.
-Create databases through:
+When a feature requires storing data, it:
-**Chat**
+1. **Designs the database structure**based on your description
-* From the chat for a Page, Function, or Component
+2. **Makes Functions**to save and retrieve data from the database
-* Type `/` > "Data" > "Create a database"
+3. **Designs the Pages and Components**to display and interact with the data
-* Name your database (e.g., "Feedback", "Products")
+4. **Connects everything**to make sure your Pages use the Functions that retrieve/store data.
-* Describe how you want to store data:
+For example, if you say "Make me a tasks app", Create:
- * "Store waitlist signups with name and email in /\[WaitlistDB]"
+
+
+
+
+
+
- * "Store blog posts with title, content, and author in /\[BlogDB]"
+
+
+
+
+
- * "Store gallery submissions in /\[GalleryDB]. In the feed, retrieve submissions from /\[GalleryDB]"
+
+
+
+
+
-* Send your prompt in the chat. Create generates the database schema and queries (inserts, updates, fetches).
+
+
+
+
+
+
-* Test your database by using your Page/Function/Component in Demo mode.
+As you continue describing your app, Create updates your database structure, Functions and Pages to match what you want.
- * If you tap on the database name in the chat, you can view the data.
+Here are common ways to modify your database through chat:
- * From the [three dot menu](/builder/controls#top-nav) on the Page/Function/Component, you can go to Linked Data to see databases referenced by the element. This provides quick access to the database.
+### Setting the scene
-**Dashboard**
+It helps to start with a specific description of what you want your app to do.
-* Go to create.xyz/dashboard > Databases > New Database
+Prompt:
-* Name your database and submit
+```
+Make a tasks app. Users should be able to add, view, and delete tasks.
-* Tap on the database name in the list to view its data
+Each task has title, description and comments
-* (Optional) You can seed the initial schema / data with a CSV file
+Comments should show up under the task and show who wrote them.
+```
-* Use it in the builder from a Page, Function, or Component with `/` > "Data" > "Select Database"
+Create will:
-
-When you include a database in your prompt, Create generates queries based on your prompt's description. From these queries, it infers the database schema. It can:
+* Make the tables needed
-* Design tables from your description
+ * Make a Tasks table with title, description, and comments fields
-* Infer structure / schema from your UI
+ * Make a Users table with name and avatar fields
-* Follow specific schema requirements you provide (e.g. "Make a table for friends with name and age")
-
+ * Make a Comments table with text and author fields
-## Using Your Database
+* Create Functions to save and fetch tasks, users, and comments
-Add databases to any page, component, or function:
+* Build a Page with a task list, add form, and comment list
-1. Type `/` in chat
+* Make the Page use your Functions to save tasks when submitted and grab tasks to display
-2. Select your database
+### Adding Fields
-3. Choose how to interact (insert, update, fetch)
+```
+Add a description to todos. Show it below the title in italics.
+```
-4. Create adds the necessary queries to the code. It sets the schema for the database from the queries.
+Create will:
-Your database appears in:
+* Add the description column to the Todos table
-* Chat - tap to view data
+* Update Functions to handle the new field
-* [Three dot menu](/builder/controls#three-dot-menu) on a Page/Function/Component - Linked Data
+* Modify the UI to display descriptions
-* Dashboard - create.xyz/dashboard > Databases
+### Removing Fields
-
-Use the same database across multiple elements or projects. This lets you build different interfaces for the same data.
-
+```
+Remove the priority from todos, we won't use it anymore
+```
+
+Create will:
+
+* Remove the priority column
+
+* Update queries to exclude the field
+
+* Clean up any UI elements showing priority
+
+### Adding Tables
+
+```
+Let users add comments on todos. Each comment should have the text and who wrote it
+```
-## Managing Data
+Create will:
-You can manage the data in your database from the dashboard, the database viewer, or by building your own admin pages around it.
+* Make a new Comments table
-**Add Data**
+* Link it to the Todos table
-* From the database viewer > upload CSV files to populate tables. The table schema is inferred from the CSV column headers.
+* Add UI for viewing/adding comments
-* From your app after it's integrated > in either Demo mode or Publish, go through your app flows to insert into the database.
+* Handle saving comments to the database
-* Build your own admin tools:
+### Changing Structure
- * Create custom admin interfaces:
+```
+Instead of due dates, let's use status (Todo, In Progress, Done) to track progress
+```
- * New Page > / in chat > "Data" > "Select Database"
+Create will:
- * Describe your admin interface (e.g. "Make an admin interface for /\[your database] that lets me add/edit/delete submissions")
+* Convert the due\_date field to a status field
- * Create generates forms and tables to manage your data
+* Update existing data
- * Add fields, filters, and sorting as needed
+* Modify the UI to show status options
- * Generate test data with AI:
+### Relationships
- * New Page > / in chat > "Data" > "Select Database"
+```
+Let users assign todos to team members. Show their avatar next to each todo
+```
- * Ask for a data generator (e.g. "Create a tool to generate test data for /\[your database] using /ChatGPT")
+Create will:
- * Review generated entries before saving
+* Add user relationships to todos
- * Bulk add approved data to your database
+* Update queries to fetch user data
- * Works with ChatGPT, Sonnet 3.5, and other AI models
+* Show assignee info in the UI
-**Update Schema**
+### Filling Data
-* Upload new CSV with modified columns from the database viewer
+```
+Generate 10 sample todos with different statuses and assignees
+```
-* Create custom update tools with pages/functions from the builder
+Create will:
-* Contact support for manual changes. Email us at hello\@create.xyz
+* Generate 10 sample todos with different statuses and assignees based on your structure
-**Joining Data**
+* Insert the data into your database
-You can create multiple related tables in your database:
+* Preserve relationships between tables
-* Describe the different tables you want in your prompt
+### Validation
-* Create generates the appropriate schema and relationships
+```
+Make sure every todo has a title
+```
-* Each table gets unique IDs automatically
+Create will:
-Each row in your database has a unique ID. This lets you:
+* Add validation rules to the database
-* Join data across tables in the same database
+* Update Functions to check data
-* Connect data between different databases
+* Show validation errors in the UI
-* Build relationships between user data and content
+
+ Always describe both what data you want to store AND how you want to use it. This helps Create build the right database structure, Functions, and UI.
+
-For example, imagine building a blog with user accounts:
+
+ The more specific you are in your prompt, the better Create can help.
-1. Create a BlogPostsDB to store AI-generated posts
+ If you describe something at a high level, "make a todo app", Create will guess what fields each todo should have.
-2. Enable User Accounts which creates UsersDB
+ If you describe what you want in detail, "make a todo app with a title, due date, and priority field", Create will make sure each todo has those fields.
+
-3. When storing posts, include the current user's ID
+## Viewing & Editing Data
-4. Later, fetch posts filtered by user ID
+Create comes with a built-in database viewer for manual edits to your data. You can quickly verify that data is being stored in the right way when you use your app.
-The flow works because:
+Access it from:
-* Create stores the user ID from UsersDB with each blog post
+* Chat - tap the database
-* This connection lets you query posts by user
+* [Project Selector](/builder/controls#project-selector)- choose your database name
-* You can join the data to show user details with posts
+The database viewer lets you:
+
+* See all tables
+
+* Edit individual rows
+
+* Sort and filter data
+
+* Download data in bulk
+
+* Run custom SQL queries to fetch data
+
+You can also make your own internal tools to update multiple tables at once:
+
+* Make a new[Page](/builder/pages)
+
+* Describe your tool and how it should update the database
+
+* Try out your UI
-Create handles the relationship logic automatically when you describe how you want to connect the data in your prompt.
+ Changes in Demo mode in the Builder use a test database. This lets you experiment safely without affecting your live data.
-## Other Actions
+## Test vs. Live DB
+
+Create maintains separate test and live databases for each project:
+
+**Test Database**
+
+* Used in Demo mode from the builder
+
+* Allows you to make sure your app is saving data correctly before publishing
+
+**Live Database**
+
+* Used in your published app
+
+* Access your live database from the builder
+
+### Publishing
+
+When you publish your app, Create automatically:
+
+* Creates your live database
+
+* Applies the latest structure from the Test database to your Live database so that it has the same tables and fields
+
+* Runs your app with that structure
+
+
+ When making changes to your database structure after publishing, be careful about conflicts with your live database. For example:
+
+ * You make an app that has a User table with email, image, and phone fields
+
+ * You publish your app so your live database has the same tables. You launch it and users start signing up.
+
+ * You later decide that you don't need phone numbers, so in an update to the app you remove it.
+
+ * You try to publish your app again. Your live database now has users with with phone numbers.
+
+ * Create will warn you about this conflict on publish. If you publish, it will remove the existing phone numbers.
+
+ This is called a "migration conflict". You've changed the structure of your test database, but it now conflicts with your live database structure.
+
+ To resolve migration conflicts:
+
+ 1. Check the error message for details
+
+ 2. Either:
+
+ * Modify your test database to match production (keep "phone" around)
+
+ * Manually migrate the live data (move data from "phone")
+
+ 3. Try publishing again
+
+ Create warns you about destructive changes before your publish to protect your live data.
+
+
+## Errors
+
+Here are some good ways to troubleshoot common errors:
+
+### Data isn't saving or retrieving
+
+If data isn't saving when you use your app, there are 3 common failure points to check. Go in this order to test each isolation:
+
+#### 1. Database Structure
+
+**How to check:**
+
+* Open the database viewer
+
+* Verify tables and fields match what you expect
+
+**If there's an issue:**
+
+* Describe the correct structure you want in chat
+
+* Example: "Update the Tasks table to have title, description, and dueDate fields"
+
+* Create will modify the database to match
+
+#### 2. Function -> Database
+
+**How to check:**
+
+* Identify which function saves or retrieves data from the database. Tap on it.
+
+* Open the[Test Runner](/builder/functions#test-runner)(3-dot menu > Test)
+
+* Enter sample data and run the test
+
+* Check database viewer to verify data was saved
+
+* Delete test records if needed
+
+**If there's an issue:**
+
+* Copy any error messages
+
+* Paste them into the function chat
+
+* Ask Create to fix the specific error
+
+* Example: "I see this error when I run saveTask and test it with this data: \[error] \[example data]"
+
+#### 3. UI -> Function
+
+**How to check:**
+
+* Try the app in Demo mode from the UI
+
+* Check that data is being saved when you use the app in the database viewer
+
+* Verify your page/component references the correct function
+
+* Type`/`in chat to see if function is linked
+
+* Try the flow in Demo mode
+
+* Watch database viewer to see if records appear
+
+**If there's an issue:**
+
+* Verify your page/component references the correct function
+
+* Example: "Connect the taks form to the saveTask function when I submit a task"
+
+* Create will update the code to properly wire everything together
+
+
+ For any errors you encounter, you can paste them directly into Create's chat. It often recognizes specific error patterns and knows how to fix them.
+
+
+## FAQ
+
+
+
+ Yes. Create's built in databases are designed to scale. Under the hood, it's PostgreSQL, which is powerful and scalable. We partner with [Neon](https://neon.tech) to autoscale your database as your app grows.
+
+
+
+ Free plans include 100mb of storage per database. You can upgrade to a paid plan to increase this.
+
+
+
+ Not yet, we will be working on an import function in the future
+
+
+
+ Use [Functions](/builder/functions) to connect to external databases like Supabase or your own backend.
+
-From the database viewer you can:
+
+ Yes, databases are automatically backed up. Contact support if you need to restore data.
+
-* Rename database
-* Delete database
-* Download data as CSV
+
+ Create handles making queries to your database automatically. For custom queries, create a [Function](/builder/functions) and describe what you need. You can then use your Function. Or use the built in SQL editor in the database viewer.
+
-## Pro Tips
+
+ We still have documentation for you, [linked here. ](https://www.create.xyz/docs/builder/databases)
+
+
-* AI excels at database design. In ChatGPT or other LLMs, ask "What schema would work for [your use case]?" and use the response in your database creation prompt
-* Create your own admin pages to manage your data. You don't need to publish these, but they can help for managing.
-* Use the same database across multiple pages for different views of your data
+
+ Need help? Join our [Discord community](https://create.xyz/discord) or email hello@create.xyz
+
-## Examples
+## Helpful Database Terms
-You can use databases to build:
+Create handles the technical details of your database, but understanding some key concepts can help you work more effectively.
-* Contact form submissions
-* Content management systems
-* CRMs
-* Gallery submissions
-* Storing image urls
-* User feedback collection
-* Catalogs
-* And more
+Think of a database as a collection of connected spreadsheets:
-👉 Watch our [video tutorial](https://www.youtube.com/watch?v=cUcd3t6yJdM) for a detailed walkthrough.
+* A **table** is like a spreadsheet (e.g., "Users", "Products")
+* **Fields** (or columns) are the types of information stored (e.g., "name", "email")
+* **Rows** are individual entries
+* **Relationships** connect data between tables using **foreign keys**
-
-
-
+Key terms explained:
+| Term | Definition | Example |
+|------|------------|---------|
+| **Schema** | The structure of your database (tables and fields) | Your app's blueprint showing Users table with name, email fields |
+| **Query** | Instructions to get or save data | "Get all products where price < $100" |
+| **Join** | Combining data from different tables | Showing posts with their authors' names from the Users table |
+| **Foreign Key** | A field that references another table | Post's `authorId` connects to User's `id` |
+| **SQL** | The language databases understand | Create writes this for you! |
+| **Migration** | Changes to your database structure | Adding a "phone" field to Users table |
+
+ Don't worry about memorizing these! Just describe what data you want to store and how you want to use it - Create handles the technical implementation.
+
\ No newline at end of file
diff --git a/builder/functions.mdx b/builder/functions.mdx
index 126d3ae..1dfb9d4 100644
--- a/builder/functions.mdx
+++ b/builder/functions.mdx
@@ -70,7 +70,6 @@ Create Functions in several ways:
-
Describe what you want the Function to do:
* What inputs it needs
@@ -129,7 +128,7 @@ Create handles connecting everything together based on your description. If you
## Testing Functions
-Every Function has a full test runner available in the 3-dot menu > Run Test tab.
+Every Function has a full test runner available in the 3-dot menu > Run Test tab.
@@ -145,10 +144,10 @@ Use it to:
* **Debug** - Use error descriptions to fix issues. You can often just paste the error description into your prompt to fix it.
-
+
-Functions have a 5-minute timeout. Chain Functions together for longer operations.
+ Functions have a 5-minute timeout. Chain Functions together for longer operations.
## Using Functions
@@ -186,7 +185,7 @@ After changing a Function:
3. Create will refresh with latest changes
-Changes to Functions don't automatically update everywhere they're used. This prevents unwanted changes from breaking your app.
+ Changes to Functions don't automatically update everywhere they're used. This prevents unwanted changes from breaking your app.
## External APIs and Secrets
@@ -218,28 +217,15 @@ Popular APIs and where to find credentials:
Here is an in-depth YouTube video tutorial on how to connect to an external API, using the [Exa AI Search API](https://exa.ai/):
-
+
You can also use Zapier, Make, and other platforms that connect to APIs by using their "webhook" triggers. Here's a YouTube video with the steps:
-
+
-
## Secrets
Secrets securely store sensitive data like API keys and passwords. They're available to all Functions in your project.
@@ -257,7 +243,7 @@ To add a Secret:
Create automatically uses well-named secrets when generating Function code. For example, if you have a "Stripe API Key" secret and mention Stripe in your prompt, Create will use that key securely.
-When using popular APIs like Stripe or Twilio, Create will often ask for specific secret names in chat (e.g. "Stripe Secret Key"). Use these as hints for what credentials you need.
+ When using popular APIs like Stripe or Twilio, Create will often ask for specific secret names in chat (e.g. "Stripe Secret Key"). Use these as hints for what credentials you need.
Supported secret types:
@@ -271,7 +257,7 @@ Supported secret types:
* Bearer Tokens
-OAuth tokens aren't supported since they require refresh flows.
+ OAuth tokens aren't supported since they require refresh flows.
## Publishing
@@ -289,7 +275,5 @@ When ready to launch:
Published Functions are locked versions your published app uses. Continue development without breaking live features.
-Need help? [Join our Discord](https://create.xyz/discord) and post in #help-me-build
-
-
-
+ Need help? [Join our Discord](https://create.xyz/discord) and post in #help-me-build
+
\ No newline at end of file
diff --git a/builder/integrations.mdx b/builder/integrations.mdx
index 5a087fd..f2e58ee 100644
--- a/builder/integrations.mdx
+++ b/builder/integrations.mdx
@@ -6,7 +6,7 @@ description: "Add powerful capabilities to your apps with our built-in integrati
Create offers 50+ built-in integrations (and growing!) to give your apps superpowers. Build AI-powered features, generate PDFs, display maps, or enhance your UI with component libraries.
-Missing an integration? Email us at hello\@create.xyz with your suggestion. Meanwhile, you can add any API to your app using [Functions](/builder/functions). It's similar to creating your own integration.
+ Missing an integration? Email us at hello@create.xyz with your suggestion. Meanwhile, you can add any API to your app using [Functions](/builder/functions). It's similar to creating your own integration.
## Adding Integrations
@@ -22,56 +22,74 @@ Add integrations by:
You can add integrations to your [Pages](/builder/pages), [Components](/builder/components), or [Functions](/builder/functions). When you add an integration, you'll see a special chip in your chat. Create adds the integration code to your page/component/function.
-You need to include the integration in your prompt. You'll know it's referenced correctly if you see a chip in your chat.
+ You need to include the integration in your prompt. You'll know it's referenced correctly if you see a chip in your chat.
-Some integrations use credits to run. Learn more about [Credits](/account/credits).
+ Some integrations use credits to run. Learn more about [Credits](/account/credits).
## Using AI Integrations
Build powerful AI apps with our integrated models. Each integration comes with support out of box for:
-* **Streaming** - AI-generated text appears word by word, real time. You can tell Create not to stream when you use the integration if you'd rather have it load.
+* **Streaming** - AI-generated text appears word by word, real time. You can tell Create not to stream when you use the integration if you'd rather have it load.
+
* **Flexible Prompting** - Let Create guess the best prompt or specify the exact prompt
+
* **Structured Outputs** - Get JSON responses to build dynamic UIs and drive application logic
Adding AI is simple - just use a slash command, describe how you want to use the AI, and Create handles hooking it up to your app.
### Streaming
+
By default, responses appear word-by-word as they're generated, creating an engaging real-time experience. This works great for chatbots and interactive experiences.
If you prefer to show a loading spinner and display the complete response at once, simply tell Create "don't stream the response" in your prompt. This is useful for:
-- Applications that process the full response
-- UIs that need to wait for complete data
-- Situations where immediate partial results aren't helpful
+
+* Applications that process the full response
+
+* UIs that need to wait for complete data
+
+* Situations where immediate partial results aren't helpful
### Prompting
+
Create offers multiple ways to handle AI prompts:
1. **Basic Integration**
- - Just include the AI integration (e.g. `/[ChatGPT]`) in your message
- - Create will guess an optimal prompt based on your app's context
-
+
+ * Just include the AI integration (e.g. `/[ChatGPT]`) in your message
+
+ * Create will guess an optimal prompt based on your app's context
+
2. **Custom Prompts**
- - Specify exactly what you want: "Use /[ChatGPT] with prompt: 'Analyze this text for tone'"
- - Control the exact behavior of the AI
+
+ * Specify exactly what you want: "Use /\[ChatGPT] with prompt: 'Analyze this text for tone'"
+
+ * Control the exact behavior of the AI
3. **Dynamic Variables**
- - Use `[brackets]` for dynamic values
- - Example: "Take in a subject line from the user. Then use /[ChatGPT] with prompt: 'Generate a concise email for [subject line]'"
- - Create handles all the code to pass variables to your prompts. You can chain multiple variables
+
+ * Use `[brackets]` for dynamic values
+
+ * Example: "Take in a subject line from the user. Then use /\[ChatGPT] with prompt: 'Generate a concise email for \[subject line]'"
+
+ * Create handles all the code to pass variables to your prompts. You can chain multiple variables
4. **Prompt Optimization**
- - Let Create help: "Optimize the prompt for /[ChatGPT]. I want to [your goals]"
- - Create will craft an effective prompt for your AI integration and include them in the code to call the integration
+
+ * Let Create help: "Optimize the prompt for /\[ChatGPT]. I want to \[your goals]"
+
+ * Create will craft an effective prompt for your AI integration and include them in the code to call the integration
### Structured Outputs
+
While AI typically returns raw text, you can request JSON responses for more structured data handling.
**Common Use Cases:**
-1. **Building UIs**
+
+1. **Building UIs**
```javascript
// Example: "Generate a recipe as JSON and show UI for each step"
@@ -84,25 +102,31 @@ While AI typically returns raw text, you can request JSON responses for more str
}
```
-2. **Driving Logic**
-```javascript
+1. **Driving Logic**
+
+````javascript
// Example: "Analyze text sentiment as JSON"
{
"sentiment": "positive",
"score": 0.8,
"key_phrases": ["excellent service", "highly recommend"]
} ```
-```
+````
**Important Notes:**
-- JSON responses automatically disable streaming
-- Remember to handle loading states
-- Great for when you need to process or display data programmatically
-- See [Structured Outputs](https://platform.openai.com/docs/guides/structured-outputs) for more examples
+
+* JSON responses automatically disable streaming
+
+* Remember to handle loading states
+
+* Great for when you need to process or display data programmatically
+
+* See [Structured Outputs](https://platform.openai.com/docs/guides/structured-outputs) for more examples
## Integrations
### AI & LLMs
+
Learn more about working with these models in [Using AI Integrations](#using-ai-integrations).
#### ChatGPT
@@ -225,6 +249,161 @@ Example prompts:
* `Build a wiki that uses /[Markdown Renderer] to display AI-generated content`
+#### Hugging Face
+
+Access thousands of AI models and datasets through Hugging Face's comprehensive API.
+
+Example prompts:
+
+* `Generate text using /HuggingFace`
+
+* `Classify sentiment with /HuggingFace`
+
+* `Create an AI chatbot using /HuggingFace`
+
+
+ You'll need to set up your own Hugging Face API key to use this integration in Create.
+
+ [Full steps here](/integrations/huggingface) (2 mins set up time)
+
+
+#### Tavus
+
+Create personalized AI-generated video content at scale using Tavus.
+
+Example prompts:
+
+* `Generate a personalized video using /Tavus`
+
+* `Create video variations with /Tavus`
+
+* `Build a video message system using /Tavus`
+
+
+ You'll need to set up your own Tavus API key to use this integration in Create.
+
+ [Full steps here](/integrations/tavus) (2 mins set up time)
+
+
+#### Replicate Flux
+
+Generate high-quality images from text descriptions using Replicate's Flux model.
+
+Example prompts:
+
+* `Generate a landscape painting using /ReplicateFlux`
+
+* `Create product mockups with /ReplicateFlux`
+
+* `Build an AI art gallery using /ReplicateFlux`
+
+
+ You'll need to set up your own Replicate API key to use this integration in Create.
+
+ [Full steps here](/integrations/replicate-flux) (2 mins set up time)
+
+
+#### HeyGen
+
+Create professional AI-generated video content with customizable avatars and voices.
+
+Example prompts:
+
+* `Generate a video presentation using /HeyGen`
+
+* `Create an AI spokesperson with /HeyGen`
+
+* `Build a video message system using /HeyGen`
+
+
+ You'll need to set up your own HeyGen API key to use this integration in Create.
+
+ [Full steps here](/integrations/heygen) (2 mins set up time)
+
+
+#### Lu.ma
+
+Add calendar and event management functionality using Lu.ma's API.
+
+Example prompts:
+
+* `Add a calendar view using /Luma`
+
+* `Create an event registration form with /Luma`
+
+* `Build an event management dashboard using /Luma`
+
+
+ You'll need to set up your own Lu.ma API key to use this integration in Create.
+
+ [Full steps here](/integrations/luma) (2 mins set up time)
+
+
+#### Ideogram
+
+Generate high-quality AI art and illustrations with advanced style control.
+
+Example prompts:
+
+* `Generate an illustration using /Ideogram`
+
+* `Create a logo design with /Ideogram`
+
+* `Build an AI art gallery using /Ideogram`
+
+
+ You'll need to set up your own Ideogram API key to use this integration in Create.
+
+ [Full steps here](/integrations/ideogram) (2 mins set up time)
+
+
+#### Google Imagen
+
+Generate images with Google's Imagen model.
+
+Example prompts:
+
+* `Generate an image of a sunset over the mountains with /GoogleImagen`
+* `Create a fantasy landscape with /GoogleImagen`
+* `Design a futuristic cityscape using /GoogleImagen`
+
+
+ You'll need to set up your own Replicate API key to use this integration in Create.
+ [Full steps here](/integrations/google-imagen) (2 mins set up time)
+
+
+#### Minimax
+
+Integrate Minimax video generation capabilities using Replicate's AI Model Database into your application.
+
+Example prompts:
+
+* `Generate videos using /Minimax`
+* `Create personalized video content with /Minimax`
+* `Analyze video data using /Minimax`
+
+
+ You'll need to set up your own Minimax API key to use this integration in Create.
+
+ [Full steps here](/integrations/minimax) (2 mins set up time)
+
+
+#### iLovePDF
+
+Integrate iLovePDF capabilities into your application to manipulate PDF files.
+
+Example prompts:
+
+ * `Convert this webpage to PDF files using /iLovePDF`
+ * `Create a PDF document with /iLovePDF`
+ * `I want this webpage to PDF using /iLovePDF`
+
+
+ You'll need to set up your own iLovePDF API key to use this integration in Create.
+
+ [Full steps here](/integrations/ilovepdf) (2 mins set up time)
+
+
### UI Components
#### Chakra UI
@@ -293,320 +472,451 @@ Example prompts:
* `Create a tool that uses /[DALL-E] for custom illustrations`
-### Audio Processing
+#### Pexels
-#### Audio Transcription
+Find and use stock photos and videos seamlessly with the Pexels API
-Convert audio files to text.
+Example prompts:
+
+* `Find me a stock photo of a cat with /Pexels`
+
+* `Find me a video of a dog playing fetch with /Pexels`
+
+* `When using /Pexels, save the image URLs to my database`
+
+
+ You'll need to set up your own Pexels API key to use this integration in Create.
+
+ [Full steps here](/integrations/pexels) (2 mins set up time)
+
+
+#### Exa AI Search
+
+Search and summarize web content with the Exa API
Example prompts:
-* `Let users upload audio files and use /[Audio Transcription] to get text`
+* `Find recent AI research papers with /Exa`
+* `Get latest tech news articles with /Exa`
+* `Find documentation for Next.js 14 features with /Exa`
-* `Build a podcast transcription tool with /[Audio Transcription]`
+
+ You'll need to set up your own Exa API key to use this integration in Create.
+ [Full steps here](/integrations/exa) (2 mins set up time)
+
-* `Create a meeting notes app using /[Audio Transcription]`
+#### Firecrawl
-#### Text-to-Speech
+Extract data from any website with automatic browser rendering and scraping.
-Convert text to natural-sounding speech.
+Example prompts:
+
+* `Extract product details from this URL using /Firecrawl`
+
+* `Build a price comparison tool with /Firecrawl`
+
+* `Create a news aggregator using /Firecrawl`
+
+
+ You'll need to set up your own Firecrawl API key to use this integration in Create.
+
+ [Full steps here](/integrations/firecrawl) (2 mins set up time)
+
+
+#### Replicate Background Remover
+
+Remove backgrounds from images instantly using Replicate's state-of-the-art AI model.
Example prompts:
-* `Read content aloud using /[Text to Speech]`
+* `Remove the background from this product image with /ReplicateBackgroundRemover`
-* `Build an audiobook creator with /[Text to Speech]`
+* `Create a profile photo editor with /ReplicateBackgroundRemover`
-* `Create an accessibility tool using /[Text to Speech]`
+* `Build an image upload form that removes backgrounds using /ReplicateBackgroundRemover`
-### Maps & Places
+
+ You'll need to set up your own Replicate API key to use this integration in Create.
+
+ [Full steps here](/integrations/background-remover) (2 mins set up time)
+
-#### Google Maps
+#### LogMeal
-Add maps to your pages
+Analyze food images and get detailed nutritional information using AI-powered food recognition.
Example prompts:
-* `Show store locations on /[Google Maps]`
+* `Analyze this food photo with /LogMeal`
-* `Build a delivery tracker with /[Google Maps]`
+* `Get nutritional information for this meal using /LogMeal`
-* `Create a property listing app using /[Google Maps]`
+* `Create a food diary that uses /LogMeal for image analysis`
-#### Google Business Data
+
+ You'll need to set up your own LogMeal API key to use this integration in Create.
+
+ [Full steps here](/integrations/logmeal) (2 mins set up time)
+
-Access business information and insights.
+#### OpenLibrary
+
+Access millions of books and their metadata through OpenLibrary's comprehensive database.
Example prompts:
-* `Find restaurants using /[Google Business Data]`
+* `Search for books about AI with /OpenLibrary`
-* `Build a local business directory with /[Google Business Data]`
+* `Get details about this book using /OpenLibrary`
-* `Create a review aggregator using /[Google Business Data]`
+* `Create a reading list app with /OpenLibrary`
-#### Google Place Autocomplete
+
+ You'll need to set up your own OpenLibrary API key to use this integration in Create.
+
+ [Full steps here](/integrations/openlibrary) (2 mins set up time)
+
-Add location autocomplete to your inputs.
+#### Nutritionix
+
+Access comprehensive nutrition data and food information through the Nutritionix API.
Example prompts:
-* `Add address completion with /[Google Place Autocomplete]`
+* `Get nutrition info for an apple using /Nutritionix`
-* `Build a store locator using /[Google Place Autocomplete]`
+* `Track calories with /Nutritionix`
-* `Create a delivery form with /[Google Place Autocomplete]`
+* `Create a meal planner using /Nutritionix`
-#### Weather by City
+
+ You'll need to set up your own Nutritionix API keys to use this integration in Create.
+
+ [Full steps here](/integrations/nutritionix) (2 mins set up time)
+
-Display weather information for any location.
+#### Yelp
+
+Access business information, reviews, and ratings from Yelp's extensive database.
Example prompts:
-* `Show the weather forecast using /[Weather by City]`
+* `Find restaurants near me using /Yelp`
-* `Build a travel planner with /[Weather by City]`
+* `Get business reviews with /Yelp`
-* `Create a sports event scheduler using /[Weather by City]`
+* `Create a local business directory with /Yelp`
-### Documents
+
+ You'll need to set up your own Yelp API key to use this integration in Create.
+
+ [Full steps here](/integrations/yelp) (2 mins set up time)
+
-#### PDF Generation
+#### Ticketmaster
-Create and download PDFs programmatically.
+Access comprehensive event, venue, and ticket information through Ticketmaster's Discovery API.
Example prompts:
-* `Let users fill out a form and use /[PDF Generation] to download it`
+* `Find upcoming concerts using /Ticketmaster`
-* `Build an invoice generator with /[PDF Generation]`
+* `Get venue details with /Ticketmaster`
-* `Create a resume builder that exports to PDF using /[PDF Generation]`
+* `Create an event discovery app using /Ticketmaster`
-#### PDF Parser
+
+ You'll need to set up your own Ticketmaster API key to use this integration in Create.
+
+ [Full steps here](/integrations/ticketmaster) (2 mins set up time)
+
-Convert PDF files to text.
+#### Tenor
+
+Access millions of GIFs and animated content through Tenor's comprehensive API.
Example prompts:
-* `Extract text from PDFs using /[PDF Parser]`
+* `Find reaction GIFs using /Tenor`
-* `Build a document analyzer with /[PDF Parser]`
+* `Add animated stickers with /Tenor`
-* `Create a PDF search tool using /[PDF Parser]`
+* `Create a GIF picker using /Tenor`
-#### Document Scanner
+
+ You'll need to set up your own Tenor API key to use this integration in Create.
+
+ [Full steps here](/integrations/tenor) (2 mins set up time)
+
-Capture and process document images.
+#### GIPHY
+
+Access the world's largest library of GIFs, stickers, and animated content.
Example prompts:
-* `Let users scan documents with /[Document Scanner]`
+* `Find reaction GIFs using /GIPHY`
-* `Build a receipt tracker using /[Document Scanner]`
+* `Add animated stickers with /GIPHY`
-* `Create a business card scanner with /[Document Scanner]`
+* `Create a GIF picker using /GIPHY`
-For best results, ensure documents are 8.5x11in proportion.
+ You'll need to set up your own GIPHY API key to use this integration in Create.
+
+ [Full steps here](/integrations/giphy) (2 mins set up time)
-#### File Conversion
+### Audio Processing
-Convert files between different formats.
+#### Audio Transcription
+
+Convert audio files to text.
Example prompts:
-* `Convert PDFs to images using /[File Conversion]`
+* `Let users upload audio files and use /[Audio Transcription] to get text`
-* `Build a document converter with /[File Conversion]`
+* `Build a podcast transcription tool with /[Audio Transcription]`
-
-**Possible inputs include:** .html, .doc, .docx, .pptx, .xlsx, .pdf, .png, .jpg, .jpeg
-**Possible outputs include:** .pdf, .png, .jpg, .jpeg, .html
-
+* `Create a meeting notes app using /[Audio Transcription]`
-#### QR Code
+#### Text-to-Speech
-Generate QR codes for links and data.
+Convert text to natural-sounding speech.
Example prompts:
-* `Create QR codes with /[QR Code]`
+* `Read content aloud using /[Text to Speech]`
-* `Make a URL shortener with QR codes using /[QR Code]`
+* `Build an audiobook creator with /[Text to Speech]`
-### Entertainment & Media
+* `Create an accessibility tool using /[Text to Speech]`
-#### Movies and TV Series
+#### Freesound
-Search and get details about movies and TV shows.
+Access a vast library of Creative Commons Licensed sounds and audio samples.
Example prompts:
-* `Build a movie recommendation app with /[Movies and TV Series]`
+* `Find nature sound effects using /Freesound`
-* `Create a TV show tracker using /[Movies and TV Series]`
+* `Add background music with /Freesound`
-* `Make a watchlist app with /[Movies and TV Series]`
+* `Create a sound library using /Freesound`
-#### Anime and Manga
+
+ You'll need to set up your own Freesound API key to use this integration in Create.
+
+ [Full steps here](/integrations/freesound) (2 mins set up time)
+
-Get information about anime and manga titles.
+### Maps & Places
+
+#### Google Maps
+
+Add maps to your pages
Example prompts:
-* `Build an anime discovery tool with /[Anime and Manga]`
+* `Show store locations on /[Google Maps]`
-* `Create a manga reading list using /[Anime and Manga]`
+* `Build a delivery tracker with /[Google Maps]`
-* `Make an anime recommendation system with /[Anime and Manga]`
+* `Create a property listing app using /[Google Maps]`
+
+#### Google Business Data
+
+Access business information and insights.
+
+Example prompts:
+
+* `Find restaurants using /[Google Business Data]`
+
+* `Build a local business directory with /[Google Business Data]`
-#### Basketball
+* `Create a review aggregator using /[Google Business Data]`
-Access basketball statistics and data.
+#### Google Place Autocomplete
+
+Add location autocomplete to your inputs.
Example prompts:
-* `Build a basketball stats tracker with /[Basketball]`
+* `Add address completion with /[Google Place Autocomplete]`
-* `Create a fantasy basketball helper using /[Basketball]`
+* `Build a store locator using /[Google Place Autocomplete]`
-* `Make a game prediction tool with /[Basketball]`
+* `Create a delivery form with /[Google Place Autocomplete]`
-#### Book Search
+#### OpenWeather API
-Search and retrieve book information.
+Access real-time weather data and forecasts for any location worldwide.
Example prompts:
-* `Build a book discovery app with /[Book Search]`
+* `Show the weather forecast using /Weather`
-* `Create a reading list manager using /[Book Search]`
+* `Build a travel planner with /Weather`
-* `Make a book recommendation system with /[Book Search]`
+* `Create a sports event scheduler using /Weather`
-### Web Tools
+
+ You'll need to set up your own OpenWeatherMap API key to use this integration in Create.
+
+ [Full steps here](/integrations/weather) (2 mins set up time)
+
-#### Web Scraper
+#### Weather by City
-Extract data from websites.
+Display weather information for any location.
Example prompts:
-* `Take in a keyword, use /[Google Search] to find URLs and /[Web Scraper] to get the top 5 results body`
+* `Show the weather forecast using /[Weather by City]`
+
+* `Build a travel planner with /[Weather by City]`
+
+* `Create a sports event scheduler using /[Weather by City]`
-#### Google Translate
+### Documents
-Translate text between languages.
+#### PDF Generation
+
+Create and download PDFs programmatically.
Example prompts:
-* `Translate user input with /[Google Translate]`
+* `Let users fill out a form and use /[PDF Generation] to download it`
-* `Build a language learning app using /[Google Translate]`
+* `Build an invoice generator with /[PDF Generation]`
-* `Create a multilingual chat tool with /[Google Translate]`
+* `Create a resume builder that exports to PDF using /[PDF Generation]`
-#### Google Search
+#### PDF Parser
-Access search results and data.
+Convert PDF files to text.
Example prompts:
-* `Search the web using /[Google Search]`
+* `Extract text from PDFs using /[PDF Parser]`
-* `Build a research tool with /[Google Search]`
+* `Build a document analyzer with /[PDF Parser]`
-* `Create a trending topics analyzer using /[Google Search]`
+* `Create a PDF search tool using /[PDF Parser]`
-#### Google Image Search
+#### Document Scanner
-Search for images across the web.
+Capture and process document images.
Example prompts:
-* `Find images using /[Google Image Search]`
+* `Let users scan documents with /[Document Scanner]`
-* `Build an image discovery tool with /[Google Image Search]`
+* `Build a receipt tracker using /[Document Scanner]`
-* `Create a visual research assistant using /[Google Image Search]`
+* `Create a business card scanner with /[Document Scanner]`
-### Business Tools
+
+ For best results, ensure documents are 8.5x11in proportion.
+
-#### US Sales Tax Calculator
+#### File Conversion
-Calculate accurate sales tax for US addresses.
+Convert files between different formats.
Example prompts:
-* `Calculate order totals with /[US Sales Tax Calculator]`
+* `Convert PDFs to images using /[File Conversion]`
-* `Build an e-commerce checkout using /[US Sales Tax Calculator]`
+* `Build a document converter with /[File Conversion]`
-* `Create a pricing tool with /[US Sales Tax Calculator]`
+
+ **Possible inputs include:** .html, .doc, .docx, .pptx, .xlsx, .pdf, .png, .jpg, .jpeg\
+ **Possible outputs include:** .pdf, .png, .jpg, .jpeg, .html
+
-#### SEO Keywords Research
+#### QR Code
-Analyze search terms and discover opportunities.
+Generate QR codes for links and data.
Example prompts:
-* `Research keywords with /[SEO Keywords Research]`
+* `Create QR codes with /[QR Code]`
-* `Build a content planning tool using /[SEO Keywords Research]`
+* `Make a URL shortener with QR codes using /[QR Code]`
-* `Create an SEO analyzer with /[SEO Keywords Research]`
+### Entertainment & Media
-#### Charts
+#### Movies and TV Series
-Create interactive data visualizations.
+Search and get details about movies and TV shows.
Example prompts:
-* `Display sales data in a /[Charts] line graph`
+* `Build a movie recommendation app with /[Movies and TV Series]`
+
+* `Create a TV show tracker using /[Movies and TV Series]`
+* `Make a watchlist app with /[Movies and TV Series]`
+
+#### TMDb - The Movie Database
-* `Build a dashboard with multiple /[Charts]`
+Access detailed movie information and entertainment data with the MovieDB API
+
+Example prompts:
-* `Create an analytics page using /[Charts]`
+* `Find details for The Dark Knight with /TMDb`
+* `Build a movie recommendation app with /TMDb`
+* `Create a watchlist using /TMDb`
-Supports bar charts, line graphs, pie charts, and more. See examples at [Recharts](https://recharts.org/en-US/examples).
+ You'll need to set up your own MovieDB API key to use this integration in Create.
+
+ [Full steps here](/integrations/moviesdb) (2 mins set up time)
-#### Validate Emails
+#### Anime and Manga
-Verify email address validity.
+Get information about anime and manga titles.
Example prompts:
-* `Check email addresses with /[Validate Emails]`
+* `Build an anime discovery tool with /[Anime and Manga]`
-* `Build a signup form using /[Validate Emails]`
+* `Create a manga reading list using /[Anime and Manga]`
-* `Create a contact list cleaner with /[Validate Emails]`
+* `Make an anime recommendation system with /[Anime and Manga]`
-#### Domain Inspector
+#### Discord
-Check domain information and validity.
+Integrate Discord messaging capabilities into your application to send notifications, build chatbots, and interact with users through Discord's popular messaging service.
Example prompts:
-* `Verify domains using /[Domain Inspector]`
+* `Send a message to a channel using /Discord`
+* `Post a reminder with /Discord`
+* `Manage channels with /Discord`
-* `Build a website analyzer with /[Domain Inspector]`
-
-* `Create a domain research tool using /[Domain Inspector]`
+
+ You'll need to set up your own Discord bot token to use this integration in Create.
+
+ [Full steps here](/integrations/discord) (2 mins set up time)
+
-#### OpenAI Moderation
+#### Slack
-Check content for harmful or offensive material.
+Integrate Slack messaging capabilities into your application to send messages, manage channels, and interact with users.
Example prompts:
-* `Moderate user content with /[OpenAI Moderation]`
+* `Send a message to a channel using /Slack`
+* `Post a reminder with /Slack`
+* `Manage channels with /Slack`
-* `Build a safe chat app using /[OpenAI Moderation]`
+
+ You'll need to set up your own Slack API token to use this integration in Create.
+
+ [Full steps here](/integrations/slack) (2 mins set up time)
+
-* `Create a content filter with /[OpenAI Moderation]`
diff --git a/builder/mobile.mdx b/builder/mobile.mdx
new file mode 100644
index 0000000..6e3e9c2
--- /dev/null
+++ b/builder/mobile.mdx
@@ -0,0 +1,272 @@
+---
+title: "Mobile Apps (Beta)"
+description: "Build iOS and Android apps with Create"
+---
+
+
+
+
+
+Create is adding support for building native mobile apps for iOS and Android. This feature is in beta for early access members.
+
+**Join the beta:** Sign up at [earlyaccess.created.app](https://earlyaccess.created.app)
+
+
+ **Beta**
+
+ Mobile app support is rapidly evolving. You might encounter limitations with certain features or device capabilities.
+
+ Your real-world examples help us prioritize improvements. Try building different apps and tell us what works and what breaks.
+
+ Share feedback on our [Discord server](https://create.xyz/discord). Please include the /build link (URL from the builder) and a short description of what's breaking. We're especially interested in code gen or device capability errors.
+
+
+## What You Can Build
+
+With mobile app support, you can:
+
+- Build native iOS and Android apps through chat
+- Use device features like camera and location
+- Preview apps on your phone
+- Build full stack apps with Create's [functions](/functions), [database](/database), [user accounts](/auth), [uploads](/storage), and [payments](/payments)
+- Publish to the App Store and Google Play
+
+
+## Getting Started
+
+
+
+ Sign up at [earlyaccess.created.app](https://earlyaccess.created.app)
+
+
+
+ Start a fresh project from your dashboard
+
+
+
+ Click the Logo menu and select "New mobile page"
+
+
+
+
+
+
+
+ Tap anywhere on the page and describe what you want to build
+
+
+
+
+
+
+
+## How It Works
+
+Behind the scenes, Create generates React Native code for mobile devices. The code tab reveals React Native components like ``, ``, and `` that work across iOS and Android.
+
+
+
+
+
+## Building Your App
+
+
+
+ Tell Create what you want to build:
+
+ ```
+ Make a fitness tracking app where users can log workouts,
+ track progress, and set goals. Include a calendar view.
+ ```
+
+
+
+ Request specific mobile capabilities:
+
+ ```
+ Add a barcode scanner to scan product nutrition labels
+ ```
+
+ ```
+ Let users take photos of their workout progress
+ ```
+
+
+
+ Preview on your device and make improvements through conversation.
+
+ Be specific about issues so Create can fix the underlying code.
+
+
+
+Create handles all technical details:
+
+* Project structure setup
+* Dependencies and libraries
+* Screen navigation
+* Responsive layouts for different devices
+
+## Testing on Your Device
+
+
+
+ Download [Expo Go](https://expo.dev/client) on your iOS or Android device
+
+
+
+ Click the "Publish" button in Create
+
+
+
+
+
+
+
+ Wait about 1-3 minute for preparation. We're working on reducing this time.
+
+ When it's ready, you'll see a "View on mobile" button.
+
+
+
+ In the Publish modal, select "View on mobile"
+
+
+
+
+
+
+
+ Use your phone's camera to scan the QR code
+
+
+
+
+
+
+
+ Your app opens in Expo Go for immediate testing
+
+
+
+
+ Testing on a physical device provides the most accurate experience, especially for hardware features like camera or sensors.
+
+
+## Publishing to App Stores
+
+Currently, you can export your code and publish using Expo's tools.
+
+We're building a streamlined process for direct publishing to App Store and Google Play.
+
+## Features and Capabilities
+
+### Available Now
+
+| Feature | Status | Description |
+|---------|--------|-------------|
+| Chat to build | 🟢 Full | Build through conversation |
+| React Native generation | 🟡 In Development | Automatic code generation |
+| Pages | 🟢 Full | Mobile app views |
+| Components | 🟢 Full | Mobile-optimized UI elements |
+| [Databases](/builder/databases) | 🟢 Full | Data storage and retrieval |
+| [Functions](/builder/functions) | 🟢 Full | Custom backend logic |
+| [Uploads](/builder/uploads) | 🟢 Full | Image and file handling |
+| Navigation | 🟡 In Development | Screen transitions |
+| [User Accounts](/builder/user-accounts) | 🔴 Early | Authentication and profiles |
+| Device APIs | 🔴 Early | Camera, location, storage |
+| Offline Support | 🔴 Early | Basic offline functionality |
+
+### Coming Soon
+
+| Feature | Expected |
+|---------|----------|
+| More Device APIs | Q1 2025 |
+| App Store Publishing | Q1 2025 |
+| Background Services | Q2 2025 |
+| Push Notifications | Q2 2025 |
+| Deep Linking | Q2 2025 |
+| Enhanced Offline Mode | Q2 2025 |
+
+
+ Missing a feature you need? Let us know at hello@create.xyz
+
+
+## Device Capabilities
+
+Create mobile apps use Expo, giving access to device features:
+
+| Feature | Status | Function |
+|---------|--------|----------|
+| Image Picker | ✅ Supported | Select photos from gallery |
+| Camera | 🟡 In Development | Take photos and videos |
+| Location | 🟡 In Development | Access GPS coordinates |
+| Maps | 🟡 In Development | Display interactive maps |
+| Local Storage | 🟡 In Development | Save data on device |
+| Secure Storage | 🟡 In Development | Encrypted data storage |
+| Notifications | 🟡 In Development | Alert users (local only) |
+| Sensors | 🟡 In Development | Access motion sensors |
+| Barcode Scanner | 🟡 In Development | Scan QR codes and barcodes |
+| Haptic Feedback | 🟡 In Development | Vibration and tactile feedback |
+| Share | 🟡 In Development | Share to other apps |
+| Contacts | 🔴 Planned | Access device contacts |
+| Calendar | 🔴 Planned | Access device calendar |
+
+
+ To use any device feature, describe what you want in chat. Example: "Add a screen where users can take a photo and save it to their profile"
+
+
+## Technical Foundation
+
+Create mobile apps are built on:
+
+* Expo SDK 52
+* React Native 0.72.x
+* Expo Router for navigation
+
+## Best Practices
+
+1. **Start with mobile in mind** - Mention you're building a mobile app in your first prompt
+
+2. **Specify device features** - Clearly state when you need camera, location, etc.
+
+3. **Test on physical devices** - Mobile apps behave differently on real hardware
+
+4. **Consider offline use** - Plan for intermittent connectivity
+
+## Current Limitations
+
+* **Custom native modules** - Limited support for specialized native features
+* **Graphics-intensive apps** - May require manual optimization
+* **App store submission** - Requires some manual steps during beta
+
+## FAQ
+
+
+
+ Not automatically yet. Start a new mobile project and describe similar functionality. We're working on a conversion feature.
+
+
+
+ No! Create handles all React Native code for you. Just describe what you want.
+
+
+
+ Yes, with some manual steps during beta. We're streamlining this process.
+
+
+
+ You handle app signing certificates yourself for now. We'll simplify this in future updates.
+
+
+
+ Yes! Your mobile app connects to the same database as your web app.
+
+
+
+ Create automatically generates responsive layouts that adapt to different device sizes.
+
+
+
+
+ Need help? Join our [Discord community](https://create.xyz/discord) or email hello@create.xyz
+
\ No newline at end of file
diff --git a/builder/pages.mdx b/builder/pages.mdx
index fa7842d..a35833b 100644
--- a/builder/pages.mdx
+++ b/builder/pages.mdx
@@ -2,7 +2,7 @@
title: "Pages"
---
-Pages are the screens of your site or app. You start with a blank page when you open a new project.
+Pages are the screens of your site or app. You start with a blank page when you open a new project.
You can build powerful apps using a single page. As your project grows, you may want to split different parts into separate pages.
@@ -10,13 +10,31 @@ You can build powerful apps using a single page. As your project grows, you may
You start with a blank page. To create a new one:
-* [**Logo Menu**](/builder/controls#logo-menu) in the top left corner > New Page OR press `option-N` (or `alt-N` on Windows)
+* [**Logo Menu**](/builder/controls#logo-menu)
+
+ in the top left corner > New Page OR press
+
+ `option-N`
+
+ (or
+
+ `alt-N`
+
+ on Windows)
Pages auto-name based on their content. Rename by:
-* Tapping the [**Project Selector**](/builder/controls#project-selector) dropdown
+* Tapping the
-* Using the [**3 Dot Menu**](/builder/controls#3-dot-menu) next to the page name
+ [**Project Selector**](/builder/controls#project-selector)
+
+ dropdown
+
+* Using the
+
+ [**3 Dot Menu**](/builder/controls#3-dot-menu)
+
+ next to the page name
## Using Multiple Pages
@@ -28,94 +46,141 @@ Consider splitting your app into multiple pages when:
* You want separate views for different user types (e.g. customer-facing vs admin pages)
-* You need to [restrict access to certain users](/builder/user-accounts)
+* You need to
+
+ [restrict access to certain users](/builder/user-accounts)
-A single page can include many [components](/builder/components) and complex logic. Many apps work well with just one page.
+ A single page can include many [components](/builder/components) and complex logic. Many apps work well with just one page.
## Style Your Pages
Make pages look good using:
-* **Screenshots** pasted in chat - see our [prompting guide](/prompting)
+* **Screenshots**
-* **URLs** in chat - Create screenshots any URL and adds it to context
+ pasted in chat - see our
-* [**Integrations**](/builder/integrations) for component packs like shadcn/ui
+ [prompting guide](/prompting)
-* [**Style Guides**](/builder/style-guides) for consistency
+* **URLs**
-* [**Components**](/builder/components) for reusable elements
+ in chat - Create screenshots any URL and adds it to context
+
+* [**Integrations**](/builder/integrations)
+
+ for component packs like shadcn/ui
+
+* [**Style Guides**](/builder/style-guides)
+
+ for consistency
+
+* [**Components**](/builder/components)
+
+ for reusable elements
## Add Elements
Use `/` command menu to add:
-* [**Components**](/builder/components) for UI elements
+* [**Components**](/builder/components)
+
+ for UI elements
+
+* [**Integrations**](/builder/integrations)
+
+ for AI services
+
+* [**Databases**](/builder/databases)
-* [**Integrations**](/builder/integrations) for AI services
+ for data storage
-* [**Databases**](/builder/databases) for data storage
+* [**Functions**](/builder/functions)
-* [**Functions**](/builder/functions) for backend logic
+ for backend logic
Learn more about all available elements in our [overview](/builder/overview).
-After you add an element to a page, if you later update it, you will see a "Elements are out of date" warning in the page. Hit 'Update' to update the page with the latest element version.
+ After you add an element to a page, if you later update it, you will see a "Elements are out of date" warning in the page. Hit 'Update' to update the page with the latest element version.
## Publishing
To publish:
-* Tap **Publish** in top right
+* Tap
+
+ **Publish**
+
+ in top right
* Choose pages to make live
-* Set routes (e.g. `/about`)
+* Set routes (e.g.
+
+ `/about`
+
+ )
* Only published pages are accessible
-Routes are URL paths to your pages (e.g. yourdomain.com/about). Keep pages private by not publishing them.
+ Routes are URL paths to your pages (e.g. yourdomain.com/about). Keep pages private by not publishing them.
Read more about publishing in our [publishing guide](/publish-and-share/publish).
-## Link Pages
+## Adding Links
+
+1. By hand:
-1. Select Mode:
+ * Make sure you're in
- * Tap element
+ [Select Mode](/builder/controls#select-mode)
+
+ * Tap the element you want to be a link (e.g. a button or card)
+
+ * You'll see a blue outline on the element you've selected
+
+ * Scroll to the bottom of the chat window
* Choose "Link" in chat
- * Pick target page/URL
+ * Pick a target page/URL
+
+ * Save your changes
+
+2. By prompt:
-2. Prompts:
+ * [Publish](/publish-and-share/publish)
- * Set routes when publishing
+ your app and
- * Tell Create what should happen with the routes (e.g. "When clicking the About button, go to the /about page")
+ [choose routes](/publish-and-share/publish#routes)
- * Code updates automatically
+ for each page (e.g.
-
+ `/about`
+ )
+
+ * Tell Create what element should lead to the route (e.g. "When clicking the About button, go to the /about page")
+
+ * Create will update the code
+
+ * Publish your app to try it out live
+
+
## Requiring Authentication
You can restrict page access to signed-in users:
-1. Enable [User Accounts](/builder/user-accounts)
+1. Enable
+
+ [User Accounts](/builder/user-accounts)
2. Page > 3-dot menu > Settings > "Require account to view"
@@ -129,3 +194,14 @@ Users will:
Learn more about [User Accounts](/builder/user-accounts).
+## Deleting a Page
+
+This is not a recoverable action, proceed with caution
+
+
+
+* Select desired page from top level navigation
+
+* Use three dot menu to reveal deletion action
+
+* Click Delete Page
\ No newline at end of file
diff --git a/builder/user-accounts-v1.mdx b/builder/user-accounts-v1.mdx
new file mode 100644
index 0000000..0f9a43f
--- /dev/null
+++ b/builder/user-accounts-v1.mdx
@@ -0,0 +1,210 @@
+---
+title: "User Accounts"
+description: "Let users sign up and sign in to your app"
+---
+
+User Accounts add authentication and users to your app. They handle sign-up, sign-in, and user storage automatically.
+
+## Why Use User Accounts
+
+User Accounts offer several benefits:
+
+* **Private pages** - Require sign-in to view certain [Pages](/builder/pages)
+
+* **Protected actions** - Gate [Functions](/builder/functions) behind authentication
+
+* **Personalization** - Store and show user-specific content in the [Database](/builder/databases)
+
+* **Grow your users** - Let people sign up and join your community
+
+## Getting Started
+
+Enable User Accounts in two steps:
+
+1. **Enable for Project**:
+
+ * Open Create logo menu
+
+ * Choose "Enable User Accounts"
+
+ * Signup, Signin, Logout pages and a Users database gets created automatically
+
+2. **Protect Content**:
+
+ * Open page/function settings (3-dot menu > Settings > "Require sign in to view")
+
+ * Enable "Require sign in to view"
+
+ * Publish to apply changes
+
+## How Authentication Works
+
+When you enable User Accounts, Create adds:
+
+* **Authentication Pages**:
+
+ * `/account/signin` - Sign in page
+
+ * `/account/signup` - Sign up page
+
+ * `/account/logout` - Logout page
+
+ * Link to these pages directly for custom flows
+
+* **Users Database**:
+
+ * Stores user accounts automatically
+
+ * Built-in fields: email, password (hashed)
+
+ * Add custom fields as needed using [Databases](/builder/databases)
+
+* **Access Control**:
+
+ * Protected pages redirect to sign in
+
+ * After auth, users return to original page
+
+ * Functions can check user status
+
+ * Link between pages normally - auth handles protection
+
+
+Create handles auth redirects automatically. Link pages as you normally would - the auth system manages access control.
+
+
+## How It Works Under The Hood
+
+Create uses JWT (JSON Web Token) authentication to manage user sessions:
+
+* When users sign up or sign in, Create stores a secure cookie in their browser
+
+* This cookie keeps users logged in as they browse your app
+
+* When users visit a protected page or use a protected function, Create checks this cookie
+
+* If no valid cookie exists, Create redirects them to the sign-in page
+
+* To let users log out, add a link to `/account/logout` in your app's signed-in experience
+
+* When users visit the logout page, Create removes the cookie and ends their session
+
+## Real World Example
+
+Let's say you have an AI app with:
+
+* Landing page (at `/`)
+
+* AI homework creator (at `/app`)
+
+To add user accounts:
+
+1. Enable User Accounts for the project
+
+2. Go to `/app` page > 3-dot menu > Settings > "Require account to view"
+
+3. Publish changes
+
+4. Now:
+
+ * `/` remains public
+
+ * `/app` redirects to sign-in
+
+ * After sign-in, users access `/app`
+
+ * Add personalization: "When user is logged in, show their profile in top right and store their AI generations in GenerationsDB with their user ID"
+
+## Using User Data
+
+Access user information in two ways:
+
+1. **Direct References**:
+
+ * Use "signed in user" in prompts
+
+ * Example: "Show current user's email in header"
+
+ * Create handles the code automatically
+
+2. **Database Queries**:
+
+ * Query Users [database](/builder/databases) like any other database
+
+ * Join with other databases using user ID
+
+ * Store user-specific data in related tables
+
+## Roles and Permissions
+
+Add custom roles to control access:
+
+1. **Add Role Field**:
+
+ * Update Users database schema
+
+ * Add "role" or similar field
+
+ * Set values like "admin", "member"
+
+2. **Check Roles**:
+
+ * Reference roles in prompts
+
+ * Example: "If signed in user is admin, show settings"
+
+ * Create handles the logic
+
+## Testing
+
+Verify your User Accounts setup:
+
+1. Enable auth on a test page
+
+2. Publish changes
+
+3. Open an incognito window
+
+4. Verify redirect to sign-in
+
+5. Create test account
+
+6. Confirm access after auth
+
+## Troubleshooting
+
+If authentication isn't working:
+
+* Verify User Accounts is enabled for project
+
+* Check page/function auth settings
+
+* Review Users database contents
+
+* Test with a fresh account
+
+* Join our Discord for help
+
+## FAQs
+
+
+ Not yet, but it's on our roadmap.
+
+
+
+ Coming soon.
+
+
+
+ Yes! Update the Users database or create related databases to store additional user information.
+
+
+## See Also
+
+* [Databases](/builder/databases) - Store user data and content
+
+* [Functions](/builder/functions) - Add custom authentication logic that looks at the UserDB to do different actions
+
+* [Pages](/builder/pages) - Create protected routes
+
+* [Publishing](/publish-and-share/publish) - Deploy your authenticated app
diff --git a/builder/user-accounts.mdx b/builder/user-accounts.mdx
index 6b7432a..216a850 100644
--- a/builder/user-accounts.mdx
+++ b/builder/user-accounts.mdx
@@ -3,81 +3,166 @@ title: "User Accounts"
description: "Let users sign up and sign in to your app"
---
-User Accounts add authentication and user management to your app. They handle sign-up, sign-in, and user data storage automatically.
+User Accounts add authentication and users to your app. They handle sign-up, sign-in, logout, and storing users.
-## Why Use User Accounts
+## Overview
-User Accounts offer several benefits:
+Every Create project can add User Accounts. As you chat with Create, it manages adding the authentication details - from setting up secure login flows to writing the code that only shows your app's content to logged in users.
-* **Private pages** - Require sign-in to view certain [Pages](/builder/pages)
+Use User Accounts to:
-* **Protected actions** - Gate [Functions](/builder/functions) behind authentication
+* Let users sign up and sign in
-* **Personalization** - Store and show user-specific content in [Databases](/builder/databases)
+* Protect private content and features
-* **Grow your users** - Let people sign up and join your community
+* Store data per user
-## Getting Started
+* Personalize experiences
-Enable User Accounts in two steps:
+* Build apps with many users
+
+## Chat
+
+Create updates your app to add User Accounts if you chat about adding users.
+
+Try a prompt like: 'Let users sign up' or 'Store data per user'
+
+When Create recognizes you want to add user accounts, it:
+
+1. **Enables User Accounts** in your project
+
+2. **Adds special pages for Sign up, Sign in, and Logout**
+
+3. **Creates special tables in your app's [database](/builder/databases)** to store user information (auth\_users, auth\_accounts, etc.)
+
+4. **Adds checks to your pages and functions** to protect content that needs to be signed in to view
+
+5. **Updates everything** to make sure your pages and functions work with the new users tables and signed in user
+
+You will know it's working when you see the sign up, sign in, and logout pages in your app on the [Canvas](/builder/controls#canvas) or [Project Selector](/builder/controls#project-selector), or if you see the special user tables in your [database viewer](/builder/databases).
+
+
+
+
+
+
+## Adding Manually
+
+If Create isn't recognizing when to add User Accounts, you can also trigger it manually.
1. **Enable for Project**:
- * Open Create logo menu
+ * Open [Create logo menu](/builder/controls#logo-menu)
* Choose "Enable User Accounts"
- * Signup, Signin, Logout pages and a Users database gets created automatically
+ * Signup, Signin, Logout pages and the right tables gets created
2. **Protect Content**:
- * Open page/function settings (3-dot menu > Settings > "Require sign in to view")
+ * Open page/function settings ([3-dot menu](/builder/controls#three-dot-menu) > Settings > "Require sign in to view")
* Enable "Require sign in to view"
* Publish to apply changes
-## How Authentication Works
+## How It Works - In the App
When you enable User Accounts, Create adds:
-* **Authentication Pages**:
+### Authentication Pages
+
+* Sign In Page - `/account/signin`
+
+* Sign Up Page - `/account/signup`
+
+* Logout Page - `/account/logout`
+
+You can customize the look and feel of these pages by prompting Create to change them.
+
+Once User Accounts is enabled, you can also create components for the sign in, sign up, and logout functionality. This lets you embed this functionality anywhere. Under the hood, it uses the same auth routes as the pages.
+
+These pages contain special code to update the user in the database when they sign up/in and handle common errors.
+
+### User Tables
+
+Create makes 4 special tables:
+
+* `auth_users`: Tracks users in your app
+
+* `auth_accounts`: Tracks auth methods (email/password, Google, etc.)
+
+* `auth_sessions`: Database-backed user sessions
+
+* `auth_verification_token`: 2FA verification tokens
+
+Most used: `auth_users` (core profiles) and `auth_accounts` (login methods)
+
+
+
+
+ Most of the time, you won't need to worry about these implementation details. Create handles storing and managing user data automatically. However, understanding the underlying structure can help build more complex features or debug authentication flows.
+
+
+Built-in fields in `auth_users`:
+
+* `id`: Unique identifier for each user
+
+* `name`: User's display name (optional)
+
+* `email`: User's email address
+
+* `emailVerified`: Tracks if email has been verified
+
+* `image`: Profile image URL (optional)
+
+* `auth_accounts`: Links to the auth methods for the user
+
+Built-in fields in `auth_accounts`:
- * `/account/signin` - Sign in page
+* `id`: Unique identifier for each auth method
- * `/account/signup` - Sign up page
+* `userId`: Links to the user in auth\_users
- * `/account/logout` - Logout page
+* `type`: Authentication type (e.g. "credentials" for email/password)
- * Link to these pages directly for custom flows
+* `provider`: Auth provider (e.g. "credentials", "google")
-* **Users Database**:
+* `providerAccountId`: ID from the provider
- * Stores user accounts automatically
+* `refresh_token`: OAuth refresh token
- * Built-in fields: email, password (hashed)
+* `access_token`: OAuth access token
- * Add custom fields as needed using [Databases](/builder/databases)
+* `expires_at`: Token expiration
-* **Access Control**:
+* `token_type`: Type of token (e.g. "bearer")
- * Protected pages redirect to sign in
+* `scope`: OAuth scopes
- * After auth, users return to original page
+* `id_token`: OAuth ID token
- * Functions can check user status
+* `session_state`: Session state
- * Link between pages normally - auth handles protection
+* `password`: Hashed password (for credentials provider)
-
-Create handles auth redirects automatically. Link pages as you normally would - the auth system manages access control.
-
+**Storing Additional User Information**: You can prompt Create to store additional profile information per user, like "Store the user's bio, location, and phone number". Create will either add these fields directly to the `auth_users` table or create a linked profile table with these fields that connects to `auth_users` via the user's ID. This keeps your user data organized while maintaining the core authentication tables.
-## How It Works Under The Hood
+**Linking Data to Users**: When you prompt Create to store data per user (like posts, preferences, or settings), Create automatically adds a `user_id` field to those database tables. This `user_id` connects each piece of data to the specific user in the `auth_users` table who owns it. That lets your app later grab the data for a specific user.
-Create uses JWT (JSON Web Token) authentication to manage user sessions:
+### Signed In User
-* When users sign up or sign in, Create stores a secure cookie in their browser
+When you prompt Create to protect a page or show content per user on a page, e.g. "When user is signed in, show their profile in top right" or "If the user isn't signed in, don't show the notification settings", Create can now add code to grab the current signed in user's info and change the behavior of the app based on it.
+
+Pages, Functions, and Components can now all check the current signed in user, grab their information from the database, and use it to show/hide info, or change their behavior.
+
+Create automatically handles auth redirects. You can link pages as normal. If a user needs to be signed in to view a page, Create will check if they are. If they're not, it will redirect them to the Sign In page, and once signed in, redirect them back to the original page. Just prompt Create on which pages should be protected with sign in vs. public.
+
+## How It Works - For your Users
+
+Create uses Next Auth and JWT (JSON Web Token) authentication to manage user sessions:
+
+* When users sign up or sign in, Create saves the user's information in the database and stores a secure cookie in their browser
* This cookie keeps users logged in as they browse your app
@@ -87,7 +172,7 @@ Create uses JWT (JSON Web Token) authentication to manage user sessions:
* To let users log out, add a link to `/account/logout` in your app's signed-in experience
-* When users visit the logout page, Create removes the cookie and ends their session
+* When users visit the logout route, Create removes the cookie and ends their session
## Real World Example
@@ -99,9 +184,13 @@ Let's say you have an AI app with:
To add user accounts:
-1. Enable User Accounts for the project
+1. Prompt "Add users to the app. They should sign up and sign in to view the homework creator"
-2. Go to `/app` page > 3-dot menu > Settings > "Require account to view"
+2. Protect access to the homework creator page by either:
+
+ * Prompting: "Only let signed in users view the homework creator"
+
+ * Manually: Go to `/app` page > [3-dot menu](/builder/controls) > Settings > "Require account to view"
3. Publish changes
@@ -113,27 +202,167 @@ To add user accounts:
* After sign-in, users access `/app`
- * Add personalization: "When user is logged in, show their profile in top right and store their AI generations in GenerationsDB with their user ID"
+ * Add personalization: "When user is logged in, show their profile in top right and store their AI generations"
+
+ * Add special behavior: "If this is the users first time, show them an onboarding flow where they can fill out their profile"
+
+## Customizing Auth Pages
+
+Modify the built-in authentication pages through chat:
+
+```
+Add a logo to the signin page
+```
+
+```
+Make the sign in and sign up pages look like the rest of the app
+```
+
+Create will:
+
+* Update the look and feel of your pages
+
+* Add your logo
+
+* Maintain they key sign in / sign up code that stores the user
+
+Common customizations:
+
+* Adding branding elements
+
+* Adding additional auth methods (Google, Facebook, etc.)
+
+* Modifying form fields
+
+* Changing styles
+
+* Adding terms of service / privacy policy
+
+* Adding testimonials or other social proof
+
+## Flows and Redirects
+
+Prompt Create on how you want the flow to work.
+
+```
+Let users hit the sign up button and go to the sign up page
+
+Then after sign up, send them to the dashboard logged in
+```
+
+Create handles authentication flows automatically:
+
+* **Sign Up**:
+
+ 1. User submits signup form
+
+ 2. Create validates and stores account
+
+ 3. Sets auth cookie
+
+ 4. Redirects to page you prompt
+
+* **Sign In**:
+
+ 1. User visits page that requires sign in
+
+ 2. Create checks for auth cookie
+
+ 3. If no cookie, redirects to sign in page you prompt
+
+ 4. User enters credentials
+
+ 5. Create verifies account
+
+ 6. Sets auth cookie
+
+ 7. Returns to original page
+
+* **Sign Out**:
+
+ 1. User clicks logout
+
+ 2. Create clears auth cookie with the route `/account/logout`
+
+ 3. Redirects to public page you prompt
+
+## Storing User Data
+
+By default, Create stores the following information about users:
+
+* **Email** (required) - Used for login and account recovery
+
+* **Password** (hashed) - Securely stored using industry best practices
+
+* **User ID** - Unique identifier to link user data across tables
+
+* **Created Date** - When the account was created
+
+* **Last Login** - Most recent sign in
+
+You can prompt Create to store additional information per user. Create will update your database to make sure that each piece of user specific information is stored with a user\_id that links back to the user in your auth\_users table.
+
+Example prompts:
+
+```
+Add a bio field to user profiles
+```
+
+```
+Store user preferences like theme and notification settings
+```
+
+```
+Let users upload a profile picture
+```
+
+Create will:
+
+* Add the new fields to your database schema
+
+* Update queries to store/retrieve the data
+
+* Link everything to the correct user using their user\_id
+
+* Add UI elements to display and edit the information
## Using User Data
-Access user information in two ways:
+You can use the information you store about each user in your app. Just prompt Create. Some examples:
+
+* "Show the logged in user's tasks in the main feed"
+
+* "Show a feed with all users posts"
+
+* "If the user is logged in, show a profile image in the top right. Otherwise, show the sign up / sign in buttons"
+
+Create will update your [Pages](/builder/pages), [Functions](/builder/functions), and Components to use the user data.
+
+You can also manually access and change user information from the [Database Viewer](/builder/databases).
+
+## Profiles
+
+Build user profiles by:
+
+1. **Adding Profile Fields**:
+
+ * Prompt Create to add profile fields
-1. **Direct References**:
+ * Add avatar, bio, social links
- * Use "signed in user" in prompts
+ * Create will update the database to add the fields and update the queries to use them
- * Example: "Show current user's email in header"
+2. **Creating Profile Pages**:
- * Create handles the code automatically
+ * Prompt Create to create profile pages
-2. **Database Queries**:
+ * Create will update the pages to grab the user's profile data and display it
- * Query Users [database](/builder/databases) like any other database
+3. **Handling Updates**:
- * Join with other databases using user ID
+ * Prompt Create to create profile edit forms
- * Store user-specific data in related tables
+ * Create will update the pages/functions to update a user in the database
## Roles and Permissions
@@ -141,11 +370,11 @@ Add custom roles to control access:
1. **Add Role Field**:
- * Update Users database schema
+ * Prompt Create to add "role" or similar field for each user
- * Add "role" or similar field
+ * Describe the values you want to use like "admin", "member" and how you want behavior to change
- * Set values like "admin", "member"
+ * Create will update the database to add the field and update the queries to use it
2. **Check Roles**:
@@ -155,6 +384,52 @@ Add custom roles to control access:
* Create handles the logic
+## Auth Methods
+
+Create supports multiple auth methods. Choose the ones that fit your app's needs.
+
+You can turn on or off each auth method in the Project Settings.
+
+
+
+
+
+### [Email/Password](/auth/password)
+
+* Default authentication method
+
+* Secure password hashing
+
+* No additional setup required
+
+* You can turn it off in Project Settings
+
+* [Detailed guide here](/auth/password)
+
+### [Google](/auth/google)
+
+* Social login using Google accounts
+
+* You'll need to get a Google Client ID and Secret from Google
+
+* [Full setup guide](/auth/google)
+
+### [Facebook](/auth/facebook)
+
+* Social login using Facebook accounts
+
+* You'll need to get a Facebook App ID and Secret from Facebook
+
+* [Full setup guide](/auth/facebook)
+
+### [X](/auth/x)
+
+* Social login using X/Twitter accounts
+
+* You'll need to get a Twitter Client ID and Secret from X
+
+* [Full setup guide](/auth/x)
+
## Testing
Verify your User Accounts setup:
@@ -175,36 +450,73 @@ Verify your User Accounts setup:
If authentication isn't working:
-* Verify User Accounts is enabled for project
-
+* Verify User Accounts is enabled for project. Do you see the sign up, sign in, and logout pages in the Project Selector? Do you see the auth tables in the database?
* Check page/function auth settings
+* Review the database - check the auth_users table to make sure the user was created
+* Test with a fresh account
+* Join our [Discord](https://create.xyz/discord) for help
-* Review Users database contents
+### Error Codes
-* Test with a fresh account
+If one of your users runs into an error while signing in / signing up, or you do while testing, check the URL for `?error=[code]`.
+
+It can give you a hint on what might be wrong.
+
+
+
+
-* Join our Discord for help
+Common error codes and fixes:
+
+* **OAuthSignin/Callback**: OAuth configuration issue
+ - Check provider settings and keys
+ - Verify redirect URLs
+
+* **OAuthAccountNotLinked**: Email already used with different auth method
+ - User should sign in with original method (e.g. Google instead of email)
+
+* **CredentialsSignin**: Wrong email/password
+ - Double-check credentials
+ - Reset password if needed
+
+* **EmailCreateAccount**: Email already registered
+ - Use sign in instead
+ - Reset password if needed
+
+* **AccessDenied**: Permission issue
+ - Check access settings
+ - Verify allowed domains
+
+* **Configuration**: System setup issue
+ - Check auth configuration
+ - Verify environment variables
## FAQs
- Not yet, but it's on our roadmap.
+ Yes. Just prompt Create on how you'd like to change them.
-
- Coming soon.
+
+ Yes. You'll need to do some extra set up steps to get it working.
+
+ Here are the guides for each:
+
+ - [Google](/auth/google)
+ - [Facebook](/auth/facebook)
+ - [X](/auth/x)
- Yes! Update the Users database or create related databases to store additional user information.
+ Yes! Prompt Create to store additional user information and it will update the database for you.
## See Also
* [Databases](/builder/databases) - Store user data and content
-* [Functions](/builder/functions) - Add custom authentication logic that looks at the UserDB to do different actions
+* [Functions](/builder/functions) - Add backend logic that grabs the right data per user from the database
* [Pages](/builder/pages) - Create protected routes
-* [Publishing](/publish-and-share/publish) - Deploy your authenticated app
+* [Publishing](/publish-and-share/publish) - Go live with your authenticated app
\ No newline at end of file
diff --git a/essentials.mdx b/essentials.mdx
index bf8fcdd..90bfc68 100644
--- a/essentials.mdx
+++ b/essentials.mdx
@@ -21,7 +21,7 @@ Create projects can contain multiple elements to build end to end apps:
* [**Pages**](/builder/pages) for your app's screens
-* [**Components**](/builder/components) for reusable UI pieces
+* [**Components**](/builder/components) for reusable UI pieces
* [**Functions**](/builder/functions) for backend logic and external API calls
@@ -34,7 +34,7 @@ Create projects can contain multiple elements to build end to end apps:
When you start a new project, you begin on a single page.
-Don't want to start from scratch? Try a [**Template**](https://www.create.xyz/templates). Create's assistant will walk you through customizing the elements of the app.
+ Don't want to start from scratch? Try a [**Template**](https://www.create.xyz/templates). Create's assistant will walk you through customizing the elements of the app.
## Making improvements
@@ -47,18 +47,18 @@ You can change what level of detail you want to work on:
* When you select the **canvas**, messages can modify multiple elements at once
-## Generations
+## Generations
When you send a message, Create uses your message, message history, and the app's code history to generate the code for a new version.
When generating, you'll see the **code stream** or a **building icon**. When it's done, you can play with the app in **Demo mode**.
-[Pro members](https://create.xyz/pricing) get better generations - Create uses more history and context to make smarter changes.
+ [Pro members](https://create.xyz/pricing) get better generations - Create uses more history and context to make smarter changes.
-Read our [guide to prompting](/prompting) to learn how to write clear messages that get the results you want.
+ Read our [guide to prompting](/prompting) to learn how to write clear messages that get the results you want.
### Project-wide vs Single Element
@@ -66,29 +66,43 @@ Read our [guide to prompting](/prompting) to learn how to write clear messages t
You can generate changes at two levels:
**Project-wide generation**
+
* Tap the **project name** in [**Project Selector**](/builder/controls#project-selector) or tap on **canvas**
+
* Messages apply to entire project
+
* Create can edit across multiple elements
+
* Create can add new [**Pages**](/builder/pages), [**Components**](/builder/components), [**Functions**](/builder/functions)
+
* Good for:
+
* Building many elements quickly
+
* Maintaining consistent styles
+
* Features that span elements (**navigation**, [**databases**](/builder/databases))
**Single element generation**
+
* Tap **element name** in [**Project Selector**](/builder/controls#project-selector) or **select element** on canvas
+
* Messages only update that specific element
+
* Changes confined to selected [**Page**](/builder/pages), [**Component**](/builder/components), or [**Function**](/builder/functions)
+
* Good for:
+
* Making targeted changes with more control
+
* Refining specific features
+
* Debugging
-Switch between **project** and **element** level as needed. Start broad with project-wide changes, then drill down to specific elements for fine-tuning.
+ Switch between **project** and **element** level as needed. Start broad with project-wide changes, then drill down to specific elements for fine-tuning.
-
## Version history
As you chat with Create, it saves your version history automatically.
@@ -99,13 +113,7 @@ You can:
* **Restore** any previous version as the current version
-
+
## Demo vs. Select vs. Code
@@ -117,13 +125,7 @@ You can quickly switch between different modes to work on your app. Learn more a
* **Code mode**: View and edit the underlying code
-
+
## Creating new Elements
@@ -143,4 +145,4 @@ Toggle between two workspace views using the collapse icon:
## Go Live
-When you're ready to launch your app, tap the **Publish** button in the top right. Learn more about [Publishing](/publish-and-share/publish).
+When you're ready to launch your app, tap the **Publish** button in the top right. Learn more about [Publishing](/publish-and-share/publish).
\ No newline at end of file
diff --git a/faq.mdx b/faq.mdx
index 8aeea27..95dd02c 100644
--- a/faq.mdx
+++ b/faq.mdx
@@ -91,5 +91,10 @@ For other questions, join us on [Discord](https://create.xyz/discord) or email [
The #1 way we grow is by happy users telling their friends / work, spreading us on X, Reddit, YouTube, TikTok, Insta, etc, writing tutorials and testimonials. Join our [Discord community](https://create.xyz/discord) to chat with and help other creators.
-
+
+ We hope to support this in the future, but you are building a fully mobile friendly React web app in Create today. There are third party options for porting a web app to iOS or Android.
+
+
+
+
\ No newline at end of file
diff --git a/image.png b/image.png
new file mode 100644
index 0000000..2e2cba8
Binary files /dev/null and b/image.png differ
diff --git a/images/auth/database.png b/images/auth/database.png
new file mode 100644
index 0000000..ef81741
Binary files /dev/null and b/images/auth/database.png differ
diff --git a/images/auth/dbtables.png b/images/auth/dbtables.png
new file mode 100644
index 0000000..803bc3b
Binary files /dev/null and b/images/auth/dbtables.png differ
diff --git a/images/auth/errorinurl.png b/images/auth/errorinurl.png
new file mode 100644
index 0000000..06cf739
Binary files /dev/null and b/images/auth/errorinurl.png differ
diff --git a/images/auth/facebook/1-signindevelopers.png b/images/auth/facebook/1-signindevelopers.png
new file mode 100644
index 0000000..3acdd38
Binary files /dev/null and b/images/auth/facebook/1-signindevelopers.png differ
diff --git a/images/auth/facebook/10-savechanges.png b/images/auth/facebook/10-savechanges.png
new file mode 100644
index 0000000..ee53bb7
Binary files /dev/null and b/images/auth/facebook/10-savechanges.png differ
diff --git a/images/auth/facebook/11-basicsettings.png b/images/auth/facebook/11-basicsettings.png
new file mode 100644
index 0000000..358e70e
Binary files /dev/null and b/images/auth/facebook/11-basicsettings.png differ
diff --git a/images/auth/facebook/12-copyidsecret.png b/images/auth/facebook/12-copyidsecret.png
new file mode 100644
index 0000000..1e94c51
Binary files /dev/null and b/images/auth/facebook/12-copyidsecret.png differ
diff --git a/images/auth/facebook/13-domainprivacydatadeletion.png b/images/auth/facebook/13-domainprivacydatadeletion.png
new file mode 100644
index 0000000..25f27e5
Binary files /dev/null and b/images/auth/facebook/13-domainprivacydatadeletion.png differ
diff --git a/images/auth/facebook/14-businessverification.png b/images/auth/facebook/14-businessverification.png
new file mode 100644
index 0000000..987aabb
Binary files /dev/null and b/images/auth/facebook/14-businessverification.png differ
diff --git a/images/auth/facebook/15-publish.png b/images/auth/facebook/15-publish.png
new file mode 100644
index 0000000..1df76e9
Binary files /dev/null and b/images/auth/facebook/15-publish.png differ
diff --git a/images/auth/facebook/16-enablefb.png b/images/auth/facebook/16-enablefb.png
new file mode 100644
index 0000000..f9edbf9
Binary files /dev/null and b/images/auth/facebook/16-enablefb.png differ
diff --git a/images/auth/facebook/17-promptcreate.png b/images/auth/facebook/17-promptcreate.png
new file mode 100644
index 0000000..3c862cf
Binary files /dev/null and b/images/auth/facebook/17-promptcreate.png differ
diff --git a/images/auth/facebook/2-createapp.png b/images/auth/facebook/2-createapp.png
new file mode 100644
index 0000000..8c03b3e
Binary files /dev/null and b/images/auth/facebook/2-createapp.png differ
diff --git a/images/auth/facebook/3-namecontact.png b/images/auth/facebook/3-namecontact.png
new file mode 100644
index 0000000..c9cad9d
Binary files /dev/null and b/images/auth/facebook/3-namecontact.png differ
diff --git a/images/auth/facebook/4-choosefblogin.png b/images/auth/facebook/4-choosefblogin.png
new file mode 100644
index 0000000..3d0c4e6
Binary files /dev/null and b/images/auth/facebook/4-choosefblogin.png differ
diff --git a/images/auth/facebook/5-businessportfolios.png b/images/auth/facebook/5-businessportfolios.png
new file mode 100644
index 0000000..36d1d5d
Binary files /dev/null and b/images/auth/facebook/5-businessportfolios.png differ
diff --git a/images/auth/facebook/6-finalize.png b/images/auth/facebook/6-finalize.png
new file mode 100644
index 0000000..31b34ed
Binary files /dev/null and b/images/auth/facebook/6-finalize.png differ
diff --git a/images/auth/facebook/7-permissionsaddemail.png b/images/auth/facebook/7-permissionsaddemail.png
new file mode 100644
index 0000000..8e4b7e7
Binary files /dev/null and b/images/auth/facebook/7-permissionsaddemail.png differ
diff --git a/images/auth/facebook/8-settings.png b/images/auth/facebook/8-settings.png
new file mode 100644
index 0000000..35908fd
Binary files /dev/null and b/images/auth/facebook/8-settings.png differ
diff --git a/images/auth/facebook/9-oauthredirecturi.png b/images/auth/facebook/9-oauthredirecturi.png
new file mode 100644
index 0000000..edc536e
Binary files /dev/null and b/images/auth/facebook/9-oauthredirecturi.png differ
diff --git a/images/auth/google/1-gotoclients.png b/images/auth/google/1-gotoclients.png
new file mode 100644
index 0000000..49663eb
Binary files /dev/null and b/images/auth/google/1-gotoclients.png differ
diff --git a/images/auth/google/10-authorizedorigin.png b/images/auth/google/10-authorizedorigin.png
new file mode 100644
index 0000000..a8236a2
Binary files /dev/null and b/images/auth/google/10-authorizedorigin.png differ
diff --git a/images/auth/google/11-copyclientid.png b/images/auth/google/11-copyclientid.png
new file mode 100644
index 0000000..766b96f
Binary files /dev/null and b/images/auth/google/11-copyclientid.png differ
diff --git a/images/auth/google/12-copyclientsecret.png b/images/auth/google/12-copyclientsecret.png
new file mode 100644
index 0000000..69e9ed4
Binary files /dev/null and b/images/auth/google/12-copyclientsecret.png differ
diff --git a/images/auth/google/13-customizebranding.png b/images/auth/google/13-customizebranding.png
new file mode 100644
index 0000000..65f6c75
Binary files /dev/null and b/images/auth/google/13-customizebranding.png differ
diff --git a/images/auth/google/14-optionaladdscopes.png b/images/auth/google/14-optionaladdscopes.png
new file mode 100644
index 0000000..22bf5c5
Binary files /dev/null and b/images/auth/google/14-optionaladdscopes.png differ
diff --git a/images/auth/google/15-3dotprojectsettings.png b/images/auth/google/15-3dotprojectsettings.png
new file mode 100644
index 0000000..d84f015
Binary files /dev/null and b/images/auth/google/15-3dotprojectsettings.png differ
diff --git a/images/auth/google/16-enablegooglesignin.png b/images/auth/google/16-enablegooglesignin.png
new file mode 100644
index 0000000..fadbba4
Binary files /dev/null and b/images/auth/google/16-enablegooglesignin.png differ
diff --git a/images/auth/google/17-pasteclientidsecret.png b/images/auth/google/17-pasteclientidsecret.png
new file mode 100644
index 0000000..1db45e0
Binary files /dev/null and b/images/auth/google/17-pasteclientidsecret.png differ
diff --git a/images/auth/google/18-promptcreateaddsignin.png b/images/auth/google/18-promptcreateaddsignin.png
new file mode 100644
index 0000000..3481362
Binary files /dev/null and b/images/auth/google/18-promptcreateaddsignin.png differ
diff --git a/images/auth/google/2-selectormakenewproject.png b/images/auth/google/2-selectormakenewproject.png
new file mode 100644
index 0000000..510b392
Binary files /dev/null and b/images/auth/google/2-selectormakenewproject.png differ
diff --git a/images/auth/google/3-nameprojectaddtoorg.png b/images/auth/google/3-nameprojectaddtoorg.png
new file mode 100644
index 0000000..694be65
Binary files /dev/null and b/images/auth/google/3-nameprojectaddtoorg.png differ
diff --git a/images/auth/google/4-hitgetstartedfromproject.png b/images/auth/google/4-hitgetstartedfromproject.png
new file mode 100644
index 0000000..8b980a0
Binary files /dev/null and b/images/auth/google/4-hitgetstartedfromproject.png differ
diff --git a/images/auth/google/5-addappnamesupportemail.png b/images/auth/google/5-addappnamesupportemail.png
new file mode 100644
index 0000000..6fac408
Binary files /dev/null and b/images/auth/google/5-addappnamesupportemail.png differ
diff --git a/images/auth/google/6-decideaudience.png b/images/auth/google/6-decideaudience.png
new file mode 100644
index 0000000..d0e7d53
Binary files /dev/null and b/images/auth/google/6-decideaudience.png differ
diff --git a/images/auth/google/7-addcontactinfo.png b/images/auth/google/7-addcontactinfo.png
new file mode 100644
index 0000000..f1219b9
Binary files /dev/null and b/images/auth/google/7-addcontactinfo.png differ
diff --git a/images/auth/google/8-createoauthclient.png b/images/auth/google/8-createoauthclient.png
new file mode 100644
index 0000000..b843935
Binary files /dev/null and b/images/auth/google/8-createoauthclient.png differ
diff --git a/images/auth/google/9-webapplicationclientname.png b/images/auth/google/9-webapplicationclientname.png
new file mode 100644
index 0000000..22f08b2
Binary files /dev/null and b/images/auth/google/9-webapplicationclientname.png differ
diff --git a/images/auth/google/error-requestinvalid.png b/images/auth/google/error-requestinvalid.png
new file mode 100644
index 0000000..45ab929
Binary files /dev/null and b/images/auth/google/error-requestinvalid.png differ
diff --git a/images/auth/google/error-requestinvaliddetails.png b/images/auth/google/error-requestinvaliddetails.png
new file mode 100644
index 0000000..124c4af
Binary files /dev/null and b/images/auth/google/error-requestinvaliddetails.png differ
diff --git a/images/auth/password/hashedpassword.png b/images/auth/password/hashedpassword.png
new file mode 100644
index 0000000..c20800d
Binary files /dev/null and b/images/auth/password/hashedpassword.png differ
diff --git a/images/auth/password/settings.png b/images/auth/password/settings.png
new file mode 100644
index 0000000..6a9aa60
Binary files /dev/null and b/images/auth/password/settings.png differ
diff --git a/images/auth/projectselector.png b/images/auth/projectselector.png
new file mode 100644
index 0000000..22d1b13
Binary files /dev/null and b/images/auth/projectselector.png differ
diff --git a/images/auth/x/1-developerxapps.png b/images/auth/x/1-developerxapps.png
new file mode 100644
index 0000000..9e6efb0
Binary files /dev/null and b/images/auth/x/1-developerxapps.png differ
diff --git a/images/auth/x/10-skiptokens.png b/images/auth/x/10-skiptokens.png
new file mode 100644
index 0000000..47fb180
Binary files /dev/null and b/images/auth/x/10-skiptokens.png differ
diff --git a/images/auth/x/11-userauthenticationsetup.png b/images/auth/x/11-userauthenticationsetup.png
new file mode 100644
index 0000000..71e13b3
Binary files /dev/null and b/images/auth/x/11-userauthenticationsetup.png differ
diff --git a/images/auth/x/12-apppermissions.png b/images/auth/x/12-apppermissions.png
new file mode 100644
index 0000000..f15e46a
Binary files /dev/null and b/images/auth/x/12-apppermissions.png differ
diff --git a/images/auth/x/13-webapp.png b/images/auth/x/13-webapp.png
new file mode 100644
index 0000000..082cc1b
Binary files /dev/null and b/images/auth/x/13-webapp.png differ
diff --git a/images/auth/x/14-redirecturlappinfo.png b/images/auth/x/14-redirecturlappinfo.png
new file mode 100644
index 0000000..37a1d98
Binary files /dev/null and b/images/auth/x/14-redirecturlappinfo.png differ
diff --git a/images/auth/x/15-keysandtokens.png b/images/auth/x/15-keysandtokens.png
new file mode 100644
index 0000000..ef392a6
Binary files /dev/null and b/images/auth/x/15-keysandtokens.png differ
diff --git a/images/auth/x/16-clientidclientsecret.png b/images/auth/x/16-clientidclientsecret.png
new file mode 100644
index 0000000..07320da
Binary files /dev/null and b/images/auth/x/16-clientidclientsecret.png differ
diff --git a/images/auth/x/17-createprojectsettings.png b/images/auth/x/17-createprojectsettings.png
new file mode 100644
index 0000000..8a0e424
Binary files /dev/null and b/images/auth/x/17-createprojectsettings.png differ
diff --git a/images/auth/x/18-enabletwitter.png b/images/auth/x/18-enabletwitter.png
new file mode 100644
index 0000000..74e00e0
Binary files /dev/null and b/images/auth/x/18-enabletwitter.png differ
diff --git a/images/auth/x/19-promptcreate.png b/images/auth/x/19-promptcreate.png
new file mode 100644
index 0000000..2f977e1
Binary files /dev/null and b/images/auth/x/19-promptcreate.png differ
diff --git a/images/auth/x/2-applyfordevaccount.png b/images/auth/x/2-applyfordevaccount.png
new file mode 100644
index 0000000..7027d69
Binary files /dev/null and b/images/auth/x/2-applyfordevaccount.png differ
diff --git a/images/auth/x/3-chooseplan.png b/images/auth/x/3-chooseplan.png
new file mode 100644
index 0000000..d797089
Binary files /dev/null and b/images/auth/x/3-chooseplan.png differ
diff --git a/images/auth/x/4-acceptagreement.png b/images/auth/x/4-acceptagreement.png
new file mode 100644
index 0000000..8708155
Binary files /dev/null and b/images/auth/x/4-acceptagreement.png differ
diff --git a/images/auth/x/5-createproject.png b/images/auth/x/5-createproject.png
new file mode 100644
index 0000000..868c356
Binary files /dev/null and b/images/auth/x/5-createproject.png differ
diff --git a/images/auth/x/6-chooseaname.png b/images/auth/x/6-chooseaname.png
new file mode 100644
index 0000000..f491692
Binary files /dev/null and b/images/auth/x/6-chooseaname.png differ
diff --git a/images/auth/x/7-chooseusecase.png b/images/auth/x/7-chooseusecase.png
new file mode 100644
index 0000000..c690eed
Binary files /dev/null and b/images/auth/x/7-chooseusecase.png differ
diff --git a/images/auth/x/8-projectdescription.png b/images/auth/x/8-projectdescription.png
new file mode 100644
index 0000000..99161dc
Binary files /dev/null and b/images/auth/x/8-projectdescription.png differ
diff --git a/images/auth/x/9-nameapp.png b/images/auth/x/9-nameapp.png
new file mode 100644
index 0000000..bb4a57e
Binary files /dev/null and b/images/auth/x/9-nameapp.png differ
diff --git a/images/background-remover/apigen.png b/images/background-remover/apigen.png
new file mode 100644
index 0000000..cc872e8
Binary files /dev/null and b/images/background-remover/apigen.png differ
diff --git a/images/background-remover/homepage.png b/images/background-remover/homepage.png
new file mode 100644
index 0000000..5508da3
Binary files /dev/null and b/images/background-remover/homepage.png differ
diff --git a/images/background-remover/setting.png b/images/background-remover/setting.png
new file mode 100644
index 0000000..aa890ad
Binary files /dev/null and b/images/background-remover/setting.png differ
diff --git a/images/background-remover/signin.png b/images/background-remover/signin.png
new file mode 100644
index 0000000..e968a25
Binary files /dev/null and b/images/background-remover/signin.png differ
diff --git a/images/brandfetch/apigen.png b/images/brandfetch/apigen.png
new file mode 100644
index 0000000..3d3c532
Binary files /dev/null and b/images/brandfetch/apigen.png differ
diff --git a/images/brandfetch/signup.png b/images/brandfetch/signup.png
new file mode 100644
index 0000000..43511f7
Binary files /dev/null and b/images/brandfetch/signup.png differ
diff --git a/images/databases/tasks-connected.png b/images/databases/tasks-connected.png
new file mode 100644
index 0000000..ef7e8d8
Binary files /dev/null and b/images/databases/tasks-connected.png differ
diff --git a/images/databases/tasks-functions.png b/images/databases/tasks-functions.png
new file mode 100644
index 0000000..fb50698
Binary files /dev/null and b/images/databases/tasks-functions.png differ
diff --git a/images/databases/tasks-ui.png b/images/databases/tasks-ui.png
new file mode 100644
index 0000000..2b4249f
Binary files /dev/null and b/images/databases/tasks-ui.png differ
diff --git a/images/databases/viewer.png b/images/databases/viewer.png
new file mode 100644
index 0000000..7aa4dcc
Binary files /dev/null and b/images/databases/viewer.png differ
diff --git a/images/discord/addCommand.png b/images/discord/addCommand.png
new file mode 100644
index 0000000..c674bcb
Binary files /dev/null and b/images/discord/addCommand.png differ
diff --git a/images/discord/addtoserver.png b/images/discord/addtoserver.png
new file mode 100644
index 0000000..08bcdb5
Binary files /dev/null and b/images/discord/addtoserver.png differ
diff --git a/images/discord/appid&pubkey.png b/images/discord/appid&pubkey.png
new file mode 100644
index 0000000..751f769
Binary files /dev/null and b/images/discord/appid&pubkey.png differ
diff --git a/images/discord/botprivileges.png b/images/discord/botprivileges.png
new file mode 100644
index 0000000..b550913
Binary files /dev/null and b/images/discord/botprivileges.png differ
diff --git a/images/discord/bottoken.png b/images/discord/bottoken.png
new file mode 100644
index 0000000..1ced7c2
Binary files /dev/null and b/images/discord/bottoken.png differ
diff --git a/images/discord/enabledevelopermode.png b/images/discord/enabledevelopermode.png
new file mode 100644
index 0000000..a3f371f
Binary files /dev/null and b/images/discord/enabledevelopermode.png differ
diff --git a/images/discord/getserverid.png b/images/discord/getserverid.png
new file mode 100644
index 0000000..8aa5756
Binary files /dev/null and b/images/discord/getserverid.png differ
diff --git a/images/discord/installlink.png b/images/discord/installlink.png
new file mode 100644
index 0000000..09bd339
Binary files /dev/null and b/images/discord/installlink.png differ
diff --git a/images/discord/interactiveendpoint.png b/images/discord/interactiveendpoint.png
new file mode 100644
index 0000000..509900a
Binary files /dev/null and b/images/discord/interactiveendpoint.png differ
diff --git a/images/discord/moresettings.png b/images/discord/moresettings.png
new file mode 100644
index 0000000..7ea48fe
Binary files /dev/null and b/images/discord/moresettings.png differ
diff --git a/images/discord/newapp.png b/images/discord/newapp.png
new file mode 100644
index 0000000..db7ac22
Binary files /dev/null and b/images/discord/newapp.png differ
diff --git a/images/discord/permissions.png b/images/discord/permissions.png
new file mode 100644
index 0000000..a1e9f8f
Binary files /dev/null and b/images/discord/permissions.png differ
diff --git a/images/discord/runtest.png b/images/discord/runtest.png
new file mode 100644
index 0000000..552b051
Binary files /dev/null and b/images/discord/runtest.png differ
diff --git a/images/discord/signin.png b/images/discord/signin.png
new file mode 100644
index 0000000..1f9b815
Binary files /dev/null and b/images/discord/signin.png differ
diff --git a/images/discord/testchat.png b/images/discord/testchat.png
new file mode 100644
index 0000000..36e3455
Binary files /dev/null and b/images/discord/testchat.png differ
diff --git a/images/elevenlabs/image1.png b/images/elevenlabs/image1.png
new file mode 100644
index 0000000..e838c79
Binary files /dev/null and b/images/elevenlabs/image1.png differ
diff --git a/images/elevenlabs/image2.png b/images/elevenlabs/image2.png
new file mode 100644
index 0000000..7c2f386
Binary files /dev/null and b/images/elevenlabs/image2.png differ
diff --git a/images/elevenlabs/image3.png b/images/elevenlabs/image3.png
new file mode 100644
index 0000000..f260bdc
Binary files /dev/null and b/images/elevenlabs/image3.png differ
diff --git a/images/elevenlabs/image4.png b/images/elevenlabs/image4.png
new file mode 100644
index 0000000..a806d14
Binary files /dev/null and b/images/elevenlabs/image4.png differ
diff --git a/images/elevenlabs/image5.png b/images/elevenlabs/image5.png
new file mode 100644
index 0000000..c7cbd76
Binary files /dev/null and b/images/elevenlabs/image5.png differ
diff --git a/images/elevenlabs/image6.png b/images/elevenlabs/image6.png
new file mode 100644
index 0000000..38c8fed
Binary files /dev/null and b/images/elevenlabs/image6.png differ
diff --git a/images/elevenlabs/image7.png b/images/elevenlabs/image7.png
new file mode 100644
index 0000000..c1be8af
Binary files /dev/null and b/images/elevenlabs/image7.png differ
diff --git a/images/elevenlabs/image8.png b/images/elevenlabs/image8.png
new file mode 100644
index 0000000..5231567
Binary files /dev/null and b/images/elevenlabs/image8.png differ
diff --git a/images/elevenlabs/image9.png b/images/elevenlabs/image9.png
new file mode 100644
index 0000000..2b5f7c0
Binary files /dev/null and b/images/elevenlabs/image9.png differ
diff --git a/images/exa/image1.png b/images/exa/image1.png
new file mode 100644
index 0000000..83e4b5b
Binary files /dev/null and b/images/exa/image1.png differ
diff --git a/images/exa/image2.png b/images/exa/image2.png
new file mode 100644
index 0000000..78dc222
Binary files /dev/null and b/images/exa/image2.png differ
diff --git a/images/exa/image3.png b/images/exa/image3.png
new file mode 100644
index 0000000..2cd1e59
Binary files /dev/null and b/images/exa/image3.png differ
diff --git a/images/exa/image4.png b/images/exa/image4.png
new file mode 100644
index 0000000..9327d9a
Binary files /dev/null and b/images/exa/image4.png differ
diff --git a/images/exa/image5.png b/images/exa/image5.png
new file mode 100644
index 0000000..88f0ba1
Binary files /dev/null and b/images/exa/image5.png differ
diff --git a/images/exa/image6.png b/images/exa/image6.png
new file mode 100644
index 0000000..c1be8af
Binary files /dev/null and b/images/exa/image6.png differ
diff --git a/images/firecrawl/apigen.png b/images/firecrawl/apigen.png
new file mode 100644
index 0000000..f8da3a1
Binary files /dev/null and b/images/firecrawl/apigen.png differ
diff --git a/images/firecrawl/homepage.png b/images/firecrawl/homepage.png
new file mode 100644
index 0000000..49d53e7
Binary files /dev/null and b/images/firecrawl/homepage.png differ
diff --git a/images/firecrawl/signup.png b/images/firecrawl/signup.png
new file mode 100644
index 0000000..cd4a0a1
Binary files /dev/null and b/images/firecrawl/signup.png differ
diff --git a/images/freesound/apigen.png b/images/freesound/apigen.png
new file mode 100644
index 0000000..b760ffc
Binary files /dev/null and b/images/freesound/apigen.png differ
diff --git a/images/freesound/application.png b/images/freesound/application.png
new file mode 100644
index 0000000..08f7a56
Binary files /dev/null and b/images/freesound/application.png differ
diff --git a/images/freesound/homepage.png b/images/freesound/homepage.png
new file mode 100644
index 0000000..613d3ed
Binary files /dev/null and b/images/freesound/homepage.png differ
diff --git a/images/freesound/signup.png b/images/freesound/signup.png
new file mode 100644
index 0000000..684c225
Binary files /dev/null and b/images/freesound/signup.png differ
diff --git a/images/giphy/apigen.png b/images/giphy/apigen.png
new file mode 100644
index 0000000..6a1acdf
Binary files /dev/null and b/images/giphy/apigen.png differ
diff --git a/images/giphy/createapi.png b/images/giphy/createapi.png
new file mode 100644
index 0000000..3e2b68a
Binary files /dev/null and b/images/giphy/createapi.png differ
diff --git a/images/giphy/homepage.png b/images/giphy/homepage.png
new file mode 100644
index 0000000..6f59115
Binary files /dev/null and b/images/giphy/homepage.png differ
diff --git a/images/giphy/pickapi.png b/images/giphy/pickapi.png
new file mode 100644
index 0000000..80184c7
Binary files /dev/null and b/images/giphy/pickapi.png differ
diff --git a/images/giphy/signup.png b/images/giphy/signup.png
new file mode 100644
index 0000000..5ad9c1c
Binary files /dev/null and b/images/giphy/signup.png differ
diff --git a/images/heygen/apigen.png b/images/heygen/apigen.png
new file mode 100644
index 0000000..13ba26b
Binary files /dev/null and b/images/heygen/apigen.png differ
diff --git a/images/heygen/avatarid.png b/images/heygen/avatarid.png
new file mode 100644
index 0000000..fce8956
Binary files /dev/null and b/images/heygen/avatarid.png differ
diff --git a/images/heygen/homepage.png b/images/heygen/homepage.png
new file mode 100644
index 0000000..a09365a
Binary files /dev/null and b/images/heygen/homepage.png differ
diff --git a/images/heygen/setting.png b/images/heygen/setting.png
new file mode 100644
index 0000000..3191c2c
Binary files /dev/null and b/images/heygen/setting.png differ
diff --git a/images/heygen/signup.png b/images/heygen/signup.png
new file mode 100644
index 0000000..71d8bae
Binary files /dev/null and b/images/heygen/signup.png differ
diff --git a/images/heygen/voiceid.png b/images/heygen/voiceid.png
new file mode 100644
index 0000000..89e9c88
Binary files /dev/null and b/images/heygen/voiceid.png differ
diff --git a/images/huggingface/apigen.png b/images/huggingface/apigen.png
new file mode 100644
index 0000000..5e4a214
Binary files /dev/null and b/images/huggingface/apigen.png differ
diff --git a/images/huggingface/homepage.png b/images/huggingface/homepage.png
new file mode 100644
index 0000000..1747c92
Binary files /dev/null and b/images/huggingface/homepage.png differ
diff --git a/images/huggingface/readtoken.png b/images/huggingface/readtoken.png
new file mode 100644
index 0000000..05377cd
Binary files /dev/null and b/images/huggingface/readtoken.png differ
diff --git a/images/huggingface/setting.png b/images/huggingface/setting.png
new file mode 100644
index 0000000..e27b83c
Binary files /dev/null and b/images/huggingface/setting.png differ
diff --git a/images/huggingface/signup.png b/images/huggingface/signup.png
new file mode 100644
index 0000000..853fff1
Binary files /dev/null and b/images/huggingface/signup.png differ
diff --git a/images/ideogram/apigen.png b/images/ideogram/apigen.png
new file mode 100644
index 0000000..300cd97
Binary files /dev/null and b/images/ideogram/apigen.png differ
diff --git a/images/ideogram/homepage.png b/images/ideogram/homepage.png
new file mode 100644
index 0000000..81e4fa0
Binary files /dev/null and b/images/ideogram/homepage.png differ
diff --git a/images/ideogram/settings.png b/images/ideogram/settings.png
new file mode 100644
index 0000000..9eba50c
Binary files /dev/null and b/images/ideogram/settings.png differ
diff --git a/images/ilovepdf/apigen.png b/images/ilovepdf/apigen.png
new file mode 100644
index 0000000..7b0600f
Binary files /dev/null and b/images/ilovepdf/apigen.png differ
diff --git a/images/ilovepdf/homepage.png b/images/ilovepdf/homepage.png
new file mode 100644
index 0000000..8017186
Binary files /dev/null and b/images/ilovepdf/homepage.png differ
diff --git a/images/ilovepdf/signup.png b/images/ilovepdf/signup.png
new file mode 100644
index 0000000..a0022e7
Binary files /dev/null and b/images/ilovepdf/signup.png differ
diff --git a/images/line/.DS_Store b/images/line/.DS_Store
new file mode 100644
index 0000000..09bd85f
Binary files /dev/null and b/images/line/.DS_Store differ
diff --git a/images/line/image1.png b/images/line/image1.png
new file mode 100644
index 0000000..98677c4
Binary files /dev/null and b/images/line/image1.png differ
diff --git a/images/line/image2.png b/images/line/image2.png
new file mode 100644
index 0000000..6dc2288
Binary files /dev/null and b/images/line/image2.png differ
diff --git a/images/line/image3.png b/images/line/image3.png
new file mode 100644
index 0000000..1a12009
Binary files /dev/null and b/images/line/image3.png differ
diff --git a/images/line/image4.png b/images/line/image4.png
new file mode 100644
index 0000000..f149d82
Binary files /dev/null and b/images/line/image4.png differ
diff --git a/images/line/image5.png b/images/line/image5.png
new file mode 100644
index 0000000..09ffa6a
Binary files /dev/null and b/images/line/image5.png differ
diff --git a/images/line/image6.png b/images/line/image6.png
new file mode 100644
index 0000000..fec2570
Binary files /dev/null and b/images/line/image6.png differ
diff --git a/images/line/image7.png b/images/line/image7.png
new file mode 100644
index 0000000..4993517
Binary files /dev/null and b/images/line/image7.png differ
diff --git a/images/line/image8.png b/images/line/image8.png
new file mode 100644
index 0000000..86fcbf1
Binary files /dev/null and b/images/line/image8.png differ
diff --git a/images/line/line-bot-setting.png b/images/line/line-bot-setting.png
new file mode 100644
index 0000000..132165f
Binary files /dev/null and b/images/line/line-bot-setting.png differ
diff --git a/images/line/line-groupchat.png b/images/line/line-groupchat.png
new file mode 100644
index 0000000..e877f37
Binary files /dev/null and b/images/line/line-groupchat.png differ
diff --git a/images/line/line-login.png b/images/line/line-login.png
new file mode 100644
index 0000000..7aeaa64
Binary files /dev/null and b/images/line/line-login.png differ
diff --git a/images/line/line-secret.png b/images/line/line-secret.png
new file mode 100644
index 0000000..1263c73
Binary files /dev/null and b/images/line/line-secret.png differ
diff --git a/images/line/line-webhook-input.png b/images/line/line-webhook-input.png
new file mode 100644
index 0000000..68053ea
Binary files /dev/null and b/images/line/line-webhook-input.png differ
diff --git a/images/line/line-webhook-verify.png b/images/line/line-webhook-verify.png
new file mode 100644
index 0000000..c782fd1
Binary files /dev/null and b/images/line/line-webhook-verify.png differ
diff --git a/images/line/line-webhook.png b/images/line/line-webhook.png
new file mode 100644
index 0000000..0938135
Binary files /dev/null and b/images/line/line-webhook.png differ
diff --git a/images/logmeal/apigen.png b/images/logmeal/apigen.png
new file mode 100644
index 0000000..c4b7b73
Binary files /dev/null and b/images/logmeal/apigen.png differ
diff --git a/images/logmeal/homepage.png b/images/logmeal/homepage.png
new file mode 100644
index 0000000..a6a24c6
Binary files /dev/null and b/images/logmeal/homepage.png differ
diff --git a/images/logmeal/signin.png b/images/logmeal/signin.png
new file mode 100644
index 0000000..3448182
Binary files /dev/null and b/images/logmeal/signin.png differ
diff --git a/images/luma/apigen.png b/images/luma/apigen.png
new file mode 100644
index 0000000..fba0c42
Binary files /dev/null and b/images/luma/apigen.png differ
diff --git a/images/luma/createcalendar.png b/images/luma/createcalendar.png
new file mode 100644
index 0000000..6054cad
Binary files /dev/null and b/images/luma/createcalendar.png differ
diff --git a/images/luma/homepage.png b/images/luma/homepage.png
new file mode 100644
index 0000000..50135ee
Binary files /dev/null and b/images/luma/homepage.png differ
diff --git a/images/luma/signup.png b/images/luma/signup.png
new file mode 100644
index 0000000..1e58698
Binary files /dev/null and b/images/luma/signup.png differ
diff --git a/images/mobile/hitpublish.png b/images/mobile/hitpublish.png
new file mode 100644
index 0000000..83a3158
Binary files /dev/null and b/images/mobile/hitpublish.png differ
diff --git a/images/mobile/newmobilepagemenu.png b/images/mobile/newmobilepagemenu.png
new file mode 100644
index 0000000..db5a09c
Binary files /dev/null and b/images/mobile/newmobilepagemenu.png differ
diff --git a/images/mobile/overview.png b/images/mobile/overview.png
new file mode 100644
index 0000000..f627673
Binary files /dev/null and b/images/mobile/overview.png differ
diff --git a/images/mobile/pagefunctionsettings.png b/images/mobile/pagefunctionsettings.png
new file mode 100644
index 0000000..ef237b1
Binary files /dev/null and b/images/mobile/pagefunctionsettings.png differ
diff --git a/images/mobile/scanbarcode.png b/images/mobile/scanbarcode.png
new file mode 100644
index 0000000..fcab722
Binary files /dev/null and b/images/mobile/scanbarcode.png differ
diff --git a/images/mobile/viewcode.png b/images/mobile/viewcode.png
new file mode 100644
index 0000000..c341ce0
Binary files /dev/null and b/images/mobile/viewcode.png differ
diff --git a/images/mobile/viewonmobile.png b/images/mobile/viewonmobile.png
new file mode 100644
index 0000000..b0adc6d
Binary files /dev/null and b/images/mobile/viewonmobile.png differ
diff --git a/images/moviedb/image1.png b/images/moviedb/image1.png
new file mode 100644
index 0000000..0ece13f
Binary files /dev/null and b/images/moviedb/image1.png differ
diff --git a/images/moviedb/image2.png b/images/moviedb/image2.png
new file mode 100644
index 0000000..3c782bb
Binary files /dev/null and b/images/moviedb/image2.png differ
diff --git a/images/moviedb/image3.png b/images/moviedb/image3.png
new file mode 100644
index 0000000..a2a8981
Binary files /dev/null and b/images/moviedb/image3.png differ
diff --git a/images/moviedb/image4.png b/images/moviedb/image4.png
new file mode 100644
index 0000000..855eae4
Binary files /dev/null and b/images/moviedb/image4.png differ
diff --git a/images/moviedb/image5.png b/images/moviedb/image5.png
new file mode 100644
index 0000000..83faeee
Binary files /dev/null and b/images/moviedb/image5.png differ
diff --git a/images/neverbounce/neverbounce-apigen.png b/images/neverbounce/neverbounce-apigen.png
new file mode 100644
index 0000000..9b64017
Binary files /dev/null and b/images/neverbounce/neverbounce-apigen.png differ
diff --git a/images/neverbounce/neverbounce-app-create.png b/images/neverbounce/neverbounce-app-create.png
new file mode 100644
index 0000000..0ea456b
Binary files /dev/null and b/images/neverbounce/neverbounce-app-create.png differ
diff --git a/images/neverbounce/neverbounce-website.png b/images/neverbounce/neverbounce-website.png
new file mode 100644
index 0000000..752e012
Binary files /dev/null and b/images/neverbounce/neverbounce-website.png differ
diff --git a/images/nutritionix/apigen.png b/images/nutritionix/apigen.png
new file mode 100644
index 0000000..00d4506
Binary files /dev/null and b/images/nutritionix/apigen.png differ
diff --git a/images/nutritionix/dashboard.png b/images/nutritionix/dashboard.png
new file mode 100644
index 0000000..c13a3ea
Binary files /dev/null and b/images/nutritionix/dashboard.png differ
diff --git a/images/nutritionix/homepage.png b/images/nutritionix/homepage.png
new file mode 100644
index 0000000..0ee98cd
Binary files /dev/null and b/images/nutritionix/homepage.png differ
diff --git a/images/nutritionix/signup.png b/images/nutritionix/signup.png
new file mode 100644
index 0000000..cac4174
Binary files /dev/null and b/images/nutritionix/signup.png differ
diff --git a/images/openlibrary/homepage.png b/images/openlibrary/homepage.png
new file mode 100644
index 0000000..eba6a00
Binary files /dev/null and b/images/openlibrary/homepage.png differ
diff --git a/images/petfinder/apigen.png b/images/petfinder/apigen.png
new file mode 100644
index 0000000..5e058e3
Binary files /dev/null and b/images/petfinder/apigen.png differ
diff --git a/images/petfinder/homepage.png b/images/petfinder/homepage.png
new file mode 100644
index 0000000..16078c1
Binary files /dev/null and b/images/petfinder/homepage.png differ
diff --git a/images/petfinder/requestaccess.png b/images/petfinder/requestaccess.png
new file mode 100644
index 0000000..9eb398f
Binary files /dev/null and b/images/petfinder/requestaccess.png differ
diff --git a/images/petfinder/settings.png b/images/petfinder/settings.png
new file mode 100644
index 0000000..fac149c
Binary files /dev/null and b/images/petfinder/settings.png differ
diff --git a/images/rentcast/apigen.png b/images/rentcast/apigen.png
new file mode 100644
index 0000000..7d7608c
Binary files /dev/null and b/images/rentcast/apigen.png differ
diff --git a/images/rentcast/homepage.png b/images/rentcast/homepage.png
new file mode 100644
index 0000000..1b87100
Binary files /dev/null and b/images/rentcast/homepage.png differ
diff --git a/images/rentcast/signup.png b/images/rentcast/signup.png
new file mode 100644
index 0000000..b25e7f3
Binary files /dev/null and b/images/rentcast/signup.png differ
diff --git a/images/resend/resend-apigen.png b/images/resend/resend-apigen.png
new file mode 100644
index 0000000..153ad12
Binary files /dev/null and b/images/resend/resend-apigen.png differ
diff --git a/images/resend/resend-auth.png b/images/resend/resend-auth.png
new file mode 100644
index 0000000..91f7c1e
Binary files /dev/null and b/images/resend/resend-auth.png differ
diff --git a/images/resend/resend-signup.png b/images/resend/resend-signup.png
new file mode 100644
index 0000000..b0033af
Binary files /dev/null and b/images/resend/resend-signup.png differ
diff --git a/images/resend/resend-verify.png b/images/resend/resend-verify.png
new file mode 100644
index 0000000..a8c0155
Binary files /dev/null and b/images/resend/resend-verify.png differ
diff --git a/images/slack/botevents.png b/images/slack/botevents.png
new file mode 100644
index 0000000..9b96455
Binary files /dev/null and b/images/slack/botevents.png differ
diff --git a/images/slack/channelSelect.png b/images/slack/channelSelect.png
new file mode 100644
index 0000000..9d01fdb
Binary files /dev/null and b/images/slack/channelSelect.png differ
diff --git a/images/slack/choosewhere.png b/images/slack/choosewhere.png
new file mode 100644
index 0000000..681adac
Binary files /dev/null and b/images/slack/choosewhere.png differ
diff --git a/images/slack/copywebhook.png b/images/slack/copywebhook.png
new file mode 100644
index 0000000..c303de3
Binary files /dev/null and b/images/slack/copywebhook.png differ
diff --git a/images/slack/createnew.png b/images/slack/createnew.png
new file mode 100644
index 0000000..80937d8
Binary files /dev/null and b/images/slack/createnew.png differ
diff --git a/images/slack/eventsub.png b/images/slack/eventsub.png
new file mode 100644
index 0000000..8ac782f
Binary files /dev/null and b/images/slack/eventsub.png differ
diff --git a/images/slack/homepage.png b/images/slack/homepage.png
new file mode 100644
index 0000000..631a0e3
Binary files /dev/null and b/images/slack/homepage.png differ
diff --git a/images/slack/incomingWebhook.png b/images/slack/incomingWebhook.png
new file mode 100644
index 0000000..1eb0205
Binary files /dev/null and b/images/slack/incomingWebhook.png differ
diff --git a/images/slack/install.png b/images/slack/install.png
new file mode 100644
index 0000000..6a02781
Binary files /dev/null and b/images/slack/install.png differ
diff --git a/images/slack/moresettings.png b/images/slack/moresettings.png
new file mode 100644
index 0000000..8e58021
Binary files /dev/null and b/images/slack/moresettings.png differ
diff --git a/images/slack/setupslash.png b/images/slack/setupslash.png
new file mode 100644
index 0000000..f225dca
Binary files /dev/null and b/images/slack/setupslash.png differ
diff --git a/images/slack/signin.png b/images/slack/signin.png
new file mode 100644
index 0000000..5ac942d
Binary files /dev/null and b/images/slack/signin.png differ
diff --git a/images/slack/signingsecret.png b/images/slack/signingsecret.png
new file mode 100644
index 0000000..4735608
Binary files /dev/null and b/images/slack/signingsecret.png differ
diff --git a/images/slack/slashnavigate.png b/images/slack/slashnavigate.png
new file mode 100644
index 0000000..7d7dd18
Binary files /dev/null and b/images/slack/slashnavigate.png differ
diff --git a/images/slack/tryitout.png b/images/slack/tryitout.png
new file mode 100644
index 0000000..795c967
Binary files /dev/null and b/images/slack/tryitout.png differ
diff --git a/images/spotify/apigen.png b/images/spotify/apigen.png
new file mode 100644
index 0000000..9dad732
Binary files /dev/null and b/images/spotify/apigen.png differ
diff --git a/images/spotify/createapp.png b/images/spotify/createapp.png
new file mode 100644
index 0000000..69a0a2a
Binary files /dev/null and b/images/spotify/createapp.png differ
diff --git a/images/spotify/dashboard.png b/images/spotify/dashboard.png
new file mode 100644
index 0000000..a1e5084
Binary files /dev/null and b/images/spotify/dashboard.png differ
diff --git a/images/spotify/homepage.png b/images/spotify/homepage.png
new file mode 100644
index 0000000..0b4b92a
Binary files /dev/null and b/images/spotify/homepage.png differ
diff --git a/images/spotify/settings.png b/images/spotify/settings.png
new file mode 100644
index 0000000..4819c49
Binary files /dev/null and b/images/spotify/settings.png differ
diff --git a/images/spotify/signup.png b/images/spotify/signup.png
new file mode 100644
index 0000000..27245b6
Binary files /dev/null and b/images/spotify/signup.png differ
diff --git a/images/stripe/connect/add-upsell.png b/images/stripe/connect/add-upsell.png
new file mode 100644
index 0000000..c44277d
Binary files /dev/null and b/images/stripe/connect/add-upsell.png differ
diff --git a/images/stripe/connect/add-use-is-subscribed.png b/images/stripe/connect/add-use-is-subscribed.png
new file mode 100644
index 0000000..55b200c
Binary files /dev/null and b/images/stripe/connect/add-use-is-subscribed.png differ
diff --git a/images/stripe/connect/find-users-db.png b/images/stripe/connect/find-users-db.png
new file mode 100644
index 0000000..ce1b81b
Binary files /dev/null and b/images/stripe/connect/find-users-db.png differ
diff --git a/images/stripe/connect/go-to-create-project.png b/images/stripe/connect/go-to-create-project.png
new file mode 100644
index 0000000..9bca02a
Binary files /dev/null and b/images/stripe/connect/go-to-create-project.png differ
diff --git a/images/stripe/connect/subscription-status-active.png b/images/stripe/connect/subscription-status-active.png
new file mode 100644
index 0000000..89d0922
Binary files /dev/null and b/images/stripe/connect/subscription-status-active.png differ
diff --git a/images/stripe/connect/upsell-after-style.png b/images/stripe/connect/upsell-after-style.png
new file mode 100644
index 0000000..fff0ee0
Binary files /dev/null and b/images/stripe/connect/upsell-after-style.png differ
diff --git a/images/stripe/connect/upsell-pre-style.png b/images/stripe/connect/upsell-pre-style.png
new file mode 100644
index 0000000..b3c133f
Binary files /dev/null and b/images/stripe/connect/upsell-pre-style.png differ
diff --git a/images/tavus/apigen.png b/images/tavus/apigen.png
new file mode 100644
index 0000000..4958831
Binary files /dev/null and b/images/tavus/apigen.png differ
diff --git a/images/tavus/homepage.png b/images/tavus/homepage.png
new file mode 100644
index 0000000..82ab660
Binary files /dev/null and b/images/tavus/homepage.png differ
diff --git a/images/tavus/replicaid.png b/images/tavus/replicaid.png
new file mode 100644
index 0000000..584ae8a
Binary files /dev/null and b/images/tavus/replicaid.png differ
diff --git a/images/tavus/signup.png b/images/tavus/signup.png
new file mode 100644
index 0000000..0b7e3d3
Binary files /dev/null and b/images/tavus/signup.png differ
diff --git a/images/tenor/apigen.png b/images/tenor/apigen.png
new file mode 100644
index 0000000..571a283
Binary files /dev/null and b/images/tenor/apigen.png differ
diff --git a/images/tenor/guide.png b/images/tenor/guide.png
new file mode 100644
index 0000000..be65c03
Binary files /dev/null and b/images/tenor/guide.png differ
diff --git a/images/tenor/homepage.png b/images/tenor/homepage.png
new file mode 100644
index 0000000..8569b8c
Binary files /dev/null and b/images/tenor/homepage.png differ
diff --git a/images/ticketmaster/apigen.png b/images/ticketmaster/apigen.png
new file mode 100644
index 0000000..e7a7003
Binary files /dev/null and b/images/ticketmaster/apigen.png differ
diff --git a/images/ticketmaster/homepage.png b/images/ticketmaster/homepage.png
new file mode 100644
index 0000000..d4ae993
Binary files /dev/null and b/images/ticketmaster/homepage.png differ
diff --git a/images/weather/homepage.png b/images/weather/homepage.png
new file mode 100644
index 0000000..d2bdaad
Binary files /dev/null and b/images/weather/homepage.png differ
diff --git a/images/yelp/apigen.png b/images/yelp/apigen.png
new file mode 100644
index 0000000..d9da8b7
Binary files /dev/null and b/images/yelp/apigen.png differ
diff --git a/images/yelp/homepage.png b/images/yelp/homepage.png
new file mode 100644
index 0000000..9cd4f62
Binary files /dev/null and b/images/yelp/homepage.png differ
diff --git a/images/yelp/manageapi.png b/images/yelp/manageapi.png
new file mode 100644
index 0000000..452fee0
Binary files /dev/null and b/images/yelp/manageapi.png differ
diff --git a/images/yelp/signin.png b/images/yelp/signin.png
new file mode 100644
index 0000000..99f6fc7
Binary files /dev/null and b/images/yelp/signin.png differ
diff --git a/integrations/background-remover.mdx b/integrations/background-remover.mdx
new file mode 100644
index 0000000..1edf06e
--- /dev/null
+++ b/integrations/background-remover.mdx
@@ -0,0 +1,105 @@
+---
+title: "Replicate Background Remover"
+description: "Remove backgrounds from images instantly using Replicate's AI model"
+---
+
+Background Remover uses Replicate's state-of-the-art AI model to automatically remove backgrounds from images with high precision.
+
+ Replicate requires paid credits to use their API. Please refer to their pricing [here](https://replicate.com/pricing#public-models).
+## Overview
+
+
+
+ Sign up for a Replicate account
+
+
+ Generate your Replicate API key
+
+
+ Add your API key to Create's secrets
+
+
+
+## Account Creation
+
+
+
+ Go to [replicate.com](https://www.replicate.com/) and click "Sign Up" in the top right corner
+
+
+
+
+
+ * Sign up with email/password
+ * Or continue with GitHub authentication
+
+
+
+
+
+## Generate API Key
+
+
+
+ 1. Click on your profile icon in the top right
+ 2. Select "API" from the dropdown menu
+
+
+
+
+
+ 1. Click "Create API Key"
+ 2. Name your key (e.g., "Create Integration")
+ 3. Click "Generate"
+
+
+
+
+
+ 1. Copy the generated API key
+ 2. Store it securely - you won't be able to see it again
+
+
+ Keep your API key secure - it grants access to your paid credits
+
+
+
+
+## Add to Create Project
+
+
+
+ 1. In your Create project, type `/` in the chat
+ 2. Select "Background Remover" from the menu
+
+
+
+ 1. Paste your API key into the "BACKGROUND_REMOVER_API_KEY" field
+
+
+ Need a new key? Generate one in your Background Remover dashboard.
+
+
+
+
+ You can now use prompts with the integration to remove image backgrounds.
+
+ Some examples:
+ * `Remove the background from this product image with /ReplicateBackgroundRemover`
+ * `Create a profile photo editor with /ReplicateBackgroundRemover`
+ * `Build an image upload form that removes backgrounds using /ReplicateBackgroundRemover`
+
+
+ Each API call uses one credit - implement caching for frequently processed images.
+
+
+ Example prompt for optimization:
+ ```
+ When using /ReplicateBackgroundRemover, cache the processed images in my database
+ ```
+
+
+
+
+ Your Background Remover integration is ready! Use `/ReplicateBackgroundRemover` in chat to process images.
+
diff --git a/integrations/brandfetch.mdx b/integrations/brandfetch.mdx
new file mode 100644
index 0000000..744dd20
--- /dev/null
+++ b/integrations/brandfetch.mdx
@@ -0,0 +1,93 @@
+---
+title: "Brandfetch"
+description: "Access company logos and brand assets"
+---
+
+Brandfetch API provides access to company logos, colors, and brand assets for millions of companies.
+
+## Overview
+
+
+
+ Sign up for a Brandfetch account
+
+
+ Generate your Brandfetch API key
+
+
+ Add your API key to Create's secrets
+
+
+
+## Account Creation
+
+
+
+ Go to [developers.brandfetch.com](https://developers.brandfetch.com/) and click "Sign Up"
+
+
+
+
+
+ * Sign up with email/password
+ * Or continue with Google authentication
+
+
+
+## Generate API Key
+
+
+
+ 1. Go to your Brandfetch dashboard
+ 2. Navigate to the "Brand API" section
+
+
+ Free tier has rate limits - monitor your usage
+
+
+
+
+ 1. An API Key is generated by default
+ 2. Copy your API key
+
+
+
+
+## Add to Create Project
+
+
+
+ 1. In your Create project, type `/` in the chat
+ 2. Select "Brandfetch" from the menu
+
+
+
+ 1. Paste your API key into the "BRANDFETCH_API_KEY" field
+
+
+ Need a new key? Contact Brandfetch support.
+
+
+
+
+ You can now use prompts with the integration to access brand assets.
+
+ Example prompts:
+ * `Get company logo using /Brandfetch`
+ * `Find brand colors with /Brandfetch`
+ * `Create a brand asset library using /Brandfetch`
+
+
+ API has rate limits - implement caching for frequently accessed brands.
+
+
+ Example prompt for optimization:
+ ```
+ When using /Brandfetch, cache the brand assets in my database
+ ```
+
+
+
+
+ Your Brandfetch integration is ready! Use `/Brandfetch` in chat to access brand assets.
+
diff --git a/integrations/discord.mdx b/integrations/discord.mdx
new file mode 100644
index 0000000..2dca455
--- /dev/null
+++ b/integrations/discord.mdx
@@ -0,0 +1,182 @@
+---
+title: "Discord"
+description: "Integrate Discord messaging capabilities into your application"
+---
+
+Connect your app to Discord's messaging platform to send notifications, build chatbots, and interact with users through Discord's popular messaging service.
+
+## Overview
+
+
+
+ Sign up and configure your Discord Developer Portal.
+
+
+ Create a Discord bot and obtain your bot token.
+
+
+ Turn on these settings to have the best experience with Discord.
+
+
+ Add your credentials to Create's secrets.
+
+
+
+## Account Setup
+
+
+
+ Go to [Discord Developer Portal](https://discord.com/developers/applications) and sign up with your account.
+
+
+
+
+
+ Click "New Application" to create a new Discord application.
+
+
+
+
+
+## Generate API Credentials
+
+
+
+ 1. Find your Public Key and Application ID in the General Information section.
+
+
+
+
+ 1. In the Bot settings, click "Reset Token" to generate and copy your bot token.
+
+
+ Keep your bot token secure - it grants full access to your bot.
+
+
+
+
+ 1. Go into your settings for the main Discord messaging application.
+ 2. Find the advanced tab and enable developer mode.
+
+ 3. Right click the server icon you want your bot join in your list of servers.
+ 4. Copy the Server ID.
+
+ Guild ID is the same as Server ID. They call it Guild to make it sound cool.
+
+
+
+## Verify Settings
+
+
+
+ 1. Head back to the Discord Developer portal and into the Bot section to enable Public Bot to allow others to download your bot.
+ 2. Enable Server Members intent to allow interactions with the server members.
+ 3. Enable Message Intent to allow the bot to interactive with messages in the server.
+
+
+
+
+ 1. Go into the Install section and scroll down to find the Default Install Settings
+ 2. Under Guild Install, click the drop down under scopes and add Bot to the list
+ 3. Under Permissions, enable Send Message and Read Message history.
+
+ Add more permissions here based on your Discord bot needs.
+
+
+
+ 1. Revisit the General Information section and scroll down to find the Interactive Endpoint URL
+ 2. Copy your Create project's base URL along with api/discord-webhook similar to the example picture.
+ Be sure your Create project is published and available on the internet
+ 3. Once you click "Save Changes", the endpoint should have verifed successfully.
+
+ Having issues with setup? Please reach out to the community on our [Discord](https://discord.com/invite/A4mjfuhwHj).
+
+
+
+## Setting Slash Commands
+
+
+ 1. In your Create project, run the Create Command function in the Run Test option. This will create a /chatgpt command for your bot.
+ You may skip the inputs and click "Run Test", if you have the your secrets/credentials setup.
+
+
+
+
+ 1. In the installation section, scroll down to find your installation link.
+ 2. Copy and paste it into your browser and add your bot to your server.
+
+
+
+
+ Send a test message using "/chatgpt Hello!" in your Discord server to verify that your bot is online and responding.
+
+
+
+
+## Add to Create Project
+
+
+
+ 1. In your Create project, type `/` in chat.
+ 2. Select "Discord" from the menu.
+
+
+
+ 1. Paste your Bot Token into "DISCORD_BOT_TOKEN".
+ 2. Paste your Application ID to "DISCORD_APP_ID".
+ 3. Paste your Public Key to "DISCORD_PUBLIC_KEY".
+ 4. Paste your Server ID to "DISCORD_GUILD_ID".
+
+
+ Need new credentials? Regenerate in the Discord Developer Portal.
+
+
+
+
+ Use prompts to implement Discord features:
+
+ * `Send a welcome message using /Discord`
+ * `Build a chatbot that uses /Discord for customer support`
+ * `Create a notification system with /Discord`
+
+
+ Discord API has rate limits - implement error handling for best reliability.
+
+
+
+
+
+ Discord integration complete! Use `/Discord` in chat to access messaging capabilities.
+
+
+## Frequently Asked Questions
+
+
+
+ Discord API allows you to interact with Discord's messaging platform, enabling you to send messages, build bots, and manage server interactions.
+
+
+
+ Yes, you need a Discord Developer Account to access the API and create a bot. The account is free and sufficient for testing and development.
+
+
+
+ The bot works by listening to events in Discord and responding to commands or messages based on your implementation.
+
+
+
+ You can build:
+ - Chatbots for customer support
+ - Notification systems for events
+ - Interactive games and experiences
+ - Moderation tools for server management
+
+
+
+ Yes, Discord has API rate limits. Free accounts have lower limits than paid accounts. Check Discord's official documentation for current limits.
+
+
+
+ Yes, you can test your integration by sending messages to your bot in a server where it has been invited. Monitor the bot's responses to ensure it functions as expected.
+
+
diff --git a/integrations/elevenlabs.mdx b/integrations/elevenlabs.mdx
new file mode 100644
index 0000000..49fc3c0
--- /dev/null
+++ b/integrations/elevenlabs.mdx
@@ -0,0 +1,94 @@
+---
+title: "ElevenLabs"
+description: "Add AI-powered voice generation and text-to-speech"
+---
+
+ElevenLabs provides state-of-the-art voice synthesis for natural sounding speech generation.
+
+## Overview
+
+
+
+ Sign up for an ElevenLabs account
+
+
+ Generate your ElevenLabs API key
+
+
+ Add your API key to Create's secrets
+
+
+
+## Account Creation
+
+
+
+ Go to [elevenlabs.io](https://elevenlabs.io/) and click "Sign Up"
+
+
+
+
+
+ * Sign up with email/password
+ * Or continue with Google authentication
+
+
+
+
+
+## Generate API Key
+
+
+
+ 1. Click your profile icon in the top right
+ 2. Select "API Keys" from the dropdown
+
+
+
+
+
+ 1. Click "Generate New API Key"
+ 2. Name the key (e.g., "Create Integration")
+
+
+
+
+
+ 1. Copy the generated API key
+
+ 2. Store it securely
+
+
+ This key will only be shown once
+
+
+
+
+## Add to Create Project
+
+
+
+ 1. In your Create project, type `/` in chat
+ 2. Select "ElevenLabs" from the menu
+
+
+
+ 1. Paste your ElevenLabs API key into the "ELEVEN_LABS_API_KEY" field
+
+
+ Need a new key? Regenerate in your ElevenLabs dashboard.
+
+
+
+
+ Use prompts with the integration to create voice content:
+
+ * `Generate a voiceover for this script with /ElevenLabs`
+ * `Convert the blog post to audio with a British accent using /ElevenLabs`
+ * `Clone my voice from this sample with /ElevenLabs`
+
+
+
+
+ ElevenLabs integration complete! Use `/ElevenLabs` in chat to access voice generation capabilities.
+
diff --git a/integrations/exa.mdx b/integrations/exa.mdx
new file mode 100644
index 0000000..6a30273
--- /dev/null
+++ b/integrations/exa.mdx
@@ -0,0 +1,102 @@
+---
+title: "Exa"
+description: "Crawl the internet with AI-powered search"
+---
+
+Exa lets you search and summarize web content using advanced AI models.
+
+## Overview
+
+
+
+ Sign up for an Exa account
+
+
+ Set up payment for API access
+
+
+ Generate your Exa API token
+
+
+ Add your token to Create's secrets
+
+
+
+## Account Setup
+
+
+
+ Go to [exa.ai](https://exa.ai/) and click "Try API For Free"
+
+
+
+
+
+ * Click "Continue with Google"
+ * Or sign up with email/password
+
+
+
+
+## Configure Billing
+
+
+
+ 1. Navigate to "Billing" in the left panel
+ 2. Click "Top Up Balance"
+
+
+
+
+
+ 1. Enter payment information
+ 2. Click "Purchase"
+
+
+
+
+## Generate API Token
+
+
+
+ 1. Go to "API Tokens" in settings
+ 2. Locate your default API key
+
+
+
+
+
+ 1. Click "Copy" next to your API token
+ 2. Store it securely
+
+
+
+
+## Add to Create Project
+
+
+
+ 1. In your Create project, type `/` in chat
+ 2. Select "Exa" from the menu
+
+
+
+ 1. Paste your Exa token into "EXA_API_KEY" secret
+
+
+ Lost your token? Generate a new one in Exa's dashboard.
+
+
+
+
+ Use prompts with the integration to search the web:
+
+ * `Find recent AI research papers about /Exa`
+ * `Get summarized content from wikipedia about /Exa`
+ * `Search for trending React components with /Exa`
+
+
+
+
+ Exa integration complete! Use `/Exa` in chat to access web search capabilities.
+
\ No newline at end of file
diff --git a/integrations/firecrawl.mdx b/integrations/firecrawl.mdx
new file mode 100644
index 0000000..63507fd
--- /dev/null
+++ b/integrations/firecrawl.mdx
@@ -0,0 +1,94 @@
+---
+title: "Firecrawl"
+description: "Web scraping and data extraction API"
+---
+
+Firecrawl API provides powerful web scraping capabilities with automatic browser rendering and data extraction.
+
+## Overview
+
+
+
+ Sign up for a Firecrawl account
+
+
+ Generate your Firecrawl API key
+
+
+ Add your API key to Create's secrets
+
+
+
+## Account Creation
+
+
+
+ Go to [firecrawl.com](https://firecrawl.com/) and click "Sign Up"
+
+
+
+
+
+ * Sign up with email/password
+ * Or continue with Google authentication
+
+
+
+
+## Generate API Key
+
+
+
+ 1. Go to your Firecrawl dashboard
+ 2. Copy your API Key to use
+
+
+ Free tier has rate limits - monitor your usage
+
+
+
+
+ 1. Click "Generate New Key"
+ 2. Name your key (e.g., "Create Integration")
+ 3. Copy your API key
+
+
+
+## Add to Create Project
+
+
+
+ 1. In your Create project, type `/` in the chat
+ 2. Select "Firecrawl" from the menu
+
+
+
+ 1. Paste your API key into the "FIRECRAWL_API_KEY" field
+
+
+ Need a new key? Generate one in your Firecrawl dashboard.
+
+
+
+
+ You can now use prompts with the integration to scrape web data.
+
+ Example prompts:
+ * `Extract product details from this URL using /Firecrawl`
+ * `Build a price comparison tool with /Firecrawl`
+ * `Create a news aggregator using /Firecrawl`
+
+
+ API has rate limits - implement caching for frequently accessed pages.
+
+
+ Example prompt for optimization:
+ ```
+ When using /Firecrawl, cache the scraped data in my database
+ ```
+
+
+
+
+ Your Firecrawl integration is ready! Use `/Firecrawl` in chat to scrape web data.
+
diff --git a/integrations/flux.mdx b/integrations/flux.mdx
new file mode 100644
index 0000000..9d28fa7
--- /dev/null
+++ b/integrations/flux.mdx
@@ -0,0 +1,95 @@
+---
+title: "Flux"
+description: "Generate images with Replicate's Flux model"
+---
+
+Flux is a state-of-the-art text-to-image model from Replicate that generates high-quality images from text descriptions.
+
+## Overview
+
+
+
+ Sign up for a Replicate account
+
+
+ Generate your Replicate API key
+
+
+ Add your API key to Create's secrets
+
+
+
+## Account Creation
+
+
+
+ Go to [replicate.com](https://replicate.com/) and click "Sign Up"
+
+
+
+
+
+ * Sign up with email/password
+ * Or continue with GitHub authentication
+
+
+
+
+
+## Generate API Key
+
+
+
+ 1. Go to your Replicate dashboard
+ 2. Click on your profile and select "API Tokens"
+
+
+ Free tier has usage limits - monitor your consumption
+
+
+
+
+ 1. Click "New Token"
+ 2. Name your token (e.g., "Create Integration")
+ 3. Copy your API token
+
+
+
+
+## Add to Create Project
+
+
+
+ 1. In your Create project, type `/` in the chat
+ 2. Select "Flux" from the menu
+
+
+
+ 1. Paste your API key into the "REPLICATE_API_KEY" field
+
+ Need a new key? Generate one in your Replicate dashboard.
+
+
+
+
+ You can now use prompts with the integration to generate images.
+
+ Example prompts:
+ * `Generate a landscape painting using /Flux`
+ * `Create product mockups with /Flux`
+ * `Build an AI art gallery using /Flux`
+
+
+ Each generation uses API credits - implement caching for frequently used prompts.
+
+
+ Example prompt for optimization:
+ ```
+ When using /Flux, cache the generated images in my database
+ ```
+
+
+
+
+ Your Flux integration is ready! Use `/Flux` in chat to generate images.
+
diff --git a/integrations/freesound.mdx b/integrations/freesound.mdx
new file mode 100644
index 0000000..501b213
--- /dev/null
+++ b/integrations/freesound.mdx
@@ -0,0 +1,92 @@
+---
+title: "Freesound"
+description: "Access a vast library of audio samples"
+---
+
+Freesound API provides access to a collaborative database of Creative Commons Licensed sounds.
+
+## Overview
+
+
+
+ Sign up for a Freesound account
+
+
+ Generate your Freesound API key
+
+
+ Add your API key to Create's secrets
+
+
+
+## Account Creation
+
+
+
+ Go to [freesound.org](https://freesound.org/) and click "Join" in the top right corner
+
+
+
+
+
+ * Sign up with email/password
+
+
+
+
+## Generate API Key
+
+
+
+ 1. Fill out Freesound's Application Form [here](https://freesound.org/apiv2/apply/).
+
+
+ Freesound's search feature does not require a callback url. You may leave it blank.
+
+
+
+
+ 1. Click "Request new access credentials"
+ 2. Copy your API key
+
+
+
+
+## Add to Create Project
+
+
+
+ 1. In your Create project, type `/` in the chat
+ 2. Select "Freesound" from the menu
+
+
+
+ 1. Paste your API key into the "FREESOUND_API_KEY" field
+
+
+ Need a new key? Generate one in your Freesound dashboard.
+
+
+
+
+ You can now use prompts with the integration to access audio samples.
+
+ Example prompts:
+ * `Find nature sound effects using /Freesound`
+ * `Add background music with /Freesound`
+ * `Create a sound library using /Freesound`
+
+
+ API has rate limits - implement caching for frequently used sounds.
+
+
+ Example prompt for optimization:
+ ```
+ When using /Freesound, cache the audio files in my database
+ ```
+
+
+
+
+ Your Freesound integration is ready! Use `/Freesound` in chat to access audio samples.
+
diff --git a/integrations/giphy.mdx b/integrations/giphy.mdx
new file mode 100644
index 0000000..6c0be4e
--- /dev/null
+++ b/integrations/giphy.mdx
@@ -0,0 +1,99 @@
+---
+title: "GIPHY"
+description: "Access GIFs and animated content"
+---
+
+GIPHY API provides access to the world's largest library of GIFs, stickers, and animated content.
+
+## Overview
+
+
+
+ Sign up for a GIPHY Developer account
+
+
+ Generate your GIPHY API key
+
+
+ Add your API key to Create's secrets
+
+
+
+## Account Creation
+
+
+
+ Go to [developers.giphy.com](https://developers.giphy.com/) and click "Create an Account"
+
+
+
+
+
+ * Sign up with email/password
+ * Or continue with existing GIPHY account
+
+
+
+
+
+
+## Generate API Key
+
+
+
+ 1. Go to your GIPHY Developer dashboard
+ 2. Click "Create an API Key"
+ 3. Select "API" access type
+
+
+
+ Free tier has rate limits - monitor your usage
+
+
+
+
+ 1. Name your app (e.g., "Create Integration")
+ 2. Add a brief description
+ 3. Copy your API key
+
+
+
+
+## Add to Create Project
+
+
+
+ 1. In your Create project, type `/` in the chat
+ 2. Select "GIPHY" from the menu
+
+
+
+ 1. Paste your API key into the "GIPHY_API_KEY" field
+
+
+ Need a new key? Generate one in your GIPHY Developer dashboard.
+
+
+
+
+ You can now use prompts with the integration to access GIFs.
+
+ Example prompts:
+ * `Find reaction GIFs using /GIPHY`
+ * `Add animated stickers with /GIPHY`
+ * `Create a GIF picker using /GIPHY`
+
+
+ API has rate limits - implement caching for frequently accessed GIFs.
+
+
+ Example prompt for optimization:
+ ```
+ When using /GIPHY, cache the GIF URLs in my database
+ ```
+
+
+
+
+ Your GIPHY integration is ready! Use `/GIPHY` in chat to access GIFs.
+
diff --git a/integrations/google-imagen.mdx b/integrations/google-imagen.mdx
new file mode 100644
index 0000000..60fa02b
--- /dev/null
+++ b/integrations/google-imagen.mdx
@@ -0,0 +1,105 @@
+---
+title: "Google Imagen"
+description: "Generate images with Google's Imagen model through Replicate's AI Models Database"
+---
+
+Google Imagen is a cutting-edge text-to-image model developed by Google that creates high-quality images from textual descriptions.
+
+ Replicate requires paid credits to use their API. Please refer to their pricing [here](https://replicate.com/pricing#public-models).
+
+## Overview
+
+
+
+ Sign up for a Replicate account
+
+
+ Generate your Replicate API key
+
+
+ Add your API key to Create's secrets
+
+
+
+## Account Creation
+
+
+
+ Go to [replicate.com](https://www.replicate.com/) and click "Sign Up" in the top right corner
+
+
+
+
+
+ * Sign up with email/password
+ * Or continue with GitHub authentication
+
+
+
+
+
+## Generate API Key
+
+
+
+ 1. Click on your profile icon in the top right
+ 2. Select "API" from the dropdown menu
+
+
+
+
+
+ 1. Click "Create API Key"
+ 2. Name your key (e.g., "Create Integration")
+ 3. Click "Generate"
+
+
+
+
+
+ 1. Copy the generated API key
+
+
+ Keep your API key secure - it grants access to your paid credits
+
+
+
+
+## Add to Create Project
+
+
+
+ 1. In your Create project, type `/` in the chat
+ 2. Select "Google Imagen" from the menu
+
+
+
+ 1. Paste your API key into the "REPLICATE_API_KEY" field
+
+
+ Need a new key? Generate one in your Replicate dashboard.
+
+
+
+
+ You can now use prompts with the integration to generate images.
+
+ Some examples:
+ * `Generate an image of a sunset over the mountains with /GoogleImagen`
+ * `Create a fantasy landscape with /GoogleImagen`
+ * `Design a futuristic cityscape using /GoogleImagen`
+
+
+ Each API call uses one credit - implement caching for frequently processed images.
+
+
+ Example prompt for optimization:
+ ```
+ When using /GoogleImagen, cache the generated images in my database
+ ```
+
+
+
+
+ Your Google Imagen integration is ready! Use `/GoogleImagen` in chat to generate images.
+
diff --git a/integrations/heygen.mdx b/integrations/heygen.mdx
new file mode 100644
index 0000000..1d7a45a
--- /dev/null
+++ b/integrations/heygen.mdx
@@ -0,0 +1,116 @@
+---
+title: "HeyGen"
+description: "Create AI-powered video content"
+---
+
+HeyGen API enables creation of professional AI-generated video content with customizable avatars and voices.
+
+## Overview
+
+
+
+ Sign up for a HeyGen account
+
+
+ Generate your HeyGen API key
+
+
+ Add your API key to Create's secrets
+
+
+
+## Account Creation
+
+
+
+ Go to [heygen.com](https://heygen.com/) and click "Sign Up"
+
+
+
+
+
+ * Sign up with email/password
+ * Or continue with Google authentication
+
+
+
+
+## Generate API Key
+
+
+
+ 1. Go to your HeyGen dashboard
+ 2. Navigate to "API Settings"
+
+
+ Free tier has rate limits - monitor your usage
+
+
+
+
+ 1. Click "Generate API Key"
+ 2. Name your key (e.g., "Create Integration")
+ 3. Copy your API key
+
+
+
+
+ 1. Go to "Avatar Library" in your dashboard
+ 2. Select the avatar you want to use as a template
+ 3. Copy the Avatar ID from the URL or settings
+
+
+ Be sure to get the Avatar ID and not the Avatar Group ID. Sometimes Avatars have
+ different versions and so they are placed in a group.
+
+
+
+
+ 1. Go to "AI Voice Library" in your dashboard
+ 2. Select the voice you want to use as a template
+ 3. Copy the Voice ID from the URL or settings
+
+
+ The Voice ID is needed to generate videos with specific voices
+
+
+
+
+## Add to Create Project
+
+
+
+ 1. In your Create project, type `/` in the chat
+ 2. Select "HeyGen" from the menu
+
+
+
+ 1. Paste your API key into the "HEYGEN_API_KEY" field
+
+
+ Need a new key? Generate one in your HeyGen dashboard.
+
+
+
+
+ You can now use prompts with the integration to create AI videos.
+
+ Example prompts:
+ * `Generate a video presentation using /HeyGen`
+ * `Create an AI spokesperson with /HeyGen`
+ * `Build a video message system using /HeyGen`
+
+
+ API has rate limits - implement caching for frequently used videos.
+
+
+ Example prompt for optimization:
+ ```
+ When using /HeyGen, cache the generated videos in my database
+ ```
+
+
+
+
+ Your HeyGen integration is ready! Use `/HeyGen` in chat to create AI videos.
+
diff --git a/integrations/huggingface.mdx b/integrations/huggingface.mdx
new file mode 100644
index 0000000..387f979
--- /dev/null
+++ b/integrations/huggingface.mdx
@@ -0,0 +1,96 @@
+---
+title: "Hugging Face"
+description: "Access AI models and datasets"
+---
+
+Hugging Face provides access to thousands of AI models and datasets through their comprehensive API.
+
+## Overview
+
+
+
+ Sign up for a Hugging Face account
+
+
+ Generate your Hugging Face API key
+
+
+ Add your API key to Create's secrets
+
+
+
+## Account Creation
+
+
+
+ Go to [huggingface.co](https://huggingface.co/) and click "Sign Up"
+
+
+
+
+
+ * Sign up with email/password
+ * Or continue with Google/GitHub authentication
+
+
+
+
+## Generate API Key
+
+
+
+ 1. Go to your Hugging Face settings
+ 2. Navigate to "Access Tokens"
+
+
+ Free tier has rate limits - monitor your usage
+
+
+
+
+ 1. Click "New token"
+
+ 2. Select Read and name your token (e.g., "Create Integration")
+
+ 3. Copy your API token
+
+
+
+## Add to Create Project
+
+
+
+ 1. In your Create project, type `/` in the chat
+ 2. Select "Hugging Face" from the menu
+
+
+
+ 1. Paste your API key into the "HUGGINGFACE_API_KEY" field
+
+
+ Need a new key? Generate one in your Hugging Face settings.
+
+
+
+
+ You can now use prompts with the integration to access AI models.
+
+ Example prompts:
+ * `Generate text using /HuggingFace`
+ * `Classify sentiment with /HuggingFace`
+ * `Create an AI chatbot using /HuggingFace`
+
+
+ API has rate limits - implement caching for frequently used model outputs.
+
+
+ Example prompt for optimization:
+ ```
+ When using /HuggingFace, cache the model outputs in my database
+ ```
+
+
+
+
+ Your Hugging Face integration is ready! Use `/HuggingFace` in chat to access AI models.
+
diff --git a/integrations/ideogram.mdx b/integrations/ideogram.mdx
new file mode 100644
index 0000000..89489b2
--- /dev/null
+++ b/integrations/ideogram.mdx
@@ -0,0 +1,92 @@
+---
+title: "Ideogram"
+description: "Generate AI art and illustrations"
+---
+
+Ideogram API enables creation of high-quality AI-generated art and illustrations with advanced style control.
+ Ideogram requires a minimum balance. Please read the pricing [here](https://about.ideogram.ai/api-pricing).
+
+## Overview
+
+
+
+ Sign up for an Ideogram account
+
+
+ Generate your Ideogram API key
+
+
+ Add your API key to Create's secrets
+
+
+
+## Account Creation
+
+
+
+ Go to [ideogram.ai](https://ideogram.ai/) and click "Sign Up"
+
+
+
+
+
+ * Sign up with email/password
+ * Or continue with Google authentication
+
+
+
+## Generate API Key
+
+
+
+ 1. Go to your Ideogram dashboard
+ 2. Navigate to "API Beta" in settings
+
+
+
+
+ 1. Click "Generate New API Key"
+ 2. Name your key (e.g., "Create Integration")
+ 3. Copy your API key
+
+
+
+
+## Add to Create Project
+
+
+
+ 1. In your Create project, type `/` in the chat
+ 2. Select "Ideogram" from the menu
+
+
+
+ 1. Paste your API key into the "IDEOGRAM_API_KEY" field
+
+
+ Need a new key? Generate one in your Ideogram dashboard.
+
+
+
+
+ You can now use prompts with the integration to generate art.
+
+ Example prompts:
+ * `Generate an illustration using /Ideogram`
+ * `Create a logo design with /Ideogram`
+ * `Build an AI art gallery using /Ideogram`
+
+
+ API has rate limits - implement caching for frequently used images.
+
+
+ Example prompt for optimization:
+ ```
+ When using /Ideogram, cache the generated images in my database
+ ```
+
+
+
+
+ Your Ideogram integration is ready! Use `/Ideogram` in chat to create AI art.
+
diff --git a/integrations/ilovepdf.mdx b/integrations/ilovepdf.mdx
new file mode 100644
index 0000000..b10c619
--- /dev/null
+++ b/integrations/ilovepdf.mdx
@@ -0,0 +1,81 @@
+---
+title: "iLovePDF"
+description: "Integrate iLovePDF capabilities into your application"
+---
+
+Connect your app to iLovePDF's API to convert URLs to PDFs. More functionality will come soon!
+
+## Overview
+
+
+
+ Sign up and configure your iLovePDF Developer account.
+
+
+ Generate your iLovePDF API key.
+
+
+ Add your credentials to Create's secrets.
+
+
+
+## Account Setup
+
+
+
+ Go to [iLovePDF Developer Portal](https://developer.ilovepdf.com/).
+
+
+
+
+
+ Click "Register" to create a new account.
+
+
+
+
+
+## Generate API Key
+
+
+
+ 1. In your application settings, find and copy your API key.
+
+
+ Keep your API key secure - it grants access to your iLovePDF account.
+
+
+
+
+## Add to Create Project
+
+
+
+ 1. In your Create project, type `/` in chat.
+ 2. Select "iLovePDF" from the menu.
+
+
+
+ 1. Paste your API key into "ILOVEPDF_API_KEY".
+
+
+ Need new credentials? Regenerate in the iLovePDF Developer Portal.
+
+
+
+
+ Use prompts to implement iLovePDF features:
+
+ * `Convert this webpage to PDF files using /iLovePDF`
+ * `Create a PDF document with /iLovePDF`
+ * `I want this webpage to PDF using /iLovePDF`
+
+
+ iLovePDF API has rate limits - implement error handling for best reliability.
+
+
+
+
+
+ iLovePDF integration complete! Use `/iLovePDF` in chat to access PDF manipulation capabilities.
+
\ No newline at end of file
diff --git a/integrations/integrations.mdx b/integrations/integrations.mdx
new file mode 100644
index 0000000..cfdbaab
--- /dev/null
+++ b/integrations/integrations.mdx
@@ -0,0 +1,15 @@
+#### Discord
+
+Integrate Discord messaging capabilities into your application to send notifications, build chatbots, and interact with users through Discord's popular messaging service.
+
+Example prompts:
+
+* `Send a message to a channel using /Discord`
+* `Post a reminder with /Discord`
+* `Manage channels with /Discord`
+
+
+ You'll need to set up your own Discord bot token to use this integration in Create.
+
+ [Full steps here](/integrations/discord) (2 mins set up time)
+
\ No newline at end of file
diff --git a/integrations/line.mdx b/integrations/line.mdx
new file mode 100644
index 0000000..5b842ce
--- /dev/null
+++ b/integrations/line.mdx
@@ -0,0 +1,191 @@
+---
+title: "LINE"
+description: "Integrate LINE messaging capabilities into your application"
+---
+
+Connect your app to LINE's messaging platform to send notifications, build chatbots, and interact with users through LINE's popular messaging service.
+
+Watch this step-by-step video tutorial to learn how to integrate LINE messaging:
+
+
+
+## Overview
+
+
+
+ Sign up and configure your LINE Account Manager, LINE Official Account, and LINE Developer Account.
+
+
+ Create a LINE channel and obtain API keys
+
+
+ Turn on these settings to have the best experience with LINE
+
+
+ Add your credentials to Create's secrets
+
+
+
+## Account Setup
+
+
+
+ Go to https://manager.line.biz/ and sign up with your account
+
+
+
+
+
+ Click "Create LINE official account" to continue
+
+
+
+
+
+ Once your account is created, you may now visit LINE Developer and click Log in to Console to link your LINE Official Account.
+
+
+
+
+
+## Generate API Credentials
+
+
+
+ Click on "Create a new provider" to generate a provider for your Channel.
+
+
+
+
+ Now go back to your LINE Official Account Manager. In the top right corner, click on "Setting". Then, on the left panel, select "Messaging API" and "Enable Messaging API". Be sure to select the provider mentioned previously.
+
+
+ These credentials grant full access to your LINE channel - keep them private
+
+
+
+
+ Find your webhook URL path in the Page and Function Settings under the Publish button. Copy the URL of your Create project's live site and API path into the webhook URL.
+
+
+
+
+ Input your webhook URL in your LINE Official Account Manager. It should be in the format of https:// your-create-project-url.created.app/api/line-messaging.
+
+
+ The function path "api/line-messaging" may be changed as well. If so, you may need to update the function path in your LINE Developer Console to match the function path in your Create project.
+
+
+
+
+ You may copy your Channel Secret Token here as well.
+
+
+
+
+ Get your Channel Access Token by going to your LINE Developer Account > Provider Name > Messaging API > Scroll all the way down
+
+
+
+
+ Enter and save your API tokens in Create
+
+
+
+
+## Verify Settings
+
+
+
+ After publishing your project, you may verify your webhook URL by going to your LINE Developer Console > Provider > Channel > Messaging API
+ If you see a success message, your webhook URL is verified. Otherwise, you may need to check your webhook URL/function and try again.
+
+
+
+
+ Enable Chatbot Settings by going to your LINE Official Account Manager > Settings(Top Right) > Response Settings
+
+
+
+
+ Allow your chatbot to join group chats by going to your LINE Official Account Manager > Settings(Top Right) > Account Settings
+
+
+
+
+
+## Add to Create Project
+
+
+
+ 1. In your Create project, type `/` in chat
+ 2. Select "Line" from the menu
+
+
+
+ 1. Paste Channel Secret into "LINE_CHANNEL_SECRET"
+ 2. Paste Access Token into "LINE_ACCESS_TOKEN"
+
+
+ Need new credentials? Regenerate in LINE Developer Console.
+
+
+
+
+ Use prompts to implement LINE features:
+
+ * `Send order confirmation via /Line`
+ * `Build a chatbot that uses /Line for customer support`
+ * `Create a broadcast system with /Line`
+
+
+ LINE API has rate limits - implement error handling for best reliability
+
+
+
+
+
+ LINE integration complete! Use `/Line` in chat to access messaging capabilities.
+
+
+## Frequently Asked Questions
+
+
+
+ LINE Messaging API allows you to send messages, build chatbots, and interact with users through LINE's messaging platform. It's particularly popular in Asia and great for customer engagement.
+
+
+
+ Yes, you need a LINE Business/Developer Account to access the Messaging API. The basic account is free and sufficient for testing and development.
+
+
+
+ The webhook works by sending LINE encrypted messages to your Create project's function URL when a message is typed in the Line app. This message triggers Function(s) that can send messages back to the user.
+
+
+
+ You can build:
+ - Customer service chatbots
+ - Order notification systems
+ - Broadcast messaging tools
+ - Interactive marketing campaigns
+ - Automated response systems
+
+
+
+ Yes, LINE has API rate limits and message quotas. Free accounts have lower limits than paid business accounts. Check Line's official documentation for current limits.
+
+
+
+ Yes, you can test your LINE integration by verifying your webhook URL returns a success message. Followed by talking to your bot on LINE to test the integration.
+ Additonally, you may test responses from your bot by asking the AI chat to print the response and using the Function test runner.
+
+
diff --git a/integrations/logmeal.mdx b/integrations/logmeal.mdx
new file mode 100644
index 0000000..23b7928
--- /dev/null
+++ b/integrations/logmeal.mdx
@@ -0,0 +1,96 @@
+---
+title: "LogMeal"
+description: "Analyze food images with AI"
+---
+
+LogMeal uses advanced AI to identify and analyze food in images, providing detailed nutritional information.
+
+## Overview
+
+
+
+ Sign up for a LogMeal account
+
+
+ Generate your LogMeal API key
+
+
+ Add your API key to Create's secrets
+
+
+
+## Account Creation
+
+
+
+ Go to [logmeal.com/](https://logmeal.com/) and click "Sign Up" in the top right corner
+
+
+
+
+
+ * Sign up with email/password
+ * Or continue with Google authentication
+
+
+
+
+
+## Generate API Key
+
+
+
+ 1. Click on your profile in the top right
+ 2. Select "API Access" from the menu
+
+
+
+
+
+ 1. Copy the generated API key
+ 2. Store it securely - you won't be able to see it again
+
+
+ Keep your API key secure - it grants access to your paid credits
+
+
+
+
+## Add to Create Project
+
+
+
+ 1. In your Create project, type `/` in the chat
+ 2. Select "LogMeal" from the menu
+
+
+
+ 1. Paste your API key into the "LOGMEAL_API_KEY" field
+
+
+ Need a new key? Generate one in your LogMeal dashboard.
+
+
+
+
+ You can now use prompts with the integration to analyze food images.
+
+ Example prompts:
+ * `Analyze this food photo with /LogMeal`
+ * `Get nutritional information for this meal using /LogMeal`
+ * `Create a food diary that uses /LogMeal for image analysis`
+
+
+ Each API call uses one credit - implement caching for frequently analyzed images.
+
+
+ Example prompt for optimization:
+ ```
+ When using /LogMeal, cache the analysis results in my database
+ ```
+
+
+
+
+ Your LogMeal integration is ready! Use `/LogMeal` in chat to analyze food images.
+
diff --git a/integrations/luma.mdx b/integrations/luma.mdx
new file mode 100644
index 0000000..0a73839
--- /dev/null
+++ b/integrations/luma.mdx
@@ -0,0 +1,97 @@
+---
+title: "Luma"
+description: "Add calendar and event management"
+---
+
+Luma API enables you to create and manage events, handle registrations, and embed calendar functionality in your app.
+ Luma requires a Luma Plus premium plan to use their API. Please refer to their pricing [here](https://lu.ma/pricing).
+
+## Overview
+
+
+
+ Sign up for a Luma account
+
+
+ Generate your Luma API key
+
+
+ Add your API key to Create's secrets
+
+
+
+## Account Creation
+
+
+
+ Go to [lu.ma](https://lu.ma) and click "Sign Up" in the top right corner
+
+
+
+
+
+ * Sign up with email/password
+ * Or continue with Google authentication
+
+
+
+
+## Generate API Key
+
+
+
+ 1. Go to your Luma dashboard
+ 2. Create a Calendar
+
+
+ Free tier has rate limits - monitor your usage
+
+
+
+
+ 1. Navigate to "Options" > "API Keys"
+ 2. Click "Generate New API Key"
+ 3. Name your key (e.g., "Create Integration")
+ 4. Copy your API key
+
+
+
+
+## Add to Create Project
+
+
+
+ 1. In your Create project, type `/` in the chat
+ 2. Select "Luma" from the menu
+
+
+
+ 1. Paste your API key into the "LUMA_API_KEY" field
+
+
+ Need a new key? Generate one in your Luma dashboard.
+
+
+
+
+ You can now use prompts with the integration to manage events and calendars.
+
+ Example prompts:
+ * `Add a calendar view using /Luma`
+ * `Create an event registration form with /Luma`
+ * `Build an event management dashboard using /Luma`
+
+
+ API has rate limits - implement caching for frequently accessed events.
+
+
+ Example prompt for optimization:
+ ```
+ When using /Luma, cache the event data in my database
+ ```
+
+
+
+
+ Your Luma integration is ready! Use `/Luma` in chat to manage events and calendars.
+
diff --git a/integrations/minimax.mdx b/integrations/minimax.mdx
new file mode 100644
index 0000000..d00d1f3
--- /dev/null
+++ b/integrations/minimax.mdx
@@ -0,0 +1,100 @@
+---
+title: "Minimax"
+description: "Integrate Minimax video generation capabilities using Replicate's AI Model Database into your application"
+---
+
+Minimax provides advanced features for generating videos using AI models from Replicate.
+
+ Replicate requires paid credits to use their API. Please refer to their pricing [here](https://replicate.com/pricing#public-models).
+
+## Overview
+
+
+
+ Sign up for a Replicate account.
+
+
+ Generate your Replicate API key.
+
+
+ Add your credentials to Create's secrets.
+
+
+
+## Account Creation
+
+
+
+ Go to [replicate.com](https://www.replicate.com/) and click "Sign Up" in the top right corner.
+
+
+
+
+
+ * Sign up with email/password.
+ * Or continue with GitHub authentication.
+
+
+
+
+
+## Generate API Key
+
+
+
+ 1. Click on your profile icon in the top right.
+ 2. Select "API" from the dropdown menu.
+
+
+
+
+
+ 1. Click "Create API Key."
+ 2. Name your key (e.g., "Minimax Integration").
+ 3. Click "Generate."
+
+
+
+
+
+ 1. Copy the generated API key.
+ 2. Store it securely - you won't be able to see it again.
+
+
+ Keep your API key secure - it grants access to your paid credits.
+
+
+
+
+## Add to Create Project
+
+
+
+ 1. In your Create project, type `/` in chat.
+ 2. Select "Minimax" from the menu.
+
+
+
+ 1. Paste your API key into "MINIMAX_API_KEY."
+
+
+ Need new credentials? Regenerate in the Replicate Developer Portal.
+
+
+
+
+ Use prompts to implement Minimax features:
+
+ * `Generate videos using /Minimax`
+ * `Create personalized video content with /Minimax`
+ * `Analyze video data using /Minimax`
+
+
+ Minimax API has rate limits - implement error handling for best reliability.
+
+
+
+
+
+ Minimax integration complete! Use `/Minimax` in chat to access video generation capabilities.
+
\ No newline at end of file
diff --git a/integrations/moviesdb.mdx b/integrations/moviesdb.mdx
new file mode 100644
index 0000000..4c699a0
--- /dev/null
+++ b/integrations/moviesdb.mdx
@@ -0,0 +1,99 @@
+⁸---
+title: "TMDB - The Movie Database"
+description: "Access comprehensive movie and TV show data"
+---
+
+MovieDB provides detailed information about movies, TV shows, cast, and crew through its extensive entertainment database.
+
+## Overview
+
+
+
+ Sign up for a MovieDB account
+
+
+ Generate your MovieDB API key
+
+
+ Add your API key to Create's secrets
+
+
+
+## Account Creation
+
+
+
+ Go to [themoviedb.org](https://www.themoviedb.org/) and click "Join TMDb"
+
+
+
+
+
+ * Choose username and password
+ * Verify your email address
+
+
+
+
+## Generate API Key
+
+
+
+ 1. Go to your account settings
+ 2. Navigate to "API" section
+
+
+
+
+
+ 1. Click "Create New API Key"
+ 2. Accept the terms of service
+ 3. Generate API credential
+
+
+
+
+
+ 1. Copy the API key (v3 auth)
+ 2. Store it securely
+
+
+
+ Never expose this key in client-side code
+
+
+
+
+## Add to Create Project
+
+
+
+ 1. In your Create project, type `/` in chat
+ 2. Select "MovieDB" from the menu
+
+
+
+ 1. Paste your MovieDB API key into "MOVIEDB_API_KEY" secret
+
+
+ Need a new key? Regenerate in your MovieDB API settings.
+
+
+
+
+ Use prompts to access entertainment data:
+
+ * `Show details for The Dark Knight using /MovieDB`
+ * `Build a movie recommendation app with /MovieDB`
+ * `Create a TV show watchlist with /MovieDB`
+ * `Display cast photos for Stranger Things via /MovieDB`
+
+
+ API responses are live data - cache results for better performance
+
+
+
+
+
+ MovieDB integration complete! Use `/TMDb` in chat to access entertainment data.
+
diff --git a/integrations/neverbounce.mdx b/integrations/neverbounce.mdx
new file mode 100644
index 0000000..e898d57
--- /dev/null
+++ b/integrations/neverbounce.mdx
@@ -0,0 +1,86 @@
+---
+title: "NeverBounce"
+description: "Verify email addresses in real-time"
+---
+
+NeverBounce helps you validate email addresses to improve deliverability and protect your sender reputation.
+
+## Overview
+
+
+
+ Sign up for a NeverBounce account
+
+
+ Generate your NeverBounce API key
+
+
+ Add your API key to Create's secrets
+
+
+
+## Account Creation
+
+
+
+ Go to [neverbounce.com](https://neverbounce.com/) and click "Register" in the top right corner
+
+
+
+
+ * Sign up with email/password
+ * Or continue with Google/GitHub authentication
+
+
+
+## Generate API Key
+
+
+
+ 1. Click on "Integrations" in your navigation bar
+ 2. Select "Custom Integrations" from the menu
+
+
+ Keep your API key secure - it grants full access to your NeverBounce account
+
+
+
+
+ 1. Copy the generated key
+
+
+
+
+## Add to Create Project
+
+
+
+ 1. In your Create project, type `/` in the chat
+ 2. Select "NeverBounce" from the menu
+
+
+
+ 1. Paste your NeverBounce API key into the "NEVERBOUNCE_API_KEY" field
+
+
+ Need a new key? Generate one in your NeverBounce dashboard.
+
+
+
+
+ You can now use prompts with the integration to validate emails.
+
+ Example prompts:
+ * `Validate this email list using /NeverBounce`
+ * `Add email validation to my signup form with /NeverBounce`
+ * `Clean my contact database with /NeverBounce`
+
+
+ NeverBounce charges per validation - implement rate limiting and error handling for production use.
+
+
+
+
+
+ Your NeverBounce integration is ready! Use `/NeverBounce` in chat to validate emails.
+
diff --git a/integrations/nutritionix.mdx b/integrations/nutritionix.mdx
new file mode 100644
index 0000000..5a5d89e
--- /dev/null
+++ b/integrations/nutritionix.mdx
@@ -0,0 +1,95 @@
+---
+title: "Nutritionix"
+description: "Access nutrition data and food information"
+---
+
+Nutritionix API provides comprehensive access to nutrition data, food information, and calorie tracking capabilities.
+
+## Overview
+
+
+
+ Sign up for a Nutritionix account
+
+
+ Generate your Nutritionix API keys
+
+
+ Add your API keys to Create's secrets
+
+
+
+## Account Creation
+
+
+
+ Go to [developer.nutritionix.com](https://developer.nutritionix.com/) and click "Sign Up"
+
+
+
+
+
+ * Sign up with email/password
+ * Fill in your developer information
+
+
+
+
+## Generate API Keys
+
+
+
+ 1. Go to your Nutritionix dashboard
+ 2. Navigate to "Applications"
+
+
+ Free tier has rate limits - monitor your usage
+
+
+
+
+ 1. Your Application ID and API Key will be displayed
+ 2. Copy both keys
+
+
+
+
+## Add to Create Project
+
+
+
+ 1. In your Create project, type `/` in the chat
+ 2. Select "Nutritionix" from the menu
+
+
+
+ 1. Paste your Application ID into the "NUTRITIONIX_APP_ID" field
+ 2. Paste your API Key into the "NUTRITIONIX_API_KEY" field
+
+
+ Need new keys? Generate them in your Nutritionix dashboard.
+
+
+
+
+ You can now use prompts with the integration to access nutrition data.
+
+ Example prompts:
+ * `Get nutrition info for an apple using /Nutritionix`
+ * `Track calories with /Nutritionix`
+ * `Create a meal planner using /Nutritionix`
+
+
+ API has rate limits - implement caching for frequently accessed foods.
+
+
+ Example prompt for optimization:
+ ```
+ When using /Nutritionix, cache the nutrition data in my database
+ ```
+
+
+
+
+ Your Nutritionix integration is ready! Use `/Nutritionix` in chat to access nutrition data.
+
diff --git a/integrations/openlibrary.mdx b/integrations/openlibrary.mdx
new file mode 100644
index 0000000..c99b5ba
--- /dev/null
+++ b/integrations/openlibrary.mdx
@@ -0,0 +1,65 @@
+---
+title: "OpenLibrary"
+description: "Access books and library data"
+---
+
+OpenLibrary provides access to millions of books, their metadata, and library information.
+
+ OpenLibrary does not require an API key.
+
+
+## Overview
+
+
+
+ Sign up for an OpenLibrary account
+
+
+ Add your API key to Create's secrets
+
+
+
+## Account Creation
+
+
+
+ Go to [openlibrary.org](https://openlibrary.org/) and click "Sign Up" in the top right corner
+
+
+
+
+
+ * Sign up with email/password
+
+
+
+## Add to Create Project
+
+
+
+ 1. In your Create project, type `/` in the chat
+ 2. Select "OpenLibrary" from the menu
+
+
+
+ You can now use prompts with the integration to access book data.
+
+ Example prompts:
+ * `Search for books about AI with /OpenLibrary`
+ * `Get details about this book using /OpenLibrary`
+ * `Create a reading list app with /OpenLibrary`
+
+
+ API has rate limits - implement caching for frequently accessed data.
+
+
+ Example prompt for optimization:
+ ```
+ When using /OpenLibrary, cache the book details in my database
+ ```
+
+
+
+
+ Your OpenLibrary integration is ready! Use `/OpenLibrary` in chat to access book data.
+
diff --git a/integrations/petfinder.mdx b/integrations/petfinder.mdx
new file mode 100644
index 0000000..36a3383
--- /dev/null
+++ b/integrations/petfinder.mdx
@@ -0,0 +1,107 @@
+---
+title: "Petfinder"
+description: "Access pet adoption data and information"
+---
+
+Petfinder provides access to a comprehensive database of adoptable pets, shelters, and rescue organizations.
+
+## Overview
+
+
+
+ Sign up for a Petfinder account.
+
+
+ Generate your Petfinder API key.
+
+
+ Add your API key to Create's secrets.
+
+
+
+## Account Creation
+
+
+
+ Go to [petfinder.com/developer](https://www.petfinder.com/developer) and click "Sign Up" in the top right corner.
+
+
+
+
+
+ * Sign up with email/password.
+ * Or continue with social media authentication.
+
+
+
+ If the website isn't logging you in properly, please click "Request Elevated Access".
+
+
+
+
+## Generate API Key
+
+
+
+ 1. Log in to your Petfinder account.
+ 2. Navigate to the Developer Settings section in your account settings.
+
+
+
+
+
+ 1. Click "Create API Key."
+ 2. Name your key (e.g., "Create Integration").
+ 3. Click "Generate."
+
+
+
+
+
+ 1. Copy the generated API key.
+ 2. Store it securely - you won't be able to see it again.
+
+
+ Keep your API key secure - it grants access to your account data.
+
+
+
+
+## Add to Create Project
+
+
+
+ 1. In your Create project, type `/` in chat.
+ 2. Select "Petfinder" from the menu.
+
+
+
+ 1. Paste your API key into "PETFINDER_API_KEY."
+
+
+ Need new credentials? Regenerate in the Petfinder dashboard.
+
+
+
+
+ You can now use prompts with the integration to access pet adoption data.
+
+ Example prompts:
+ * `Find adoptable pets in my area using /Petfinder`
+ * `Get details about a specific pet using /Petfinder`
+ * `Create a pet adoption app with /Petfinder`
+
+
+ Petfinder API has rate limits - implement error handling for best reliability.
+
+
+ Example prompt for optimization:
+ ```
+ When using /Petfinder, cache the pet details in my database
+ ```
+
+
+
+
+ Your Petfinder integration is ready! Use `/Petfinder` in chat to access pet adoption data.
+
diff --git a/integrations/pexels.mdx b/integrations/pexels.mdx
new file mode 100644
index 0000000..84ee5b0
--- /dev/null
+++ b/integrations/pexels.mdx
@@ -0,0 +1,100 @@
+---
+title: "Pexels"
+description: "Add beautiful stock photos"
+---
+
+Pexels lets you find and use beautiful stock photos in your project.
+
+## Overview
+
+
+
+ Sign up for a Pexels account
+
+
+ Generate your Pexels API key
+
+
+ Add your API key to Create's secrets
+
+
+
+## Account Creation
+
+
+
+ Go to [pexels.com](https://www.pexels.com/) and click "Join" in the top right corner
+
+
+
+
+
+ * Sign up with email/password
+ * Or continue with Google authentication
+
+
+
+## Generate API Key
+
+
+
+ 1. Click the three-dot menu next to your profile avatar
+ 2. Select "Images & Video API" from the dropdown
+
+
+
+
+
+ 1. Click "Your API Key" button
+ 2. Generate new token for Create integration
+
+
+
+
+
+
+
+ 1. Copy the generated API key
+ 2. You can find this key again from your Pexels dashboard
+
+
+
+## Add to Create Project
+
+
+
+ 1. In your Create project, type `/` in the chat
+ 2. Select "Pexels" from the menu and send a messsage
+
+
+
+ 1. Paste your Pexels API key into the "Pexels API Key" field
+
+
+ Need a new key? Contact [Pexels support](mailto:api@pexels.com).
+
+
+
+
+ You can now use prompts with the integration to add stock photos.
+
+ Some examples:
+ * `Make the homepage banner a photo of a retailer with /Pexels`
+ * `Find me a photo of a dog playing fetch with /Pexels and add it`
+ * `Make a gallery of product images with /Pexels`
+
+
+ Pexels content is dynamically generated - save image URLs to your
+ database or component state to persist them between sessions.
+
+
+ Example prompt for saving:
+ ```
+ When using /Pexels, save the image URLs to my database
+ ```
+
+
+
+
+ Your Pexels integration is now ready! Use the `/Pexels` command in chat to add stock photos.
+
\ No newline at end of file
diff --git a/integrations/pokeapi.mdx b/integrations/pokeapi.mdx
new file mode 100644
index 0000000..116fafc
--- /dev/null
+++ b/integrations/pokeapi.mdx
@@ -0,0 +1,51 @@
+---
+title: "PokéAPI"
+description: "Access Pokémon data and information"
+---
+
+PokéAPI provides comprehensive data about Pokémon, including stats, abilities, and evolution chains.
+
+ PokéAPI is free and does not require an API key.
+
+
+## Overview
+
+
+
+ No account needed
+
+
+ Ready to use immediately
+
+
+
+## Add to Create Project
+
+
+
+ 1. In your Create project, type `/` in the chat
+ 2. Select "PokéAPI" from the menu
+
+
+
+ You can now use prompts with the integration to access Pokémon data.
+
+ Example prompts:
+ * `Get details about Pikachu using /PokeAPI`
+ * `Create a Pokédex app with /PokeAPI`
+ * `List all fire-type Pokemon using /PokeAPI`
+
+
+ API has rate limits - implement caching for frequently accessed data.
+
+
+ Example prompt for optimization:
+ ```
+ When using /PokeAPI, cache the Pokemon details in my database
+ ```
+
+
+
+
+ Your PokéAPI integration is ready! Use `/PokeAPI` in chat to access Pokémon data.
+
diff --git a/integrations/rentcast.mdx b/integrations/rentcast.mdx
new file mode 100644
index 0000000..cc174fe
--- /dev/null
+++ b/integrations/rentcast.mdx
@@ -0,0 +1,97 @@
+---
+title: "Rentcast"
+description: "Access real estate and rental market data"
+---
+
+Rentcast API provides comprehensive access to real estate data, rental market insights, and property analytics.
+
+ Rentcast requires credit card signup for overage fees in the free tier access
+
+## Overview
+
+
+
+ Sign up for a Rentcast account
+
+
+ Generate your Rentcast API key
+
+
+ Add your API key to Create's secrets
+
+
+
+## Account Creation
+
+
+
+ Go to [rentcast.io/api](https://rentcast.io/api) and click "Start for Free"
+
+
+
+
+
+ * Sign up with email/password
+ * Or continue with Google authentication
+
+
+
+
+## Generate API Key
+
+
+
+ 1. Go to your Rentcast dashboard
+ 2. Scroll down to the "API" section
+
+
+
+ Free tier has rate limits - monitor your usage
+
+
+
+
+ 1. Click "Generate API Key"
+ 2. Name your key (e.g., "Create Integration")
+ 3. Copy your API key
+
+
+
+## Add to Create Project
+
+
+
+ 1. In your Create project, type `/` in the chat
+ 2. Select "Rentcast" from the menu
+
+
+
+ 1. Paste your API key into the "RENTCAST_API_KEY" field
+
+
+ Need a new key? Generate one in your Rentcast dashboard.
+
+
+
+
+ You can now use prompts with the integration to access real estate data.
+
+ Example prompts:
+ * `Get rental market data for San Francisco using /Rentcast`
+ * `Analyze property values with /Rentcast`
+ * `Create a real estate analytics dashboard using /Rentcast`
+
+
+ API has rate limits - implement caching for frequently accessed data.
+
+
+ Example prompt for optimization:
+ ```
+ When using /Rentcast, cache the market data in my database
+ ```
+
+
+
+
+ Your Rentcast integration is ready! Use `/Rentcast` in chat to access real estate data.
+
diff --git a/integrations/replicate-flux.mdx b/integrations/replicate-flux.mdx
new file mode 100644
index 0000000..802a5e1
--- /dev/null
+++ b/integrations/replicate-flux.mdx
@@ -0,0 +1,91 @@
+---
+title: "Replicate Flux"
+description: "Generate images with Replicate's Flux or Flux Pro model"
+---
+
+Flux is a state-of-the-art text-to-image model from Replicate that generates high-quality images from text descriptions.
+
+ Replicate requires paid credits to use their API. Please refer to their pricing [here](https://replicate.com/pricing#public-models).
+## Overview
+
+
+
+ Sign up for a Replicate account
+
+
+ Generate your Replicate API key
+
+
+ Add your API key to Create's secrets
+
+
+
+## Account Creation
+
+
+
+ Go to [replicate.com](https://replicate.com/) and click "Sign Up"
+
+
+
+ * Sign up with email/password
+ * Or continue with GitHub authentication
+
+
+
+
+## Generate API Key
+
+
+
+ 1. Go to your Replicate dashboard
+ 2. Click on your profile and select "API Tokens"
+
+
+
+
+ 1. Click "New Token"
+ 2. Name your token (e.g., "Create Integration")
+ 3. Copy your API token
+
+
+
+
+## Add to Create Project
+
+
+
+ 1. In your Create project, type `/` in the chat
+ 2. Select "Replicate Flux" from the menu
+
+
+
+ 1. Paste your API key into the "REPLICATE_API_KEY" field
+
+
+ Need a new key? Generate one in your Replicate dashboard.
+
+
+
+
+ You can now use prompts with the integration to generate images.
+
+ Example prompts:
+ * `Generate a landscape painting using /ReplicateFlux`
+ * `Create product mockups with /ReplicateFlux`
+ * `Build an AI art gallery using /ReplicateFlux`
+
+
+ Each generation uses API credits - implement caching for frequently used prompts.
+
+
+ Example prompt for optimization:
+ ```
+ When using /ReplicateFlux, cache the generated images in my database
+ ```
+
+
+
+
+ Your Replicate Flux integration is ready! Use `/ReplicateFlux` in chat to generate images.
+
diff --git a/integrations/resend.mdx b/integrations/resend.mdx
new file mode 100644
index 0000000..be90c2a
--- /dev/null
+++ b/integrations/resend.mdx
@@ -0,0 +1,97 @@
+---
+title: "Resend"
+description: "Add email sending capabilities to your application"
+---
+
+Resend provides reliable email delivery and tracking for your application's email needs.
+
+
+ To send emails from a registered domain, you must verify your domain in Resend.
+ Please follow the official Resend guide [here](https://resend.com/docs/dashboard/domains/introduction).
+
+
+## Overview
+
+
+
+ Sign up for a Resend account
+
+
+ Generate your Resend API key
+
+
+ Add your API key to Create's secrets
+
+
+
+## Account Creation
+
+
+
+ Go to [resend.com](https://resend.com/) and click "Get Started"
+
+
+
+
+
+ * Sign up with email/password
+ * Verify your email address
+
+
+
+
+## Generate API Key
+
+
+
+ If this is your first time generating an API key, this Get Started page will show.
+ Otherwise, navigate to the API Keys page.
+ 1. Click "Add an API Key"
+
+
+
+
+
+ 1. Copy the API key
+ 2. Store it securely
+ 3. Test the key by sending a test email
+
+
+
+ This key will only be shown once - save it immediately
+
+
+
+
+## Add to Create Project
+
+
+
+ 1. In your Create project, type `/` in chat
+ 2. Select "Resend" from the menu
+
+
+
+ 1. Paste your Resend API key into "RESEND_API_KEY" secret
+
+
+ Need a new key? Regenerate in Resend dashboard.
+
+
+
+
+ Use prompts to implement email features:
+
+ * `Send welcome email to new users with /Resend`
+ * `Build a password reset flow using /Resend`
+ * `Create a newsletter system with /Resend`
+
+
+ Resend has daily sending limits - monitor usage in their dashboard
+
+
+
+
+
+ Resend integration complete! Use `/Resend` in chat to access email capabilities.
+
diff --git a/integrations/slack.mdx b/integrations/slack.mdx
new file mode 100644
index 0000000..2305c90
--- /dev/null
+++ b/integrations/slack.mdx
@@ -0,0 +1,189 @@
+---
+title: "Slack"
+description: "Integrate Slack messaging capabilities into your application"
+---
+
+Connect your app to Slack's API to send messages, manage channels, and interact with users.
+
+## Overview
+
+
+
+ Sign up for a Slack account.
+
+
+ Generate your Slack API token.
+
+
+ Add your credentials to Create's secrets.
+
+
+
+## Account Setup
+
+
+
+ Go to [api.slack.com](https://slack.com/) and click "Get Started" to create a new workspace.
+
+
+
+
+
+ If you already have a workspace, click "Sign In" to access your account.
+
+
+
+
+
+ 1. After signing, click "Your Apps" on the homepage.
+ 2. Click on "Create New App".
+
+ 3. Name your App and choose which workspace you will be installing the slack bot.
+
+
+
+
+## Slack Alert Bot Setup Guide
+
+This part will guide you in creating a bot that sends an alert to a specified channel.
+
+
+
+ 1. Navigate to "Incoming Webhook" in the left sidebar.
+ 2. Enable "Activate Incoming Webhooks"
+ 3. Click "Add New Webhook to Workspace"
+
+
+
+
+ Select the channel in your workspace that your bot will send notifications to.
+
+
+
+
+ 1. Copy the generated Slack webhook URL at the bottom of the page.
+ 2. Paste the URL into your Create project's secrets as SLACK_WEBHOOK.
+
+
+
+
+## Slack Slash Command Bot Setup Guide
+
+This part will guide you in creating a bot that uses slash commands.
+
+
+
+ 1. Once your app is created, navigate to "Basic Information" in the left sidebar.
+ 2. Under "Signing Secret", copy the necessary key for your bot app.
+
+
+ The signing secret is used in the function to verify messages are coming from Slack.
+
+
+
+## Verify Settings
+
+
+ 1. Navigate to "Event Subscriptions" in the left sidebar, and enable Events.
+ 2. Enter your Create project's URL into the Request URL. It should follow the example in the picture below.
+
+ 3. Scroll further to find "Subscribe to Bot Events" and add the "message.im" Bot User Event
+
+
+
+
+ 1. Navigate to "App Home" in the left sidebar.
+ 2. Enable "Show my Bot as Online" and "Allow Users to Send Slash Commands"
+
+
+
+
+ 1. Navigate to "Slash Commands" in the left sidebar.
+ 2. Click "Create New Command", and name it chatgpt as an example.
+
+
+
+
+
+ If you plan on changing the name:
+ 1. Go into your Create project's code, find the conditional that mentions /chatgpt and change it to whatever slash command you plan to name.
+
+ If you plan on changing the functionality as well, be sure to use the AI Builder to modify it for that slash command
+
+
+
+ 1. After setting everything up, navigate to the "Install App" in the left sidebar.
+ 2. Click on "Install to Your Workspace"
+
+
+
+
+
+ Try out your App by going into any available channels or DM and type in "/chatgpt"
+
+
+
+
+## Add to Create Project
+
+
+
+ 1. In your Create project, type `/` in chat.
+ 2. Select "Slack" from the menu.
+
+
+
+ 1. Paste your Signing Secret into "SLACK_SIGNING_SECRET."
+
+
+ Need new credentials? Regenerate in the Slack API settings.
+
+
+
+
+ Use prompts to implement Slack features:
+
+ * `Send a message to a channel using /Slack`
+ * `Post a reminder with /Slack`
+ * `Manage channels with /Slack`
+
+
+ Slack API has rate limits - implement error handling for best reliability.
+
+
+
+
+
+ Slack integration complete! Use `/Slack` in chat to access messaging capabilities.
+
+
+## Frequently Asked Questions
+
+
+
+ Slack API allows you to interact with Slack's messaging platform, enabling features like sending messages, managing channels, and more.
+
+
+
+ Yes, you need a Slack Developer Account to create an app and access the API.
+
+
+
+ The API works by sending requests to Slack's servers, which process the requests and return the results based on your commands.
+
+
+
+ You can build:
+ - Messaging bots
+ - Notification systems
+ - Channel management tools
+
+
+
+ Yes, Slack has API rate limits. Free accounts have lower limits than paid accounts. Check Slack's official documentation for current limits.
+
+
+
+ Yes, you can test your integration by sending requests to the API and monitoring the responses to ensure it functions as expected.
+
+
diff --git a/integrations/spotify.mdx b/integrations/spotify.mdx
new file mode 100644
index 0000000..faf4668
--- /dev/null
+++ b/integrations/spotify.mdx
@@ -0,0 +1,106 @@
+---
+title: "Spotify"
+description: "Access music, playlists, and user data"
+---
+
+Spotify API provides access to millions of songs, playlists, and user listening data.
+
+Spotify API requires a Spotify premium account
+
+## Overview
+
+
+
+ Sign up for a Spotify Developer account
+
+
+ Generate your Spotify API credentials
+
+
+ Add your API keys to Create's secrets
+
+
+
+## Account Creation
+
+
+
+ Go to [developer.spotify.com](https://developer.spotify.com/) and click "Dashboard"
+
+
+
+
+
+ * Log in with your Spotify account
+
+
+
+ * Click "Create App" in the dashboard
+
+
+
+ * Fill in app name and description
+ * The redirect uri will be your create project live site url + /api/callback
+
+
+
+
+## Generate API Keys
+
+
+
+ 1. Go to your app settings
+ 2. Find your Client ID and Client Secret
+
+
+ Keep your Client Secret secure and never share it
+
+
+
+
+ This step is only relevant if you use the Spotify User Info
+ 1. Be sure your project is published
+ 2. Ensure there is a callback path in your page and functions setting
+
+
+
+
+## Add to Create Project
+
+
+
+ 1. In your Create project, type `/` in the chat
+ 2. Select "Spotify" from the menu
+
+
+
+ 1. Paste your Client ID into the "SPOTIFY_CLIENT_ID" field
+ 2. Paste your Client Secret into the "SPOTIFY_CLIENT_SECRET" field
+
+
+ Need new credentials? Generate them in your Spotify Developer dashboard.
+
+
+
+
+ You can now use prompts with the integration to access music data.
+
+ Example prompts:
+ * `Get user's playlists using /Spotify`
+ * `Search for songs with /Spotify`
+ * `Create a music player using /Spotify`
+
+
+ API has rate limits - implement caching for frequently accessed data.
+
+
+ Example prompt for optimization:
+ ```
+ When using /Spotify, cache the track data in my database
+ ```
+
+
+
+
+ Your Spotify integration is ready! Use `/Spotify` in chat to access music data.
+
diff --git a/integrations/tavus.mdx b/integrations/tavus.mdx
new file mode 100644
index 0000000..b510697
--- /dev/null
+++ b/integrations/tavus.mdx
@@ -0,0 +1,105 @@
+---
+title: "Tavus"
+description: "Create personalized AI video content"
+---
+
+Tavus API enables creation of personalized AI-generated video content at scale.
+
+## Overview
+
+
+
+ Sign up for a Tavus account
+
+
+ Generate your Tavus API key
+
+
+ Add your API key to Create's secrets
+
+
+
+## Account Creation
+
+
+
+ Go to [tavus.io](https://tavus.io/) and click "Sign Up"
+
+
+
+
+
+ * Sign up with email/password
+ * Or continue with Google authentication
+
+
+
+
+## Generate API Key
+
+
+
+ 1. Go to your Tavus dashboard
+ 2. Navigate to "API Settings"
+
+
+ Free tier has rate limits - monitor your usage
+
+
+
+
+ 1. Click "Create a New Key"
+ 2. Name your key (e.g., "Create Integration")
+ 3. Copy your API key
+
+
+
+
+ 1. Go to "Replica Library" in your left side dashboard
+ 2. Select the stock replica or personal replica you want to use as a template
+ 3. Click "Copy Replica ID" or find it in the video's URL
+
+
+ The Replica ID is needed to generate variations of your video template
+
+
+
+
+## Add to Create Project
+
+
+
+ 1. In your Create project, type `/` in the chat
+ 2. Select "Tavus" from the menu
+
+
+
+ 1. Paste your API key into the "TAVUS_API_KEY" field
+
+
+ Need a new key? Generate one in your Tavus dashboard.
+
+
+
+
+ You can now use prompts with the integration to create AI videos.
+
+ Example prompts:
+ * `Generate a personalized video using /Tavus`
+ * `Create video variations with /Tavus`
+ * `Build a video message system using /Tavus`
+
+
+ API has rate limits - implement caching for frequently used videos.
+
+
+ Example prompt for optimization:
+ ```
+ When using /Tavus, cache the generated videos in my database
+ ```
+
+
+
+
+ Your Tavus integration is ready! Use `/Tavus` in chat to create AI videos.
+
diff --git a/integrations/tenor.mdx b/integrations/tenor.mdx
new file mode 100644
index 0000000..88e3642
--- /dev/null
+++ b/integrations/tenor.mdx
@@ -0,0 +1,89 @@
+---
+title: "Tenor"
+description: "Access GIFs and animated content"
+---
+
+Tenor API provides access to millions of GIFs and animated content through their comprehensive search API.
+
+## Overview
+
+
+
+ Sign up for a Google Cloud account
+
+
+ Generate your Tenor API key
+
+
+ Add your API key to Create's secrets
+
+
+
+## Account Creation
+
+
+
+ Go to [https://tenor.com/gifapi](https://tenor.com/gifapi) and click "Documentation"
+
+
+
+
+
+ * Scroll down to the Setup section
+ * Click "Sign In with Google Cloud"
+
+
+
+
+## Generate API Key
+
+
+
+ 1. Click "Get a Tenor API Key"
+ 2. Create a project or select an existing one
+ 3. Copy your API key
+
+
+ Keep your API key secure and set usage limits
+
+
+
+
+## Add to Create Project
+
+
+
+ 1. In your Create project, type `/` in the chat
+ 2. Select "Tenor" from the menu
+
+
+
+ 1. Paste your API key into the "TENOR_API_KEY" field
+
+
+ Need a new key? Generate one in your Google Cloud Console.
+
+
+
+
+ You can now use prompts with the integration to access GIFs.
+
+ Example prompts:
+ * `Find reaction GIFs using /Tenor`
+ * `Add animated stickers with /Tenor`
+ * `Create a GIF picker using /Tenor`
+
+
+ API has rate limits - implement caching for frequently accessed GIFs.
+
+
+ Example prompt for optimization:
+ ```
+ When using /Tenor, cache the GIF URLs in my database
+ ```
+
+
+
+
+ Your Tenor integration is ready! Use `/Tenor` in chat to access GIFs.
+
diff --git a/integrations/ticketmaster.mdx b/integrations/ticketmaster.mdx
new file mode 100644
index 0000000..680ded6
--- /dev/null
+++ b/integrations/ticketmaster.mdx
@@ -0,0 +1,94 @@
+---
+title: "Ticketmaster"
+description: "Access events and venue data"
+---
+
+Ticketmaster Discovery API provides comprehensive access to events, venues, and ticket information worldwide.
+
+## Overview
+
+
+
+ Sign up for a Ticketmaster Developer account
+
+
+ Generate your API key
+
+
+ Add your API key to Create's secrets
+
+
+
+## Account Creation
+
+
+
+ Go to [developer.ticketmaster.com](https://developer.ticketmaster.com/) and click "Create an Account"
+
+
+
+
+
+ * Sign up with email/password
+ * Or continue with Google authentication
+
+
+
+## Generate API Key
+
+
+
+ 1. Go to your Ticketmaster Developer dashboard
+ 2. Navigate to the "Applications" section
+
+
+ Free tier has rate limits - monitor your usage
+
+
+
+
+ 1. Name your application
+ 2. Select "Discovery API" access
+ 3. Copy your Consumer Key (API Key)
+
+
+
+
+## Add to Create Project
+
+
+
+ 1. In your Create project, type `/` in the chat
+ 2. Select "Ticketmaster" from the menu
+
+
+
+ 1. Paste your API key into the "TICKETMASTER_API_KEY" field
+
+
+ Need a new key? Generate one in your Ticketmaster Developer dashboard.
+
+
+
+
+ You can now use prompts with the integration to access event data.
+
+ Example prompts:
+ * `Find upcoming concerts using /Ticketmaster`
+ * `Get venue details with /Ticketmaster`
+ * `Create an event discovery app using /Ticketmaster`
+
+
+ API has rate limits - implement caching for frequently accessed data.
+
+
+ Example prompt for optimization:
+ ```
+ When using /Ticketmaster, cache the event details in my database
+ ```
+
+
+
+
+ Your Ticketmaster integration is ready! Use `/Ticketmaster` in chat to access event data.
+
diff --git a/integrations/weather.mdx b/integrations/weather.mdx
new file mode 100644
index 0000000..19e3b49
--- /dev/null
+++ b/integrations/weather.mdx
@@ -0,0 +1,93 @@
+---
+title: "Weather"
+description: "Access real-time weather data and forecasts"
+---
+
+Get detailed weather information and forecasts for any location worldwide using OpenWeatherMap's API.
+
+## Overview
+
+
+
+ Sign up for an OpenWeatherMap account
+
+
+ Generate your API key
+
+
+ Add your API key to Create's secrets
+
+
+
+## Account Creation
+
+
+
+ Go to [openweathermap.org](https://openweathermap.org/) and click "Sign Up" in the top right corner
+
+
+
+
+
+ * Sign up with email/password
+ * Or continue with Google authentication
+
+
+
+## Generate API Key
+
+
+
+ 1. Go to your OpenWeatherMap dashboard
+ 2. Navigate to the "API keys" tab
+
+
+ New API keys may take a few hours to activate
+
+
+
+
+ 1. Name your key (e.g., "Create Integration")
+ 2. Click "Generate"
+ 3. Copy your API key
+
+
+
+## Add to Create Project
+
+
+
+ 1. In your Create project, type `/` in the chat
+ 2. Select "Weather" from the menu
+
+
+
+ 1. Paste your API key into the "OPENWEATHERMAP_API_KEY" field
+
+
+ Need a new key? Generate one in your OpenWeatherMap dashboard.
+
+
+
+
+ You can now use prompts with the integration to access weather data.
+
+ Example prompts:
+ * `Show the weather forecast using /Weather`
+ * `Build a travel planner with /Weather`
+ * `Create a sports event scheduler using /Weather`
+
+
+ API has rate limits - implement caching for frequently accessed locations.
+
+
+ Example prompt for optimization:
+ ```
+ When using /Weather, cache the forecast data in my database
+ ```
+
+
+
+
+ Your Weather integration is ready! Use `/Weather` in chat to access weather data.
+
diff --git a/integrations/yelp.mdx b/integrations/yelp.mdx
new file mode 100644
index 0000000..316198c
--- /dev/null
+++ b/integrations/yelp.mdx
@@ -0,0 +1,95 @@
+---
+title: "Yelp"
+description: "Access business data and reviews"
+---
+
+Yelp provides access to millions of business listings, reviews, and ratings through their Fusion API.
+
+## Overview
+
+
+
+ Sign up for a Yelp Developer account
+
+
+ Generate your Yelp API key
+
+
+ Add your API key to Create's secrets
+
+
+
+## Account Creation
+
+
+
+ Go to [yelp.com/developers](https://www.yelp.com/developers) and click "Log In"
+
+
+
+
+
+ * Sign up using the link sent to your email
+
+
+
+
+## Generate API Key
+
+
+
+ 1. Go to the Yelp Fusion dashboard
+ 2. Click "Create New App"
+ 3. Fill in your app details
+
+
+
+ Keep your API key secure - it grants access to your Yelp API quota
+
+
+
+
+
+ 1. Copy the generated API key
+ 2. Store it securely
+
+
+
+## Add to Create Project
+
+
+
+ 1. In your Create project, type `/` in the chat
+ 2. Select "Yelp" from the menu
+
+
+
+ 1. Paste your API key into the "YELP_API_KEY" field
+
+
+ Need a new key? Generate one in your Yelp Developers dashboard.
+
+
+
+
+ You can now use prompts with the integration to access business data.
+
+ Example prompts:
+ * `Find restaurants near me using /Yelp`
+ * `Get business reviews with /Yelp`
+ * `Create a local business directory with /Yelp`
+
+
+ API has rate limits - implement caching for frequently accessed data.
+
+
+ Example prompt for optimization:
+ ```
+ When using /Yelp, cache the business details in my database
+ ```
+
+
+
+
+ Your Yelp integration is ready! Use `/Yelp` in chat to access business data.
+
diff --git a/mint.json b/mint.json
index 6ff0fd1..de29ce2 100644
--- a/mint.json
+++ b/mint.json
@@ -69,7 +69,8 @@
"builder/functions",
"builder/databases",
"builder/user-accounts",
- "builder/uploads"
+ "builder/uploads",
+ "stripe"
]
},
{
@@ -117,9 +118,6 @@
"thumbsRating": true,
"suggestEdit": true
},
- "metadata": {
- "og:image": "/images/og.png"
- },
"redirects": [
{
"source": "/create/getting-started/builder-basics",
@@ -173,6 +171,14 @@
"source": "/create/quick-tips/connect-to-external-apis",
"destination": "/quick-tips/external-apis"
},
+ {
+ "source": "/builder/databases-v2",
+ "destination": "/builder/databases"
+ },
+ {
+ "source": "/builder/user-accounts-v2",
+ "destination": "/builder/user-accounts"
+ },
{
"source": "/create/builder-add-ons/:slug*",
"destination": "/builder/:slug*"
diff --git a/prompting.mdx b/prompting.mdx
index 3c65a61..e8f64e0 100644
--- a/prompting.mdx
+++ b/prompting.mdx
@@ -137,6 +137,18 @@ When I hit the 'manage teachers' button [screenshot] it should take me back to [
If you see a error message, you can often just paste it back into the chat to give Create more context.
+### Using previous versions
+
+When you generate something new, Create has knowledge of your previous versions.
+
+You can sometimes be specific on what you liked about previous versions to bring that functionality back.
+
+```
+In a previous version, the paste image when the page was selected worked. It's now not working.
+
+Figure out how to bring that back.
+```
+
### Avoid "too long" → break into components
As your project grows long, Create can sometimes have a harder time making changes. You can combat this by breaking your project into more elements ([components](/builder/components), [functions](/builder/functions), etc).
diff --git a/publish-and-share/custom-domains.mdx b/publish-and-share/custom-domains.mdx
index 09e7f7c..a439843 100644
--- a/publish-and-share/custom-domains.mdx
+++ b/publish-and-share/custom-domains.mdx
@@ -19,10 +19,13 @@ A custom domain lets you use your own web address (like `yourapp.com`) instead o
* Have an app ready to publish
-**Important timing notes:**
-- DNS changes can take up to 48 hours to take effect
-- During this time, your domain might not work or might show old content
-- If it's been 48 hours since you'd added records and published your domain, reach out for support
+ **Important timing notes:**
+
+ * DNS changes can take up to 48 hours to take effect
+
+ * During this time, your domain might not work or might show old content
+
+ * If it's been 48 hours since you'd added records and published your domain, reach out for support
## How it works
@@ -33,9 +36,11 @@ When someone visits your domain:
Your domain provider checks its DNS records
+
The records point visitors to Create's servers
+
Create routes visitors to your published app
@@ -49,11 +54,13 @@ DNS records are like an address book for the internet. They tell browsers where
[Publish](/publish-and-share/publish) your Create app
+
- Select "Publish to a custom domain" in the Publish modal
+ Select "Publish to a custom domain" in the Publish modal
-
- Add these DNS records at your domain provider:
+
+
+ Add these DNS records ***at your domain provide***r:
```
Type: A
@@ -70,13 +77,13 @@ DNS records are like an address book for the internet. They tell browsers where
-**Using a subdomain?** For addresses like `app.your-domain.com`, just add one record:
+ **Using a subdomain?** For addresses like `app.your-domain.com`, just add one record:
-```
-Type: A
-Name: subdomain-name (e.g., "app")
-Value: 76.76.21.21
-```
+ ```
+ Type: A
+ Name: subdomain-name (e.g., "app")
+ Value: 76.76.21.21
+ ```
## Provider-specific setup
@@ -91,18 +98,26 @@ Value: 76.76.21.21
+
Select `A` for the record type and set `76.76.21.21` for the value.
+
+
Create another record like in Step 1
+
Create another record with:
- - Type: `CNAME`
- - Value: `cname.vercel-dns.com`
- - Subdomain: `www`
+
+ * Type: `CNAME`
+
+ * Value: `cname.vercel-dns.com`
+
+ * Subdomain: `www`
+
@@ -110,6 +125,7 @@ Value: 76.76.21.21
Your final configuration should look like this:
+
@@ -128,13 +144,16 @@ Value: 76.76.21.21
+
+
Add both the A and CNAME records as shown:
+
@@ -142,6 +161,7 @@ Value: 76.76.21.21
Your final configuration should look like this:
+
@@ -154,9 +174,11 @@ Value: 76.76.21.21
Access the Publish settings for your app
+
Click "Remove domain" next to your custom domain
+
Remove the DNS records from your domain provider
@@ -164,4 +186,4 @@ Value: 76.76.21.21
## Need help?
-Email customers@create.xyz for support with domain setup.
+Email [customers@create.xyz](mailto:customers@create.xyz) for support with domain setup.
\ No newline at end of file
diff --git a/stripe.mdx b/stripe.mdx
index 04fd89e..67228a3 100644
--- a/stripe.mdx
+++ b/stripe.mdx
@@ -1,12 +1,8 @@
---
-title: "Stripe Subscriptions (Beta)"
-description: "Set up subscription payments for your app"
+title: "Payments"
+description: "Set up subscription payments for your app with Stripe"
---
-
- This is a beta feature. We're improving it before general release. For now, it requires manual set up. Contact dhruv@create.xyz or join our [Discord](www.create.xyz/discord) for help.
-
-
Stripe lets you set up payments for your app so you can charge users for access or features.
Our new integration helps set it up in minutes. It lets you:
@@ -38,7 +34,7 @@ Here's what your user flow will look like once set up:
2. User signs in with [User Accounts](/builder/user-accounts)
3. User sees:
- Free tier app with your paid upgrade upsell OR
- - Upsell required from start for access
+ - Payment required from start for access
4. User goes through upsell to buy a subscription:
- Redirected to Stripe checkout
- Fills in payment details in Stripe's UI
@@ -184,6 +180,18 @@ This component gives you an upsell UI that will redirect users to Stripe to chec
You can style this component and add it to the right places in your app.
+Prompt examples
+
+In the component chat:
+```
+Style this upsell to look like the rest of the app: [screenshot]. Call out that Pro is $10/month and say it gives you unlimited generations.
+```
+
+In another page:
+```
+Use /[Subscription Upsell] in the dashboard if the user is not subscribed.
+```
+
#### Stripe Webhook
This [function](/builder/functions) listens for successful payments and subscription updates.
@@ -199,9 +207,9 @@ You won't need to modify this besides adding your STRIPE_WEBHOOK_SECRET as a sec
Learn how to get your STRIPE_WEBHOOK_SECRET in the [Add Stripe Webhook and STRIPE_WEBHOOK_SECRET](#add-stripe-webhook-and-stripe_webhook_secret) section below.
-#### Check Subscription Wrapper
+#### useIsSubscribed
-Component for gating premium content based on the user's subscription status.
+Component that handles checking the signed in user's subscription status. You can use it gate features / access for paid members.
- Shows/hides content based on subscription status
- Checks subscription status for current user in your [users database](/builder/user-accounts)
@@ -212,16 +220,17 @@ You can use this component when describing things you only want paid users to se
Prompt examples
```
-Use /[Check Subscription Wrapper] to hide the generations remaining counter for users that are subscribed"
+Use /[useIsSubscribed] to only show the /[Subscription Upsell] for free users. Hide it for paid users."
```
```
-If the user is subscribed, show the extra content for pro members using /[Check Subscription Wrapper]"
+If the user is subscribed, show the extra content for pro members with /[useIsSubscribed]"
```
### Set up your Stripe product
-You'll make a product and price in Stripe for your subscription. You'll copy the STRIPE_PRICE_ID from Stripe to use in your Create app.
+You'll make a product and price in Stripe for your subscription.
+You'll copy the STRIPE_PRICE_ID from Stripe to use in your Create app.
#### Make product, price, and get STRIPE_PRICE_ID
@@ -270,12 +279,15 @@ You'll make a product and price in Stripe for your subscription. You'll copy the
-
+
+
+ Add STRIPE_PRICE_ID as the name.
+ Add the price ID you copied from Stripe as the value.
@@ -347,7 +359,7 @@ You'll make a product and price in Stripe for your subscription. You'll copy the
- Go to 3 dots > Secrets > Add a Secret
+ Go to [3 dots menu](/builder/controls#3-dot-menu) > Secrets > Add a Secret
@@ -355,19 +367,54 @@ You'll make a product and price in Stripe for your subscription. You'll copy the
-### Hooking Up the Elements to Your App
+### Hooking up the payment flow
+
+You now can build:
+
+1. How your users pay you
+2. What happens before they pay and after they pay
-You now can build your flows.
+
+ You can add the [Subscription Upsell](#subscription-upsell) and [useIsSubscribed](#useissubscribed) [components](/builder/components) to other parts of your app the same as other [components](/builder/components).
+
+ Press / in the chat > Components > [name]. Then describe how you want to use it.
+
+
+ Tap on the Subscription Upsell component.
+
+ Prompt Create to make it look how you want.
+
+ Before styling:
+
+
+
+ After styling with prompts:
+
+
+
+
+
- Add the Subscription Upsell component where you want the subscribe button
+ Add the Subscription Upsell component where you want to show users your upsell to pay.
+
+ Use / to add it in the chat.
+
+
-
+
Prompt Create to use this component when you want to control access to features based on the user's subscription status.
+
+ Use / to add it in the chat.
+
+ For example, "Use /[useIsSubscribed] If the user is free, then show them the [Subscription Upsell]. If they've paid, then show them the paid content"
+
+
+
When you publish, be sure to toggle your Stripe Checkout Link function & Stripe Webhook function to on.
@@ -379,13 +426,31 @@ You now can build your flows.
Run through your flow in your published app.
- 1. Verify when you hit subscribe, you're redirected to Stripe
+ 1. Verify when you hit the button in the Subscription Upsell, you're redirected to Stripe
2. After paying, you should be redirected back to your app
3. Check in your users database to see that the signed in user is marked as subscribed
- 4. After the user is subscribed, make sure the right content is shown to them
+
+
+ You can find your Users Database for your project quickly by:
+
+ - Tap on the Sign In page in the builder > in the panel on the left > tap database
+
+
+
+ - You should see that the user you signed in with is marked as "active" in the subscription status column
+
+
+
+
+
+ 4. After the user is subscribed, make sure the right content is shown to them.
+
+
+ If you're not seeing the right content shown to free vs. paid users, use the [useIsSubscribed](#useissubscribed) component.
+
- You can use a real card to test the flow. If needed, you can easily refund the payment from your Stripe dashboard.
+ You can use a real card to test the flow. If needed, you can refund the payment from your Stripe dashboard.
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ - Check that your Client ID and Client Secret are correctly pasted in Create
+ - Ensure your domain is added as an Authorized JavaScript Origin in Google Cloud
+ - Verify your app is published and accessible at your custom domain
+ 
+ 
+
+## Customizing the Form
+
+You can customize the email/password form through chat:
+
+```
+Make the sign in form match our brand colors
+```
+
+```
+Add password requirements text under the password field
+```
+
+Create will update the form while maintaining the secure authentication logic.
+
+## Testing
+
+1. Publish your changes
+2. Open your app in a new incognito window
+3. Go to the sign in page
+4. Try signing up with email/password
+5. Check the [auth_users table](/builder/databases) to see your new user
+
+## Troubleshooting
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+ 
+ 
+
+ 
+ 
+ 
+
-
+
+ 
+
+ 
+
+ 
-
Describe what you want the Function to do:
* What inputs it needs
@@ -129,7 +128,7 @@ Create handles connecting everything together based on your description. If you
## Testing Functions
-Every Function has a full test runner available in the 3-dot menu > Run Test tab.
+Every Function has a full test runner available in the 3-dot menu > Run Test tab.
@@ -145,10 +144,10 @@ Use it to:
* **Debug** - Use error descriptions to fix issues. You can often just paste the error description into your prompt to fix it.
-
+
+
+
+Create is adding support for building native mobile apps for iOS and Android. This feature is in beta for early access members.
+
+**Join the beta:** Sign up at [earlyaccess.created.app](https://earlyaccess.created.app)
+
+
+
+ 
+
+
+## Building Your App
+
+
+
+ 
+
+ 
+
+ 
+ 
+
+
+## Adding Manually
+
+If Create isn't recognizing when to add User Accounts, you can also trigger it manually.
1. **Enable for Project**:
- * Open Create logo menu
+ * Open [Create logo menu](/builder/controls#logo-menu)
* Choose "Enable User Accounts"
- * Signup, Signin, Logout pages and a Users database gets created automatically
+ * Signup, Signin, Logout pages and the right tables gets created
2. **Protect Content**:
- * Open page/function settings (3-dot menu > Settings > "Require sign in to view")
+ * Open page/function settings ([3-dot menu](/builder/controls#three-dot-menu) > Settings > "Require sign in to view")
* Enable "Require sign in to view"
* Publish to apply changes
-## How Authentication Works
+## How It Works - In the App
When you enable User Accounts, Create adds:
-* **Authentication Pages**:
+### Authentication Pages
+
+* Sign In Page - `/account/signin`
+
+* Sign Up Page - `/account/signup`
+
+* Logout Page - `/account/logout`
+
+You can customize the look and feel of these pages by prompting Create to change them.
+
+Once User Accounts is enabled, you can also create components for the sign in, sign up, and logout functionality. This lets you embed this functionality anywhere. Under the hood, it uses the same auth routes as the pages.
+
+These pages contain special code to update the user in the database when they sign up/in and handle common errors.
+
+### User Tables
+
+Create makes 4 special tables:
+
+* `auth_users`: Tracks users in your app
+
+* `auth_accounts`: Tracks auth methods (email/password, Google, etc.)
+
+* `auth_sessions`: Database-backed user sessions
+
+* `auth_verification_token`: 2FA verification tokens
+
+Most used: `auth_users` (core profiles) and `auth_accounts` (login methods)
+
+
+
+
+
-* Join our Discord for help
+Common error codes and fixes:
+
+* **OAuthSignin/Callback**: OAuth configuration issue
+ - Check provider settings and keys
+ - Verify redirect URLs
+
+* **OAuthAccountNotLinked**: Email already used with different auth method
+ - User should sign in with original method (e.g. Google instead of email)
+
+* **CredentialsSignin**: Wrong email/password
+ - Double-check credentials
+ - Reset password if needed
+
+* **EmailCreateAccount**: Email already registered
+ - Use sign in instead
+ - Reset password if needed
+
+* **AccessDenied**: Permission issue
+ - Check access settings
+ - Verify allowed domains
+
+* **Configuration**: System setup issue
+ - Check auth configuration
+ - Verify environment variables
## FAQs
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 3. Right click the server icon you want your bot join in your list of servers.
+ 4. Copy the Server ID.
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 2. Store it securely
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 2. Select Read and name your token (e.g., "Create Integration")
+ 
+ 3. Copy your API token
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+ 
+ 
+ 
+ 
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+ 
+ 
+ 
+ 3. Name your App and choose which workspace you will be installing the slack bot.
+
+ 
+ 
+ 
+ 
+ 
+ 3. Scroll further to find "Subscribe to Bot Events" and add the "message.im" Bot User Event
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+ 
+ 1. Copy the generated API key
+ 2. Store it securely
+ 
@@ -110,6 +125,7 @@ Value: 76.76.21.21
Your final configuration should look like this:
+
@@ -128,13 +144,16 @@ Value: 76.76.21.21
@@ -142,6 +161,7 @@ Value: 76.76.21.21
Your final configuration should look like this:
+
@@ -154,9 +174,11 @@ Value: 76.76.21.21
+
+ Add STRIPE_PRICE_ID as the name.
+ Add the price ID you copied from Stripe as the value.
+
+ After styling with prompts:
+
+ 
+
+ 
+
+ - You should see that the user you signed in with is marked as "active" in the subscription status column
+
+ 
+