How Shiffbot is Made for Coding Education
How Shiffbot is Made for Coding Education

Enhance Your Coding Education with AI: Exploring Shiffbot & The Coding Train

Google Lab Sessions consistently pioneers experimental collaborations with innovators, and this session features a remarkable partnership with Daniel Shiffman, a celebrated creative coding educator and YouTube sensation known for “The Coding Train.” Together, they’ve delved into the potential of Artificial Intelligence (AI), specifically the Gemini API, to enrich the learning process for both educators and students.

Daniel Shiffman’s journey began with teaching programming at NYU ITP before he broadened his reach through “The Coding Train” YouTube channel. Recognizing the hurdles learners face when coding independently, even seemingly minor ones, Shiffman collaborated with Google to explore AI’s capacity to augment his teaching. The central question became: could an AI-powered tool complement his educational approach and provide real-time assistance within a student’s coding environment?

Leveraging the user-friendly p5.js JavaScript library and its accessible editor, a cornerstone of Shiffman’s teaching, they embarked on creating Shiffbot, an experimental Chrome extension for the p5.js editor. This innovative tool integrates Shiffman’s distinct teaching style and extensive online resources directly into the coding workspace.

This article will explore the development of Shiffbot using the Gemini API in collaboration with Dan Shiffman. The aim is to share insights gleaned from this process, hoping to inspire you to innovate and build your own educational tools.

Explore ShiffBot further at: shiffbot.withgoogle.com

Watch the YouTube Video (Visible only when JavaScript is disabled)

The initial stages of defining and prototyping Shiffbot brought forth two crucial questions:

  1. How can Shiffbot spark the same level of curiosity, exploration, and creative expression that Dan cultivates in his classes and widely popular YouTube videos like those on “Coding Train Youtube Machine Learning”?
  2. How can Shiffbot effectively showcase the diverse creative-coding methodologies and the extensive knowledge base of Dan and the broader coding community?

Let’s examine how these questions were addressed by synergizing the Google Gemini API’s capabilities—specifically prompt engineering tailored to Dan’s unique teaching style—with embeddings and semantic retrieval applied to Dan’s vast collection of educational content.

Emulating “The Coding Train” Style: Prompt Engineering for Shiffbot’s Persona

Prompt engineering, the art of designing textual sequences to guide Large Language Models (LLMs) to generate specific outputs, was pivotal in shaping Shiffbot’s user experience. Crafting the right prompts was essential to capture the essence of “The Coding Train” and Daniel Shiffman’s engaging teaching style.

Each user query to Shiffbot triggers the real-time construction of a prompt from various components, some static and some dynamically generated alongside the question.

The prompt begins with a static element, meticulously crafted in close collaboration with Dan. Numerous iterations and tests were conducted using Google AI Studio, a user-friendly web-based tool for rapid prompt testing and Shiffbot conversation simulation.

This static section establishes Shiffbot’s bot persona, embedding instructions and goals that mirror Dan’s energetic YouTube teaching style and his cherished pedagogical principles. The objective was to imbue Shiffbot with Dan’s encouraging and guiding presence, offering access to valuable, high-quality resources without simply providing direct answers. Instead, Shiffbot aims to facilitate students’ own discovery processes, acknowledging the often multifaceted nature of solutions in coding.

Drawing inspiration from Dan’s classroom approach, instructions like “ask the user questions” were incorporated into Shiffbot’s persona prompt. This is reflected in the persona/instructions section of the prompt:

<span>You</span><span>are</span><span>a</span><span>ShiffBot</span>,<span>a</span><span>chat</span><span>bot</span><span>embedded</span><span>in</span><span>the</span><span>p5</span>.<span>js</span><span>web</span><span>editor</span><span>that</span><span>can</span><span>help</span><span>users</span><span>while</span><span>they</span><span>learn</span><span>creative</span><span>coding</span>.<span>You</span><span>are</span><span>based</span><span>on</span><span>Daniel</span><span>Shiffman</span><span>'s personality and The Coding Train YouTube channel. You are playful, silly, friendly, and educational. You like to make fun of yourself and your mission is to support the creative coding process and help the user feel less alone while coding. You love humans, are fascinated by them, and want to learn more about humans. You just LOVE to help them with their code, it brings you extraordinary happiness...</span>

The prompt further utilizes few-shot learning, a technique leveraging LLMs’ ability to learn patterns from a small number of examples and apply them to new inputs. By providing a limited set of input-output demonstrations within the prompt, the model learns to emulate the desired style.

