# Credits
Source: https://www.create.xyz/docs/account/credits
Understanding Credits
Credits power AI generations and integrations in Create. They're used as:
* Create builds your app with AI
* AI integrations run in your app
**Free Plan**: Get 5k credits to explore Create with daily message limits. Choose a paid plan for higher credits per month and no message limits.
## Create Pro Plans
Create Pro unlocks our most advanced AI agent, private projects, custom domains, and more.
Choose your credits per month. You get volume discounts for higher monthly limits or annual plans:
* **Pro 20k** - \$19/mo - 20k credits
* **Pro 50k** - \$49/mo - ~~50k~~ 55k credits
* **Pro 100k** - \$99/mo - ~~100k~~ 110k credits
* **Pro 200k** - \$199/mo - ~~200k~~ 220k credits
* **Pro 300k** - \$299/mo - ~~300k~~ 330k credits
* **Pro 400k** - \$399/mo - ~~400k~~ 440k credits
* **Pro 500k** - \$499/mo - ~~500k~~ 550k credits
* **Pro 600k** - \$599/mo - ~~600k~~ 660k credits
* **Pro 750k** - \$749/mo - ~~750k~~ 825k credits
* **Pro 900k** - \$899/mo - ~~900k~~ 990k credits
Need a custom credit limit or teams plan? [Contact us](https://n95j344rku9.typeform.com/to/KXvf3tZG).
## How Credits Work
Credits are used in two main ways:
1. **AI generations**
* Create generates your app as you send messages.
* Create uses many AI models to generate code, images, and more for your app when you send messages.
* Create uses a model and task dependent number of credits per message (typically 100-500 credits per message, but it can be more or less).
2. **AI Integrations**
* You can include AI integrations in your app
* When your app runs an AI integration, it uses credits per run
* Only select integrations use credits - many run for free
* You can add Functions with your own API keys for credit-free alternatives
* Integrations use a model and input/output dependent number of credits per run
# Purchasing and Managing Credits
All plans come with a set number of credits per month.
* Monthly credits refill on your billing date to your selected monthly plan
* Unused monthly credits expire at the end of your billing cycle
* Paid members can purchase additional one time credits anytime if you need a few more in a month. One time credit purchases do not expire.
* Upgrade your plan for higher monthly limits
You can view usage, change your plan, and purchase additional credits from Subcription & credits tab in the [dashboard](https://create.xyz/dashboard).
## Hitting your limit
When you hit your credit limit, you'll need to upgrade your plan or purchase additional credits to keep building or have your integraitons run.
If you run out of credits while building, Create will prompt you to upgrade your plan when you send your next message.
As apps you create start using credits for integrations, Create sends you an email alert from `hello@create.xyz` as you near your limits.
Track your credit usage from:
* **Subscription & credits** in the dashboard
* **Email alerts** as you approach your limit
## Need More?
If you need a custom credit limit or team plan, [contact us here](https://n95j344rku9.typeform.com/to/KXvf3tZG).
## **Refund Policy and Cancellations**
Create does not offer refunds at this time. We can assist you with cancelling your Create subscription, which you can do by heading to your [dashboard](https://app.create.xyz), clicking on Subscription and Credits > Update Plan > Manage Billing
# Subscriptions
Source: https://www.create.xyz/docs/account/subscriptions
Join Create Pro
## Plans
* **Free** - Perfect for trying out Create
* 5k credits to explore
* Daily message limits
* Limited code generation
* Public projects
* **Create Pro**
* Advanced code generation agent
* Private projects
* Custom domains
* Priority AI models
* Choose your monthly credit limit:
* Pro 20k - \$19/mo - 20k credits
* Pro 50k - \$49/mo - ~~50k~~ 55k credits
* Pro 100k - \$99/mo - ~~100k~~ 110k credits
* Pro 200k - \$199/mo - ~~200k~~ 220k credits
* Pro 300k - \$299/mo - ~~300k~~ 330k credits
* Pro 400k - \$399/mo - ~~400k~~ 440k credits
* Pro 500k - \$499/mo - ~~500k~~ 550k credits
* Pro 600k - \$599/mo - ~~600k~~ 660k credits
* Pro 750k - \$749/mo - ~~750k~~ 825k credits
* Pro 900k - \$899/mo - ~~900k~~ 990k credits
You can view a full feature breakdown on our [pricing page](https://create.xyz/pricing).
Free plans come with daily message limits and projects are public by default. Upgrade to Create Pro for more credits per month, private projects, custom domains, and more.
## Support
Get help from our community of creators and the Create team
Premium email support for paid members
## Change Subscription
1. Go to the [dashboard](https://create.xyz/dashboard)
2. Choose "Subscription & credits"
3. You can see your current plan and credits
4. Select "[Update plan](https://pay.create.xyz/p/login/5kA6oDbVS22c2jedQQ)"
5. 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.
# Your Profile
Source: https://www.create.xyz/docs/account/your-profile
Update and manage your profile settings
You can customize your profile settings including:
* Username
* Profile photo
These settings can be accessed and modified from the **Edit Profile** section in your dashboard.
## Profile Visibility
Your profile information (username and profile photo) will be displayed:
* On the Create Community page
* Next to your published projects
Learn more about sharing your work in the [Create Community](/publish-and-share/community) section.
# Components
Source: https://www.create.xyz/docs/builder/components
Create reusable UI building blocks
Components are reusable building blocks for your app. They help you create consistent, maintainable interfaces by breaking down complex UIs into smaller pieces.
## Why Use Components
Components offer several advantages:
* **Break down large projects** - Split large projects into manageable pieces
* **Maintain consistency** - Once perfected, components work the same way everywhere
* **Save time** - Reuse components instead of regenerating similar elements
* **Improve accuracy** - Shorter, focused prompts help Create generate more precise code
* **Share with team** - Build a library of components for your organization
As pages grow longer in terms of lines of code, AI models become more likely to make errors. Breaking your project into components helps save lines of code, and improve accuracy.
## Creating Components
You can create components in several ways:
* **From Select Mode**:
* Tap a generated element you want to convert in a page or component
* Choose "Convert to Component" from the chat
* **From Logo Menu**:
* Open top left menu > New Component
* Or press `option-C` (or `alt-C` on Windows)
* **From Chat**:
* Type `/` > Create Component
* **From Canvas Mode, generating across elements**:
* Create will automatically create components that can help with your request
Describe what you want the component to do in the chat. Be specific about:
* Visual design - colors, fonts, sizes, etc.
* Behavior - how it should work in different states
* Arguments it should accept
* Variants it should support
## Managing Components
You can manage your components in several ways:
* **Rename**: Click the project group selector dropdown > Click component name to edit
* **Duplicate**: In Canvas Mode, click the element's top left corner menu > Duplicate
* **Delete**: In Canvas Mode, click the element's top left corner menu > Delete
When you delete a component, you'll need to remove or replace it anywhere it's used in your app.
## Style Your Components
Make components look good using:
* **Screenshots** pasted in chat - see our [prompting guide](/prompting)
* **URLs** in chat - Create screenshots any URL
* [**Integrations**](/builder/integrations) for component packs like shadcn/ui
* [**Style Guides**](/builder/style-guides) for consistency
* Other components as building blocks
## Using Components
Add components to any page or other component:
* Type `/` in chat
* Select your component
* Describe how you want to use it
* Send message to integrate
After updating a component, you'll need to click "Update" wherever it's used to see the changes.
## Updating Components
When you make changes to a component, you'll need to update any pages or components that use it:
* Find the places where you integrated the component
* Click the "Update" button next to the component integration
* Create will refresh the component with your latest changes
Changes to components don't automatically update everywhere they're used. This helps prevent unwanted changes from breaking your app.
## Common Components
Consider making components for:
* Navigation elements (headers, footers, menus)
* UI patterns (cards, lists, tables)
* Form elements (inputs, buttons, selectors)
* Layout sections (hero areas, feature grids)
* Interactive elements (modals, tooltips)
These are just ideas, but you can make components for anything you want.
## Arguments
Components can accept arguments to customize their appearance or behavior. For example:
* Button text and colors
* Card content and images
* Form field labels and validation
* Section headings and descriptions
To add arguments, describe what you want the component to accept.
Example prompt: "Create a banner component that accepts:
* Title
* Subtitle
* CTA text
* Background image
* Theme (light/dark)"
You'll want to explain how to use these arguments.
Later, when using the component, Create will guess the right values to pass in for the component's arguments from its context, or you can be explicit on what you want.
## Variants
Components can have multiple variations for different contexts. For example:
* sizes (small, medium, large)
* layouts (horizontal, vertical)
* types (success, warning, error)
* Theme variations (light, dark, branded)
To create variants:
Example prompt: "Add variants to the button component:
* Primary: solid background, white text
* Secondary: outlined, colored text
* Danger: red background for destructive actions"
## Preview Stories
Preview stories help you test how your component works with different inputs. They show examples of your component in action, letting you check that it works correctly in various scenarios. Create automatically generates these previews to help you validate your component's design and functionality.
* Different text lengths and content
* Various image sizes
* Multiple color themes
* Custom argument combinations
The preview wraps your component in a container that lets you:
* Change the preview width
* Test responsive layouts
* See how it looks embedded in other components
* Verify spacing and alignment
Control previews by describing what you want to test:
Example prompt: "Show preview stories with:
* Short vs long text content
* Light and dark themes
* Different container widths (mobile to desktop)
* Various image aspect ratios"
While you'll see all preview stories on the component's canvas, when you use the component in your app, you'll only see the specific instance you create. The preview stories help you test and validate your component but don't affect how it works in your final app.
# Controls
Source: https://www.create.xyz/docs/builder/controls
How to use the Create builder
## Chat
You chat with Create to build your app. Tell it what to build using text or images:
* You can paste imges into the chat
* Press `cmd-enter` (or `ctrl-enter` on Windows) to send messages
* Create uses your app's code and chat history to generate updates
* Paid plans get enhanced AI generations with more context
* When you select a **specific element**, messages update only that element
* When you select the **project name** in the [**Project Selector**](/builder/controls#project-selector) or the **canvas**, messages can modify multiple elements at once
* **Discussion Mode** - chat without making edits by clicking on the speech bubble icon labeled *Discuss*. It can be important at times to prevent edits to your work and be able to ask questions of the builder about status, approach or specific features without allowing it to alter your current design.
Learn how to write effective prompts in our [Guide to Prompting](/prompting).
## Commands
* Type `/` in the chat to open the add-ons menu
* Choose [integrations](/builder/integrations) or create new elements
* Your selection appears as a special chip in chat
* Send your message to apply the command
## Controls
Key controls in the top navigation from left to right:
* **Logo Menu**: Create new elements ([Pages](/builder/pages), [Components](/builder/components), [Functions](/builder/functions), etc.)
* **Project Selector**: Rename the project/element, jump between different elements in your project, change the [generation level](#generations)
* **Modes**: Toggle between [Demo](#demo-mode), [Select](#select-mode), and [Code](#code-mode) modes
* **Views**: Switch between [Canvas and Focused views](#canvas-vs-focused-views)
* **Responsive**: Test responsive design (Desktop/Mobile)
* **Privacy**: Control access and team settings
* **Invite**: Add collaborators to your project
* **Publish**: Launch your app live
### Logo Menu
Create new elements ([Pages](/builder/pages), [Components](/builder/components), [Functions](/builder/functions), etc.)
### Project Selector
Rename the project/element, jump between different elements in your project, change the [generation level](#project-wide-vs-single-element-generation)
### Project Settings
Control important project specific settings including assets, secret keys, custom instructions, generation settings, authentication providers, branding, social share, mobile app settings and more.
### 3 Dot Menu
Access element specific settings
### Mode Switcher
Toggle between [Demo](#demo-mode), [Select](#select-mode), and [Code](#code-mode) modes
### View Switcher
Choose between [Canvas and Focused views](#views)
### Responsive Preview
Test responsive design (Desktop/Mobile)
### Privacy
Control [community visibility](/publish-and-share/community)
### Invite
Add [team members](/publish-and-share/teams) to your project
### Publish
[Launch your app](/publish-and-share/publish) and set domain. Remember to re-publish after changes to go live.
## Generations
Control the scope of Create's changes by selecting different elements:
* **Project**:
* Select the **project name** in [**Project Selector**](/builder/controls#project-selector) or tap the **canvas**
* Create's chat can modify multiple elements at once
* Can add new [Pages](/builder/pages), [Components](/builder/components), [Functions](/builder/functions) as needed
* Best for building features that span elements
* **Element**:
* Select a specific **element name** in the [**Project Selector**](/builder/controls#project-selector) or tap it on the **canvas**
* Create's chat modifies just that element
* Changes confined to just that [Page](/builder/pages), [Component](/builder/components), or [Function](/builder/functions)
* Best for focused updates and refinements to each element
See our [Guide to Prompting](/prompting#project-wide-vs-single-element) for level-specific prompting tips.
## Modes
Switch between three modes as you build:
* **Demo**: Test your app
* **Select**: Select elements for specific updates
* **Code**: View and edit code
### Demo
Test your app as users will experience it:
* Fill forms and trigger interactions
* See real-time integration updates
* Perfect for testing flows and debugging
### Select
Make updates to specific elements:
* Tap elements to make updates
* Create reusable [components](/builder/components)
* Add links between [pages](/builder/pages)
* Modify properties and styling with direct commands
### Code
View and edit code directly:
* Make precise adjustments
* Add custom logic
* Export the code as a React/Next.js project
## Views
Toggle between two views using the collapse icon:
### Canvas
See multiple elements on an infinite canvas:
* Get a bird's eye view of your project
* Drag and arrange elements freely
* Generate across the project
### Focused
Work one element at a time:
* Fix the element's position, which helps you test scroll
* Switch elements using [**Project Selector**](/builder/controls#project-selector)
## Version History
Keep track of changes and revert to previous versions:
* **Chat**:
* Tap on previous versions in the chat to jump back
* Hit 'Restore' to make it the current version
* **Version Timeline**:
* Tap the clock icon in the top left to see all versions
* Published versions are labeled
* Restore any version
## Elements
When you select an element in Select mode:
* **Duplicate, Preview, or Delete** from the drop down menu in the top left corner in Canvas view
* Move elements by dragging from their title
* See quick actions appear in the chat
## Projects
**Rename, Duplicate or Delete** projects from the dashboard (create.xyz/dashboard)
# Databases
Source: https://www.create.xyz/docs/builder/databases
Store and manage data in your apps
## Overview
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.
Use databases to:
* Store user submissions (forms, feedback, uploads)
* Save content (blog posts, products, galleries)
* Persist data between uses of the app
* Build dynamic data-driven features
## Chat
Create automatically updates your database structure & how your app retrieves and stores data as you chat.
When a feature requires storing data, it:
1. **Designs the database structure** based on your description
2. **Makes Functions** to save and retrieve data from the database
3. **Designs the Pages and Components** to display and interact with the data
4. **Connects everything** to make sure your Pages use the Functions that retrieve/store data.
For example, if you say "Make me a tasks app", Create:
As you continue describing your app, Create updates your database structure, Functions and Pages to match what you want.
Here are common ways to modify your database through chat:
### Setting the scene
It helps to start with a specific description of what you want your app to do.
Prompt:
```
Make a tasks app. Users should be able to add, view, and delete tasks.
Each task has title, description and comments
Comments should show up under the task and show who wrote them.
```
Create will:
* Make the tables needed
* Make a Tasks table with title, description, and comments fields
* Make a Users table with name and avatar fields
* Make a Comments table with text and author fields
* Create Functions to save and fetch tasks, users, and comments
* Build a Page with a task list, add form, and comment list
* Make the Page use your Functions to save tasks when submitted and grab tasks to display
### Adding Fields
```
Add a description to todos. Show it below the title in italics.
```
Create will:
* Add the description column to the Todos table
* Update Functions to handle the new field
* Modify the UI to display descriptions
### Removing Fields
```
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
```
Create will:
* Make a new Comments table
* Link it to the Todos table
* Add UI for viewing/adding comments
* Handle saving comments to the database
### Changing Structure
```
Instead of due dates, let's use status (Todo, In Progress, Done) to track progress
```
Create will:
* Convert the due\_date field to a status field
* Update existing data
* Modify the UI to show status options
### Relationships
```
Let users assign todos to team members. Show their avatar next to each todo
```
Create will:
* Add user relationships to todos
* Update queries to fetch user data
* Show assignee info in the UI
### Filling Data
```
Generate 10 sample todos with different statuses and assignees
```
Create will:
* Generate 10 sample todos with different statuses and assignees based on your structure
* Insert the data into your database
* Preserve relationships between tables
### Validation
```
Make sure every todo has a title
```
Create will:
* Add validation rules to the database
* Update Functions to check data
* Show validation errors in the UI
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.
The more specific you are in your prompt, the better Create can help.
If you describe something at a high level, "make a todo app", Create will guess what fields each todo should have.
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.
## Viewing & Editing Data
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.
Access it from:
* Chat - tap the database
* [Project Selector](/builder/controls#project-selector)- choose your database name
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
Changes in Demo mode in the Builder use a test database. This lets you experiment safely without affecting your live data.
## 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 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 tasks 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.
## Reset
When you publish your app, Create pushes your test database structure to your live database. If you continue making changes to your test database structure in the builder and don't like the changes, you can reset to the structure of your last published version.
This is helpful when:
* You've made experimental changes you don't want to keep
* Your database structure has become complex or incorrect
* You want to start fresh from your last stable version
To reset your database structure:
1. Open your database in the builder
2. Look for the "Reset" button in the top right corner
3. Confirm that you want to reset to the published version
Resetting your database structure will revert all schema changes made since publishing. This includes removing any tables or fields added since the last publish. Any data in those tables or fields will be lost.
## Removing Multiple Databases
In 99.99% of cases, you don't need multiple databases per project. A single database can have an arbitrary number of tables. It's easy to add more tables (just describe what you want to store, and Create adds a table for it). It's better to have multiple tables in the same database than multiple databases as it makes joins easier.
If you have multiple databases in a single project, you can remove ones you don't need:
Select the database from the project selector
Top right corner next to Reset and View Live
Verify you want to remove this database from your project
If you had data in the database you removed, you can ask Create to update your single database with tables that support all of your use cases. It will update the remaining database to have multiple tables instead of having multiple databases.
Before removing a database, make sure you understand which app features are using it. Create will attempt to warn you if removing a database would break functionality.
## Using an Existing Database
Create will automatically create a new database for your project. However, there are some scenarios where you might want to use an existing database for a new project:
* You already have data in one database that you want to reuse for a new app
* You're making a new app or frontend for the same data (e.g. an internal tool or another app)
To add an existing database to your project:
1. Go to the new project
2. Press `/` > Databases > select the database you want to use
3. Prompt Create on what you want to build with the database chip in the chat
When you add an existing database to a project, both projects will share the same data. Changes made in one project will be visible in the other.
This approach is excellent for creating multiple views of the same data, such as customer-facing apps alongside internal admin tools.
If you no longer want to use this database in your project, you can [remove it from the project](#removing-multiple-databases).
## 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.
Yes, databases are automatically backed up. Contact support if you need to restore data.
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.
We still have documentation for you, [linked here.](https://www.create.xyz/docs/builder/databases)
Need help? Join our [Discord community](https://create.xyz/discord) or email [hello@create.xyz](mailto:hello@create.xyz)
## Helpful Database Terms
Create handles the technical details of your database, but understanding some key concepts can help you work more effectively.
Think of a database as a collection of connected spreadsheets:
* 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.
# Functions
Source: https://www.create.xyz/docs/builder/functions
Functions let you build powerful backend logic by turning your words into code. They handle powerful operations while keeping your UI clean and focused.
## Why Use Functions
Functions offer several key benefits:
* **Turn words into logic** - Describe what you want in plain language and Create generates the code
* **Separate UI from Logic** - Keep pages focused on presentation while Functions handle powerful operations
* **Test in Isolation** - Debug and perfect logic independently from your UI
* **Reuseable** - Use Functions across pages and components once they're working
* **External APIs** - Functions can connect securely to thousands of APIs using [Secrets](#secrets)
* **Composeable** - Build powerful features by combining Functions with [Integrations](/builder/integrations), [Databases](/builder/databases), and other Functions
For example, imagine building an app that analyzes documents with AI:
Without Functions, you would need to handle everything in one place:
* Upload interface for PDFs
* Code to display the document
* AI analysis of images
* AI text summarization
* Error messages
* Loading screens
With Functions, you can split this into simpler parts:
Page:
* A clean upload interface
* Document display
* A button that calls your analysis Function
Function:
* AI image analysis
* AI text summarization
* Error handling
This separation makes your app easier to build, test, and maintain.
## Creating Functions
Create Functions in several ways:
* **Logo Menu** > New Function
* Press `option-F` (or `alt-F` on Windows)
* Type `/` in chat > Create Function
Describe what you want the Function to do:
* What inputs it needs
* What logic it should perform
* What outputs it should return
Create generates:
* A flow diagram showing the Function's logic
* The underlying serverless code (viewable in the "Code" tab)
* Input/output interfaces
## Making Functions that Work
When building Functions:
* For external APIs, find their documentation first. You can paste API endpoint URLs directly into the Function chat - Create will analyze the screenshot and write the code.
* If you get test errors, paste the error message back into your Function definition. Create often knows how to fix the specific issue.
## Using Integrations, Databases, and Other Functions
Make your Functions more powerful by combining them with:
* [Integrations](/builder/integrations) - Add AI capabilities and other features
* [Databases](/builder/databases) - Store and retrieve data
* Other Functions - Chain multiple Functions together
To use these in your Function:
1. Type `/` or open the Add-ons menu
2. Select the Integration, Database, or Function
3. Describe how you want to use it
For example, you could build a Function that:
* Uses ChatGPT to analyze text
* Stores results in a database
* Calls another Function to notify users
Create handles connecting everything together based on your description. If you need specific behavior, add more details to your prompt about how you want the pieces to interact.
## Testing Functions
Every Function has a full test runner available by clicking on the three dot menu to the far right of the function page itself and selecting Run Test.
* **Sample Inputs** - Enter test data as Form or JSON
* **Run Tests** - Execute the Function with your inputs
* **View Results** - See outputs or error messages
* **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.
## Using Functions
Add Functions to pages, components, or other Functions:
* Type `/` in chat
* Select your Function
* Describe how you want to use it
Create handles:
* Connecting inputs/outputs
* Error states
* Loading indicators
* UI integration
## Updating Functions
After changing a Function:
1. Find where you integrated it
2. Click "Update" next to the integration
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.
## External APIs and Secrets
Functions can connect to any external API. To use an API:
1. Store authentication details (API keys, tokens) as [Secrets](#secrets)
2. Tell Create which API to use - it will handle the integration
3. Test carefully since calls hit live APIs
Popular APIs and where to find credentials:
* **Stripe**: [How to get your API Key](https://docs.stripe.com/keys)
* **GitHub**: [How to get your Personal Access Token](https://github.com/settings/tokens)
* **Exa**: [How to get your API Key](https://docs.exa.ai/reference/getting-started)
* **Twilio**: [How to get your API Key](https://www.twilio.com/docs/iam/api-keys)
* **Sendgrid**: [How to get your API Key](https://www.twilio.com/docs/sendgrid/ui/account-and-settings/api-keys)
* **MailGun**: [How to get your API Key](https://help.mailgun.com/hc/en-us/articles/203380100-Where-can-I-find-my-API-keys-and-SMTP-credentials)
* **HubSpot**: [How to get your API key](https://knowledge.hubspot.com/integrations/how-do-i-get-my-hubspot-api-key)
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.
To add a Secret:
1. Open the "Secrets" panel from the 3-dot menu at the top of chat in any Function
2. Click "+ Add a new secret"
3. Name it clearly (e.g. "Stripe API Key")
4. Enter the secret value
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.
Supported secret types:
* API Keys
* Access Tokens
* Basic Auth Credentials
* Bearer Tokens
OAuth tokens aren't supported since they require refresh flows.
## Publishing
When ready to launch:
1. Click **Publish** in top right
2. Choose Functions to publish
3. Set routes if needed (all Function routes start with /api)
4. Enable/disable as needed
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
# Integrations
Source: https://www.create.xyz/docs/builder/integrations
Add powerful capabilities to your apps with our built-in integrations
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](mailto: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
Add integrations by:
* Type `/` in chat or select "Add-ons" menu
* Select the integration
* Write a prompt on how you want to use the integration. Send the message.
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.
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.
* **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
### 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
2. **Custom Prompts**
* 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
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
### Structured Outputs
While AI typically returns raw text, you can request JSON responses for more structured data handling.
**Common Use Cases:**
1. **Building UIs**
```javascript
// Example: "Generate a recipe as JSON and show UI for each step"
{
"title": "Chocolate Cake",
"steps": [
{"step": 1, "instruction": "Preheat oven..."},
{"step": 2, "instruction": "Mix ingredients..."}
]
}
```
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
## Integrations
### AI Models
#### ChatGPT
Process text with OpenAI's GPT-4o model. Great for summarization, analysis, and generation. Fast model.
Example prompts:
* `Build a writing assistant that uses /[ChatGPT] to improve grammar`
* `Create a chatbot that uses /[ChatGPT] for customer service`
* `Make an app that uses /[ChatGPT] to summarize articles`
#### Anthropic Claude 3.5 Sonnet
Process text with Claude's latest model. Excels at analysis and reasoning. Smartest all around model.
Example prompts:
* `Build an app that uses /[Anthropic Sonnet 3.5] to analyze documents` (*Note: Example prompt used old name, keeping as is for now*)
* `Create a tool that uses /[Anthropic Sonnet 3.5] to explain complex topics`
* `Make a writing assistant that uses /[Anthropic Sonnet 3.5] for essay structure`
#### Google Gemini 1.5
Google's latest model with strong reasoning capabilities and long context support.
Example prompts:
* `Build an app that uses /[Google Gemini 1.5] to analyze long documents`
* `Create a tool that uses /[Google Gemini 1.5] for multi-step reasoning`
* `Make a research assistant with /[Google Gemini 1.5]`
#### Anthropic Haiku
Add high quality AI capabilities with Anthropic's fastest model.
Example prompts:
* `Build a chatbot that uses /[Anthropic Haiku] for quick responses`
* `Create a tool that uses /[Anthropic Haiku] for real-time analysis`
* `Make an app that uses /[Anthropic Haiku] for text processing`
#### Anthropic Sonnet
Add high quality AI capabilities with Anthropic's balanced model.
Example prompts:
* `Build an app that uses /[Anthropic Sonnet] for content analysis`
* `Create a tool that uses /[Anthropic Sonnet] for writing assistance`
* `Make a research helper with /[Anthropic Sonnet]`
#### Anthropic Opus
Claude's largest model, optimized for complex tasks. Takes longer but provides detailed responses.
Example prompts:
* `Build an app that uses /[Anthropic Opus] for in-depth research`
* `Create a tool that uses /[Anthropic Opus] for detailed analysis`
* `Make a writing assistant that uses /[Anthropic Opus] for long-form content`
#### Groq
The fastest AI model in Create, powered by Llama 3.
Example prompts:
* `Build a chatbot that uses /[Groq] for instant responses`
* `Create a quiz app that uses /[Groq] to grade answers`
* `Make a tool that uses /[Groq] for real-time text analysis`
#### Cohere Command R+
A scalable LLM built for business applications.
Example prompts:
* `Build an enterprise chatbot with /[Cohere Command R+]`
* `Create a business document analyzer using /[Cohere Command R+]`
* `Make a customer support tool with /[Cohere Command R+]`
#### GPT-4 Vision
Analyze and understand images with AI.
Example prompts:
* `Let users upload photos and use /[GPT-4 Vision] to describe them`
* `Build an app that uses /[GPT-4 Vision] to analyze product photos`
* `Create a tool that uses /[GPT-4 Vision] to extract text from images`
#### Stable Diffusion v3
Generate images from text descriptions.
Example prompts:
* `Let users describe an image and use /[Stable Diffusion] to create it`
* `Build an app that uses /[Stable Diffusion] for product mockups`
* `Create a tool that uses /[Stable Diffusion] for logo generation`
#### DALL-E 3
Generate high-quality images from text using OpenAI's latest model.
Example prompts:
* `Let users describe art and use /[DALL-E] to generate it`
* `Build an app that uses /[DALL-E] for social media images`
* `Create a tool that uses /[DALL-E] for custom illustrations`
#### 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)
#### 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)
#### 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)
#### 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)
#### 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)
#### Perplexity
Access AI-powered question answering and research capabilities.
Example prompts:
* `Research this topic using /Perplexity`
* `Answer complex questions with /Perplexity`
* `Create a research assistant using /Perplexity`
You'll need to set up your own Perplexity API key to use this integration in Create.
[Full steps here](/integrations/perplexity) (2 mins set up time)
### AI Tools
#### Audio Transcription
Convert audio files to text.
Example prompts:
* `Let users upload audio files and use /[Audio Transcription] to get text`
* `Build a podcast transcription tool with /[Audio Transcription]`
* `Create a meeting notes app using /[Audio Transcription]`
#### Text-to-Speech
Convert text to natural-sounding speech.
Example prompts:
* `Read content aloud using /[Text to Speech]`
* `Build an audiobook creator with /[Text to Speech]`
* `Create an accessibility tool using /[Text to Speech]`
#### Markdown Renderer
Display AI-generated markdown content as formatted HTML/React elements.
Example prompts:
* `Generate a blog post with /[ChatGPT] and display it with /[Markdown Renderer]`
* `Create documentation with /[Anthropic Sonnet 3.5] and format it with /[Markdown Renderer]`
* `Build a wiki that uses /[Markdown Renderer] to display AI-generated content`
#### Replicate Background Remover
Remove backgrounds from images instantly using Replicate's state-of-the-art AI model.
Example prompts:
* `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`
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)
#### LogMeal
Analyze food images and get detailed nutritional information using AI-powered food recognition.
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`
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)
#### Exa AI Search
Search and summarize web content with the Exa API
Example prompts:
* `Find recent AI research papers with /Exa`
* `Get latest tech news articles with /Exa`
* `Find documentation for Next.js 14 features with /Exa`
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)
#### Word Cloud
Generate visual representations of text data, highlighting the most frequent words.
Example prompts:
* `Generate a word cloud from this text using /WordCloud`
* `Create a visual representation of keywords with /WordCloud`
* `Build a content analysis tool using /WordCloud`
You'll need to set up your own Word Cloud API key to use this integration in Create.
[Full steps here](/integrations/wordcloud) (2 mins set up time)
### UI & Design
#### Chakra UI
Design library with accessible, reusable components.
Example prompts:
* `Add a form using /[Chakra UI] components`
* `Build a dashboard with /[Chakra UI] layout`
* `Create a responsive navbar using /[Chakra UI]`
#### shadcn/ui
Modern component library with a clean design system. You can use the full library or specific components like Calendar, Dialog, or Select. Learn more at [shadcn/ui docs](https://ui.shadcn.com/).
Example prompts:
* `Style my page with /[shadcn/ui] components`
* `Build a settings panel using /[shadcn/ui]`
* `Create a data table with /[shadcn/ui]`
* `Add a /[shadcn/ui] calendar component for date picking`
* `Use the /[shadcn/ui] dialog component for a popup form`
### Location & Maps
#### Google Maps
Add maps to your pages
Example prompts:
* `Show store locations on /[Google Maps]`
* `Build a delivery tracker with /[Google Maps]`
* `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]`
* `Create a review aggregator using /[Google Business Data]`
#### Google Place Autocomplete
Add location autocomplete to your inputs.
Example prompts:
* `Add address completion with /[Google Place Autocomplete]`
* `Build a store locator using /[Google Place Autocomplete]`
* `Create a delivery form with /[Google Place Autocomplete]`
#### OpenWeather API
Access real-time weather data and forecasts for any location worldwide.
Example prompts:
* `Show the weather forecast using /Weather`
* `Build a travel planner with /Weather`
* `Create a sports event scheduler using /Weather`
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)
#### Weather by City
Display weather information for any location.
Example prompts:
* `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]`
#### IPstack
Access accurate IP geolocation data for location-aware applications.
Example prompts:
* `Get location data for an IP using /IPstack`
* `Create a visitor tracking system with /IPstack`
* `Build a location-based service using /IPstack`
You'll need to set up your own IPstack API key to use this integration in Create.
[Full steps here](/integrations/ipstack) (2 mins set up time)
#### SFMTA
Access real-time San Francisco transit data, schedules, and route information.
Example prompts:
* `Get real-time bus arrivals using /SFMTA`
* `Show transit routes with /SFMTA`
* `Create a transit tracker using /SFMTA`
You'll need to set up your own SFMTA API key to use this integration in Create.
[Full steps here](/integrations/sfmta) (2 mins set up time)
### Utils
#### Veriphone
Validate and verify phone numbers from around the world with the Veriphone API.
Example prompts:
* `Validate this phone number using /Veriphone`
* `Create a contact form with phone validation using /Veriphone`
* `Build a customer database with phone verification using /Veriphone`
You'll need to set up your own Veriphone API key to use this integration in Create.
[Full steps here](/integrations/veriphone) (2 mins set up time)
#### QR Code
Generate QR codes for links and data.
Example prompts:
* `Create QR codes with /[QR Code]`
* `Make a URL shortener with QR codes using /[QR Code]`
#### QR Code Generator
Generate QR codes for various types of data and content.
Example prompts:
* `Create a QR code for this URL using /QRCode`
* `Generate a QR code for contact information with /QRCode`
* `Build a QR code generator app using /QRCode`
#### URL Shortener
Create and manage shortened URLs with analytics tracking capabilities.
Example prompts:
* `Create a short URL using /URLShortener`
* `Track click analytics with /URLShortener`
* `Build a link management system using /URLShortener`
You'll need to set up your own URL Shortener API key to use this integration in Create.
[Full steps here](/integrations/urlshortener) (2 mins set up time)
#### Judge0 CE
Execute code in multiple programming languages for building coding platforms and educational tools.
Example prompts:
* `Execute Python code using /Judge0CE`
* `Create a coding challenge platform with /Judge0CE`
* `Build an online IDE using /Judge0CE`
You'll need to set up your own Judge0 CE API key to use this integration in Create.
[Full steps here](/integrations/judgece) (2 mins set up time)
#### Time API
Access current time, timezone, and time conversion functionality.
Example prompts:
* `Get current time in different timezones using /TimeAPI`
* `Convert time between zones with /TimeAPI`
* `Create a world clock app using /TimeAPI`
#### Dadjoke API
Access a collection of dad jokes for your applications.
Example prompts:
* `Get a random dad joke using /DadJoke`
* `Search for dad jokes with /DadJoke`
* `Create a joke generator using /DadJoke`
### Data
#### Airtable
Integrate Airtable to manage and organize your data in a flexible and powerful way.
Example prompts:
* `Create a new record in Airtable using /Airtable`
* `Retrieve data from a specific table using /Airtable`
* `Update an existing record in Airtable using /Airtable`
You'll need to set up your own Airtable API key to use this integration in Create.
[Full steps here](/integrations/airtable) (2 mins set up time)
#### Yelp
Access business information, reviews, and ratings from Yelp's extensive database.
Example prompts:
* `Find restaurants near me using /Yelp`
* `Get business reviews with /Yelp`
* `Create a local business directory with /Yelp`
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)
#### Alpha Vantage
Access real-time and historical financial market data, including stock prices and technical indicators, through the Alpha Vantage API.
Example prompts:
* `Get stock prices for AAPL using /AlphaVantage`
* `Retrieve historical data for MSFT using /AlphaVantage`
* `Create a stock analysis tool using /AlphaVantage`
You'll need to set up your own Alpha Vantage API key to use this integration in Create.
[Full steps here](/integrations/alpha-vantage) (2 mins set up time)
#### Polygon.io
Access real-time and historical financial market data, including stocks, cryptocurrencies, and forex.
Example prompts:
* `Get real-time stock prices using /Polygonio`
* `Fetch historical market data with /Polygonio`
* `Create a financial dashboard using /Polygonio`
You'll need to set up your own Polygon.io API key to use this integration in Create.
[Full steps here](/integrations/polygonio) (2 mins set up time)
#### GitHub Stats
Access GitHub repository statistics, user information, and activity data.
Example prompts:
* `Show statistics for a GitHub repository using /GitHubStats`
* `Get user contribution data with /GitHubStats`
* `Create a developer portfolio that displays GitHub activity using /GitHubStats`
You'll need to set up your own GitHub personal access token to use this integration in Create.
#### UPC Database
Access product information using UPC/EAN barcodes for inventory management and product lookup.
Example prompts:
* `Look up product details by UPC using /UPCDatabase`
* `Create an inventory management system with /UPCDatabase`
* `Build a product scanner app using /UPCDatabase`
You'll need to set up your own UPC Database API key to use this integration in Create.
[Full steps here](/integrations/upcdb) (2 mins set up time)
#### Nutritionix
Access comprehensive nutrition data and food information through the Nutritionix API.
Example prompts:
* `Get nutrition info for an apple using /Nutritionix`
* `Track calories with /Nutritionix`
* `Create a meal planner using /Nutritionix`
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)
#### OpenLibrary
Access millions of books and their metadata through OpenLibrary's comprehensive database.
Example prompts:
* `Search for books about AI with /OpenLibrary`
* `Get details about this book using /OpenLibrary`
* `Create a reading list app with /OpenLibrary`
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)
#### MediaWiki Search
Search and retrieve content from Wikipedia and other MediaWiki-based sites.
Example prompts:
* `Search Wikipedia articles using /MediaWikiSearch`
* `Get article summaries with /MediaWikiSearch`
* `Create a knowledge base app using /MediaWikiSearch`
#### TripAdvisor
Access travel information, including hotels, restaurants, attractions, and user reviews.
Example prompts:
* `Find top-rated hotels in Paris using /TripAdvisor`
* `Get restaurant reviews near me with /TripAdvisor`
* `Create a travel guide app using /TripAdvisor`
You'll need to set up your own TripAdvisor API key to use this integration in Create.
[Full steps here](/integrations/tripadvisor) (2 mins set up time)
#### Harry Potter API
Access comprehensive data about the Harry Potter universe, including characters, spells, and houses.
Example prompts:
* `Get information about Hogwarts houses using /HarryPotter`
* `Search for spells with /HarryPotter`
* `Create a wizarding world guide using /HarryPotter`
#### Beer API
Access comprehensive beer and brewery data through RapidAPI.
Example prompts:
* `Search for beers by name using /BeerAPI`
* `Get brewery information with /BeerAPI`
* `Create a beer recommendation app using /BeerAPI`
You'll need to set up your own RapidAPI key to use this integration in Create.
[Full steps here](/integrations/beerapi) (2 mins set up time)
#### Jelly Belly API
Access information about Jelly Belly flavors, ingredients, and combinations.
Example prompts:
* `Find jelly bean flavors using /JellyBelly`
* `Get flavor combinations with /JellyBelly`
* `Create a flavor guide using /JellyBelly`
#### Cocktail API
Access recipes and information about cocktails and beverages.
Example prompts:
* `Search for cocktail recipes using /Cocktail`
* `Get ingredient information with /Cocktail`
* `Create a drink recipe app using /Cocktail`
### Files
#### PDF Generation
Create and download PDFs programmatically.
Example prompts:
* `Let users fill out a form and use /[PDF Generation] to download it`
* `Build an invoice generator with /[PDF Generation]`
* `Create a resume builder that exports to PDF using /[PDF Generation]`
#### PDF Parser
Convert PDF files to text.
Example prompts:
* `Extract text from PDFs using /[PDF Parser]`
* `Build a document analyzer with /[PDF Parser]`
* `Create a PDF search tool using /[PDF Parser]`
#### Document Scanner
Capture and process document images.
Example prompts:
* `Let users scan documents with /[Document Scanner]`
* `Build a receipt tracker using /[Document Scanner]`
* `Create a business card scanner with /[Document Scanner]`
For best results, ensure documents are 8.5x11in proportion.
#### File Conversion
Convert files between different formats.
Example prompts:
* `Convert PDFs to images using /[File Conversion]`
* `Build a document converter with /[File Conversion]`
**Possible inputs include:** .html, .doc, .docx, .pptx, .xlsx, .pdf, .png, .jpg, .jpeg\
**Possible outputs include:** .pdf, .png, .jpg, .jpeg, .html
#### 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)
### Media
#### Pexels
Find and use stock photos and videos seamlessly with the Pexels API
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)
#### Pixabay
Access high-quality images and videos from Pixabay, a platform that provides a vast collection of free media for personal and commercial use.
Example prompts:
* `Search for images of nature using /Pixabay`
* `Get a random image using /Pixabay`
* `Create a gallery app with /Pixabay`
You'll need to set up your own Pixabay API key to use this integration in Create.
[Full steps here](/integrations/pixabay) (2 mins set up time)
#### Tenor
Access millions of GIFs and animated content through Tenor's comprehensive API.
Example prompts:
* `Find reaction GIFs using /Tenor`
* `Add animated stickers with /Tenor`
* `Create a GIF picker using /Tenor`
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)
#### GIPHY
Access the world's largest library of GIFs, stickers, and animated content.
Example prompts:
* `Find reaction GIFs using /GIPHY`
* `Add animated stickers with /GIPHY`
* `Create a GIF picker using /GIPHY`
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)
#### 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)
#### 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)
#### Freesound
Access a vast library of Creative Commons Licensed sounds and audio samples.
Example prompts:
* `Find nature sound effects using /Freesound`
* `Add background music with /Freesound`
* `Create a sound library using /Freesound`
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)
#### Movies and TV Series
Search and get details about movies and TV shows.
Example prompts:
* `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
Access detailed movie information and entertainment data with the MovieDB API
Example prompts:
* `Find details for The Dark Knight with /TMDb`
* `Build a movie recommendation app with /TMDb`
* `Create a watchlist using /TMDb`
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)
#### Anime and Manga
Get information about anime and manga titles.
Example prompts:
* `Build an anime discovery tool with /[Anime and Manga]`
* `Create a manga reading list using /[Anime and Manga]`
* `Make an anime recommendation system with /[Anime and Manga]`
#### Jikan
Access comprehensive anime and manga data through the Jikan API, which provides information from MyAnimeList.
Example prompts:
* `Search for anime series using /Jikan`
* `Get manga details with /Jikan`
* `Create an anime tracking app using /Jikan`
You'll need to set up your own Jikan API key to use this integration in Create.
[Full steps here](/integrations/jikan) (2 mins set up time)
#### Currents
Access real-time news and headlines from various sources with the Currents API.
Example prompts:
* `Get the latest news headlines using /Currents`
* `Retrieve news articles by category using /Currents`
* `Create a news aggregator using /Currents`
You'll need to set up your own Currents API key to use this integration in Create.
[Full steps here](/integrations/currents) (2 mins set up time)
#### News API
Access breaking news headlines and historical articles from over 80,000 sources worldwide.
Example prompts:
* `Get the latest technology news with /NewsAPI`
* `Find articles about climate change using /NewsAPI`
* `Create a news aggregator app with /NewsAPI`
You'll need to set up your own News API key to use this integration in Create.
[Full steps here](/integrations/newsapi) (2 mins set up time)
#### New York Times
Access articles, reviews, and data from The New York Times, one of the world's leading news sources.
Example prompts:
* `Get the latest top stories using /NYTimes`
* `Search for articles about climate change with /NYTimes`
* `Create a news aggregator using /NYTimes`
You'll need to set up your own NYTimes API key to use this integration in Create.
[Full steps here](/integrations/nytimes) (2 mins set up time)
#### Deezer Music
Access music tracks, artists, albums, and playlists through the Deezer platform.
Example prompts:
* `Search for music tracks using /Deezer`
* `Get artist information with /Deezer`
* `Create a music discovery app using /Deezer`
#### Rundown
Access comprehensive sports data, including scores, schedules, standings, and statistics for various sports leagues.
Example prompts:
* `Get today's NBA schedule using /Rundown`
* `Show NFL standings with /Rundown`
* `Create a sports dashboard using /Rundown`
You'll need to set up your own Rundown API key to use this integration in Create.
[Full steps here](/integrations/rundown) (2 mins set up time)
#### TikTok Scraper
Access TikTok content, including videos, user information, and trending data.
Example prompts:
* `Get trending TikTok videos using /TikTokScraper`
* `Fetch user information with /TikTokScraper`
* `Create a TikTok content aggregator using /TikTokScraper`
You'll need to set up your own TikTok Scraper API key to use this integration in Create.
[Full steps here](/integrations/tiktok-scraper) (2 mins set up time)
#### Hashtag API
Access trending hashtags and social media analytics through RapidAPI.
Example prompts:
* `Find trending hashtags using /HashtagAPI`
* `Analyze hashtag performance with /HashtagAPI`
* `Create a social media analytics tool using /HashtagAPI`
You'll need to set up your own RapidAPI key to use this integration in Create.
[Full steps here](/integrations/hashtagapi) (2 mins set up time)
#### Replicate Levels IO
Access user data and functionalities through the LevelsIO API.
Example prompts:
* `Generate a retro-style photo using /Levelsio`
* `Apply a disposable camera filter with /Levelsio`
* `Create a nostalgic film look with /Levelsio`
You'll need to set up your own LevelsIO API key to use this integration in Create.
[Full steps here](/integrations/levelsio) (2 mins set up time)
#### Screenshot Layer
Capture high-quality screenshots of any website programmatically.
Example prompts:
* `Capture a screenshot of this website using /ScreenshotLayer`
* `Create a website preview tool with /ScreenshotLayer`
* `Build a web archiving app using /ScreenshotLayer`
You'll need to set up your own Screenshot Layer API key to use this integration in Create.
[Full steps here](/integrations/screenshot-layer) (2 mins set up time)
#### Firecrawl
Extract data from any website with automatic browser rendering and scraping.
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)
### Communication & Productivity
#### 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)
#### Slack
Integrate Slack messaging capabilities into your application to send messages, manage channels, and interact with users.
Example prompts:
* `Send a message to a channel using /Slack`
* `Post a reminder with /Slack`
* `Manage channels with /Slack`
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)
#### 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)
#### Ko-fi
Integrate Ko-fi to receive donations and support from your community.
Example prompts:
* `Receive donations using /Ko-fi`
* `Get the latest supporter updates with /Ko-fi`
* `Create a donation tracker using /Ko-fi`
You'll need to set up your own Ko-fi API key to use this integration in Create.
[Full steps here](/integrations/kofi) (2 mins set up time)
#### Ticketmaster
Access comprehensive event, venue, and ticket information through Ticketmaster's Discovery API.
Example prompts:
* `Find upcoming concerts using /Ticketmaster`
* `Get venue details with /Ticketmaster`
* `Create an event discovery app using /Ticketmaster`
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)
#### FindWork
Access job listings and freelance opportunities through FindWork, a platform that connects job seekers with employers.
Example prompts:
* `Search for jobs in my area using /FindWork`
* `Get details about a specific job listing using /FindWork`
* `Create a job board app with /FindWork`
You'll need to set up your own FindWork API key to use this integration in Create.
[Full steps here](/integrations/findwork) (2 mins set up time)
#### USA Jobs
Access federal job listings and employment opportunities from the U.S. government.
Example prompts:
* `Search federal jobs using /USAJobs`
* `Find government positions with /USAJobs`
* `Create a job board using /USAJobs`
You'll need to set up your own USA Jobs API key to use this integration in Create.
[Full steps here](/integrations/usajobs) (2 mins set up time)
#### HackerEarth
Access coding challenges, assessments, and programming contests for your applications.
Example prompts:
* `Create a coding challenge using /HackerEarth`
* `Evaluate code submissions with /HackerEarth`
* `Build an assessment platform using /HackerEarth`
You'll need to set up your own HackerEarth API key to use this integration in Create.
[Full steps here](/integrations/hackerearth) (2 mins set up time)
# Mobile Apps (Beta)
Source: https://www.create.xyz/docs/builder/mobile
Build iOS and Android apps with Create
Create will soon support prompt to mobile apps. You can launch your app on 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). We're adding folks from the waitlist in waves.
**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.
## Why Create?
We're pioneering a much faster, easier way to build mobile apps.
Here's what we're working towards in this beta:
* **Prompt to app** - Just describe your app and Create turns it into React Native code that works
* **Design out of box** - We're training our AI to design apps like a human would
* **Preview on device** - Test your creations on your phone with Expo Go
* **Add AI and 100+ integrations** - Integrate [GPT](/integrations#chatgpt), [Claude](/integrations#anthropic-sonnet-35), [Gemini](/integrations#google-gemini-15), and [100+ other AI models](/integrations) in seconds
* **Full stack** - Use Create's built-in [databases](/builder/databases), [functions](/builder/functions), [auth](/builder/user-accounts), [storage](/builder/uploads), and [payments](/stripe) - no separate backend needed
* **Web to Mobile, and vice versa** - Build both web and mobile apps from the same project. Convert between them.
* **Instant App Store and Play Store submission** - Publish your app to the App Store and Play Store from Create
## How to build
You get started with mobile apps by prompting Create to make one.
Create builds your app in "Mobile Pages", and then adds more functionality as needed. You can manually add more mobile pages by prompting Create or manually from the [logo menu](/builder/controls#logo-menu).
Sign up at [earlyaccess.created.app](https://earlyaccess.created.app)
Create a fresh project from your dashboard
Prompt Create to make a mobile app. You can say things like "Make an iOS app that..." or "Make an Android app that..." or "Make a mobile app that..."
Create generates your first mobile screen. You'll know it's working if you see the mobile preview.
This is a web preview of a mobile app, so features that rely on a device (like location, camera, etc.) might not work. See [Preview on Your Device](#preview-on-your-device) to test your app on your phone.
Download [Expo Go](https://expo.dev/client) and preview your app on a physical device.
See the [Preview on Your Device](#preview-on-your-device) section for detailed steps.
Request specific mobile capabilities:
```
Add a barcode scanner to scan product nutrition labels
```
```
Let users take photos of their workout progress
```
Create comes with support for mobile-specific capabilities. For a deeper dive into what's supported, read the [Device Capabilities](#device-capabilities) section.
You can use Create's built-in [databases](/builder/databases), [functions](/builder/functions), [auth](/builder/user-accounts), and [payments](/payments) to build full-stack apps. Just describe what you want the app to do and Create will add the right functionality.
For example:
```
Make a fitness tracking app where users can log workouts,
track progress, and set goals. Include a calendar view.
```
Preview on your device and make improvements through conversation.
Be specific about issues so Create can fix the underlying code. For example:
```
The workout screen is cluttered. Simplify it and make the "Add Workout" button more prominent.
```
```
The app crashes when I try to take a photo. Can you fix this?
```
Head into your project settings to upload an icon and loading screen for your app.
Both icons requires a 1024 x 1024px PNG.
When you're ready, follow the steps in the [Publishing to App Stores](#publishing-to-app-stores) section to publish your app to Apple's App Store or Google's Play Store.
## Preview on Your Device
Create's web builder shows you a preview of your app as you chat. But to test the full experience, you'll want to preview on your device. Some of your app features that require device capabilities will only work in Preview.
Start a new mobile project with a prompt or go to an existing one
Create immediately starts making your device preview. This step might take a few moments. If it takes longer than 1 minute, something is wrong and please let us know on [Discord](https://create.xyz/discord)
You can use your camera or QR Code scanner app on iOS or Android to grab the link
Your app will open in Expo Go. You can play with it.
Continue building your app by chatting with Create in the web interface.
You can close & open the Expo Go app to see latest changes. Expo Go should autoupdate with the latest version of your app every time you close and reopen. If you need to force it to latest, scan the QR code again.
Choose which pages are available in the Publish menu. You can turn pages on or off under mobile app settings.
Testing on a physical device provides the most accurate experience, especially for hardware features like camera or sensors.
## How It Works
Create generates React Native code and partners with Expo. It generates app that can work on either iOS or Android, and use device capabilities like camera, location, etc.
The code tab reveals React Native components like ``, ``, and `` that work across iOS and Android.
React Native code can be previewed on the web, so you can view a preview of your app in the builder as you chat with Create.
Some device-specific features like camera access, location services, and barcode scanning won't work in the web preview. For the most accurate testing experience and to access all native device capabilities, use the Expo Go app to preview your application directly on your iOS or Android device.
## Publishing to App Stores
Submitting to the App Store requires an Apple Developer Account which requires a yearly subscription. Create an Apple Developer account using your Apple ID right [here](https://developer.apple.com/account).
1. Ensure your app meets [Apple's App Store Guidelines](https://developer.apple.com/app-store/review/guidelines/)
2. Prepare required assets:
* App icon (1024x1024px)
* App description
* Screenshot for 13-inch iPad displays
* Screenshot for 6.5-inch iPhone displays
* Privacy policy URL using [Termly](https://www.termly.io)
* Create a support page in your project
1. Click the "Publish" button in Create
2. Select "Submit to App Store"
3. Enter your Apple ID credentials
4. Complete text authentication
5. Create will handle the build and submission process to App Store Connect
1. Check your email for notifications from Apple
2. Visit [App Store Connect](https://appstoreconnect.apple.com/login) and login to select and view your app.
### Completing Apple Requirements
Apple requires several items to be completed before your app can be reviewed for App Store launch. Here's a comprehensive guide to completing all requirements.
* Scroll down the "Prepare for Submission" tab to find the Screenshot section.
* Upload screenshots for iPhone (6.5" and 5.5" displays)
* Upload screenshots for iPad (12.9" and 11" displays)
* Include screenshots showing key features
* Ensure screenshots are high quality and properly sized
* Fill out Contact Information Section
* If Sign-In is required for your app, please provide an example account for Apple to login to.
* Fill out Contact Information Section
* Add Support URL from your Create project
* Declare Copyright information
* Add relevant Keywords
* Select appropriate Category
* Fill out Age Rating Section underneath the General Information section
* Scroll down the "Prepare for Submission" tab to find the Build section.
* Select the build version you want to submit. The latest being on top.
* Create your own Privacy Policy URL using [Termly](https://www.termly.io)
* Complete Data Collection Review
* Declare any third-party data collection
* Specify data usage and storage
* Set app price (Free or Paid)
* Configure in-app purchases if applicable
* Set availability in different regions
* Configure promotional codes if needed
Apple requires you to submit your country's respective tax form to earn monetization. Refer to it [here](https://developer.apple.com/help/app-store-connect/manage-tax-information/provide-tax-information/).
* Submit for review
* Monitor review status in App Store Connect
* Respond to any feedback from the review team
* Address any issues promptly
Initial reviews typically take 1-3 business days. Make sure all required information is complete before submission to avoid delays.
## Beta Status
### 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 | 🟡 In Development | Camera, location, storage, more |
| Offline Support | 🟡 In Development | Basic offline functionality |
| Packages | 🟡 In Development | Expo and other packages |
### 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](mailto:hello@create.xyz)
## Device Capabilities
Create can make mobile apps that take advantage of Expo, which gives access to device capabilities, and other popular packages for making great mobile apps.
Here's a list of what's currently supported:
| Package | Description | Sample Prompt |
| -------------------------------- | ------------------------------------------------------ | ----------------------------------------------------- |
| expo-image | Optimized image component for fast loading and display | "Add an image gallery with efficient loading" |
| expo-status-bar | Customize the status bar appearance | "Make the status bar light text on dark background" |
| expo-location | Access device GPS and location services | "Track user's running route on a map" |
| expo-font | Load and use custom fonts | "Use the Roboto font throughout the app" |
| react-native-maps | Display interactive maps | "Add a map showing nearby restaurants" |
| expo-haptics | Add vibration and tactile feedback | "Make the button vibrate when pressed" |
| expo-image-picker | Select photos from the device gallery | "Let users choose profile pictures from their photos" |
| moti | Create smooth animations | "Add a fancy animation when items load" |
| expo-linear-gradient | Create gradient backgrounds | "Make the header background fade from blue to purple" |
| expo-document-picker | Select documents from the device | "Allow users to upload PDF files" |
| expo-linking | Handle deep links and external URLs | "Open the website when user taps the link" |
| @expo/vector-icons | Use popular icon libraries | "Add a heart icon for favorites" |
| expo-gl | Use OpenGL for advanced graphics | "Create a 3D visualization of workout data" |
| solito-link | Unified navigation between screens | "Make the back button work consistently" |
| expo-contacts | Access the device's contacts | "Let users invite friends from their contacts" |
| expo-blur | Create blur effects | "Add a frosted glass effect behind the modal" |
| react-native-safe-area-context | Handle safe areas on different devices | "Make sure content doesn't go under the notch" |
| expo-clipboard | Copy and paste from clipboard | "Add a button to copy the tracking number" |
| react-native-picker | Select from dropdown options | "Add a dropdown to select workout type" |
| expo-calendar | Access device calendar | "Let users add workouts to their calendar" |
| expo-constants | Access app and device constants | "Display the app version in settings" |
| @gorhom/bottom-sheet | Create pull-up sheets | "Add a bottom sheet that shows workout details" |
| react-native-masked-view | Create masked views | "Make the profile picture circular" |
| expo-file-system | Handle file operations | "Save workout data locally" |
| react-native-async-storage | Store data locally | "Remember user preferences between sessions" |
| react-native-reanimated-carousel | Create smooth image carousels | "Add a scrolling carousel of workout types" |
| expo-secure-store | Securely store sensitive data | "Save the API key securely" |
| solito-navigation | Navigation between screens | "Add navigation between home and profile screens" |
| expo-camera | Access device camera | "Let users take photos of their progress" |
To use any device feature, just describe what you want in chat. You don't need to specify the package name - Create will figure out the right implementation.
Missing a capability you need? Let us know at [hello@create.xyz](mailto:hello@create.xyz) and we'll prioritize adding it.
## FAQ
We're rapidly making this 1:1. For now, try it. You can turn on web pages in mobile app settings and see how it works. Give us feedback on how it could be better.
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 so all you'll need is your Apple or Google accounts.
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](mailto:hello@create.xyz)
# Overview
Source: https://www.create.xyz/docs/builder/overview
Deep dive into the core elements of Create
You chat with Create to build sites and full-stack web apps. Create lets you add and combine elements to build your app.
## Elements
* [**Pages**](/builder/pages) to design screens of your app
* [**Components**](/builder/components) to build reusable UI elements
* [**Integrations**](/builder/integrations) to add AI and more capabilities in seconds
* [**Functions**](/builder/functions) to add backend logic and external APIs
* [**Databases**](/builder/databases) to store and persist data
* [**User Accounts**](/builder/user-accounts) to manage users and authentication
* **Assets** to upload and manage images, logos, and more
You begin your project on a single page. Create guides you through adding elements, and in some cases, makes them for you.
To make new elements:
* Type `/` in the chat
* OR open the Create logo menu in the top left
Screens of your app
Add AI and other superpowers in seconds
Discover how to turn your words into running logic.
Learn how to store your app data.
Create with smaller pieces as building blocks.
Add authentication and user management.
# Pages
Source: https://www.create.xyz/docs/builder/pages
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.
## Create a Page
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)
Pages auto-name based on their content. Rename by:
* Tapping the
[**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
Consider splitting your app into multiple pages when:
* Different sections serve distinct purposes (e.g. home, about, contact)
* Your page code gets long (>1500 lines) - shorter pages help Create generate more accurate code
* 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)
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)
* **URLs**
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
* [**Integrations**](/builder/integrations)
for AI services
* [**Databases**](/builder/databases)
for data storage
* [**Functions**](/builder/functions)
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.
## Publishing
To publish:
* Tap
**Publish**
in top right
* Choose pages to make live
* 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.
Read more about publishing in our [publishing guide](/publish-and-share/publish).
## Adding Links
1. By hand:
* Make sure you're in
[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 a target page/URL
* Save your changes
2. By prompt:
* [Publish](/publish-and-share/publish)
your app and
[choose routes](/publish-and-share/publish#routes)
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)
2. Page > 3-dot menu > Settings > "Require account to view"
3. Publish changes
Users will:
* See content when signed in
* Get redirected to login when not
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
# Style Guides
Source: https://www.create.xyz/docs/builder/style-guides
Style Guides make your project look good, fast.
Style Guides help you create professional-looking apps without specifying every design detail. They automatically apply consistent styling across your entire project.
### Why Use Style Guides
Style Guides offer several benefits:
* **Professional design** - Created by expert designers
* **Consistent look** - Every page and component matches
* **Faster development** - Skip detailed design instructions
* **Project-wide styling** - One style for your whole app
* **Brand matching** - Custom guides for Business users
### Available Styles
Choose from:
* 20 pre-made professional styles
### Using Style Guides
1. Open project menu
2. Select Style Guides
3. Choose your style
4. Hit Generate to apply
### How It Works
Style Guides automatically:
* Apply consistent colors
* Set typography
* Define spacing
* Match component styles
* Maintain visual hierarchy
When you create new elements, Create follows your chosen style without extra prompting.
### Updating Styles
When you change your Style Guide:
* You need to regenerate the [pages](/builder/pages) / [components](/builder/components) to use that style
* New elements follow the style
Style Guides affect your entire project. This ensures all pages and components look like they belong together.
### Examples
Here's how the same content looks with different Style Guides:
Try different styles to find the right look for your project.
If elements don't match your selected Style Guide, tell Create to "follow the Style Guide" in your prompt after your selection. This helps Create apply the correct styles.
# Uploads
Source: https://www.create.xyz/docs/builder/uploads
Let users upload files to your app (images, PDFs, documents, audio, videos, etc.)
Uploads let users add files to your app - like images, PDFs, documents, audio, and videos. Build galleries, AI tools that process text or documents, or just let users set profile pictures.
### Why Use Uploads
Uploads enable several capabilities:
* **File sharing** - Let users upload and share files
* **Galleries** - Build collections of images or videos
* **Documents** - Handle PDFs and other documents
* **User specific content** - Allow profile pictures and submissions with [User Accounts](/builder/user-accounts)
### Adding Uploads
Add uploads to any [Page](/builder/pages), [Component](/builder/components), or [Function](/builder/functions) by prompting Create to handle uploads:
1. **Describe the upload flow**:
* UI elements (buttons, drag areas)
* Success/error states
* What happens after upload
2. **Choose upload method**:
* File selector
* Drag and drop
* URL input
* Copy/paste
3. **Handle the file**:
* Store URL in database
* Display preview
* Process content
Example prompts:
* "Add an image upload button to the form that shows a preview after its uploaded"
* "Let users drag PDFs to upload and store in /\[Database]"
* "Create a profile picture uploader with cropping. Store the URLs in /\[UsersDB]"
Create will write the code to support uploads based on your prompt. We recommend specificity in how you want to support uploads. Some common details to include:
1. UI around uploads
2. How the app should handle different states (uploads, error, success, etc.)
3. How the app should use the upload
Create automatically:
* Stores files securely
* Returns permanent URLs for the file stored on Create's cloud
* Handles file serving when you use the URL
To save uploads:
* Store URLs in [Databases](/builder/databases)
* Reference URLs in your app
* Query stored URLs later from the database
Always store upload URLs in a database if you need to access files later. Without storage, URLs exist but are hard to find.
Create offers several integrations to help process uploaded files:
* [File Conversion](/builder/integrations#file-conversion) - Convert between file formats like PDF, images, and more
* [GPT-4 Vision](/builder/integrations#gpt-4-vision) - Analyze uploaded images
* [Document Scanner](/builder/integrations#document-scanner) - Extract text from scanned documents
* [Audio Transcription](/builder/integrations#audio-transcription) - Convert audio files to text
### Technical Details
**Supported Upload Methods**:
* File upload
* URL import
* Base64 data
* Array buffers
**Considerations**:
* 10MB max file size
* Common web formats supported
* Files stored in Create's cloud
Add file size validation to prevent errors from large uploads. Just prompt Create to show an error if your users upload a larger file size.
# User Accounts
Source: https://www.create.xyz/docs/builder/user-accounts
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, logout, and storing users.
## Overview
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.
Use User Accounts to:
* Let users sign up and sign in
* Protect private content and features
* Store data per user
* Personalize experiences
* 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](/builder/controls#logo-menu)
* Choose "Enable User Accounts"
* Signup, Signin, Logout pages and the right tables gets created
2. **Protect Content**:
* 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 It Works - In the App
When you enable User Accounts, Create adds:
### 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`:
* `id`: Unique identifier for each auth method
* `userId`: Links to the user in auth\_users
* `type`: Authentication type (e.g. "credentials" for email/password)
* `provider`: Auth provider (e.g. "credentials", "google")
* `providerAccountId`: ID from the provider
* `refresh_token`: OAuth refresh token
* `access_token`: OAuth access token
* `expires_at`: Token expiration
* `token_type`: Type of token (e.g. "bearer")
* `scope`: OAuth scopes
* `id_token`: OAuth ID token
* `session_state`: Session state
* `password`: Hashed password (for credentials provider)
**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.
**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.
### Signed In User
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
* 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 route, 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. Prompt "Add users to the app. They should sign up and sign in to view the homework creator"
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
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"
* 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
For the default email/password sign up, when adding additional fields to collect during sign up (like name, phone number, etc.), make sure those fields are optional in the [database](/builder/databases). By default, only email and password should be required fields for the sign up page to work properly. Another option is to collect additional profile information later in the app after a user is already signed up with the essential fields.
## 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
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
* Add avatar, bio, social links
* Create will update the database to add the fields and update the queries to use them
2. **Creating Profile Pages**:
* Prompt Create to create profile pages
* Create will update the pages to grab the user's profile data and display it
3. **Handling Updates**:
* Prompt Create to create profile edit forms
* Create will update the pages/functions to update a user in the database
## Roles and Permissions
Add custom roles to control access:
1. **Add Role Field**:
* Prompt Create to add "role" or similar field for each user
* Describe the values you want to use like "admin", "member" and how you want behavior to change
* Create will update the database to add the field and update the queries to use it
2. **Check Roles**:
* Reference roles in prompts
* Example: "If signed in user is admin, show settings"
* 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:
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. 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
### Error Codes
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.
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
Yes. Just prompt Create on how you'd like to change them.
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! 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 backend logic that grabs the right data per user from the database
* [Pages](/builder/pages) - Create protected routes
* [Publishing](/publish-and-share/publish) - Go live with your authenticated app
# Essentials
Source: https://www.create.xyz/docs/essentials
Quickstart for Create
## Getting started
You chat with Create to build your app. Tell it what to build using **text** or **images** (paste them in).
Speed up with keyboard shortcuts:
* Press `cmd-enter` (or `ctrl-enter` on Windows) to send messages
* Use `/` **commands** to add [Integrations](/builder/integrations) or create new elements
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
* [**Functions**](/builder/functions) for backend logic and external API calls
* [**Databases**](/builder/databases) to store information
* [**User Accounts**](/builder/user-accounts) for authentication and users
* and more
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.
## Making improvements
Iterate on your app by sending more messages to the assistant. Create updates your app based on your instructions and the current state of the project.
You can change what level of detail you want to work on:
* When you select a **specific element**, messages update only that element
* When you select the **canvas**, messages can modify multiple elements at once
## 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.
Read our [guide to prompting](/prompting) to learn how to write clear messages that get the results you want.
### Project-wide vs Single Element
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.
## Version history
As you chat with Create, it saves your version history automatically.
You can:
* Tap on **previous versions** in the chat to view them
* **Restore** any previous version as the current version
## Demo vs. Select vs. Code
You can quickly switch between different modes to work on your app. Learn more about [controls](/builder/controls):
* **Demo mode**: Try out your app's functionality
* **Select mode**: Tap elements to make specific updates, create [components](/builder/components), or add links
* **Code mode**: View and edit the underlying code
## Creating new Elements
Add new elements to your project through:
* Tapping the [**Logo Menu**](/builder/controls#logo-menu) in the top left. From here make new [Pages](/builder/pages), [Components](/builder/components), [Functions](/builder/functions).
* `/` **commands** in the chat. See our guide on [integrations](/builder/integrations)
## Canvas vs. Focused View
Toggle between two workspace views using the collapse icon:
* **Canvas**: See multiple elements at once laid out on an infinite canvas
* **Focused**: See a single element at a time. Focused mode can help to test updates that impact scroll.
# Project Settings
Control important project specific settings including assets, secret keys, custom instructions, generation settings, authentication providers, branding, social share, mobile app settings and more.
* Assets - upload images to reference and use in your project repeatedly
* Custom Instructions - shape the way the builder interacts with you and your project. This is an advanced feature not generally required for daily use. See community examples of Custom Instructions [here. ](https://www.create.xyz/custom-instructions)
* Generation Settings - Pro users can decide which LLM they would like to have their builder use
* Saved Secrets - API keys stored in the project for integrations
* Providers - Authentication options for user account features, [more info here.](/builder/user-accounts)
* Branding and Icons - mobile app specific resources (more coming soon)
* Social Share - Choose a title and description that appears in search engine results and on social media when shared
## 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).
# FAQ
Source: https://www.create.xyz/docs/faq
Frequently asked questions about Create
For other questions, join us on [Discord](https://create.xyz/discord) or email [hello@create.xyz](mailto:hello@create.xyz)
Most things in Create can be found through the top left logo menu in the builder or by pressing / in the chat. Odds are it's there.
Press / in the chat > choose our ChatGPT, Gemini, or Anthropic 3.5 Sonnet integration. Describe how you want to use it, and send the message.
It really depends on your use case. Claude 3.5 Sonnet might be the best all around, but ChatGPT and others can be faster or higher quality in different use cases.
You can try to see if we include it in our built in integrations (press /). If not, you can create a new [Function](/builder/functions).
Yes. You can use our built in [Databases](/builder/databases) by pressing / in the chat > Data > Create a database. Describe how you want to store the data and send the message. You can also connect an external database through Functions.
Yes, most of our users host their project on Create. Hit Publish in the top right. Your app will scale to handle many users. Reach out about our Business or Enterprise plans if concerned.
You can use our built in [User Accounts](/builder/user-accounts) feature.
Create generates javascript web apps in React / Next.JS and functions in backend serverless functions.
Yes. Go to the Code tab > Download to download the Next.JS project. Note: for now Create only supports exporting a specific element.
Check out our [Guide to Prompting](/prompting) or join our Discord community to chat with fellow creators. You can post in our #help-me-build channel.
In general, we think you should start with the UI for your app (Pages, Components) and then move on to Functions, Databases, User Accounts as you need them:
* [**Pages**](/builder/pages) are the screens of your app
* [**Components**](/builder/components) are reusable UI elements so you don't have to keep re-making them
* [**Functions**](/builder/functions) help you break up logic separate from the UI or talk to external APIs
* [**Databases**](/builder/databases) let you store data so your app saves what users do in it
* [**User Accounts**](/builder/user-accounts) gives you the ability for users to sign up, sign in and have the app protect content or customize experiences based on user data
You can use one of our Templates that already has payments enabled. We have a beta for built in payments. Reach out if you'd like early access.
In some cases, we can recover it for you. Please post in Discord or email us at [hello@create.xyz](mailto:hello@create.xyz). Include your Create email and something that can help us identify the thing you deleted so we can bring it back.
Thank you! Go to [Discord](https://create.xyz/discord) or email us at [hello@create.xyz](mailto:hello@create.xyz). Please include a link to the /build route (the link you see when you are in the builder) for your project.
Create Pro members get private projects. Choose your credit tier based on your needs.
Create Pro gives you more credits per month, private projects, custom domains, and priority AI models. Choose your credit tier based on your needs.
Yes, check out our open roles at create.xyz/careers.
We want to see as many people as possible become software creators and entrepreneurs.
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.
# Pilot Training Portal
Source: https://www.create.xyz/docs/guides/pilot-training-portal
Finishing a pilot training portal
Want to learn create.xyz hands-on? We offer free training sessions for paid customers if you let us record your session so others can learn. Reach out to [customers@create.xyz](mailto:customers@create.xyz)
## Overview
In this training session, Derek builds Pilot Pulse - a platform for flight instructors and students. Watch how for how to solve responsiveness, pages vs. components, and storing data + users.
## Key Concepts
Watch the video to learn about the following concepts:
* **Components vs. Pages:** The differences and when to use each for optimal organization and routing.
* **Component Creation:** Best practices for making, updating, and passing data between components.
* **Responsiveness:** Designing for different screen sizes and handling layout issues.
* **Chat Prompts:** How to effectively communicate instructions using Create's chat interface.
* **Chat Scope:** Understanding the context of the chat within your project (page, component, or global).
* **Linking & Navigation:** Different methods for linking pages and components, and managing app navigation.
* **Routes:** How to setup page routes for web navigation, and when to avoid them.
* **User Accounts:** Using Create's built-in user accounts system and the data it provides.
* **Functions:** Creating custom functions to connect with external APIs and extend Create's functionality.
* **Testing Functions:** Validating custom functions using Create's test runner.
* **Data Handling:** Managing data flow and transferring data between different parts of the app.
* **Debugging:** Leveraging Create's AI to help pinpoint and fix errors in your code.
* **Iterations:** How to build iteratively and make good decisions for the project.
* **Scope:** How to manage code as a project gets larger.
* **Built in User Management:** How Create has built in user management, and no need to configure firebase.
## Show Notes
### [0:48](https://youtu.be/CwPGhnE4810?t=48) - Project Explanation
* Derek explains his project: an aviation tracker with calendar, flight logging, checklists, and weather.
* His goal is to create a tiered subscription model
### [2:59](https://youtu.be/CwPGhnE4810?t=179) - Project Overview & Initial Issues
* Derek shares his screen and shows his project with a left nav bar.
* Derek starts to walk through his project and highlights the responsiveness issues.
### [7:51](https://youtu.be/CwPGhnE4810?t=471) - Responsiveness
* Dhruv asks what he wants to focus on, Derek states that he wants to tackle responsiveness
* Derek points out the issues in the live view.
### [9:12](https://youtu.be/CwPGhnE4810?t=552) - Data Passing and Navigation
* Derek explains data passing issues in training section and how the navigation is not working as expected.
### [11:12](https://youtu.be/CwPGhnE4810?t=672) - Focus Mode and Project Navigation
* Dhruv introduces and demonstrates focus mode and how to use it for large projects.
### [12:04](https://youtu.be/CwPGhnE4810?t=724) - Pages vs. Components
* Dhruv asks why the training page was made into a component.
* Dhruv explains the differences between pages and components, and when to use each for optimal organization and routing.
* He mentions pages are used for routing and components for UI elements.
### [13:57](https://youtu.be/CwPGhnE4810?t=837) - Responsiveness
* Dhruv explains how to switch between mobile and desktop views.
* Dhruv uses the chat with a screenshot to fix the responsiveness in the training section.
### [17:53](https://youtu.be/CwPGhnE4810?t=1073) - Component Deletion
* Dhruv shows that responsiveness has been fixed.
* Dhruv explains that the new page is using the same component and is more optimized.
* Dhruv deletes the component and makes the page to be a page instead of a component.
### [18:16](https://youtu.be/CwPGhnE4810?t=1096) - Chat Scope
* Dhruv explains the chat scope and that it is specific to the selected element.
* Dhruv explains that if you click on the project name, it's for the entire project.
### [19:16](https://youtu.be/CwPGhnE4810?t=1156) - Linking and Navigation
* Derek is unsure how to link the new page to the nav bar since he can only see components.
* Dhruv explains that there are multiple ways to link, specifically with demo mode and select mode.
### [20:40](https://youtu.be/CwPGhnE4810?t=1240) - Creating a Component
* Dhruv asks how Derek made the cards for the training section
* Dhruv demonstrates how to make a component and passes in arguments for the components.
* He explains the component preview and how to use it.
### [24:23](https://youtu.be/CwPGhnE4810?t=1463) - Quiz Component and Back Button
* Dhruv has an error and shows how to go back to a previous version using the back button.
### [25:59](https://youtu.be/CwPGhnE4810?t=1559) - Linking with Routes
* Dhruv shows how to create routes for pages, as well as requiring user accounts.
### [27:36](https://youtu.be/CwPGhnE4810?t=1656) - Linking with Components
* Dhruv shows how to update a component in the nav bar and link it to training.
* He explains how to use the component chat for changes and updates.
### [30:00](https://youtu.be/CwPGhnE4810?t=1800) - Video Navigation
* Derek explains the navigation for the videos and Dhruv states that it is okay.
* Dhruv explains how larger video libraries should be managed using a database.
### [32:22](https://youtu.be/CwPGhnE4810?t=1942) - Nav Bar on All Pages
* Dhruv explains that the nav bar can be put on all pages with the project chat.
### [35:32](https://youtu.be/CwPGhnE4810?t=2132) - Components for Page Navigation
* Dhruv explains the concept of using components for page navigation, not routes.
* He says that the main goal should be for it to feel like a software with a fixed nav bar.
* He starts to work on making the navigation work with components.
### [44:20](https://youtu.be/CwPGhnE4810?t=2660) - Project Prompt
* Dhruv attempts to give a comprehensive prompt to help Create with all the steps to have the navigation work as desired.
### [47:53](https://youtu.be/CwPGhnE4810?t=2873) - Debugging Loading Issues
* Dhruv is debugging why the helicopter videos are not loading correctly and states he'll do it manually if it doesn't work.
* He ends up realizing that it is not passing in all of the necessary arguments.
* He says that they can grab the old code to help update it.
### [52:34](https://youtu.be/CwPGhnE4810?t=3154) - Specificity
* Dhruv explains how specificity in the prompts is important to get the most out of the chat.
### [53:25](https://youtu.be/CwPGhnE4810?t=3205) - User Account
* Derek asks about the sign up issues, and the custom page, also about the logout.
* Dhruv uses the project chat to link the logout button to the correct route.
* Dhruv explains user accounts, routes, and the user database.
* He also highlights that it's built in to Create so that no other service is necessary.
### [1:01:20](https://youtu.be/CwPGhnE4810?t=3680) - Weather API with Functions
* Dhruv asks how the weather is currently being added and if there are specific APIs that need to be used.
### [1:02:56](https://youtu.be/CwPGhnE4810?t=3776) - Creating a Function for Weather API
* Dhruv begins to create a function for the weather.gov API.
* He also explains how to test the function with the test runner.
* He mentions that functions are useful for integrations.
### [1:09:14](https://youtu.be/CwPGhnE4810?t=4154) - Function Testing and Error Handling
* Dhruv begins to debug the errors in the function.
* He adds in some error handling to prevent crashing and also to let users know that the API did not fetch the correct data.
* He shows that testing functions is done independently in create.
### [1:12:31](https://youtu.be/CwPGhnE4810?t=4351) - Debugging UI with the Function
* Dhruv debugs an issue that arose when adding the weather function
### [1:13:25](https://youtu.be/CwPGhnE4810?t=4405) - Large Project
* Dhruv discusses limitations of large projects, how they can start to forget details, and how to break up the project.
# Prompting
Source: https://www.create.xyz/docs/prompting
Our top tips from the team and community on how to chat with Create to build apps
Create understands both **text** and **images** to build your app. You'll get better results if you're clear. Soon, you'll notice it's way faster than coding.
**Prompting** is a fancy word for "writing instructions to an AI". AI models can make mistakes, so there are better and worse ways to write the same instructions to get what you want.
## Tips
Many of these tips work in combo :)
### Set the scene at the start
❌ **Don't:** be vague - `landing page`
✅ **Do:** set a clear context and goals:
```
Landing page for B2B SaaS product selling an AI app builder. Show a header, pricing options for free, pro, and enterprise, testimonials section, footer
```
### Make small changes
❌ **Don't:** try to do many things all at once - `Make a social media site that lets users logs in, saves their posts, shows them in a feed, lets you like each card in the feed, and lets send invites to new friends`
✅ **Do:** break down complex tasks into smaller steps:
```
Update the cards to be 12px apart in the feed
```
```
Add a way to store posts
```
### Use Images
You can paste images into the chat. You'll get best results if you add more context with a description of what about the image you want.
On a Mac, try Control + Command + Shift + 4 to easily save a screenshot to your clipboard- ready to paste with Command + V!
Examples:
✅ **Do:** replicate exactly (might require multiple passes / images):
```
Replicate this exactly: . Details: [...more details on things you want it to copy]
```
✅ **Do:** make something similar:
```
Make something with similar features to this: . Details: [...more on specific things you want it to copy]
```
✅ **Do:** style specific elements:
```
Make the card look like this: . Details: [...more details you want it to copy]
```
✅ **Do:** extract text content:
```
Fill the pricing options with all the text from this image:
```
✅ **Do:** use for inspiration:
```
Start with something that looks like this: . Now add: [more details]
```
✅ **Do:** apply styles:
```
Style it like this: .
```
### You can get very specific
To make something exact, you can even specify details like hex codes, fonts, or spacing, if you want. If you don't know, just describe in English and Create will get close.
Example:
✅ **Do:** get close in English if you don't know:
```
light gray subtitles that have some space between them and the title
```
✅ **Do:** get specific on values
```
#d3d3d3 subtitles
```
```
Title 32px, Subtitle 24px, with 12px space between them
```
```
Use Inter for the titles and subtitles
```
### Be specific on errors
❌ **Don't:** vague- `It's still not working. Ugh`
✅ **Do:** describe the exact issue:
```
When I click on the button, it's not leading to the next page
```
❌ **Don't:** vague- `Nothing works!`
✅ **Do:** explain the specific problem:
```
The screen is blank. Why is that and how can I fix it?
```
❌ **Don't:** vague- `The date picker is wrong`
✅ **Do:** describe the exact issue with context:
```
This date picker [screenshot] is showing 1/9/2025 when I select 1/10/2025. Can you fix it?
```
❌ **Don't:** vague- `The back button isn't working`
✅ **Do:** explain the specific problem with details:
```
When I hit the 'manage teachers' button [screenshot] it should take me back to [page name/route] right now, nothing is happening when I click it
```
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).
## Project-wide vs Single Element
You can prompt Create at two different levels:
* **Project-wide**: Select the project name in [**Project Selector**](/builder/controls#project-selector) or tap on the canvas itself
* **Single element**: Select a specific element in the [**Project Selector**](/builder/controls#project-selector) or tap it on the canvas
Many of the tips above work at either level, but there are some things you can do specifically at each level.
Learn more about the different elements you can use in Create in the [Builder Overview](/builder/overview).
Larger projects often have multiple [Pages](/builder/pages), [Components](/builder/components), [Functions](/builder/functions), and a [Database](/builder/databases) or [User Accounts](/builder/user-accounts).
### Project-wide prompts
Create can make changes across the entire project in parallel and/or create new elements if they don't exist.
When you have the project selected, you can make prompts that:
✅ **Add new elements across your app:**
```
Make a dashboard with table, nav, and search. Also have an about page in the nav
```
This will update existing elements in parallel and/or create new elements if they don't exist:
* Dashboard (page)
* Table (component)
* Nav (component)
* Search (component)
* About (page)
✅ **Handle interactions between elements:**
```
On the about page the back button should go to the home page
```
This will:
* Update the linking on the back button in the about page
* Get the route from the home page
✅ **Break down complex pages:**
```
Turn this dashboard page into separate components
```
This will:
* Break down the page into separate components
* Make new components as needed
* Update the page to use the new components
✅ **Connect data across pages:**
```
Store data in /database when the user enters the form on the dashboard page. When you tap an element in the table, show that info in the details page
```
This handles:
* Database queries on multiple pages
* Routing between pages
* Passing data via query params
✅ **Style across pages and components**
```
Make everything look more like this for style:
```
This will:
* Update the dashboard page to match the screenshot
* Update all components that are used on the dashboard page to match the new style
### Single Element prompts
Create only makes changes to the specific element you've selected ([Page](/builder/pages), [Component](/builder/components), [Function](/builder/functions), etc).
With a specific element selected, you can make more targeted changes:
✅ **Style specific elements:**
```
Make this page look like this:
```
✅ **Debug specific functionality:**
```
This function isn't returning the right data. I expect it to take in Y and return Z
```
✅ **Add focused features:**
```
Add a date picker to this form that only allows dates in the next 30 days
```
Switch between levels as needed - start with project-wide prompts for overall structure, then drill down to single elements for fine-tuning. Or start from a single element for simplicity, and then go back to project-wide level as you add more elements.
# Create Community
Source: https://www.create.xyz/docs/publish-and-share/community
Browse, heart, and remix projects and components from the Create community
## Overview
The [Create Community](https://www.create.xyz/community) helps you discover and share AI apps. Find inspiration, reuse components, and showcase your work.
Create has over 100k+ builders. The community helps people reuse existing components and functions.
* **Browse Projects** - Explore what others are building
* **Find Components** - Reuse UI pieces in your apps
* **Share Your Work** - Let others learn from your creations
* **Support Creators** - Heart ❤️ projects you like
* **Build on Ideas** - Remix and customize existing projects
### Sharing Your Work
Share your projects in three steps:
1. **Share Menu**:
* Click "Share" at top of builder
* View your project's public share URL
* The share URL shows a preview of your project and version history
2. **Customize Your Profile**:
* From the bottom left corner of the Dashboard, tap your email
* Add profile picture
* Set public username
3. **Share Page**:
* Your profile appears with the project
* Others can view the project and version history
* Community can heart and remix
Free projects are public by default. Create Pro members get private projects.
### Remixing
Find and reuse content from other builders:
1. **Discover Content**:
* Visit the [Create Community](https://www.create.xyz/community)
* Search for projects, components, or functions
* Filter by hearts or last created
2. **Preview and Test**:
* Open the share page for any item
* Test complete projects in action
* See the history of the project to learn how it was built
3. **Remix**:
* Tap "Remix"
* Get a copy of the latest version in your builder
* Move or duplicate elements between your projects
Remixing creates your own copy to customize. Original creators keep their version unchanged.
### Project Privacy
Project visibility depends on your plan:
* **Free Plan**:
* Projects public by default
* Visible in community
* Anyone can view and remix
* **Create Pro**:
* Private projects
* Choose which projects to share
Learn more about [plan options](https://www.create.xyz/pricing) or [upgrade to Pro](https://pay.create.xyz/b/8wM4hl1iBd5P2zu6or).
## Start Exploring
Explore, clone, and customize. Kick your project into high gear.
# Custom Domains
Source: https://www.create.xyz/docs/publish-and-share/custom-domains
Publish your created app to a domain you already own
## What is a custom domain?
A custom domain lets you use your own web address (like `yourapp.com`) instead of the default `created.app` address. You'll need to:
* Own a domain (purchase one from providers like [Hover](https://www.hover.com/) if you don't have one)
* Have a Create Pro subscription ([upgrade here](https://create.xyz/pricing))
* 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
## How it works
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
DNS records are like an address book for the internet. They tell browsers where to find your app when someone types in your domain name.
## Setting up your domain
[Publish](/publish-and-share/publish) your Create app
Select "Publish to a custom domain" in the Publish modal
Add these DNS records ***at your domain provide***r:
```
Type: A
Name: @
Value: 76.76.21.21
```
```
Type: CNAME
Name: www
Value: cname.vercel-dns.com
```
**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
```
## Provider-specific setup
Follow these steps to configure your domain in AWS Route 53:
Select `A` for the record type and set `76.76.21.21` for the value.
Create another record with:
* Type: `CNAME`
* Value: `cname.vercel-dns.com`
* Subdomain: `www`
Your final configuration should look like this:
There should be ONLY ONE `A` record. If there is already one, please remove the old one.
Follow these steps to configure your domain in GoDaddy:
Add both the A and CNAME records as shown:
Your final configuration should look like this:
## Removing a custom domain
Access the Publish settings for your app
Click "Remove domain" next to your custom domain
Remove the DNS records from your domain provider
## Need help?
Email [customers@create.xyz](mailto:customers@create.xyz) for support with domain setup.
# Embed an iframe
Source: https://www.create.xyz/docs/publish-and-share/embed
Add your Create app to any website using iframes
An iframe lets you display your Create app inside other websites - like embedding a YouTube video. This means users can interact with your app without leaving the host website.
## Getting the embed code
Get your app's embed code in two steps:
1. Open your project and click the **Share** button
2. Select **Embed Project** and copy the iframe HTML code
## Adding to WordPress
Here's how to add your app to a WordPress.org site:
Click "Share" then "Embed Project" inside your Create project
Inside your WordPress site, add an HTML block
Modify the height and width as needed
## Customizing the embed
You can modify how your app appears:
* Change `width` and `height` in the iframe code
* Set a custom `title` for accessibility
* Add CSS classes for styling
### Example Code
```html
```
If you are working with a wordpress.com site, you may need to use a [plugin](https://wordpress.com/plugins/iframe) to get the iframe to display.
# Publish
Source: https://www.create.xyz/docs/publish-and-share/publish
Host and share your Create apps
Create hosts your projects for free on created.app domains. Your apps can handle significant traffic - reach out to [customers@create.xyz](mailto:customers@create.xyz) to discuss high-scale deployments.
### Quick Publish
1. Tap **Publish** in the top right
2. Choose your created.app subdomain
3. Select pages and functions to publish
4. Set routes for each page
5. Confirm your settings and tap **Publish**
6. View your published app live at \[yourslug].created.app
### Routes and URLs
Routes determine how users access your pages:
* `/` is your homepage
* `/about`, `/contact` etc. for other pages
* `/api/[function-name]` for published functions
Routes make your content accessible at yourdomain.com/route. For example, publishing a page to `/about` makes it available at yourdomain.xyz/about
### Managing Published Pages / Functions
Control what's live by toggling pages and functions on/off. Unpublished items become inaccessible.
Remember: After making changes to your pages or functions, you'll need to republish for them to appear on your live site.
### Version History
You can view your published versions in the Version History settings. This helps you track changes and see what's currently live.
### Customizing Social Previews
You can customize how your pages look on social media:
* Set page title, description, and preview image
* Update these in [Pages](https://github.com/Create-Inc/docs/blob/main/getting-started/pages.md)
* Changes affect social media previews
### Domain Options
Choose your domain:
* **Free**: yourapp.created.app domain
* **Pro plans**: Add [custom domains](/publish-and-share/custom-domains) ([pricing](https://www.create.xyz/pricing))
Want to use your own domain? Learn how to set up [custom domains](/publish-and-share/custom-domains) with Create.
### Branding
* Free projects display a "Made with Create" logo
* Remove branding with [Pro Plan](https://www.create.xyz/pricing)
### Availability
* Published URLs are public to anyone with the link
* Use [User Accounts](/builder/user-accounts) to restrict access to signed-in users
* Toggle pages and functions on/off to control availability
Keep internal tools private by not publishing them or requiring user authentication
# Invite your team
Source: https://www.create.xyz/docs/publish-and-share/teams
Work with others on your app in real time
Create lets you collaborate with teammates in real time as you build your app together. Invite your designer, developer, agency, or anyone else to join your workspace.
## Getting started
Invite teammates in two steps:
* Click the **'Invite'** button in a project or from the dashboard
* Enter their email addresses to send invitations
When teammates accept their email invitations, they'll join your workspace and see your projects.
## Real-time collaboration
When teammates join your project:
* See their cursor and changes in real time
* Their icon appears in the top right corner
* Work together simultaneously on any element
The /build URL from the builder stays private by default. After inviting teammates, you can share this link for direct access.
## Managing access
* Teammates can access all projects in the workspace
* Switch between different teams from the dashboard side panel
* Teammates need to accept their email invitation to join
Team member removal isn't supported in the UI yet. Email [hello@create.xyz](mailto:hello@create.xyz) if you need to remove someone from your workspace.
# Animations
Source: https://www.create.xyz/docs/quick-tips/animations
Add animations to any website or app just by describing what you want.
Here's a video tutorial showing how to add animations in Create:
## Hover animations
Here's an example [webinar landing page](https://www.create.xyz/share/d523e4aa-72dd-4140-83cb-8d5cef203244) with a first load animation and a button hover animation. The animations were created with this prompt:
```
Button
- Hover effect animation, left to right slide, change the background to white and the text to black
First load animation
- The image should expand to fill the space
- The text flies in from the left side
```
## Scroll effects
Adding parallax scrolling or other scroll effects is as easy as just adding that to your prompt. Here's a [coffee shop website](https://www.create.xyz/share/224c4f9b-57a3-42d9-94da-124b3a27dda0) with a simple prompt:
```
Generate a coffee shop website with parallax scrolling
Background image: https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&w=800
The background image should scroll too but at a slower pace
```
## Animations from code
You can also paste in animation code snippets (in any programming language) and Create will reproduce them. Here's an [example project](https://www.create.xyz/share/b172593e-2aa9-4780-ba5e-95a0d9e3e72c) that converts a long Javascript animation to simple CSS.
# External APIs
Source: https://www.create.xyz/docs/quick-tips/external-apis
Learn how to integrate any external API into your Create applications using Functions
Functions let you connect to any external API by turning your words into code. This guide will show you how, using the [Exa AI Search API](https://exa.ai/) as an example.
Watch this step-by-step tutorial to see these principles in action:
## Overview
Locate the API documentation and endpoints
Let Create analyze the API and generate code
Store API keys as secrets
Test the Function and integrate into your app
## Step-by-Step Guide
Start by creating a Function using any of these methods:
* Logo Menu > New Function
* Press `option-F` (or `alt-F` on Windows)
* Type `/` in chat > Create Function
1. Locate the API documentation for your service
2. Find the specific endpoint you want to use
3. Copy the documentation URL or endpoint details
For example, with Exa:
```bash
https://docs.exa.ai/reference/search
```
You can paste API documentation URLs directly into the Function chat - Create will screenshot them and write the necessary code.
Most APIs require authentication. Add your credentials as secrets:
1. Open the "Secrets" panel from your Function's 3-dot menu
2. Click "+ Add a new secret"
3. Name it clearly (e.g. "EXA\_API\_KEY" for Exa)
4. Enter your API key or token
Always use Secrets to store sensitive credentials.
Tell Create what you want the Function to do:
1. Paste the API documentation URL
2. Describe the desired inputs and outputs
3. Specify any error handling needs
Example prompt for Exa:
```
Create a search function that:
- Takes a search query as input
- Uses the Exa API endpoint from docs.exa.ai
- Returns the search results
```
Verify your setup using the Function test panel:
1. Open the 3-dot menu > Test
2. Enter sample data
3. Click "Run Test"
4. Check the response
If you get errors, paste them back into your Function chat. Create often knows how to fix specific API issues.
Add your Function to a page or component:
1. Type `/` in chat
2. Select your Function
3. Describe how you want to use it
Create will handle:
* Loading states
* Error messages
* UI around the results
## Common API Patterns
When working with external APIs:
* **Authentication**: Most APIs require credentials (API keys, tokens, etc.)
* **Error Handling**: Plan for different types of errors and prompt Create how you want to handle
* **Data Transformation**: You may need to format data before/after API calls
Functions have a 5-minute timeout. For longer operations, consider chaining multiple Functions together.
## Alternative Integration Methods
Can't find an API's documentation? You can also:
* Use automation platforms like [Zapier or Make](/quick-tips/zapier-make-n8n)
* Screenshot API documentation for Create to analyze
* Paste example CURL commands or request formats
Need help with a specific API? Join our [Discord community](https://create.xyz/discord) and ask in #help-me-build
# Format markdown
Source: https://www.create.xyz/docs/quick-tips/format-markdown
Learn how to display AI-generated content beautifully using Create's Markdown Renderer
## Overview
When using AI integrations like ChatGPT or Claude in Create, the output often includes [Markdown](https://en.wikipedia.org/wiki/Markdown) formatting. Our built-in Markdown Renderer helps you display this content beautifully with minimal effort. Markdown is a lightweight markup language that's much simpler than HTML, making it perfect for indicating headers, lists, bold text, and more.
## How to Use
Use any AI integration (like ChatGPT or Claude) and specifically ask it to format its response using markdown. For example:
```
Write a blog post about AI and format it using markdown with headers, lists, and emphasis
```
Type `/` and select `Markdown Renderer`. Tell Create to use it to display your AI-generated content. For example:
```
Display the AI's response using the Markdown Renderer
```
## Supported Formatting
The Markdown Renderer supports:
* **Headers** (# H1, ## H2, etc.)
* *Italic* and **bold** text
* Bulleted and numbered lists
* [Links](https://create.xyz)
* Code blocks with syntax highlighting
* Tables
* And more!
The Markdown Renderer converts markdown syntax into HTML elements. This means you can style these elements using CSS to customize how your AI-generated content looks. Just tell Create how you want to style specific elements like headers, paragraphs, or lists.
You can combine the Markdown Renderer with any AI integration to create beautifully formatted content, documentation, or blog posts.
# Zapier, Make, n8n, etc.
Source: https://www.create.xyz/docs/quick-tips/zapier-make-n8n
Learn how to integrate Create with Zapier, Make.com, n8n, and other automation platforms
This guide focuses on Zapier integration, but the same principles apply to other automation tools like Make.com and n8n, or any platform that accepts webhooks.
## Overview
Create can connect to any workflow automation tool that supports webhooks. This guide will show you how to set up a webhook integration wit h Zapier, allowing you to:
* Send data from Create to other apps
* Trigger automated workflows
* Connect with 5,000+ apps in the Zapier ecosystem
## Step-by-Step Integration
### Create a Zapier Webhook
Go to [Zapier](https://zapier.com/) and click "Create Zap"
Choose "Webhooks by Zapier" as your trigger app
Select "Catch Raw Hook" as the trigger event
Zapier will generate a unique webhook URL - copy this for the next step
### Make a Function in Create
In your Create project, go to the Functions tab and click "New Function"
Say you want to send data to Zapier. Create will recognize it and ask you for the webhook URL.
Add a new secret called `ZAPIER_WEBHOOK_URL` and paste your Zapier webhook URL
Write a prompt that specifies:
* What data to collect from the user
* When to trigger the webhook
* What data to send to Zapier
Example prompt:
```
Take in name, email, generate message body with /ChatGPT, and then send this data to Zapier using the webhook URL stored in ZAPIER_WEBHOOK_URL
```
Click "Generate" in Create and test your function
Check Zapier to confirm the test data was received
### Extend in Zapier
Add subsequent steps in your Zap to:
* Send emails
* Update spreadsheets
* Create CRM records
* And more
Once testing is successful, turn on your Zap
### Use your Function in Create
You can now use your function in Create. For example, you can use it in a page, or another function. Just press / to reference it and Create will hook it up.
You now have an app that can trigger its own workflows in Zapier with custom information. You can use that inforamtion in downstream automations.
For security, always use environment variables or secrets to store webhook URLs, never hardcode them in your functions.
## Data Format
When sending data to Zapier, Create will automatically format it as JSON. Example payload:
```json
{
"name": "John Doe",
"email": "john@example.com",
"timestamp": "2024-03-21T10:30:00Z"
}
```
## Additional Resources
Learn more about Functions
Watch a step-by-step video guide
# Payments
Source: https://www.create.xyz/docs/stripe
Set up subscription payments for your app with Stripe
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:
* Create a payment account in Create with Stripe
* Add key Stripe functions + components to your app for building payment and checkout flows
* Lets users subscribe to your app
* Track which users have subscribed in your [user accounts database](/builder/user-accounts)
* Unlock app features based on the user's subscription status
This integration is designed for Stripe subscriptions (users pay \$X per month for a paid tier, similar to [Create Pro](/account/subscriptions)).
Other payment methods (like one-time or tips) are not officially supported yet. You can customize the Stripe elements the integration adds.
## Prerequisites
A Create project with [User Accounts](/builder/user-accounts) enabled
## User Flow
Here's what your user flow will look like once set up:
1. User visits your landing page
2. User signs in with [User Accounts](/builder/user-accounts)
3. User sees:
* Free tier app with your paid upgrade upsell OR
* 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
5. User submits payment:
* Redirected to your app after subscribing
* User marked as active subscriber in the [users database](/builder/databases) that comes with [User Accounts](/builder/user-accounts)
* Gains access to paid features
6. User later cancels subscription:
* User marked as inactive subscriber in your user accounts database
* Access to paid features removed
After a customer subscribes, you can manage them manually from your Stripe dashboard.
## Make a Stripe Account
Create partners with Stripe to securely store your business information.
Hit 'Add information' to start. A Stripe popup will appear asking for email/password.
Have a Stripe account already? Use that email to reuse your business info and save time.
Follow these steps to complete Stripe's secure onboarding:
1. Account
* Enter your email
* Create a Stripe password
2. Personal information
* Full legal name
* Date of birth
* Phone number
* Home address
3. Business details
* Business name and type
* Business address
* Industry and website
4. Tax Information
* SSN or EIN
* Tax ID verification
5. Bank Account (for payouts)
* Account number
* Routing number
* Bank verification
Check your inbox for a verification email from Stripe and click the link to verify your email.
Once you've verified your email, you'll see your business information and a "View Stripe Dashboard" button in the 'Accept Payments' section of the dashboard.
Your Stripe dashboard is used to manually make changes to your subscription products, prices, customers. You'll copy keys (STRIPE\_PRICE\_ID and STRIPE\_WEBHOOK\_SECRET) from here to Create.
We're working on automated updates from Create to your connected Stripe account when you make a request to the assistant.
For now, you'll need to return to the Stripe dashboard to make manual changes to your products, prices, and customers when you make changes in your Create app.
## Add Stripe to Your Project
Before you start, make sure you have:
* A Create project where you want to add subscriptions
* [User Accounts](/builder/user-accounts) enabled in the project
You're going to do a few things:
* Use our integration to add the checkout elements (functions + components) you need
* Set up the product, price, and webhook in your Stripe account in Test Mode
* Add keys from your Stripe account to the added functions in Create
* Customize look & feel of the added components in Create
* Prompt Create to add the components to the right places in your app
* [Publish](/publish-and-share/publish) your app
* Test your app flow in the published app
Once it all looks good:
* Repeat the Stripe set up steps in Live Mode
* Copy new keys to Create
* [Publish](/publish-and-share/publish) again + launch your app
### Add Stripe Integration to Create Project
Prompt "Add Stripe - Subscriptions to this project. \[other details of your subscription]"
Create will automatically add the integration elements to your project
Check that the Stripe elements appear in your project selector
### Added Stripe Elements
When you use the integration, Create adds 4 elements to your project to help build checkout flows & track user status.
#### Stripe Checkout Link
This [function](/builder/functions) generates stripe checkout URL for your product/subscription
* Redirects users to Stripe's hosted checkout page
* Needs the STRIPE\_PRICE\_ID as a secret key from your Stripe account
You won't need to modify this besides adding your STRIPE\_PRICE\_ID.
Learn how to get your STRIPE\_PRICE\_ID in the [Make product, price, and get STRIPE\_PRICE\_ID](#make-product-price-and-get-stripe_price_id) section below.
#### Subscription Upsell
This component gives you an upsell UI that will redirect users to Stripe to checkout. Customizable as button or link. It uses the Stripe Checkout Link function to redirect to Stripe on click.
* Customize its look and feel
* Add to the right [pages](/builder/pages) in your app
* Redirects the user to Stripe with Stripe Checkout Link function when the user taps "subscribe"
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.
It logs the user's subscription status in your [user accounts database](/builder/user-accounts).
* Automatically updates user payment status
* Manages subscription lifecycle in your database
* Needs the STRIPE\_WEBHOOK\_SECRET as a secret key from your Stripe account
You won't need to modify this besides adding your STRIPE\_WEBHOOK\_SECRET as a secret.
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.
#### useIsSubscribed
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)
* If the user isn't subscribed, it shows the Subscription Upsell
You can use this component when describing things you only want paid users to see, and Create will include to gate content.
Prompt examples
```
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 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.
#### Make product, price, and get STRIPE\_PRICE\_ID
create.xyz/dashboard -> Accept Payments -> View Stripe Dashboard
Name and description.
Under Pricing, select "Recurring" and add a price per month.
Copy this ID. You'll set it in your Create app as STRIPE\_PRICE\_ID.
Add STRIPE\_PRICE\_ID as the name.
Add the price ID you copied from Stripe as the value.
#### Add Stripe Webhook and get STRIPE\_WEBHOOK\_SECRET
Navigate to your Create project
Example URL: [https://www.create.xyz/build/326163b8-7363-489e-9def-13d8717f6ce6?view=9b95002f-0f1c-4c60-bf98-18a61e7a52cb\&select=9b95002f-0f1c-4c60-bf98-18a61e7a52cb](https://www.create.xyz/build/326163b8-7363-489e-9def-13d8717f6ce6?view=9b95002f-0f1c-4c60-bf98-18a61e7a52cb\&select=9b95002f-0f1c-4c60-bf98-18a61e7a52cb)
The project ID is between `/build/` and the `?`: `326163b8-7363-489e-9def-13d8717f6ce6`
You'll now make a webhook URL for it in this format: `.created.app/api/stripe-webhook`
So the final URL here is: `326163b8-7363-489e-9def-13d8717f6ce6.created.app/api/stripe-webhook`
Go to Stripe dashboard: create.xyz/dashboard -> Accept Payments -> View Stripe Dashboard
Search "Create an event destination" in the search bar
Search for customer.subscription.updated as the event. Check it.
Choose Webhook
For Endpoint URL put in your webhook URL in the format above
After it's created hit reveal secret
Copy the webhook secret
Go to your Create project > Stripe Webhook function
Go to [3 dots menu](/builder/controls#3-dot-menu) > Secrets > Add a Secret
Add STRIPE\_WEBHOOK\_SECRET as the name. For the value, paste in the secret you copied from Stripe.
### 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 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 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.
Do not change the function routes. They should be `/api/stripe-checkout-link` and `/api/stripe-webhook` to have your components and webhooks work.
Run through your flow in your published app.
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
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 refund the payment from your Stripe dashboard.
# Ambassadors
Source: https://www.create.xyz/docs/support/ambassadors
# Create Ambassador Program
An exclusive community of creators and innovators who champion Create
## Who We Select
We invite exceptional community members who:
* Build in public and share Create with their audiences
* Help others succeed in our community
* Show genuine passion for the platform
## Member Benefits
* **Early Access**: Be first to try new features
* **Private Discord**: Private Discord channel with the Create team & other ambassadors
* **Brand Kit**: Official brand kit for your marketing materials
* **Promos**: Custom promo codes and affiliate links
* **Priority feedback**: Fast-track feedback and assistance
## Join the Community
While membership is by invitation only, here's how to get noticed:
1. Share Create on X, YouTube, or TikTok
2. Help others in our [Discord community](https://create.xyz/discord)
3. Email us at [hello@create.xyz](mailto:hello@create.xyz) when you're ready
# Get help
Source: https://www.create.xyz/docs/support/help
Get help from the community and the team
We're actively adding more guides. If you don't see something covered here, let us know and we'll add it.
## Triaging Issues and Code Errors
* During app development you may run into errors or functionality that is not performing to your specifications
* You can feed errors back to the builder directly "Homepage showing empty image upon page load" or "user login feature is not allowing password reset." Be specific, ensure you follow our [prompting guide](https://www.create.xyz/docs/prompting) for best results
* Revert/Restore - use our [Version History](https://www.create.xyz/docs/essentials#version-history) feature to step backward to remove an edit or feature that is causing issues
* Test your functions - if you are having an issue with a function, such as a database write, go to the function and [run a test](https://www.create.xyz/docs/builder/functions#testing-functions).
## Connection Issues
If you experience connection issues attempting to reach [Create.xyz](http://Create.xyz) or see an error such as "this site can't provide a secure connection" or "create.xyz sent an invalid response" this is typically caused by security measures on your network (such as a corproate office wifi network.) Due to some bad actors who also have .xyz domains, there can be a general block for any domain with this domain extension. \
\
You can workaround this by using your own DNS settings, such as via [Cloudflare's Warp Extension](https://developers.cloudflare.com/warp-client/get-started/) or by having [Create.xyz](http://Create.xyz) whitelisted with your network team.
## Status Page
If there is an outage or system wide issue we will report it on our status page available at [status.create.xyz](http://status.create.xyz)
## Support
Our primary support channel is over email, [hello@create.xyz](mailto:hello@create.xyz). Please reach out with questions or to report issues with your build. Please consider including your build URL to help us expedite any investigation. Thank you!
### Sharing Your Build
When asking for help, please include:
1. A link to your `/build` page for the project you're working on
2. A specific description of what's not working (e.g., "The function called "RetrieveWeather" returns a 500 error when submitting the form")
Build links help us see your generated code and troubleshoot more effectively.
Your build links are private - even if shared publicly, only team members can access them. Create team members and admins can jump into your build to help you out (with your permission).
## Have a question?
Reach out to us at [hello@create.xyz](mailto:hello@create.xyz)
# Welcome to Create
Source: https://www.create.xyz/docs/welcome
Turn your words into sites and apps
Create is a new AI creative tool that **lets anyone build with natural language**. You can use it to build **sites and web apps**. Create uses AI to turn your instructions into apps built in code.
## Stay in touch
[Follow us on X](https://x.com/create_xyz) for product updates and announcements. Join our [Discord community](https://create.xyz/discord) to get help, ask questions, and connect with other creators.
## Quick Start
Learn the essentials.
Dive deeper into the builder.
Go live with your app
Manage your profile and subscription.
Get in touch with the Create team.
## Discover
Get the latest product updates
Create's assistant walks you through customizing an existing app
Get inspiration from other creators. Explore, remix, and customize.
Chat with other creators
## Creating Components
You can create components in several ways:
* **From Select Mode**:
* Tap a generated element you want to convert in a page or component
* Choose "Convert to Component" from the chat
* **From Logo Menu**:
* Open top left menu > New Component
* Or press `option-C` (or `alt-C` on Windows)
* **From Chat**:
* Type `/` > Create Component
* **From Canvas Mode, generating across elements**:
* Create will automatically create components that can help with your request
Describe what you want the component to do in the chat. Be specific about:
* Visual design - colors, fonts, sizes, etc.
* Behavior - how it should work in different states
* Arguments it should accept
* Variants it should support
## Managing Components
You can manage your components in several ways:
* **Rename**: Click the project group selector dropdown > Click component name to edit
* **Duplicate**: In Canvas Mode, click the element's top left corner menu > Duplicate
* **Delete**: In Canvas Mode, click the element's top left corner menu > Delete
When you delete a component, you'll need to remove or replace it anywhere it's used in your app.
## Style Your Components
Make components look good using:
* **Screenshots** pasted in chat - see our [prompting guide](/prompting)
* **URLs** in chat - Create screenshots any URL
* [**Integrations**](/builder/integrations) for component packs like shadcn/ui
* [**Style Guides**](/builder/style-guides) for consistency
* Other components as building blocks
## Using Components
Add components to any page or other component:
* Type `/` in chat
* Select your component
* Describe how you want to use it
* Send message to integrate
After updating a component, you'll need to click "Update" wherever it's used to see the changes.
## Updating Components
When you make changes to a component, you'll need to update any pages or components that use it:
* Find the places where you integrated the component
* Click the "Update" button next to the component integration
* Create will refresh the component with your latest changes
Changes to components don't automatically update everywhere they're used. This helps prevent unwanted changes from breaking your app.
## Common Components
Consider making components for:
* Navigation elements (headers, footers, menus)
* UI patterns (cards, lists, tables)
* Form elements (inputs, buttons, selectors)
* Layout sections (hero areas, feature grids)
* Interactive elements (modals, tooltips)
These are just ideas, but you can make components for anything you want.
## Arguments
Components can accept arguments to customize their appearance or behavior. For example:
* Button text and colors
* Card content and images
* Form field labels and validation
* Section headings and descriptions
To add arguments, describe what you want the component to accept.
Example prompt: "Create a banner component that accepts:
* Title
* Subtitle
* CTA text
* Background image
* Theme (light/dark)"
You'll want to explain how to use these arguments.
Later, when using the component, Create will guess the right values to pass in for the component's arguments from its context, or you can be explicit on what you want.
## Variants
Components can have multiple variations for different contexts. For example:
* sizes (small, medium, large)
* layouts (horizontal, vertical)
* types (success, warning, error)
* Theme variations (light, dark, branded)
To create variants:
Example prompt: "Add variants to the button component:
* Primary: solid background, white text
* Secondary: outlined, colored text
* Danger: red background for destructive actions"
## Preview Stories
Preview stories help you test how your component works with different inputs. They show examples of your component in action, letting you check that it works correctly in various scenarios. Create automatically generates these previews to help you validate your component's design and functionality.
* Different text lengths and content
* Various image sizes
* Multiple color themes
* Custom argument combinations
The preview wraps your component in a container that lets you:
* Change the preview width
* Test responsive layouts
* See how it looks embedded in other components
* Verify spacing and alignment
Control previews by describing what you want to test:
Example prompt: "Show preview stories with:
* Short vs long text content
* Light and dark themes
* Different container widths (mobile to desktop)
* Various image aspect ratios"
While you'll see all preview stories on the component's canvas, when you use the component in your app, you'll only see the specific instance you create. The preview stories help you test and validate your component but don't affect how it works in your final app.
# Controls
Source: https://www.create.xyz/docs/builder/controls
How to use the Create builder
## Chat
You chat with Create to build your app. Tell it what to build using text or images:
* You can paste imges into the chat
* Press `cmd-enter` (or `ctrl-enter` on Windows) to send messages
* Create uses your app's code and chat history to generate updates
* Paid plans get enhanced AI generations with more context
* When you select a **specific element**, messages update only that element
* When you select the **project name** in the [**Project Selector**](/builder/controls#project-selector) or the **canvas**, messages can modify multiple elements at once
* **Discussion Mode** - chat without making edits by clicking on the speech bubble icon labeled *Discuss*. It can be important at times to prevent edits to your work and be able to ask questions of the builder about status, approach or specific features without allowing it to alter your current design.
This is helpful when:
* You've made experimental changes you don't want to keep
* Your database structure has become complex or incorrect
* You want to start fresh from your last stable version
To reset your database structure:
1. Open your database in the builder
2. Look for the "Reset" button in the top right corner
3. Confirm that you want to reset to the published version
Create will soon support prompt to mobile apps. You can launch your app on 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). We're adding folks from the waitlist in waves.
Both icons requires a 1024 x 1024px PNG.
React Native code can be previewed on the web, so you can view a preview of your app in the builder as you chat with Create.
3. Enter your Apple ID credentials
4. Complete text authentication
5. Create will handle the build and submission process to App Store Connect
2. Visit [App Store Connect](https://appstoreconnect.apple.com/login) and login to select and view your app.
### How It Works
Style Guides automatically:
* Apply consistent colors
* Set typography
* Define spacing
* Match component styles
* Maintain visual hierarchy
When you create new elements, Create follows your chosen style without extra prompting.
### Updating Styles
When you change your Style Guide:
* You need to regenerate the [pages](/builder/pages) / [components](/builder/components) to use that style
* New elements follow the style
Try different styles to find the right look for your project.
If elements don't match your selected Style Guide, tell Create to "follow the Style Guide" in your prompt after your selection. This helps Create apply the correct styles.
# Uploads
Source: https://www.create.xyz/docs/builder/uploads
Let users upload files to your app (images, PDFs, documents, audio, videos, etc.)
Uploads let users add files to your app - like images, PDFs, documents, audio, and videos. Build galleries, AI tools that process text or documents, or just let users set profile pictures.
### Why Use Uploads
Uploads enable several capabilities:
* **File sharing** - Let users upload and share files
* **Galleries** - Build collections of images or videos
* **Documents** - Handle PDFs and other documents
* **User specific content** - Allow profile pictures and submissions with [User Accounts](/builder/user-accounts)
### Adding Uploads
Add uploads to any [Page](/builder/pages), [Component](/builder/components), or [Function](/builder/functions) by prompting Create to handle uploads:
1. **Describe the upload flow**:
* UI elements (buttons, drag areas)
* Success/error states
* What happens after upload
2. **Choose upload method**:
* File selector
* Drag and drop
* URL input
* Copy/paste
3. **Handle the file**:
* Store URL in database
* Display preview
* Process content
Example prompts:
* "Add an image upload button to the form that shows a preview after its uploaded"
* "Let users drag PDFs to upload and store in /\[Database]"
* "Create a profile picture uploader with cropping. Store the URLs in /\[UsersDB]"
Create will write the code to support uploads based on your prompt. We recommend specificity in how you want to support uploads. Some common details to include:
1. UI around uploads
2. How the app should handle different states (uploads, error, success, etc.)
3. How the app should use the upload
Create automatically:
* Stores files securely
* Returns permanent URLs for the file stored on Create's cloud
* Handles file serving when you use the URL
To save uploads:
* Store URLs in [Databases](/builder/databases)
* Reference URLs in your app
* Query stored URLs later from the database
## 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](/builder/controls#logo-menu)
* Choose "Enable User Accounts"
* Signup, Signin, Logout pages and the right tables gets created
2. **Protect Content**:
* 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 It Works - In the App
When you enable User Accounts, Create adds:
### 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)
### [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:
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. 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
### Error Codes
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.
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
Share your projects in three steps:
1. **Share Menu**:
* Click "Share" at top of builder
* View your project's public share URL
* The share URL shows a preview of your project and version history
2. **Customize Your Profile**:
* From the bottom left corner of the Dashboard, tap your email
* Add profile picture
* Set public username
3. **Share Page**:
* Your profile appears with the project
* Others can view the project and version history
* Community can heart and remix
## Adding to WordPress
Here's how to add your app to a WordPress.org site:
### Routes and URLs
Routes determine how users access your pages:
* `/` is your homepage
* `/about`, `/contact` etc. for other pages
* `/api/[function-name]` for published functions
Routes make your content accessible at yourdomain.com/route. For example, publishing a page to `/about` makes it available at yourdomain.xyz/about
### Managing Published Pages / Functions
Control what's live by toggling pages and functions on/off. Unpublished items become inaccessible.
### Version History
You can view your published versions in the Version History settings. This helps you track changes and see what's currently live.
### Customizing Social Previews
You can customize how your pages look on social media:
* Set page title, description, and preview image
* Update these in [Pages](https://github.com/Create-Inc/docs/blob/main/getting-started/pages.md)
* Changes affect social media previews
### Domain Options
Choose your domain:
* **Free**: yourapp.created.app domain
* **Pro plans**: Add [custom domains](/publish-and-share/custom-domains) ([pricing](https://www.create.xyz/pricing))
## Getting started
Invite teammates in two steps:
* Click the **'Invite'** button in a project or from the dashboard
* Enter their email addresses to send invitations
When teammates accept their email invitations, they'll join your workspace and see your projects.
## Real-time collaboration
When teammates join your project:
* See their cursor and changes in real time
* Their icon appears in the top right corner
* Work together simultaneously on any element
The /build URL from the builder stays private by default. After inviting teammates, you can share this link for direct access.
## Managing access
* Teammates can access all projects in the workspace
* Switch between different teams from the dashboard side panel
* Teammates need to accept their email invitation to join
## Scroll effects
Adding parallax scrolling or other scroll effects is as easy as just adding that to your prompt. Here's a [coffee shop website](https://www.create.xyz/share/224c4f9b-57a3-42d9-94da-124b3a27dda0) with a simple prompt:
```
Generate a coffee shop website with parallax scrolling
Background image: https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&w=800
The background image should scroll too but at a slower pace
```
## Animations from code
You can also paste in animation code snippets (in any programming language) and Create will reproduce them. Here's an [example project](https://www.create.xyz/share/b172593e-2aa9-4780-ba5e-95a0d9e3e72c) that converts a long Javascript animation to simple CSS.
# External APIs
Source: https://www.create.xyz/docs/quick-tips/external-apis
Learn how to integrate any external API into your Create applications using Functions
Functions let you connect to any external API by turning your words into code. This guide will show you how, using the [Exa AI Search API](https://exa.ai/) as an example.
Watch this step-by-step tutorial to see these principles in action:
## Overview
## How to Use
Name and description.
Under Pricing, select "Recurring" and add a price per month.
Copy this ID. You'll set it in your Create app as STRIPE\_PRICE\_ID.
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
