langgraph-voice-call-agent-web

# LangGraph Voice Call Agent Web

A real-time voice/call AI agent UI that lets you talk to a LangGraph agent over LiveKit — similar to "voice mode" experiences in Gemini Voice, OpenAI Realtime API sessions, and Gemini Live. This repo demonstrates adapting a LangGraph agent into a full-duplex, low-latency voice assistant using LiveKit's real-time communication infrastructure.

This frontend provides a seamless interface for both text chat and voice calls with your LangGraph agent, built with Next.js and LiveKit's real-time communication platform.


### Features

- Real-time voice interaction with LangGraph agents
- Audio visualization and level monitoring
- Light/dark theme switching with system preference detection
- Customizable branding, colors, and UI text via configuration

This application is built with Next.js and LiveKit's real-time communication platform, providing a production-ready interface for your LangGraph voice agent.

### Project structure

```
langgraph-voice-call-agent-web/
├── app/
│   ├── (app)/
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── api/
│   │   └── connection-details/
│   │       └── route.ts
│   ├── globals.css
│   └── layout.tsx
├── components/
│   ├── livekit/
│   │   ├── agent-control-bar/
│   │   │   ├── agent-control-bar.tsx
│   │   │   └── hooks/
│   │   │       ├── use-agent-control-bar.ts
│   │   │       └── use-publish-permissions.ts
│   │   ├── agent-tile.tsx
│   │   ├── avatar-tile.tsx
│   │   ├── chat/
│   │   │   ├── chat-entry.tsx
│   │   │   └── chat-message-view.tsx
│   │   ├── device-select.tsx
│   │   ├── media-tiles.tsx
│   │   ├── track-toggle.tsx
│   │   └── video-tile.tsx
│   ├── app.tsx
│   ├── provider.tsx
│   ├── session-view.tsx
│   ├── theme-toggle.tsx
│   └── welcome.tsx
├── hooks/
│   ├── useChatAndTranscription.ts
│   ├── useConnectionDetails.ts
│   ├── useDebug.ts
│   └── useLangGraphChat.ts
├── lib/
│   ├── types.ts
│   └── utils.ts
├── public/
└── package.json
```

## Getting started

This applica