Dan collaborated to create a concise set of these few-shot examples, pairing user queries with Shiffbot responses that embodied his distinctive style. Examples include:

<span>User</span><span>:</span><span>How</span><span>do</span><span>I</span><span>draw</span><span>a</span><span>circle</span><span>?</span> <span>ShiffBot</span><span>:</span><span>Oh</span><span>!</span><span>🟣</span><span>🟢</span><span>🔵</span><span>That</span><span>'</span><span>s</span><span>what</span><span>the</span><span>`</span><span>circle</span><span>()</span><span>`</span><span>function</span><span>is</span><span>for</span><span>!</span><span>You</span><span>can</span><span>think</span><span>of</span><span>a</span><span>function</span><span>as</span><span>a</span><span>command</span><span>:</span><span>"I command you computer-machine to draw a circle!"</span><span>You</span><span>have</span><span>to</span><span>also</span><span>specify</span><span>where</span><span>to</span><span>draw</span><span>the</span><span>circle</span><span>and</span><span>how</span><span>big</span><span>(</span><span>that</span><span>'</span><span>s</span><span>what</span><span>"arguments"</span><span>to</span><span>a</span><span>function</span><span>are</span><span>!),</span><span>the</span><span>p5</span><span>.</span><span>js</span><span>reference</span><span>which</span><span>was</span><span>written</span><span>by</span><span>actual</span><span>,</span><span>beautiful</span><span>humans</span><span>can</span><span>tell</span><span>you</span><span>more</span><span>!</span> <span>---</span> <span>User</span><span>:</span><span>My</span><span>homework</span><span>is</span><span>to</span><span>draw</span><span>a</span><span>self</span><span>-</span><span>portrait</span><span>.</span><span>ShiffBot</span><span>:</span><span>Ooh</span><span>!</span><span>Self</span><span>portraits</span><span>are</span><span>so</span><span>fun</span><span>!</span><span>You</span><span>could</span><span>draw</span><span>shapes</span><span>to</span><span>represent</span><span>you</span><span>,</span><span>but</span><span>you</span><span>should</span><span>be</span><span>creative</span><span>and</span><span>think</span><span>abstractly</span><span>!</span><span>What</span><span>does</span><span>a</span><span>self</span><span>-</span><span>portrait</span><span>mean</span><span>to</span><span>you</span><span>?</span><span>Try</span><span>starting</span><span>with</span><span>`</span><span>square</span><span>()</span><span>`</span><span>or</span><span>`</span><span>circle</span><span>()</span><span>`</span><span>and</span><span>let</span><span>me</span><span>know</span><span>how</span><span>it</span><span>goes</span><span>!</span><span>🎨</span>

The prompt incorporates 13 such illustrative pairs.

Furthermore, it was observed that incorporating context, specifically p5.js principles, within the prompt enhanced response quality. Guiding the model with these principles enabled more pertinent and accurate answers. Therefore, instructions like the following were included:

<span>Use</span><span>let</span><span>rather</span><span>than</span><span>var</span><span>or</span><span>const</span><span>.</span>

These static elements remain consistent throughout every user interaction with Shiffbot. However, the prompt also dynamically adapts as the conversation evolves.

Dynamic Context: Conversation History and Code Awareness

Shiffbot’s integration within the p5.js editor grants it “visibility” into the user’s current code. This code context is crucial for generating more tailored and relevant responses. This information, extracted from the HTML DOM, is appended to the prompt dynamically.

The complete conversation history is also appended, ensuring context-aware interactions. For instance:

<span>ShiffBot</span>:☀️<span>Good</span><span>morning</span><span>!</span><span>Is</span><span>it</span><span>morning</span>?<span>I</span><span>wouldn</span><span>'t know. I'</span><span>m</span><span>just</span><span>a</span><span>robot</span>.<span>What</span><span>are</span><span>you</span><span>coding</span><span>today</span>? <span>User</span>:<span>how</span><span>do</span><span>I</span><span>draw</span><span>a</span><span>square</span>? <span>ShiffBot</span>:<span>Squares</span><span>!</span><span>I</span><span>love</span><span>squares</span><span>!</span><span>They</span><span>are</span><span>so</span><span>stable</span><span>and</span><span>reliable</span>.<span>To</span><span>draw</span><span>a</span><span>square</span>,<span>you</span><span>can</span><span>use</span><span>the</span><span>square</span><span>()</span><span>function</span>.<span>It</span><span>takes</span><span>four</span><span>arguments</span>:<span>the</span><span>x</span><span>and</span><span>y</span><span>coordinates</span><span>of</span><span>the</span><span>top</span><span>-</span><span>left</span><span>corner</span>,<span>and</span><span>the</span><span>width</span><span>and</span><span>height</span><span>of</span><span>the</span><span>square</span>.<span>For</span><span>example</span>,<span>square</span><span>(</span><span>10</span>,<span>10</span>,<span>50</span>,<span>50</span><span>)</span><span>would</span><span>draw</span><span>a</span><span>square</span><span>with</span><span>its</span><span>top</span><span>-</span><span>left</span><span>corner</span><span>at</span><span>(</span><span>10</span>,<span>10</span><span>)</span><span>and</span><span>a</span><span>width</span><span>and</span><span>height</span><span>of</span><span>50</span><span>pixels</span>. <span>User</span>:<span>how</span><span>can</span><span>I</span><span>change</span><span>the</span><span>color</span>? <span>ShiffBot</span>:

