feat: add env validation, update prompt

Author: ValeryVerkhoturov

.env.example

@@ -1,4 +1,4 @@
-OPENAI_API_KEY = ""
+OPENAI_API_KEY=""
 UPSTASH_REDIS_REST_URL=""
 UPSTASH_REDIS_REST_TOKEN=""
 NEXT_PUBLIC_APP_URL="http://localhost:3000"

package-lock.json

@@ -18,6 +18,7 @@
  "@radix-ui/react-dialog": "^1.0.3",
  "@radix-ui/react-label": "^2.0.1",
  "@radix-ui/react-select": "^1.2.1",
+ "@t3-oss/env-nextjs": "^0.4.0",
  "@tanstack/react-query": "^4.29.5",
  "@tanstack/react-table": "^8.9.1",
  "@uiw/codemirror-theme-github": "^4.19.16",
@@ -40,7 +41,8 @@
  "react-hotkeys-hook": "^4.4.0",
  "react-resizable-panels": "^0.0.43",
  "react-use-clipboard": "^1.0.9",
- "tailwind-merge": "^1.12.0"
+ "tailwind-merge": "^1.12.0",
+ "zod": "^3.21.4"
  },
  "devDependencies": {
  "@tailwindcss/forms": "^0.5.3",

package.json

@@ -2,10 +2,6 @@ import { ratelimit } from '@/utils/ratelimit';
 import { OpenAIStream, OpenAIStreamPayload } from '@/utils/stream';
 import { NextRequest, NextResponse } from 'next/server';
 
-if (!process.env.OPENAI_API_KEY) {
- throw new Error('Missing env var from OpenAI');
-}
-
 export const runtime = 'edge';
 
 export async function POST(req: NextRequest): Promise<Response> {
@@ -40,7 +36,7 @@ export async function POST(req: NextRequest): Promise<Response> {
 
  --${prompt} 
  
- prefix the response with -- unless it is SQL code
+ prefix the response before and after code with -- unless it is SQL code
  `,
  },
  ],

src/app/api/chat/route.ts

@@ -4,11 +4,12 @@ import '../styles/globals.css';
 import { Inter } from 'next/font/google';
 import { cn } from '@/utils/cn';
 import { Metadata } from 'next';
+import { env } from "@/env.mjs";
 
 const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
- metadataBase: new URL(process.env.NEXT_PUBLIC_APP_URL ?? ''),
+ metadataBase: new URL(env.NEXT_PUBLIC_APP_URL ?? ''),
  title: 'Postgres AI Playground',
  description:
  'Postgres playground where you can connect to your database and use AI to generate SQL queries',

src/app/layout.tsx

@@ -29,6 +29,7 @@ import { PostgreSQL, sql } from '@codemirror/lang-sql';
 import { useTheme } from 'next-themes';
 import { githubDark, githubLight } from '@uiw/codemirror-theme-github';
 import { Spinner } from './shared/spinner';
+import {env} from "@/env.mjs";
 
 type FormValues = {
  prompt: string;
@@ -54,7 +55,7 @@ export const CommandPalette = () => {
  setResponse('');
 
  const response = await fetch(
- `${process.env.NEXT_PUBLIC_APP_URL}/api/chat`,
+ `${env.NEXT_PUBLIC_APP_URL}/api/chat`,
  {
  method: 'POST',
  headers: {

src/components/command-palette.tsx

@@ -0,0 +1,45 @@
+import { z } from 'zod'
+import { createEnv } from '@t3-oss/env-nextjs'
+
+export const env = createEnv({
+ /*
+ * Serverside Environment variables, not available on the client.
+ * Will throw if you access these variables on the client.
+ */
+ server: {
+ NODE_ENV: z.enum(['development', 'test', 'production']),
+
+ OPENAI_API_KEY: z.string().startsWith('sk-'),
+
+ UPSTASH_REDIS_REST_URL: z.string().url(),
+ UPSTASH_REDIS_REST_TOKEN: z.string().min(1),
+ },
+ /*
+ * Environment variables available on the client (and server).
+ *
+ * 💡 You'll get typeerrors if these are not prefixed with NEXT_PUBLIC_.
+ */
+ client: {
+ NEXT_PUBLIC_APP_URL: z.string().url(),
+ },
+ /*
+ * Due to how Next.js bundles environment variables on Edge and Client,
+ * we need to manually destructure them to make sure all are included in bundle.
+ *
+ * 💡 You'll get typeerrors if not all variables from `server` & `client` are included here.
+ */
+ runtimeEnv: {
+ NODE_ENV: process.env.NODE_ENV,
+
+ OPENAI_API_KEY: process.env.OPENAI_API_KEY,
+ UPSTASH_REDIS_REST_URL: process.env.UPSTASH_REDIS_REST_URL,
+ UPSTASH_REDIS_REST_TOKEN: process.env.UPSTASH_REDIS_REST_TOKEN,
+
+ NEXT_PUBLIC_APP_URL: process.env.NEXT_PUBLIC_APP_URL,
+ },
+ /**
+ * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation.
+ * This is especially useful for Docker builds.
+ */
+ skipValidation: !!process.env.SKIP_ENV_VALIDATION,
+})

src/env.mjs

@@ -3,6 +3,7 @@ import {
  ParsedEvent,
  ReconnectInterval,
 } from 'eventsource-parser';
+import { env } from "@/env.mjs";
 
 export type ChatGPTAgent = 'user' | 'system';
 
@@ -32,7 +33,7 @@ export async function OpenAIStream(payload: OpenAIStreamPayload) {
  const res = await fetch('https://api.openai.com/v1/chat/completions', {
  headers: {
  'Content-Type': 'application/json',
- Authorization: `Bearer ${process.env.OPENAI_API_KEY ?? ''}`,
+ Authorization: `Bearer ${env.OPENAI_API_KEY ?? ''}`,
  },
  method: 'POST',
  body: JSON.stringify(payload),