BenchSci Labs Documentation

Empowering the next generation of scientists

Comprehensive documentation for non-engineers to start building powerful applications using v0's AI-powered development platform and seamless integrations.

Introduction to v0

v0 is an AI-powered development platform that helps you build modern web applications without deep technical knowledge. It combines the power of Next.js, React, and Tailwind CSS with intelligent code generation.

What is v0?
  • • AI-powered code generation platform
  • • Built on Next.js and React
  • • Integrated with Vercel for deployment
  • • Supports multiple integrations
Key Benefits
  • • No coding experience required
  • • Rapid prototyping and development
  • • Production-ready applications
  • • Seamless deployment process

Your First App

Creating your first application with v0 is straightforward. Follow these steps to get started.

1
Describe Your App

Tell v0 what you want to build in natural language. Be specific about features and functionality.

2
Add Authentication

Ask v0 to implement authentication for your application. v0 will generate secure login components and pages based on your requirements.

3
Add Integrations

Connect databases, authentication, and other services through the integrations panel.

4
Deploy to Vercel

One-click deployment to Vercel makes your app live on the internet instantly.

Understanding Components

Components are the building blocks of your v0 applications. They're reusable pieces of UI that can be combined to create complex interfaces.

UI Components

Buttons, forms, cards, and other interface elements built with shadcn/ui.

Layout Components

Headers, sidebars, navigation, and page structure components.

Feature Components

Authentication forms, data tables, charts, and business logic components.

Project Structure

v0 projects follow Next.js App Router conventions with a clean, organized structure.

Typical Project Structure
📁 app/
📄 layout.tsx
📄 page.tsx
📁 api/
📄 route.ts
📁 components/
📁 ui/
📄 button.tsx
📄 navigation.tsx
📁 lib/
📄 utils.ts
📄 globals.css

Get Started in Minutes

Follow these simple steps to start building with v0

Learn the Basics
Understand v0 fundamentals, component structure, and project organization.
Add Authentication
Ask v0 to implement authentication for your application. v0 will generate secure login components and pages based on your requirements.
Build & Deploy
Create your app using v0 components and deploy to Vercel with one click.
Required Setup

Authentication with Auth0

All BenchSci Labs projects require Auth0 authentication for secure access

Step 1: Add Auth0 Knowledge to v0 Settings
Add the Auth0 integration guidelines to your v0 project knowledge so it knows how to implement authentication

How to Add Knowledge:

1

Click the gear icon (⚙️) in the top right of your v0 interface

2

Select "Knowledge" and add the Auth0 integration guidelines

3

Ask v0 to "Add Auth0 authentication to my app" - it will handle the rest!

Copy this text to your Knowledge settings:

# BenchSci Labs Auth0 Integration Guidelines for v0 ## Important: v0 Environment Limitations The Auth0 Next.js SDK (@auth0/nextjs-auth0) is NOT available in v0's runtime environment. Use the custom implementation approach below instead. ## Authentication Requirements All BenchSci Labs applications must use Auth0 for authentication with the following configuration: ### Required Environment Variables - AUTH0_DOMAIN: The Auth0 domain for BenchSci Labs - AUTH0_CLIENT_ID: Application client ID - AUTH0_CLIENT_SECRET: Application client secret - AUTH0_SECRET: Random secret for session encryption - AUTH0_BASE_URL: Base URL for your application (e.g., http://localhost:3000 for development) ### v0 Implementation Approach Since the Auth0 SDK is not available in v0, implement authentication using: 1. **Custom Auth0 OAuth Flow**: Create API routes for login, callback, and logout 2. **Cookie-based Sessions**: Use secure HTTP-only cookies for session management 3. **Middleware Protection**: Simple cookie-based authentication checking in middleware 4. **Automatic Redirection**: Redirect unauthenticated users to Auth0 login automatically ### Implementation Guidelines 1. Create custom API routes: /api/auth/login, /api/auth/callback, /api/auth/me 2. Use middleware to protect all routes by checking for auth cookies 3. Implement automatic redirection to Auth0 login for unauthenticated users 4. No login/logout buttons needed - use automatic redirection approach 5. Display user info component showing authenticated user details ### Security Requirements - All user sessions must be server-side validated - Use secure, HTTP-only cookies for session storage - Validate user permissions on protected routes - Implement proper CSRF protection ### What NOT to use in v0 - Do NOT use @auth0/nextjs-auth0 package (not available) - Do NOT use withPageAuthRequired or getSession from Auth0 SDK - Do NOT implement login/logout buttons - use automatic redirection When implementing Auth0 in v0, always follow this custom approach to ensure compatibility with v0's runtime environment.

💡 Copy this entire text block and paste it into your v0 Knowledge settings