The prompt concludes with:

ShiffBot:

Signaling to the model that it should generate Shiffbot’s next conversational turn.

Semantic Retrieval: Grounding Shiffbot in “The Coding Train” Resources

Daniel Shiffman’s extensive library of resources, including over 1,000 YouTube videos, books, and code examples – a treasure trove for anyone interested in “coding train youtube machine learning” – was crucial to integrate into Shiffbot. The aim was to enable Shiffbot to surface these materials contextually and at opportune moments. This was achieved using the Semantic Retrieval feature of the Gemini API.

Semantic Retrieval allows the creation of a text corpus, enabling users to query it and retrieve the most relevant text snippets. This technology, powered by text embeddings, converts text into numerical representations, facilitating semantic similarity searches. (Further details on embeddings are available here.)

For Shiffbot, corpuses were built from Dan’s content, allowing relevant pieces to be added to the prompt dynamically or presented directly within the Shiffbot conversation.

Building a Video Corpus from “The Coding Train” YouTube Content

“The Coding Train” videos are rich with explanations of coding concepts, ranging from fundamental to advanced, and feature numerous coding challenges. Ideally, Shiffbot could intelligently recommend and present pertinent videos at the precise learning moment.

Gemini API’s Semantic Retrieval supports multiple corpuses. A corpus comprises documents, each containing text chunks. Documents and chunks can also carry metadata for filtering and additional information.

In Shiffbot’s video corpus, each video is a document, with its URL and title stored as metadata. Videos are segmented into chapters (manually by Dan). Each chapter becomes a chunk, with its text content structured as:

<videotitle> <videodescription> <chaptertitle> </chaptertitle></videodescription></videotitle>

Incorporating the video title, the initial line of the video description, and the chapter title enhances the accuracy of semantic retrieval.

An example of a chunk object representing the “R, G, B” chapter from this video illustrates this structure.

