Skip to main content

​
Overview

Tesslate Studio provides secure management for API keys, environment variables, and other sensitive data your projects need.

Secure Storage

Encrypted storage for sensitive data

Per-Project

Different keys for different projects

Environment Variables

Access via process.env in your code

Never Committed

Keys never appear in Git history

​
Types of Secrets

  • AI Provider Keys
  • Third-Party APIs
  • Database
  • Authentication
For AI agents
  • OpenAI API keys
  • Anthropic API keys
  • OpenRouter keys
  • Custom model providers
Required for: Using AI agents

​
Managing AI Provider Keys

​
Adding Your Keys

1

Open Settings

Click profile → Settings → API Keys
2

Select Provider

Choose OpenAI, Anthropic, or OpenRouter
3

Enter Key

Paste your API key from the provider
4

Save

Click Save - key is encrypted
5

Verify

Test by using an AI agent

​
Getting API Keys

Where to get:
  1. Go to platform.openai.com
  2. Sign up or log in
  3. Go to API Keys section
  4. Create new secret key
  5. Copy and save (shown once)
Models: GPT-4, GPT-3.5, etc.
Where to get:
  1. Go to console.anthropic.com
  2. Sign up or log in
  3. Go to API Keys
  4. Create new key
  5. Copy immediately (shown once)
Models: Claude 3 Opus, Sonnet, Haiku
Where to get:
  1. Go to openrouter.ai
  2. Sign up
  3. Go to Keys
  4. Generate API key
  5. Copy key
Models: Access to 100+ models
API keys are like passwords - never share them publicly or commit them to GitHub!

​
Project Environment Variables

​
Adding Variables

1

Open Project Settings

In your project, click Settings icon
2

Go to Environment

Navigate to Environment Variables tab
3

Add Variable

Click Add New Variable
4

Enter Details

  • Variable name (e.g., STRIPE_KEY)
  • Value (the actual key/secret)
5

Save

Click Save - available in your code

​
Using in Code

Access environment variables in your React code: 
// Access any environment variable
const stripeKey = import.meta.env.VITE_STRIPE_KEY

// Use in your code
const stripe = new Stripe(stripeKey)
Vite requires environment variables to be prefixed with VITE_ to be exposed to client-side code.

​
Naming Conventions

Client-Side

VITE_ prefix required
  • VITE_API_URL
  • VITE_STRIPE_PUBLIC_KEY
  • Accessible in browser

Server-Side

No prefix needed
  • DATABASE_URL
  • STRIPE_SECRET_KEY
  • Backend/API routes only

​
Secret Types

​
Public vs Private Keys

  • Public/Publishable
  • Secret/Private
Safe to expose
  • Stripe publishable keys
  • Firebase public config
  • API base URLs
  • Public app IDs
Can use: VITE_ prefix
Never use VITE_ prefix for secret keys! This exposes them to client-side JavaScript and anyone can see them.

​
Security Best Practices

  • Don’t put keys in code files
  • Use environment variables
  • Add .env to .gitignore
  • Verify before committing
  • Change API keys periodically
  • Rotate after team member leaves
  • Update if potentially exposed
  • Use different keys per environment
  • Use read-only keys when possible
  • Restrict API key scopes
  • Set usage limits
  • Monitor key usage
  • Different keys for each project
  • Easier to track usage
  • Better security isolation
  • Simpler to rotate

​
Environment Files

​
.env Structure

Tesslate projects use .env files: 
# AI Provider Keys (Global)
OPENAI_API_KEY=sk-...
ANTHROPIC_API_KEY=sk-ant-...

# Public Client Variables (VITE_ prefix)
VITE_API_URL=https://api.example.com
VITE_STRIPE_PUBLIC_KEY=pk_test_...
VITE_FIREBASE_API_KEY=AIza...

# Private Server Variables (No prefix)
DATABASE_URL=postgresql://...
STRIPE_SECRET_KEY=sk_test_...
JWT_SECRET=your-secret-key

​
File Location

my-project/
├── .env                 # Local environment (gitignored)
├── .env.example         # Template (committed to Git)
├── .env.production      # Production values
└── .env.development     # Development values
Commit .env.example with placeholder values so team members know what variables are needed.

​
Managing Multiple Environments

  • Development
  • Staging
  • Production
Local development
  • Test API keys
  • Local database URLs
  • Debug mode enabled
  • Verbose logging
File: .env or .env.development

​
Viewing and Editing

​
In Tesslate Studio

1

Open Settings

Project → Settings → Environment Variables
2

View Variables

See all configured variables (values hidden)
3

Edit

Click variable to edit value
4

Delete

Remove unused variables
5

Restart

Restart dev server to apply changes

​
Values are Hidden

For security:
  • Values shown as •••••••••
  • Click “Reveal” to see temporarily
  • Never logged or displayed in console
  • Not included in exports

​
Troubleshooting

Problem: Can’t access environment variableSolutions:
  • Check variable name spelling
  • Ensure VITE_ prefix for client-side
  • Restart development server
  • Verify variable is saved
  • Check .env file location
Problem: API key not workingSolutions:
  • Verify key is correct (no extra spaces)
  • Check key hasn’t expired
  • Ensure sufficient API credits
  • Verify key permissions/scope
  • Try regenerating key
Problem: Accidentally committed secretsSolutions:
  • Immediately rotate all exposed keys
  • Remove from Git history (git filter-branch)
  • Add .env to .gitignore
  • Use .env.example for templates
  • Consider using git-secrets tool
Problem: Changes not applyingSolutions:
  • Manually restart dev server
  • Check for syntax errors in .env
  • Clear browser cache
  • Verify file is saved
  • Check file permissions

​
Best Practices

Use .env.example

Template for required variables

Document Variables

Comment what each variable does

Validate on Startup

Verify required variables exist

Rotate Regularly

Change keys periodically

​
Next Steps

Model Management

Configure AI models

Customizing Agents

Set up custom agents

GitHub Integration

Keep secrets out of Git

Projects

Project configuration