Files
humanlayer/examples/ts_vercel_ai_nextjs
dexhorthy 021149207b docs and examples updates for vercel, chainlit, and more
- Add [quickstart guide for using the humanlayer typescript sdk](https://humanlayer.dev/docs/quickstart-typescript)
- Add [guide for using Function Calls for Classification](https://humanlayer.dev/docs/core/classifications) with human-in-the-loop
- Add [framework guide for using humanlayer with chainlit](https://humanlayer.dev/docs/frameworks/chainlit)
- Add [framework guide for using humanlayer with the vercel ai sdk](https://humanlayer.dev/docs/frameworks/vercel-ai-sdk)
- Update [humanlayer-ts readme](https://github.com/humanlayer/humanlayer-ts) to include quickstart guide

- Add [example of a fullstack chat app with nextjs and the vercel ai sdk](https://github.com/humanlayer/humanlayer/tree/main/examples/vercel_ai_nextjs)
- Simplify the [chainlit example](https://github.com/humanlayer/humanlayer/tree/main/examples/chainlit) by using `AsyncHumanLayer`
- Update [langchain email example](https://github.com/humanlayer/humanlayer/tree/main/examples/langchain/09-email-contact.py) to showcase the use of custom jinja templates for email payloads
2025-02-20 17:08:43 -08:00
..

HumanLayer Next.js Chat Example

This example shows how to use HumanLayer with the Vercel AI SDK in a Next.js application to create a chat interface with human oversight.

Features

  • Real-time streaming responses
  • Human approval for sensitive operations
  • Support team consultation
  • Subscription management
  • Credit issuance

Getting Started

  1. Install dependencies:
npm install
  1. Configure environment variables:
cp .env.local.example .env.local

Then edit .env.local with your API keys:

  • OPENAI_API_KEY: Your OpenAI API key
  • HUMANLAYER_API_KEY: Your HumanLayer API key
  1. Run the development server:
npm run dev
  1. Open http://localhost:3000 in your browser.

How It Works

  • The chat interface uses the Vercel AI SDK's useChat hook for streaming responses
  • Sensitive operations (subscription updates, credit issuance) require human approval
  • Support team can be consulted through the askSupport tool
  • All human interactions are managed through HumanLayer's contact channels

Learn More