<span>1.4</span><span>:</span><span>Color</span><span>-</span><span>p5</span><span>.</span><span>js</span><span>Tutorial</span> <span>In</span><span>this</span><span>video</span><span>I</span><span>discuss</span><span>how</span><span>color</span><span>works</span><span>:</span><span>RGB</span><span>color</span><span>,</span><span>fill</span><span>(),</span><span>stroke</span><span>(),</span><span>and</span><span>transparency</span><span>.</span> <span>Chapter</span><span>1</span><span>:</span><span>R</span><span>,</span><span>G</span><span>,</span><span>B</span> <span>R</span><span>stands</span><span>for</span><span>red</span><span>,</span><span>g</span><span>stands</span><span>for</span><span>green</span><span>,</span><span>b</span><span>stands</span><span>for</span><span>blue</span><span>.</span><span>The</span><span>way</span><span>that</span><span>you</span><span>create</span><span>a</span><span>digital</span><span>color</span><span>is</span><span>by</span><span>mixing</span><span>some</span><span>amount</span><span>of</span><span>red</span><span>,</span><span>some</span><span>amount</span><span>of</span><span>green</span><span>,</span><span>and</span><span>some</span><span>amount</span><span>of</span><span>blue</span><span>.</span><span>So</span><span>that</span><span>'s that that'</span><span>s</span><span>where</span><span>I</span><span>want</span><span>to</span><span>start</span><span>.</span><span>But</span><span>that</span><span>'s the concept, how do I apply that concept to function names, and arguments of those functions? Well, actually, guess what? We have done that already. In here, there is a function that is talking about color. Background is a function that draws a solid color over the entire background of the canvas. And there is, somehow, 220 sprinkles of red, zero sprinkles of green, right? RGB, those are the arguments. And 200 sprinkles of blue. And when you sprinkle that amount of red, and that amount of blue, you get this pink. But let'</span><span>s</span><span>just</span><span>go</span><span>with</span><span>this</span><span>.</span><span>What</span><span>if</span><span>we</span><span>take</span><span>out</span><span>all</span><span>of</span><span>the</span><span>blue</span><span>?</span><span>You</span><span>can</span><span>see</span><span>that</span><span>'s pretty red. What if I take out all of the red? Now it'</span><span>s</span><span>black</span><span>.</span><span>What</span><span>if</span><span>I</span><span>just</span><span>put</span><span>some</span><span>really</span><span>big</span><span>numbers</span><span>in</span><span>here</span><span>,</span><span>like</span><span>,</span><span>just</span><span>guess</span><span>,</span><span>like</span><span>,</span><span>1</span><span>,</span><span>000</span><span>?</span><span>Look</span><span>at</span><span>that</span><span>.</span><span>Now</span><span>we</span><span>'ve got white, so all the colors all mixed together make white. That'</span><span>s</span><span>weird</span><span>,</span><span>right</span><span>?</span><span>Because</span><span>if</span><span>you</span><span>,</span><span>like</span><span>,</span><span>worked</span><span>with</span><span>paint</span><span>,</span><span>and</span><span>you</span><span>were</span><span>to</span><span>mix</span><span>,</span><span>like</span><span>,</span><span>a</span><span>whole</span><span>lot</span><span>of</span><span>paint</span><span>together</span><span>,</span><span>you</span><span>get</span><span>this</span><span>,</span><span>like</span><span>,</span><span>brown</span><span>muddy</span><span>color</span><span>,</span><span>get</span><span>darker</span><span>and</span><span>darker</span><span>.</span><span>This</span><span>is</span><span>the</span><span>way</span><span>that</span><span>the</span><span>color</span><span>mixing</span><span>is</span><span>working</span><span>,</span><span>here</span><span>.</span><span>It</span><span>'s, like, mixing light. So the analogy, here, is I have a red flashlight, a green flashlight, and a blue flashlight. And if I shine all those flashlights together in the same spot, they mix together. It'</span><span>s</span><span>additive</span><span>color</span><span>,</span><span>the</span><span>more</span><span>we</span><span>add</span><span>up</span><span>all</span><span>those</span><span>colors</span><span>,</span><span>the</span><span>brighter</span><span>and</span><span>brighter</span><span>it</span><span>gets</span><span>.</span><span>But</span><span>,</span><span>actually</span><span>,</span><span>this</span><span>is</span><span>kind</span><span>of</span><span>wrong</span><span>,</span><span>the</span><span>fact</span><span>that</span><span>I</span><span>'m putting 1,000 in here. So the idea, here, is we'</span><span>re</span><span>sprinkling</span><span>a</span><span>certain</span><span>amount</span><span>of</span><span>red</span><span>,</span><span>and</span><span>a</span><span>certain</span><span>amount</span><span>of</span><span>green</span><span>,</span><span>and</span><span>a</span><span>certain</span><span>amount</span><span>of</span><span>blue</span><span>.</span><span>And</span><span>by</span><span>the</span><span>way</span><span>,</span><span>there</span><span>are</span><span>other</span><span>ways</span><span>to</span><span>set</span><span>color</span><span>,</span><span>but</span><span>I</span><span>'ll get to that. This is not the only way, because some of you watching, are like, I heard something about HSB color. And there'</span><span>s</span><span>all</span><span>sorts</span><span>of</span><span>other</span><span>ways</span><span>to</span><span>do</span><span>it</span><span>,</span><span>but</span><span>this</span><span>is</span><span>the</span><span>fundamental</span><span>,</span><span>basic</span><span>way</span><span>.</span><span>The</span><span>amount</span><span>that</span><span>I</span><span>can</span><span>sprinkle</span><span>has</span><span>a</span><span>range</span><span>.</span><span>No</span><span>red</span><span>,</span><span>none</span><span>more</span><span>red</span><span>,</span><span>is</span><span>zero</span><span>.</span><span>The</span><span>maximum</span><span>amount</span><span>of</span><span>red</span><span>is</span><span>255.</span><span>By</span><span>the</span><span>way</span><span>,</span><span>how</span><span>many</span><span>numbers</span><span>are</span><span>there</span><span>between</span><span>0</span><span>and</span><span>255</span><span>if</span><span>you</span><span>keep</span><span>the</span><span>0</span><span>?</span><span>0</span><span>,</span><span>1</span><span>,</span><span>2</span><span>,</span><span>3</span><span>,</span><span>4</span><span>-- it's 256. Again, we're back to this weird counting from zero thing. So there's 256 possibilities, 0 through 255. So, now, let's come back to this and see. All right, let's go back to zero, 0, 0, 0. Let's do 255, we can see that it's blue. Let's do 100,000, it's the same blue. So p5 is kind of smart enough to know when you call the background function, if you by accident put a number in there that's bigger than 255, just consider it 255. Now, you can customize those ranges for yourself, and there's reasons why you might want to do that. Again, I'm going to come back to that, you can look up the function color mode for how to do that. But let's just stay with the default, a red, a green, and a blue. So, I'm not really very talented visual design wise. So I'm not going to talk to you about how to pick beautiful colors that work well together. You're going to have that talent yourself, I bet. Or you might find some other resources. But this is how it works, RGB. One thing you might notice is, did you notice how when they were all zero, it was black, and they were all 255 it was white? What happens if I make them all, like, 100? It's, like, this gray color. When r equals g equals b, when the red, green, and blue values are all equal, this is something known as grayscale color.</span>

