diff --git a/apps/baseai.dev/content/docs/guides/nextjs-with-baseai.mdx b/apps/baseai.dev/content/docs/guides/nextjs-with-baseai.mdx index 6c23234..066c1d8 100644 --- a/apps/baseai.dev/content/docs/guides/nextjs-with-baseai.mdx +++ b/apps/baseai.dev/content/docs/guides/nextjs-with-baseai.mdx @@ -19,7 +19,7 @@ This guide covers building AI features in a Next.js app using BaseAI, focusing o ## Next.js with BaseAI Example -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. +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. - [Next.js with BaseAI](https://github.com/LangbaseInc/baseai/tree/main/examples/nextjs) - [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. - [React Component](https://github.com/LangbaseInc/baseai/blob/main/examples/nextjs/components/pipe-stream.tsx) - [API Route Handler](https://github.com/LangbaseInc/baseai/blob/main/examples/nextjs/app/api/langbase/pipes/run-stream/route.ts) -### `usePipe()`: Chat +### `usePipe()`: Chat - [React Component](https://github.com/LangbaseInc/baseai/blob/main/examples/nextjs/components/chat-simple.tsx) - [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 npx baseai@latest pipe ``` -It creates a pipe at `baseai/pipes/summary.ts` in your current directory. +It creates a pipe at `baseai/pipes/summary.ts` in your current directory. --- @@ -138,7 +138,7 @@ export async function POST(req: NextRequest) { Add following to your Next.js app to run the pipe. -- Pipe run **page** at `app/pipe-run/page.tsx` +- Pipe run **page** at `app/pipe-run/page.tsx` - Pipe run **component** at `components/pipe-run.tsx` — This component will run the pipe. - UI **Button** component at `components/ui/button.tsx` - 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 --- -## Step #7: Run the Next.js BaseAI App +## Step #9: Add environment variables + +To be able to run and later deploy your Next.js app, you need to add providers and Langbase API keys. + +```bash +# !! SERVER SIDE ONLY !! +# Keep all your API keys secret — use only on the server side. + +# TODO: ADD: Both in your production and local env files. +# Langbase API key for your User or Org account. +# How to get this API key https://langbase.com/docs/api-reference/api-keys +LANGBASE_API_KEY= + +# TODO: ADD: LOCAL ONLY. Add only to local env files. +# Following keys are needed for local pipe runs. For providers you are using. +# For Langbase, please add the key to your LLM keysets. +# Read more: Langbase LLM Keysets https://langbase.com/docs/features/keysets +OPENAI_API_KEY= +ANTHROPIC_API_KEY= +COHERE_API_KEY= +FIREWORKS_API_KEY= +GOOGLE_API_KEY= +GROQ_API_KEY= +MISTRAL_API_KEY= +PERPLEXITY_API_KEY= +TOGETHER_API_KEY= +``` + +`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. + +--- + +## Step #8: Run the Next.js BaseAI App Run BaseAI dev server and start the Next.js app. @@ -348,7 +380,7 @@ Write a prompt message and click on the `Ask AI` button to generate the completi --- -## Step #8: Deploy BaseAI project on Langbase +## Step #9: Deploy BaseAI project on Langbase To deploy the project on Langbase, you need to authenticate with your Langbase account. @@ -356,25 +388,12 @@ To deploy the project on Langbase, you need to authenticate with your Langbase a npx baseai@latest auth ``` -After authentication, you can deploy the project using the following command. +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). ```bash npx baseai@latest deploy ``` -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. +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. --- - -## Step #9: Deploy Next.js app - -Deploy your Next.js app using Vercel or any other hosting provider and set the following environment variables. - -```bash -OPENAI_API_KEY="" #your_openai_api_key -LANGBASE_API_KEY="" #your_langbase_api_key -``` - -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. - ---- \ No newline at end of file