Step 2: Request Auth0 Integration
Simply ask v0 to add authentication - no technical setup required

Copy and paste this into v0:

"Add Auth0 authentication to my app with automatic redirection for unauthenticated users. I don't need login/logout buttons - just redirect users to Auth0 login if they're not authenticated."

💡 v0 will automatically implement the custom Auth0 flow compatible with v0's environment

Step 3: Configure Environment Variables
Set up required Auth0 environment variables for your project

📋 Environment Variables Required:

v0 will prompt you to set these up: When you request Auth0 integration, v0 will automatically detect the required environment variables and prompt you to configure them via the chat window.

Getting the values: You'll need to reach out to the Engineering Department to get access to the Auth0 credentials and configuration values for these environment variables.

Available Integrations

Powerful integrations to enhance your v0 applications

Database Integrations

Supabase
Easy
Open-source Firebase alternative with PostgreSQL database, real-time subscriptions, and built-in authentication.

Key Features

  • •PostgreSQL database with real-time updates
  • •Built-in authentication and user management
  • •Row Level Security (RLS) for data protection
  • •Auto-generated APIs and TypeScript types

Environment Variables

SUPABASE_URLSUPABASE_ANON_KEYSUPABASE_SERVICE_KEY
Neon
Easy
Serverless PostgreSQL database with branching, autoscaling, and modern developer experience.

Key Features

  • •Serverless PostgreSQL with instant scaling
  • •Database branching for development workflows
  • •Built-in connection pooling
  • •Time-travel queries and point-in-time recovery

Environment Variables

DATABASE_URL

AI Integrations

Grok (xAI)
Easy
Advanced AI language model by xAI with real-time information access and reasoning capabilities.

Key Features

  • •Real-time information access
  • •Advanced reasoning and problem-solving
  • •Code generation and debugging
  • •Multi-modal capabilities

Environment Variables

XAI_API_KEY
Groq
Easy
Ultra-fast AI inference platform optimized for real-time applications and low-latency responses.

Key Features

  • •Lightning-fast inference speeds
  • •Support for popular open-source models
  • •Optimized for real-time applications
  • •Cost-effective AI processing

Environment Variables

GROQ_API_KEY
Fal AI
Easy
Specialized AI platform for image generation, video processing, and creative AI applications.

Key Features

  • •High-quality image generation
  • •Video processing and manipulation
  • •Creative AI tools and filters
  • •Fast and reliable API

Environment Variables

FAL_KEY
Deep Infra
Easy
Scalable AI infrastructure platform providing access to various AI models and compute resources.

Key Features

  • •Access to multiple AI models
  • •Scalable compute infrastructure
  • •Cost-effective AI processing
  • •Easy model switching and comparison

Environment Variables

DEEPINFRA_API_KEY

Storage & Search

View Documentation
Vercel Blob
Easy
Simple and scalable file storage solution integrated with Vercel platform for seamless deployments.

Key Features

  • •Simple file upload and storage
  • •Global CDN distribution
  • •Automatic image optimization
  • •Seamless Vercel integration

Environment Variables

BLOB_READ_WRITE_TOKEN
Upstash Redis
Easy
Serverless Redis database for caching, session storage, and real-time applications.

Key Features

  • •Serverless Redis with global replication
  • •Built-in REST API
  • •Automatic scaling and pricing
  • •Perfect for caching and sessions

Environment Variables

KV_REST_API_URLKV_REST_API_TOKEN
Upstash Search
Medium
Vector database and search engine for building AI-powered search and recommendation systems.

Key Features

  • •Vector similarity search
  • •Full-text search capabilities
  • •AI-powered recommendations
  • •Real-time indexing and updates

Environment Variables

UPSTASH_VECTOR_REST_URLUPSTASH_VECTOR_REST_TOKEN

Code Projects

Code Projects are your complete app workspace in v0. Everything you need is included automatically.

What you get
  • • Complete app with all files organized
  • • Live preview that updates as you build
  • • One-click deployment to the web
  • • All integrations work automatically
What you can do
  • • Ask v0 to modify any part of your app
  • • Add new features by describing them
  • • Connect databases and AI services
  • • Deploy and share with your team

Beautiful Components

v0 includes a complete library of beautiful, professional components. Just describe what you want and v0 will use the right components.

Forms & Inputs

Login forms, contact forms, surveys

Data Display

Tables, charts, dashboards

Navigation

Menus, sidebars, breadcrumbs

Content

Cards, modals, galleries

Interactive

Buttons, dropdowns, tabs

Feedback

Alerts, notifications, loading states

Styling & Design

v0 automatically creates beautiful, responsive designs. You can request style changes in plain English.

What you can ask for
  • • "Make the header blue and add a company logo"
  • • "Create a dark mode version"
  • • "Make this work well on mobile phones"
  • • "Use a more modern, clean design"
  • • "Add animations and smooth transitions"

