Audio input | CopilotKit | Page 1

summer sand Jun 17, 2025, 12:49 PM

#

Does copilot has UI for audio input or how to activate audio input in pop up , sidebar other chat components

dark lotusBOT Jun 18, 2025, 2:56 PM

#

Let me check this with the team.

#

@summer sand Please check these properties we have in the CopilotKit component.

https://docs.copilotkit.ai/reference/components/CopilotKit#properties

Am not able to find any recent examples to share, but you can check these

CopilotKit

The CopilotKit provider component, wrapping your application.

summer sand Jun 18, 2025, 4:11 PM

#

I set these properties for copilotkit and I have mic option in UI now
transcribeAudioUrl=""
textToSpeechUrl=""

summer sand Jun 18, 2025, 5:24 PM

#

Here is my code

<CopilotKit
runtimeUrl="/api/copilotkit"
agent="agent" // the name of the agent you want to use
transcribeAudioUrl="https://api.elevenlabs.io/v1/speech-to-text"
textToSpeechUrl="https://api.elevenlabs.io/v1/text-to-speech/"
headers={{
"xi-api-key": process.env.ELEVENLABS_API_KEY!,
"Accept": "audio/mpeg",
"Content-Type": "application/json"
}}

      {children}
    </CopilotKit>

#

but still I get error
{
"detail": [
{
"type": "missing",
"loc": [
"body",
"model_id"
],
"msg": "Field required",
"input": null
}
]
}

summer sand Jun 19, 2025, 7:24 AM

#

My transcription is working now but I have problem in tts

My code is like this

<CopilotKit
runtimeUrl="/api/copilotkit"
agent="agent" // the name of the agent you want to use
transcribeAudioUrl="/api/transcribe"
textToSpeechUrl="/api/tts"
>
{children}
</CopilotKit>

#

transcribe code

import { NextRequest, NextResponse } from "next/server";

export async function POST(req: NextRequest) {
try {
// Parse the incoming form data
const formData = await req.formData();
const file = formData.get("file") as File;

if (!file) {
  return NextResponse.json({ error: "File not provided" }, { status: 400 });
}

// Prepare form data for ElevenLabs
const elevenFormData = new FormData();
elevenFormData.append("model_id", "scribe_v1"); // Use the correct model_id for ElevenLabs
elevenFormData.append("file", file, file.name);

// Optional: add more fields if needed
// elevenFormData.append("tag_audio_events", "true");
// elevenFormData.append("language_code", "eng");
// elevenFormData.append("diarize", "true");

// Send to ElevenLabs
const elevenResponse = await fetch("https://api.elevenlabs.io/v1/speech-to-text", {
  method: "POST",
  headers: {
    "xi-api-key": process.env.ELEVENLABS_API_KEY!,
    // Do NOT set Content-Type; fetch will set the correct boundary for FormData
  },
  body: elevenFormData,
});

const result = await elevenResponse.json();

return NextResponse.json(result, { status: elevenResponse.status });

} catch (error: any) {
return NextResponse.json({ error: error.message }, { status: 500 });
}
}

#

tts code

import { NextRequest, NextResponse } from "next/server";

export async function POST(req: NextRequest) {
try {
console.log("[TTS] Received request");

// Parse the incoming JSON body
const { text } = await req.json();
console.log("[TTS] Request body:", { text });

if (!text) {
  console.error("[TTS] Text parameter is missing");
  return NextResponse.json({ error: "Text parameter is missing" }, { status: 400 });
}

// Prepare the ElevenLabs TTS request
const ttsUrl = "https://api.elevenlabs.io/v1/text-to-speech/JBFqnCBsd6RMkjVDRZzb";
const ttsHeaders = {
  "xi-api-key": process.env.ELEVENLABS_API_KEY!,
  "Content-Type": "application/json",
  "Accept": "audio/mpeg",
};
const ttsBody = JSON.stringify({
  text,
  model_id: "eleven_multilingual_v2",
  voice_settings: {
    stability: 0.5,
    similarity_boost: 0.5,
  },
});

console.log("[TTS] Sending request to ElevenLabs:", { ttsUrl, ttsHeaders, ttsBody });

const elevenResponse = await fetch(ttsUrl, {
  method: "POST",
  headers: ttsHeaders,
  body: ttsBody,
});

console.log("[TTS] ElevenLabs response status:", elevenResponse.status);

if (!elevenResponse.ok) {
  const error = await elevenResponse.text();
  console.error("[TTS] ElevenLabs error:", error);
  return NextResponse.json({ error }, { status: elevenResponse.status });
}

const audioBuffer = await elevenResponse.arrayBuffer();
console.log("[TTS] Audio buffer length:", audioBuffer.byteLength);

return new NextResponse(audioBuffer, {
  status: 200,
  headers: {
    "Content-Type": "audio/mpeg",
  },
});

} catch (error: any) {
console.error("[TTS] Exception:", error);
return NextResponse.json({ error: error.message }, { status: 500 });
}
}

#

I am getting this error

#

I solved this issue . The issue was that I was making get request for post tts function

#Audio input