\n
\n
![\"Creating](\"https:\/\/image.blockchain.news:443\/features\/FCAF30107F93017A469BDB76DCCE7D957DFC034943E2204CF5967AAF05B60663.jpg\")
\n
\n <\/a>
\n <\/figure>\n
In a recent tutorial, developers can now learn to build a sophisticated video conferencing app using Next.js, Stream, and AssemblyAI, according to AssemblyAI<\/a>. This app supports video calls, live transcriptions, and an AI-powered meeting assistant, integrating modern technologies to enhance user experience.<\/p>\n The tutorial walks through the creation of a video conferencing app leveraging Next.js for the front-end, Stream Video SDK for video call functionality, and AssemblyAI for real-time transcriptions and language model (LLM) powered interactions. By the end of the tutorial, users will have a functional app capable of handling multiple participants, providing live transcriptions, and integrating an AI assistant to answer questions during calls.<\/p>\n The tutorial provides a starter template for a Next.js project that includes the setup for the Stream React SDK. Users are guided to clone the starter project from GitHub, configure environment variables with API keys from Stream and AssemblyAI, and install project dependencies using npm or yarn. Once set up, the app can be run locally, enabling users to start video calls and test the app\u2019s features.<\/p>\n The app’s architecture is meticulously explained, detailing the folder structure and key files such as For real-time transcription, the tutorial employs the AssemblyAI Node SDK. Users are guided to create a microphone recorder to capture audio data, which is then transcribed in real-time using AssemblyAI\u2019s Streaming Speech-to-Text service. The setup involves creating helper functions to manage audio data and integrating these functionalities into the app.<\/p>\n The AI assistant, powered by AssemblyAI\u2019s LeMUR, is designed to respond to user queries during video calls. The tutorial describes setting up a Next.js route to handle API calls to LeMUR, processing user prompts, and integrating the assistant into the app. A trigger word mechanism is implemented to activate the AI assistant, which then processes the user\u2019s query and provides responses in real-time.<\/p>\n The final steps involve integrating the transcription and AI assistant functionalities into the app\u2019s UI. The tutorial provides detailed instructions on adding UI elements to display live transcriptions and AI responses. Users are shown how to create state properties to manage transcribed text and AI responses, and how to initialize and manage the transcription and AI services through the UI.<\/p>\n By following this comprehensive tutorial, developers can build a powerful video conferencing app with advanced features like live transcriptions and AI-powered assistance. The app is ready for deployment, enabling other users to join meetings and utilize its functionalities. For more details, refer to the full tutorial on AssemblyAI<\/a>.<\/p>\nProject Overview<\/h2>\n
Setting Up the Project<\/h2>\n
App Architecture<\/h2>\n
app\/page.tsx<\/code>, app\/api\/token\/route.tsx<\/code>, and various components handling the UI and state management. The video call functionality is implemented using the Stream React Video SDK, which ensures low latency and high reliability through Stream\u2019s global edge network.<\/p>\nReal-Time Transcriptions<\/h2>\n
Implementing the AI Assistant<\/h2>\n
UI Integration<\/h2>\n
Conclusion<\/h2>\n