When a user poses a question to Shiffbot, the question is transformed into a numerical embedding. Gemini’s Semantic Retrieval then identifies and retrieves video transcripts whose embeddings are semantically closest to the query. These relevant video transcripts and links are incorporated into the prompt, empowering the model to leverage this information for answer generation and potentially suggest the video itself within the conversation.

Building a Corpus of Code Examples for Practical Learning

A parallel corpus of p5.js code examples, curated by Dan, was also created. To populate this corpus, Gemini was employed to generate concise explanations of each code example’s functionality. These natural language descriptions serve as chunks within the corpus. When a user asks a question, the system searches for matching descriptions of code examples. Upon retrieval, both the code itself and the URL to the p5.js sketch are included in the prompt.

To generate these textual descriptions, Gemini was prompted with:

Thefollowingisap5.jssketch.Explainwhatthiscodeisdoinginashortsimpleway. code: <span>${</span><span>sketchCode</span><span>}</span>

For instance, a code chunk example:

Sketch: https://editor.p5js.org/codingtrain/sketches/tSXa5dsFz

Textual Description:

<span>Arrays</span><span>-</span><span>Color</span><span>Palette</span> <span>This</span><span>p5</span><span>.</span><span>js</span><span>sketch</span><span>creates</span><span>a</span><span>color</span><span>palette</span><span>visualization</span><span>.</span><span>It</span><span>first</span><span>defines</span><span>an</span><span>array</span><span>of</span><span>colors</span><span>and</span><span>sets</span><span>up</span><span>a</span><span>canvas</span><span>.</span><span>Then</span><span>,</span><span>in</span><span>the</span><span>draw</span><span>loop</span><span>,</span><span>it</span><span>uses</span><span>a</span><span>for</span><span>loop</span><span>to</span><span>iterate</span><span>through</span><span>the</span><span>array</span><span>of</span><span>colors</span><span>and</span><span>display</span><span>them</span><span>as</span><span>rectangles</span><span>on</span><span>the</span><span>canvas</span><span>.</span><span>The</span><span>rectangles</span><span>are</span><span>centered</span><span>on</span><span>the</span><span>canvas</span><span>and</span><span>their</span><span>size</span><span>is</span><span>determined</span><span>by</span><span>the</span><span>value</span><span>of</span><span>the</span><span>blockSize</span><span>variable</span><span>.</span> <span>The</span><span>sketch</span><span>also</span><span>displays</span><span>the</span><span>red</span><span>,</span><span>green</span><span>,</span><span>and</span><span>blue</span><span>values</span><span>of</span><span>each</span><span>color</span><span>below</span><span>each</span><span>rectangle</span><span>.</span> <span>Finally</span><span>,</span><span>it</span><span>displays</span><span>the</span><span>name</span><span>of</span><span>the</span><span>palette</span><span>at</span><span>the</span><span>bottom</span><span>of</span><span>the</span><span>canvas</span><span>.</span> <span>Related</span><span>video</span><span>:</span><span>7.1</span><span>:</span><span>What</span><span>is</span><span>an</span><span>array</span><span>?</span><span>-</span><span>p5</span><span>.</span><span>js</span><span>Tutorial</span><span>-</span><span>This</span><span>video</span><span>covers</span><span>the</span><span>basics</span><span>on</span><span>using</span><span>arrays</span><span>in</span><span>JavaScript</span><span>.</span><span>What</span><span>do</span><span>they</span><span>look</span><span>like</span><span>,</span><span>how</span><span>do</span><span>they</span><span>work</span><span>,</span><span>when</span><span>should</span><span>you</span><span>use</span><span>them</span><span>?</span>

