Next.js Discord

Discord Forum

Unable to get env working (secrets)

Answered
Large Münsterländer posted this in #help-forum
Open in Discord
Large MünsterländerOP
I'm building a chatbot, but I haven't decided on an LLM to use, so I was thinking of using dependency injection to be able to swap LLM api's in and out as needed. So far it works, but I am unable to access my api keys in .env.local.

As far as I know, the env variables are only accessible server side, so I assume my code is running client side, which is not what I want. I've looked into server actions, but I don't think I can implement them with classes. Would it be better to fix the current setup, or just make individual server actions for each ai?
Answered by Large Münsterländer
well i figured it out, i misspelled PALMAI_KEY in my .env.local .. it was PLAMAI_KEY :/
View full answer

7 Replies

Large MünsterländerOP
Here's my code so far:
AiApiWrapper.ts
export abstract class AiApiWrapper {
  abstract prompt(messages: string[]): Promise<string>;
}


PalmAiApiWrapper.ts
import { AiApiWrapper } from './AiApiWrapper';
import { DiscussServiceClient } from '@google-ai/generativelanguage';
import { GoogleAuth } from 'google-auth-library';

export class PalmAiApiWrapper extends AiApiWrapper {
  private MODEL_NAME = 'models/chat-bison-001';
  private PALMAI_KEY = process.env.PALMAI_KEY || ''; // does not work at the moment
  private TEMPERATURE = 0.5;
  private CANDIDATE_COUNT = 1;
  private client: DiscussServiceClient;

  constructor() {
    super();
    this.client = new DiscussServiceClient({
      authClient: new GoogleAuth().fromAPIKey(this.PALMAI_KEY),
    });
  }

  async prompt(messages: string[]): Promise<string> {
    const normalized_messages = messages.map((msg) => ({ content: msg }));

    const result = await this.client.generateMessage({
      model: this.MODEL_NAME,
      temperature: this.TEMPERATURE,
      candidateCount: this.CANDIDATE_COUNT,
      prompt: {
        messages: normalized_messages,
      },
    });

    return result?.[0]?.candidates?.[0]?.content ?? 'Error generating message.';
  }
}


page.tsx (where I call the prompt())
import Image from 'next/image';
import styles from 'app/page.module.css';
import Navbar from 'components/landing-page-navbar';

import { PalmAiApiWrapper } from 'app/api/aiApiWrapper/PalmAiApiWrapper';

async function test() {
  const x = new PalmAiApiWrapper();
  const res = await x.prompt(['hi', 'hello!', 'how can i bake a cake?']);
  console.log(res);
}

export default async function Home() {

  await test();

  return (
    <body>
      <div>
        <Navbar />
        <div className={styles.border} />
      </div>
    </body>
  );
}
yoconn
Is your .env.local file in the root directory?
Large MünsterländerOP
yes
Large MünsterländerOP
uh who ever said next_public_ i have tried that but it doesnt work also wouldn't that make my keys public to the client?
@Large Münsterländer uh who ever said `next_public_` i have tried that but it doesnt work also wouldn't that make my keys public to the client?
Plott Hound
Yes I had misunderstood your op so deleted my message. I thought you needed to access env keys in your client. Mb
Large MünsterländerOP
hm im able to access env from my page.tsx but not in my other ts file
Large MünsterländerOP
well i figured it out, i misspelled PALMAI_KEY in my .env.local .. it was PLAMAI_KEY :/
Answer