Tempo

https://tempolabsinc.mintlify.app
Admin
Tempo is an AI-powered visual development platform and code editor that enables developers to build,...
Tokens:46,450
Snippets:409
Trust Score:7.1
Update:3 weeks ago
Show doc for...
Tokens:
Raw
### Vibe-First Approach: Context Setup and CLEAR Prompt

Source: https://tempolabsinc.mintlify.app/Best%20Practices/CLEAR%20In%20Action

The Vibe-First Approach starts with a context setup describing the desired feeling and audience, then provides a CLEAR prompt that specifies the component, location, exact change, appearance, and reason. Use this technique when you want to establish the emotional tone before detailing the implementation.

```text
I am building a meditation app that should feel calm and zen. Think Headspace
meets Apple's design language. Users are stressed professionals who need
peace in their day.

```

```text
Create a meditation session player (Component) for the main app screen (Location)
with play/pause, progress bar, and ambient background selector (Exact change)
using soft gradients, minimal icons, and breathing animations (Appearance)
to create a calming experience that helps users disconnect from work stress (Reason).

```

--------------------------------

### Setting the Scene with Context - Example Prompt

Source: https://tempolabsinc.mintlify.app/Basics/Prompting

Use this prompt to provide the AI with project context and key features before asking it to design a specific component, such as the project dashboard.

```text
I’m working on a collaborative tool to help teams manage their projects. Here are the key features I’d like to include:
- User sign-up and authentication
- Project dashboards
- Task tracking and assignment
- Progress reporting

Start by designing the project dashboard.

```

--------------------------------

### Effective Objective Prompt Example

Source: https://tempolabsinc.mintlify.app/Best%20Practices/Level%20Up%20Your%20Prompting%20Game

An example of a clear, objective prompt that specifies the exact issue (Login Button does nothing), the expected behavior (authenticated and redirected), and the desired outcome. This approach yields better results from Tempo AI.

```text
The Login Button does nothing when clicked. 
When the user clicks on it, they should be authenticated and redirected to the home page. 

```

--------------------------------

### Prompt with Constraints - Task Manager Example

Source: https://tempolabsinc.mintlify.app/Basics/Prompting

Use this prompt to constrain the AI's output, focusing on a limited set of features to avoid unnecessary complexity.

```text
Create a task manager that shows up to three tasks at a time, with options to add, edit, and delete tasks.

```

--------------------------------

### External image URL prompt

Source: https://tempolabsinc.mintlify.app/Basics/images

Example prompt for adding an external image to a project. Use the image URL directly in the project prompt.

```text
"Add a hero section image using the following URL: https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Pale_Blue_Dot.png/442px-Pale_Blue_Dot.png"
```

--------------------------------

### CLEAR Prompt for Onboarding Flow

Source: https://tempolabsinc.mintlify.app/Best%20Practices/CLEAR%20In%20Action

Use this prompt to create an onboarding flow for a budgeting app. It follows the CLEAR structure: Component, Location, Exact change, Appearance, and Reason. The example is shown as the 'After' version in the 'Onboarding Flows' scenario.

```text
Build a welcome tutorial (Component) for new users opening my budgeting app
(Location) with 3 simple steps explaining core features and benefits (Exact change)
using friendly illustrations, progress dots, and encouraging copy (Appearance)
to get users successfully tracking their first expense within 2 minutes (Reason).

```

--------------------------------

### Image Prompt - Detailed Visual Prompt

Source: https://tempolabsinc.mintlify.app/Basics/Prompting

Use this prompt when uploading an image (e.g., a design layout or wireframe) to guide the AI. It includes detailed instructions for building a Kanban board with drag-and-drop.

```text
Based on the attached image, build a Kanban board. 

Include features to add and reorder cards within columns, and move cards between columns.

Use drag-and-drop functionality, leveraging libraries like Pangea home-dnd.

```

--------------------------------

### Incremental Prompting - Sequential Prompts

Source: https://tempolabsinc.mintlify.app/Basics/Prompting

Break a large task into smaller, sequential prompts to improve accuracy. This example shows a sequence of incremental instructions for building a CRM app.

```text
1. Set up a basic CRM interface
2. Add user authentication features.
3. Enable Google Sheets export functionality.
4. Incorporate data enrichment from an external service

```

--------------------------------

