shopify-voice-shopper - GitLite

KO | EN

gitlite — search

#cross-platform #chatgpt #typescript #open-source #nodejs #svg #html #json #codex #self-hosted

shopify-voice-shopper

(★ 19)

No description available.

파일 탐색기

ZIP 다운로드

- - favicon.ico
  - globals.css
  - layout.tsx
  - page.tsx
- - CloseIcon.tsx
  - NoAgentNotification.tsx
  - TranscriptionView.tsx
- - background.js
  - icon.png
  - manifest.json
  - package-lock.json
  - popup.html
  - popup.js
- - useCombinedTranscriptions.ts
  - useLocalMicTrack.ts
- .env.example
- .eslintrc.json
- .gitignore
- .prettierignore
- .prettierrc
- manifest.json
- next.config.mjs
- package-lock.json
- package.json
- pnpm-lock.yaml
- postcss.config.mjs
- README.md
- tailwind.config.ts
- tsconfig.json
.gitignore
README.md
requirements.txt
shopify.py

# CDN으로 사용하기

jsDelivr

jsDelivr는 공개 GitHub 리포지토리를 별도 설정 없이 CDN으로 즉시 서빙합니다. 버전과 파일을 고르면 웹페이지에 바로 붙일 수 있는 링크와 예시 코드가 만들어집니다.

버전

파일

링크

예시

명령어 용어집

이 문서에서 사용된 명령어를 모아봤습니다. 낯선 명령어가 있다면 펼쳐서 확인해보세요.

🔍

`pip install`

설명 보기 ▼

Install Python packages.

pip install {{package1 package2 ...}}

Install one or more packages:

pip install {{package1 package2 ...}} {{[-U|--upgrade]}}

Upgrade all specified packages to the latest version, installing any that are not already present:

pip install {{package}}=={{version}}

Install a specific version of a package:

🔍

`pnpm`

설명 보기 ▼

빠르고, 디스크 공간 효율적인 Node.js용 패키지 관리자.
Node.js 프로젝트 및 해당 모듈 의존성 관리.
더 많은 정보: <https://pnpm.io/pnpm-cli>.

pnpm init

`package.json` 파일 생성:

pnpm {{[i|install]}}

`package.json`에 의존성으로 나열된 모든 패키지를 다운로드:

pnpm add {{module_name}}@{{version}}

특정 버전의 패키지를 다운로드하여 `package.json`의 의존성 목록에 추가:

🔍

`python`

설명 보기 ▼

Python 언어 인터프리터.
더 많은 정보: <https://docs.python.org/using/cmdline.html>.

python

REPL(대화형 셸) 시작:

python {{path/to/file.py}}

특정 Python 파일 실행:

python -i {{path/to/file.py}}

특정 Python 파일 실행 후 REPL 시작:

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![]()<p align="center">
  <img width="500" alt="Screenshot 2025-05-28 at 6 17 57 PM" src="https://github.com/user-attachments/assets/f611bda6-8c64-47df-a5bd-b42fb4266443" />
</p>

Shopify Voice Shopper is a demo project that combines a [LiveKit](https://livekit.io/) voice agent with a small Next.js frontend. The Python agent (`shopify.py`) connects to Shopify stores through the public MCP endpoint on every shop using the Agent MCP client and responds to users via voice. The `shopify-voice-frontend` directory contains a web UI and Chrome extension for talking with the agent.

## Repository layout

```
├── shopify.py                # LiveKit agent that talks to Shopify via MCP
├── shopify-voice-frontend/   # Next.js frontend and browser extension
└── requirements.txt          # Python dependencies
```

## How it works

1. **Python Agent (`shopify.py`)**
   - Implements a `LiveKit Agent` that can search and switch Shopify stores using MCP.
   - Supports functions for sending URLs back to the browser and for switching the active shop.
   - Uses Deepgram for speech‑to‑text, Cartesia for text‑to‑speech, and OpenAI for LLM responses.
   - The agent starts a LiveKit room and communicates with the frontend via RPC calls.

2. **Frontend (`shopify-voice-frontend`)**
   - A Next.js application that renders the chat UI and handles transcription display.
   - Also includes a Chrome extension (`extension/`) which opens the UI in a side panel and forwards navigation requests from the agent.
   - `app/api/connection-details/route.ts` generates LiveKit connection tokens for the browser client. Shouldn't need to touch this!

The agent sends `client.navigate` RPC messages with URLs. The frontend receives these and forwards them to the extension, which then opens the page in the user’s browser.

## Setup

### Requirements

- Python 3.10+
- Node.js and `pnpm`

### Python agent

1. Install dependencies
   ```bash
   python -m venv .venv
   source .venv/bin/activate
   pip install -r requirements.txt
   ```
   The `livekit-agents` dependency is installed from the latest `main` branch
   on GitHub rather than PyPI.
2. Configure environment variables
   - `SHOPIFY_MCP_URL` – URL of the Shopify MCP server for your store.
   - `LIVEKIT_URL`, `LIVEKIT_API_KEY`, `LIVEKIT_API_SECRET` – credentials for your LiveKit project.
   - Any additional keys required by the plugins (OpenAI, Deepgram, etc.).
3. Run the agent
   ```bash
   python shopify.py dev
   ```

### Frontend & Chrome extension

1. Copy `.env.example` to `.env.local` inside `shopify-voice-frontend` and fill in your LiveKit credentials.
2. Install dependencies and start the dev server
   ```bash
   cd shopify-voice-frontend
   pnpm install
   pnpm dev
   ```
   Open <http://localhost:3000> to view the UI.
3. To use the Chrome extension, load `shopify-voice-frontend/extension` as an unpacked extension in Chrome. The extension expects the Next.js app to be running at `http://localhost:3000`.

For production you can run `pnpm build` which exports the site to `out/`. Update the extension’s `popup.html` to point to your hosted files or packaged assets.

## Usage

Start the Python agent and open the web UI (or Chrome extension). Press **Start conversation** to connect. The agent will speak responses, display transcriptions, and can navigate your browser to product pages via voice commands. The shop context that it will start with is Snow Devil (naturally) but you can ask it to change to any other shopify URL and it will let you shop there instead!

## License

This project is provided as a demonstration of LiveKit Agents + Shopify MCP and is offered under the MIT license.