mirror of
https://github.com/CopilotKit/CopilotKit.git
synced 2026-09-14 16:26:20 +08:00
Jordan Ritter
dd06dd89d1
The showcase framework directories better reflect their role as integration examples rather than distributable packages. Renames showcase/packages/ -> showcase/integrations/ and updates the test docker-compose file reference accordingly.
3.3 KiB
3.3 KiB
QA: Voice Input — LangGraph (Python)
Prerequisites
- Demo is deployed and accessible at
/demos/voice - Railway service
showcase-langgraph-pythonis healthy (/api/healthreturns 200) OPENAI_API_KEYis set on the Railway service (shared with other demos)- A modern browser that supports
MediaRecorder(Chromium, Firefox, Safari 14+) - Microphone hardware available (required only for the mic path in section 3)
- A bundled
public/demo-audio/sample.wavsaying "What is the weather in Tokyo?" is present
Test Steps
1. Basic Functionality
- Navigate to
/demos/voice - Verify the page header "Voice input" is visible
- Verify the sample-audio row (
data-testid="voice-sample-audio") is visible - Verify the caption reads
Sample: "What is the weather in Tokyo?" - Verify the "Play sample" button (
data-testid="voice-sample-audio-button") is enabled - Verify
<CopilotChat />renders a message composer (data-testid="copilot-chat-input") - Verify the composer shows a microphone button (
data-testid="copilot-start-transcribe-button") — this is the authoritative signal thattranscriptionServiceis mounted on/api/copilotkit-voice
2. Sample-audio path (no mic permission required)
- Click the "Play sample" button
- Verify the button label flips to "Transcribing…" and the button is disabled
- Within 5 seconds, the chat textarea (
data-testid="copilot-chat-textarea") contains text that includes "weather" (case-insensitive) AND/OR "Tokyo" (case-insensitive) - The button label returns to "Play sample" and the button is re-enabled
- Click send (
data-testid="copilot-send-button") - Within 10 seconds, the agent responds with a weather-related tool render (WeatherCard, custom-catchall card, or default tool card — depending on which tool-rendering mode is active on this page)
3. Mic path (manual)
- Click the microphone button (
data-testid="copilot-start-transcribe-button") in the composer - Grant microphone permission at the browser prompt
- Speak "Hello" clearly, then click the mic button again (now
data-testid="copilot-finish-transcribe-button") to stop recording - Within 5 seconds, the textarea contains text matching "hello" (case-insensitive)
- Click send
- Agent responds within 10 seconds
4. Error Handling
-
In DevTools → Network, block requests to
/demo-audio/sample.wav -
Click "Play sample"
-
Verify the row shows the error state (
data-testid="voice-sample-audio-error") reading "Error — see console" -
Verify no page crash; composer remains interactive
-
Remove the block and click "Play sample" again — verify the button recovers and completes the round-trip
-
Deny microphone permission, click the mic button
-
Verify the UI handles permission denial gracefully (no crash, mic button remains visible)
Expected Results
- Sample-audio transcription completes within 5 seconds for the 3-5s clip
- Weather-related tool response renders within 10 seconds of send
- No console errors during the successful paths
- Error states are visible and recoverable (re-clicking after a block removal should succeed)
- Whisper transcription is stable enough that "weather" OR "Tokyo" keywords appear in the transcribed text across runs