Skip to content

Commit 0d5638c

Browse files
committed
👌 IMPROVE: lingo
1 parent 09ef3ee commit 0d5638c

File tree

1 file changed

+40
-21
lines changed

1 file changed

+40
-21
lines changed

‎apps/baseai.dev/content/docs/guides/nextjs-with-baseai.mdx

Lines changed: 40 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ This guide covers building AI features in a Next.js app using BaseAI, focusing o
1919

2020
## Next.js with BaseAI Example
2121

22-
We also have pre-built a Next.js app with BaseAI for you to get started quickly. You can refer to the following resources to understand how to build a Next.js app with BaseAI.
22+
We also have pre-built a Next.js app with BaseAI for you to get started quickly. You can refer to the following resources to understand how to build a Next.js app with BaseAI.
2323

2424
- [Next.js with BaseAI](https://github.com/LangbaseInc/baseai/tree/main/examples/nextjs)
2525
- [Example of using BaseAI](https://github.com/LangbaseInc/baseai/tree/main/examples/nextjs/app/demo)
@@ -37,7 +37,7 @@ We also have pre-built a Next.js app with BaseAI for you to get started quickly.
3737
- [React Component](https://github.com/LangbaseInc/baseai/blob/main/examples/nextjs/components/pipe-stream.tsx)
3838
- [API Route Handler](https://github.com/LangbaseInc/baseai/blob/main/examples/nextjs/app/api/langbase/pipes/run-stream/route.ts)
3939

40-
### `usePipe()`: Chat
40+
### `usePipe()`: Chat
4141

4242
- [React Component](https://github.com/LangbaseInc/baseai/blob/main/examples/nextjs/components/chat-simple.tsx)
4343
- [API Route Handler](https://github.com/LangbaseInc/baseai/blob/main/examples/nextjs/app/api/langbase/pipes/run-stream/route.ts)
@@ -93,7 +93,7 @@ Create a new pipe using the `pipe` command. Use `summary` as the pipe name and f
9393
npx baseai@latest pipe
9494
```
9595

96-
It creates a pipe at `baseai/pipes/summary.ts` in your current directory.
96+
It creates a pipe at `baseai/pipes/summary.ts` in your current directory.
9797

9898
---
9999

@@ -138,7 +138,7 @@ export async function POST(req: NextRequest) {
138138

139139
Add following to your Next.js app to run the pipe.
140140

141-
- Pipe run **page** at `app/pipe-run/page.tsx`
141+
- Pipe run **page** at `app/pipe-run/page.tsx`
142142
- Pipe run **component** at `components/pipe-run.tsx` — This component will run the pipe.
143143
- UI **Button** component at `components/ui/button.tsx`
144144
- UI **Input** component at `components/ui/input.tsx`
@@ -333,7 +333,39 @@ Refer to [Next.js with BaseAI](https://github.com/LangbaseInc/baseai/tree/main/e
333333

334334
---
335335

336-
## Step #7: Run the Next.js BaseAI App
336+
## Step #9: Add environment variables
337+
338+
To be able to run and later deploy your Next.js app, you need to add providers and Langbase API keys.
339+
340+
```bash
341+
# !! SERVER SIDE ONLY !!
342+
# Keep all your API keys secret — use only on the server side.
343+
344+
# TODO: ADD: Both in your production and local env files.
345+
# Langbase API key for your User or Org account.
346+
# How to get this API key https://langbase.com/docs/api-reference/api-keys
347+
LANGBASE_API_KEY=
348+
349+
# TODO: ADD: LOCAL ONLY. Add only to local env files.
350+
# Following keys are needed for local pipe runs. For providers you are using.
351+
# For Langbase, please add the key to your LLM keysets.
352+
# Read more: Langbase LLM Keysets https://langbase.com/docs/features/keysets
353+
OPENAI_API_KEY=
354+
ANTHROPIC_API_KEY=
355+
COHERE_API_KEY=
356+
FIREWORKS_API_KEY=
357+
GOOGLE_API_KEY=
358+
GROQ_API_KEY=
359+
MISTRAL_API_KEY=
360+
PERPLEXITY_API_KEY=
361+
TOGETHER_API_KEY=
362+
```
363+
364+
`LANGBASE_API_KEY` is the user or org API key that you authenticated with. You can obtain your [User/Org API Key](https://langbase.com/docs/api-reference/api-keys) from the Langbase dashboard.
365+
366+
---
367+
368+
## Step #8: Run the Next.js BaseAI App
337369

338370
Run BaseAI dev server and start the Next.js app.
339371

@@ -348,33 +380,20 @@ Write a prompt message and click on the `Ask AI` button to generate the completi
348380

349381
---
350382

351-
## Step #8: Deploy BaseAI project on Langbase
383+
## Step #9: Deploy BaseAI project on Langbase
352384

353385
To deploy the project on Langbase, you need to authenticate with your Langbase account.
354386

355387
```bash
356388
npx baseai@latest auth
357389
```
358390

359-
After authentication, you can deploy the project using the following command.
391+
After authentication, you can deploy the project using the following command. When you deploy, you need to add keys for providers like OpenAI, Google, etc., in [Langbase Keysets](https://langbase.com/docs/features/keysets).
360392

361393
```bash
362394
npx baseai@latest deploy
363395
```
364396

365-
This will deploy your project on Langbase and you can access it as a highly scalable API. Check the [BaseAI `deploy` documentation](https://baseai.dev/docs/deployment/deploy) for more details.
397+
This will deploy your project on Langbase and you can access it as a serverless highly scalable API. Check the [BaseAI `deploy` documentation](https://baseai.dev/docs/deployment/deploy) for more details.
366398

367399
---
368-
369-
## Step #9: Deploy Next.js app
370-
371-
Deploy your Next.js app using Vercel or any other hosting provider and set the following environment variables.
372-
373-
```bash
374-
OPENAI_API_KEY="" #your_openai_api_key
375-
LANGBASE_API_KEY="" #your_langbase_api_key
376-
```
377-
378-
Langbase API key is the user or org API key that you authenticated with. You can obtain your [User/Org API Key](https://langbase.com/docs/api-reference/api-keys) from the Langbase dashboard.
379-
380-
---

0 commit comments

Comments
 (0)