### CLEAR Prompt for E-commerce Product Page

Source: https://tempolabsinc.mintlify.app/Best%20Practices/CLEAR%20In%20Action

Use this prompt to generate a product showcase page for an e-commerce app. It follows the CLEAR structure: Component, Location, Exact change, Appearance, and Reason. The example is shown as the 'After' version in the 'E-commerce Product Pages' scenario.

```text
Design a product showcase page (Component) for my clothing store app (Location)
with image carousel, size selector, and add-to-cart button (Exact change)
using clean white background, zoom functionality, and color swatches (Appearance)
to make online shopping feel as good as trying clothes on in-store (Reason).

```

--------------------------------

### CLEAR Prompt for Settings & Preferences Screen

Source: https://tempolabsinc.mintlify.app/Best%20Practices/CLEAR%20In%20Action

Use this prompt to add a settings and preferences screen to an app. It follows the CLEAR structure: Component, Location, Exact change, Appearance, and Reason. The example is shown as the 'After' version in the 'Settings & Preferences' scenario.

```text
Create a user preferences screen (Component) in my app's profile section (Location)
with notification toggles, theme selector, and account management options
(Exact change) using organized sections, clear labels, and iOS-style switches
(Appearance) to let users customize their experience without overwhelming them (Reason).

```

--------------------------------

### Like That App Method: Music Discovery Screen Prompt

Source: https://tempolabsinc.mintlify.app/Best%20Practices/CLEAR%20In%20Action

The 'Like That App' Method references a familiar app (Spotify's Browse page) to guide the design of a music discovery screen. Use this technique when you want to leverage existing user familiarity to communicate the desired look and feel.

```text
Build a music discovery screen (Component) for my playlist app's main interface
(Location) with genre cards and trending songs, similar to Spotify's Browse page
(Exact change) using colorful album artwork, smooth scrolling, and play previews
(Appearance) to help users find new music they will actually want to save (Reason).

```

--------------------------------

### Ineffective Emotional Prompt Example

Source: https://tempolabsinc.mintlify.app/Best%20Practices/Level%20Up%20Your%20Prompting%20Game

An example of an emotional, vague prompt that should be avoided. It uses frustration and general demands ('Solve ALL bugs', 'make my app better') without specific details, which leads to poor AI responses.

```text
Why don't you UNDERSTAND what I am saying...uuughhh !!
Solve ALL bugs and make my app better NOW ...

```

--------------------------------

### Correct Supabase client initialization with proper environment variable

Source: https://tempolabsinc.mintlify.app/supabase/Troubleshooting

Shows the correct way to initialize the Supabase client in an Edge Function, using the existing environment variable 'SUPABASE_SERVICE_ROLE_KEY' for the Supabase key, which resolves the 'supabaseKey is required' error.

```javascript
// Inside the Edge Function
import { createClient } from '@supabase/supabase-js';

// Correct: Using the environment variable name that exists in Secrets
const supabaseUrl = Deno.env.get('SUPABASE_URL') ?? '';
const supabaseKey = Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') ?? ''; // Correct variable name

const supabase = createClient(supabaseUrl, supabaseKey);

```

--------------------------------

### Prompt to Integrate react-hook-form

Source: https://tempolabsinc.mintlify.app/Basics/Using%20npm%20Packages

Use this prompt to instruct Tempo AI to install and use the react-hook-form package for creating a contact form with validation for name, email, and message fields.

```text
"Integrate the react-hook-form npm package into my project. 
Use it to create a contact form with validation for name, email, and message fields."
```

--------------------------------

### Avoid Vague Prompts - Specific Form Prompt

Source: https://tempolabsinc.mintlify.app/Basics/Prompting

Use this specific prompt instead of a vague one like 'Build a form' to get a form with validation and a submit button.

```text
Design a form with input fields for name, email, and phone number. 

Ensure form validation and include a “Submit” button.

```

--------------------------------

### Set Stripe Secret Key Environment Variable

Source: https://tempolabsinc.mintlify.app/ViteClerkConvexStripe

Add the Stripe secret key as an environment variable in Convex. The key starts with `sk_test_` and is obtained from the Stripe Dashboard under Developers → API keys.

```plaintext
STRIPE_SECRET_KEY=<Your Stripe Secret Key>

```
Tokens:
Raw