App Functionality

v0 handles all the complex functionality behind the scenes. Just describe what your app should do.

User Interactions
  • • Forms that save and validate data
  • • Buttons that perform actions
  • • Search and filtering
  • • Real-time updates
Data Management
  • • Automatic data loading and caching
  • • Database operations
  • • File uploads and storage
  • • User authentication

Backend & APIs

v0 automatically creates the backend functionality your app needs. No server management required.

What v0 handles for you

Data Operations

  • • Saving form submissions
  • • Loading data from databases
  • • User authentication

External Services

  • • AI model integration
  • • File storage and processing
  • • Third-party API connections

Database Storage

Store and manage your app's data with powerful database integrations. v0 handles all the technical setup.

Supabase
Easy
Open-source Firebase alternative with PostgreSQL database, real-time subscriptions, and built-in authentication.

Key Features

  • •PostgreSQL database with real-time updates
  • •Built-in authentication and user management
  • •Row Level Security (RLS) for data protection
  • •Auto-generated APIs and TypeScript types

Environment Variables

SUPABASE_URLSUPABASE_ANON_KEYSUPABASE_SERVICE_KEY
Neon
Easy
Serverless PostgreSQL database with branching, autoscaling, and modern developer experience.

Key Features

  • •Serverless PostgreSQL with instant scaling
  • •Database branching for development workflows
  • •Built-in connection pooling
  • •Time-travel queries and point-in-time recovery

Environment Variables

DATABASE_URL
What you can build
  • • User profiles and account systems
  • • Content management and blogs
  • • Inventory and product catalogs
  • • Survey and form responses
  • • Analytics and reporting dashboards

Fast Data & Caching

Make your apps lightning fast with Redis caching and real-time features.

Upstash Redis
Easy
Serverless Redis database for caching, session storage, and real-time applications.

Key Features

  • •Serverless Redis with global replication
  • •Built-in REST API
  • •Automatic scaling and pricing
  • •Perfect for caching and sessions

Environment Variables

KV_REST_API_URLKV_REST_API_TOKEN
Perfect for
  • • Real-time chat and messaging
  • • Live notifications and updates
  • • Session management
  • • Leaderboards and counters

User Accounts & Profiles

Add user accounts, profiles, and personalization to your apps with simple requests to v0.

User Features
  • • Sign up and login forms
  • • User profile pages
  • • Password reset functionality
  • • Account settings and preferences
What to ask v0
  • • "Add user registration to my app"
  • • "Create user profile pages"
  • • "Make this page require login"
  • • "Add admin and regular user roles"

Secure Pages & Content

Control who can access different parts of your app. v0 handles all the security automatically.

Security Made Simple

Just tell v0 what you want:

  • • "Make this page require login"
  • • "Only admins can see this section"
  • • "Users can only edit their own content"
  • • "Add a members-only area"

AI-Powered Features

Add intelligent features to your apps with AI integrations. Perfect for chatbots, content generation, and smart analysis.

Grok (xAI)
Easy
Advanced AI language model by xAI with real-time information access and reasoning capabilities.

Key Features

  • •Real-time information access
  • •Advanced reasoning and problem-solving
  • •Code generation and debugging
  • •Multi-modal capabilities

Environment Variables

XAI_API_KEY
Groq
Easy
Ultra-fast AI inference platform optimized for real-time applications and low-latency responses.

Key Features

  • •Lightning-fast inference speeds
  • •Support for popular open-source models
  • •Optimized for real-time applications
  • •Cost-effective AI processing

Environment Variables

GROQ_API_KEY
What you can build
  • • AI chatbots and assistants
  • • Content generation and writing tools
  • • Data analysis and insights
  • • Smart search and recommendations
  • • Automated content moderation

Creative AI Tools

Generate images, process videos, and create visual content with AI-powered creative tools.

Fal AI
Easy
Specialized AI platform for image generation, video processing, and creative AI applications.

Key Features

  • •High-quality image generation
  • •Video processing and manipulation
  • •Creative AI tools and filters
  • •Fast and reliable API

Environment Variables

FAL_KEY
Deep Infra
Easy
Scalable AI infrastructure platform providing access to various AI models and compute resources.

Key Features

  • •Access to multiple AI models
  • •Scalable compute infrastructure
  • •Cost-effective AI processing
  • •Easy model switching and comparison

Environment Variables

DEEPINFRA_API_KEY
Creative possibilities
  • • AI image generators and editors
  • • Video processing and effects
  • • Logo and graphic creation tools
  • • Photo enhancement and filters
  • • Creative content workflows

Need Support?

Reach out to #benchsci-labs channel and share your question or need with the team and we will support you.