> ## Documentation Index
> Fetch the complete documentation index at: https://docs.inworld.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Language Learning App

This template project demonstrates how to use the Inworld Agent Runtime in a [full-stack Node.js app](https://github.com/inworld-ai/language-learning-node).

Using the app, a person learning Spanish can have natural, realtime conversations with a fluent Spanish speaker who will gently correct their mistakes. Meanwhile, throughout the conversation flashcards are generates for relevant vocabulary words. These flashcards can then be exported to an Anki deck for further spaced-repetition study.

Key concepts demonstrated:

* Voice Activity Detection (VAD) - for parsing speech activity out of open mic audio
* Speech-to-text (STT) - for understanding speech inputs
* Jinja prompt templating - for passing app state into formatted context and instructions for an LLM
* LLM - for generating the agent text response
* Text-to-speech (TTS) - for generating agent speech audio

<Note>
  **Architecture**

  * **Backend:** Inworld Agent Runtime + Express.js
  * **Frontend:** Vanilla HTML/CSS/JavaScript
  * **Communication:** WebSocket
</Note>

## Understanding the Template

Depending on your learning style, you may want to:

* Watch the [tutorial videos](https://www.youtube.com/playlist?list=PLs_RyYO6XhFvYZO7Y-_0f3_uAhNLpvIBK) walking through how the functionality is implemented using the Inworld Agent Runtime
* Clone the [open-source GitHub repo](https://github.com/inworld-ai/language-learning-node) to investigate the full code context (or add new features!)

### App Design and Inworld Basics

<Card>
  <iframe style={{ aspectRatio: '16 / 9', width: '100%', height: 'auto' }} src="https://www.youtube.com/embed/D58lVf55duI?si=3UDqz5izveSgd2VC" title="Inworld Agent Runtime Language Learning App" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />
</Card>

### Prompting and LLM Calls

<Card>
  <iframe width="100%" height="420" src="https://www.youtube.com/embed/oQRup185H3U?si=TTJmUudJfkLFMMHC" title="Inworld Agent Runtime Language Learning App" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />
</Card>

### Text-to-Speech

<Card>
  <iframe width="100%" height="420" src="https://www.youtube.com/embed/PDUkzS25K8E?si=fbjWNhucEOKDMPhf" title="Inworld Agent Runtime Language Learning App" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />
</Card>

### Jinja Templating for LLM Prompting

<Card>
  <iframe width="100%" height="420" src="https://www.youtube.com/embed/kSquGYoFGlY?si=9TrmilNYWMJRswil" title="Inworld Agent Runtime Language Learning App" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />
</Card>

### Adding a Second Graph for Flashcard Generation

<Card>
  <iframe width="100%" height="420" src="https://www.youtube.com/embed/1FKBJ8A4FYM?si=7y2D6-Ti7v7cD8bJ" title="Inworld Agent Runtime Language Learning App" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />
</Card>
