> ## Documentation Index
> Fetch the complete documentation index at: https://docs.toughtongueai.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Deployment

> Deploy the Next.js starter to production

Deploy your ToughTongue AI application to production.

## Environment Variables

Before deploying, ensure you have all required environment variables:

```env .env.local theme={null}
# Required
TOUGH_TONGUE_API_KEY=your_api_key_here

# Development mode (disable in production)
NEXT_PUBLIC_IS_DEV=false

# Admin token (change for production!)
ADMIN_TOKEN=your_secure_admin_token

# Optional: Firebase (for Google OAuth)
NEXT_PUBLIC_FIREBASE_API_KEY=...
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=...
NEXT_PUBLIC_FIREBASE_PROJECT_ID=...
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=...
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=...
NEXT_PUBLIC_FIREBASE_APP_ID=...
```

<Warning>
  **Important for production:** - Set `NEXT_PUBLIC_IS_DEV=false` to disable the admin panel - Use a
  strong, unique `ADMIN_TOKEN` - Never commit `.env.local` to version control
</Warning>

***

## Vercel (Recommended)

<Steps>
  <Step title="Push to GitHub">Commit your code to a GitHub repository.</Step>

  <Step title="Import in Vercel">
    1. Go to [vercel.com/new](https://vercel.com/new) 2. Import your repository 3. Set **Root
       Directory** to `nextjs-minimal` if using the monorepo structure
  </Step>

  <Step title="Add Environment Variables">
    In **Project Settings** → **Environment Variables**, add: - `TOUGH_TONGUE_API_KEY` = your API
    key - `NEXT_PUBLIC_IS_DEV` = `false` - `ADMIN_TOKEN` = your secure token - Firebase variables
    (if using)
  </Step>

  <Step title="Deploy">Click **Deploy**. Vercel will auto-deploy on future git pushes.</Step>
</Steps>

### Vercel Project Settings

| Setting          | Value                          |
| ---------------- | ------------------------------ |
| Framework        | Next.js (auto-detected)        |
| Build Command    | `pnpm build`                   |
| Output Directory | `.next`                        |
| Install Command  | `pnpm install`                 |
| Root Directory   | `nextjs-minimal` (if monorepo) |

***

## Custom Domain

After deployment, add a custom domain:

1. Go to **Project Settings** → **Domains**
2. Add your domain
3. Update DNS records as instructed
4. SSL is automatic

***

## Other Platforms

### Netlify

```bash theme={null}
# Install Netlify CLI
npm install -g netlify-cli

# Build and deploy
cd nextjs-minimal
pnpm build
netlify deploy --prod
```

Add environment variables in Netlify dashboard.

### Docker

```dockerfile theme={null}
FROM node:20-alpine AS builder
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN npm install -g pnpm && pnpm install
COPY . .
RUN pnpm build

FROM node:20-alpine AS runner
WORKDIR /app
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./
EXPOSE 3000
CMD ["npm", "start"]
```

### Self-Hosted

```bash theme={null}
# Build
pnpm build

# Start production server
pnpm start

# Or use PM2
pm2 start npm --name "ttai-app" -- start
```

***

## Customization

### App Branding

Edit `lib/config.ts`:

```typescript theme={null}
export const AppConfig = {
  app: {
    name: "Your App Name",
    shortName: "App",
    description: "Your app description",
  },
};
```

### Scenario IDs

Update `lib/ttai/constants.ts` with your scenarios:

```typescript theme={null}
export const SCENARIOS = {
  PERSONALITY_TEST: "your_test_scenario_id",
  PERSONALITY_COACH: "your_coach_scenario_id",
  // Add more scenarios
  SALES_TRAINING: "your_sales_scenario_id",
} as const;
```

### Styling

Customize the theme in `tailwind.config.ts`:

```typescript theme={null}
export default {
  theme: {
    extend: {
      colors: {
        primary: "#your-color",
      },
    },
  },
};
```

***

## Production Checklist

<Check>Set `NEXT_PUBLIC_IS_DEV=false`</Check>
<Check>Use strong `ADMIN_TOKEN`</Check>
<Check>Verify `TOUGH_TONGUE_API_KEY` is correct</Check>
<Check>Configure Firebase authorized domains</Check>
<Check>Test all user flows</Check>
<Check>Monitor API usage in Developer Portal</Check>
<Check>Set up error monitoring (optional)</Check>

***

## Troubleshooting

<AccordionGroup>
  <Accordion title="Build fails on Vercel">
    **Check:**

    * Root directory is set correctly (`nextjs-minimal` if monorepo)
    * All environment variables are added
    * No TypeScript errors: run `pnpm build` locally first
  </Accordion>

  {" "}

  <Accordion title="Firebase auth not working in production">
    **Solution:** - Add your production domain to Firebase authorized domains - Go to Firebase Console
    → Authentication → Settings → Authorized domains
  </Accordion>

  {" "}

  <Accordion title="API calls failing">
    **Check:** - `TOUGH_TONGUE_API_KEY` is set in Vercel environment variables - API key has correct
    permissions - Check Vercel function logs for errors
  </Accordion>

  <Accordion title="Admin panel accessible in production">
    **Solution:**

    * Ensure `NEXT_PUBLIC_IS_DEV=false` is set
    * Redeploy after changing environment variables
  </Accordion>
</AccordionGroup>

***

## Learn More

<CardGroup cols={3}>
  <Card title="API Reference" icon="code" href="/api-reference/overview">
    Full API documentation
  </Card>

  <Card title="Troubleshooting" icon="wrench" href="/developer/troubleshooting">
    Common issues and solutions
  </Card>

  <Card title="Developer Portal" icon="terminal" href="https://app.toughtongueai.com/developer">
    Manage API keys and usage
  </Card>
</CardGroup>