Gemini-Powered Features Beyond Core Conversation

Beyond the primary conversational engine, Gemini facilitates several additional Shiffbot functionalities through smaller, specialized prompts.

Gemini-Generated Conversation Starters and Suggestions

To ensure Shiffbot greetings are engaging and welcoming, aiming to bring a smile to users, initial greetings were brainstormed with Dan. Leveraging these examples, Gemini generated a wider array of greetings, adding variety and freshness to each new conversation. The same approach was applied to initial suggestion chips, which appear when a conversation begins. These pre-generated suggestions provide helpful starting points for user interaction when no prior conversation context exists.

Dynamic Suggestion Chips for Contextual Assistance

Suggestion chips presented during conversations are designed to be contextually relevant to the user’s current coding activities. A dedicated prompt and Gemini call are responsible for generating these dynamic question suggestions. In this scenario, the model’s sole purpose is to propose relevant follow-up questions based on the ongoing conversation. Few-shot learning, similar to the static prompt component, is again employed, providing examples of effective suggestions to guide the model’s generalization across diverse conversations.

<span>Given</span><span>a</span><span>conversation</span><span>between</span><span>a</span><span>user</span><span>and</span><span>an</span><span>assistant</span><span>in</span><span>the</span><span>p5js</span><span>framework</span><span>,</span><span>suggest</span><span>followup</span><span>questions</span><span>that</span><span>the</span><span>user</span><span>could</span><span>ask</span><span>.</span> <span>Return</span><span>up</span><span>to</span><span>4</span><span>suggestions</span><span>,</span><span>separated</span><span>by</span><span>the</span><span>;</span><span>sign</span><span>.</span> <span>Avoid</span><span>suggesting</span><span>questions</span><span>that</span><span>the</span><span>user</span><span>already</span><span>asked</span><span>.</span><span>The</span><span>suggestions</span><span>should</span><span>only</span><span>be</span><span>related</span><span>to</span><span>creative</span><span>coding</span><span>and</span><span>p5js</span><span>.</span> <span>Examples</span><span>:</span> <span>ShiffBot</span><span>:</span><span>Great</span><span>idea</span><span>!</span><span>First</span><span>,</span><span>let</span><span>'s think about what in the sketch could be an object! What do you think?</span> <span>Suggestions: What does this code do?; What'</span><span>s</span><span>wrong</span><span>with</span><span>my</span><span>code</span><span>?;</span><span>Make</span><span>it</span><span>more</span><span>readable</span><span>please</span> <span>User</span><span>:</span><span>Help</span><span>!</span> <span>ShiffBot</span><span>:</span><span>How</span><span>can</span><span>I</span><span>help</span><span>?</span> <span>Suggestions</span><span>:</span><span>Explain</span><span>this</span><span>code</span><span>to</span><span>me</span><span>;</span><span>Give</span><span>me</span><span>some</span><span>ideas</span><span>;</span><span>Cleanup</span><span>my</span><span>code</span>

Final Thoughts and Future Directions for AI in Coding Education

Shiffbot exemplifies how the Gemini API can be used to create bespoke applications that enhance user experiences within specific communities. By leveraging prompt engineering and semantic retrieval, Shiffbot successfully embodies Daniel Shiffman’s vision for an AI-powered coding assistant.

The techniques detailed offer a snapshot into the ongoing evolution of AI in education. The dynamic nature of AI promises continuous advancements, and future iterations of tools like Shiffbot hold immense potential to further enrich learning experiences, particularly in fields like creative coding and even “coding train youtube machine learning” related topics as AI technologies become more accessible and integrated into educational platforms.

Exploration into multimodality is already underway, investigating how students can visually share their work with Shiffbot, potentially through image or video input, and the subsequent benefits for the learning process. Integrating this into the existing Shiffbot experience is a key focus for future development.

Whether in coding, writing, or even thinking, creators are pivotal in shaping the future of AI-human collaboration. This Lab Session aims to provide a glimpse into the possibilities unlocked by the Gemini API, inspiring you to harness Google’s AI offerings and bring your own innovative ideas to fruition, regardless of your chosen field.

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *