Skip to content

docs: clarify local setup instructions #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
xeseing wants to merge 1 commit into
base: main
Choose a base branch
from
Open

docs: clarify local setup instructions #4

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 25 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,22 @@

## Running locally

You will need to populate the two evironment variables shown in `.env.example`. Copy this file to a file called `.env`. You can retrieve you OpenAI API key [here](https://platform.openai.com/account/api-keys) and your Humanloop API key [here](https://app.humanloop.com/account/api-keys).
You will need to populate the two environment variables shown in `.env.example`. You can retrieve your OpenAI API key [here](https://platform.openai.com/account/api-keys) and your Humanloop API key [here](https://app.humanloop.com/account/api-keys).

To run the application locally, simply run:
Copy `.env.example` to a new `.env` file:

```bash
cp .env.example .env
```

Then update `.env` with your API keys:

```bash
OPENAI_API_KEY=your-openai-api-key
HUMANLOOP_API_KEY=your-humanloop-api-key
```

To run the application locally:

```bash
npm install
Expand All @@ -41,6 +54,15 @@ npm run dev

Your app template should now be running on [localhost:3000](http://localhost:3000/).

### Troubleshooting

If the app starts but the chat does not respond, check that:

- `.env.example` has been copied to `.env`
- Both `OPENAI_API_KEY` and `HUMANLOOP_API_KEY` are set
- The development server was restarted after editing `.env`
- Your OpenAI account has billing enabled

## Preview

The chat interface powered by Next.js looks something like this:
Expand All @@ -55,7 +77,7 @@ Meanwhile, in your Humanloop project, you can explore the generated logs from th

In `app/api/chat/route.ts`, LLM chat calls are made via Humanloop's TypeScript SDK. Note that this file is an example of a Next.js [Route Handler](https://nextjs.org/docs/app/building-your-application/routing/route-handlers). This means it will run server-side, and therefore does not expose your OpenAI and Humanloop API keys to the client. This backend Route Handler is called from `components/chat.tsx` with the Vercel SDK's `useChat` hook.

After sending and receiving some chat messages in your app, visit the [Humanloop app](https://app.humnaloop.com), and you will see a project called `sdk-example`. Visit the `Logs` tab and you will find all the chat histories from your running application.
After sending and receiving some chat messages in your app, visit the [Humanloop app](https://app.humanloop.com), and you will see a project called `sdk-example`. Visit the `Logs` tab and you will find all the chat histories from your running application.

## Deploy Your Own

Expand Down