Imagine walking into your home gym, turning on your camera, and having an AI coach that sees your movements, counts your reps, and corrects your form in real time.

That's exactly what we're building in this tutorial: a real-time gym companion and fitness coach.

We'll integrate Vision Agents' low-latency video inference to detect movement patterns, count reps, and give instant voice feedback like "Straighten your back!" or "Keep your form tight!", just like a human trainer would.

Here is a demo video of the AI gym companion during a workout session:

What We’ll Cover:

1. Prerequisites

2. Setting Up the Project

3. How to Run the App

4. Next Steps

Prerequisites

• Python 3.13 or higher

• API keys for:

  • Gemini (for real-time LLM with vision)

  • Stream (for video/audio infrastructure)

  • Alternatively: OpenAI (if using OpenAI Realtime instead)

• Code editor like VS Code or Windsurf

Setting Up the Project

Create a new directory on your computer called gym_buddy. You can also do it directly in your terminal with this command:

mkdir gym_buddy

Then open the directory in your IDE (for this guide, I’m using Windsurf IDE).

If you don’t have uv (a fast Python package installer and resolver) installed on your computer, install it with this command:

pip install uv

Note: After installing uv, you can also run uv -init to set up the project with sample files and a .toml file with the metadata.

Next, we’ll create the pyproject.toml file. This is a configuration file for Python projects that specifies build system requirements and other project metadata. It's a standard file used by modern Python packaging tools.

Enter the code below:

[project]
name = "gym-buddy"
version = "0.1.0"
requires-python = ">=3.13"
dependencies = [
    "python-dotenv>=1.0",
    "vision-agents",
    "vision-agents-plugins-openai",
    "vision-agents-plugins-getstream",
    "vision-agents-plugins-ultralytics",
    "vision-agents-plugins-gemini",
]

[tool.uv.sources]
"vision-agents" = {path = "../../agents-core", editable=true}
"vision-agents-plugins-deepgram" = {path = "../../plugins/deepgram", editable=true}
"vision-agents-plugins-ultralytics" = {path = "../../plugins/ultralytics", editable=true}
"vision-agents-plugins-openai" = {path = "../../plugins/openai", editable=true}
"vision-agents-plugins-getstream" = {path = "../../plugins/getstream", editable=true}
"vision-agents-plugins-gemini" = {path = "../../plugins/gemini", editable=true}

You can also create a requirements.in file with just the direct dependencies, like so:

python-dotenv>=1.0
vision-agents
vision-agents-plugins-openai
vision-agents-plugins-getstream
vision-agents-plugins-ultralytics
vision-agents-plugins-gemini

Then install dependencies using uv and either of these commands:

uv sync

This will generate the uv.lock from the uv package manager that handles the project’s dependencies and builds.

If you are using a Windows OS, you might come across a dependency installation error, particularly with NumPy. This is likely due to missing build tools on your system.

Why NumPy is required

NumPy is a Python library for numerical computing. In this project, it’s used by the computer-vision and AI components (such as YOLO-based detection and Vision Agents) to handle image data, bounding boxes, coordinates, and other numerical outputs produced during real-time video analysis.

Many of the libraries used here depend on it for fast array operations and mathematical computations. That’s why NumPy is installed as part of the setup and why issues with its installation can affect the entire pipeline.

To resolve it, install Visual Studio Build Tools (required for building Python packages with C extensions). During installation, make sure that you select "Desktop development with C++". This installs all the necessary build tools.

Visual Studio displays like this after the installation is done. You may need to restart your computer for the updates to take effect.

Now run this command in your terminal:

python -m pip install -e .

The command above installs all the necessary dependencies for the project.

How to Get Your API Keys

For this project, we need to get API keys from Stream and Gemini/OpenAI.

To get your Stream API key, go ahead and sign up with your preferred method.

Then, navigate to your dashboard and click 'Create App' to create a new app for the AI gym companion.

Enter the name for the app, choose the environment (Development/Production), select a region, and click on ‘Create App’.

After creating the app, click on the dashboard overview tab in the left sidebar, then navigate to the Video tab and click on "API Keys". Copy your API key and secret, and save them securely.

To get your Gemini API key, visit the Google AI Studio website, then click on Get started.

Then, go to your dashboard and click on 'Create API key'.

Enter a name for the key, then create a new project for the API key.

After you have created the new API key, copy it and save it securely.

Building the AI gym companion

Now that you have the API keys you’ll need for the AI gym companion, create a .env file in the project’s root directory and add all the API keys like so:

GEMINI_API_KEY=your_gemini_key
STREAM_API_KEY=your_stream_key
STREAM_API_SECRET=your_stream_secret

If you’re using OpenAI instead of Gemini, also add:

OPENAI_API_KEY=your_openai_key

This is the project and codebase structure for the gym companion app we are building:

In the root directory, create an empty _init.py file. This file makes Python treat the directory as a package. You can add a comment in the file to remember, like so:

# This file makes Python treat the directory as a package.

Next, create a gym_buddy.py file. This is the main app file, containing agent setup and call joining logic for the Gym Companion. Enter the code below in the file:

import logging
from dotenv import load_dotenv
from vision_agents.core import User, Agent, cli
from vision_agents.core.agents import AgentLauncher
from vision_agents.plugins import getstream, ultralytics, gemini
logger = logging.getLogger(__name__)
load_dotenv()
async def create_agent(**kwargs) -> Agent:
    agent = Agent(
        edge=getstream.Edge(),  # use stream for edge video transport
        agent_user=User(name="AI gym companion"),
        instructions="Read @gym_buddy.md",  # read the gym buddy markdown instructions
        llm=gemini.Realtime(fps=3),  # Share video with gemini
        # llm=openai.Realtime(fps=3), use this to switch to openai
        processors=[
            ultralytics.YOLOPoseProcessor(model_path="yolo11n-pose.pt")
        ],  # realtime pose detection with yolo
    )
    return agent
async def join_call(agent: Agent, call_type: str, call_id: str, **kwargs) -> None:
    call = await agent.create_call(call_type, call_id)
    # join the call and open a demo env
    with await agent.join(call):
        await agent.llm.simple_response(
            text="Say hi. After the user does their exercise, offer helpful feedback."
        )
        await agent.finish()  # run till the call ends
if __name__ == "__main__":
    cli(AgentLauncher(create_agent=create_agent, join_call=join_call))

Then create a gym_buddy.md file. This is an instructions file for the gym agent's coaching guide, which it will follow when analysing the workouts and providing real-time feedback. Enter the markdown code below:

You are a voice fitness coach. You will watch the user's workout and offer feedback.
The video clarifies the body position using Yolo's pose analysis, so you'll see their exact movement.
Speak with a high-energy, motivating tone. Be strict about form but encouraging. Do not give feedback if you are not sure or do not see an exercise.
# Gym Workout Coaching Guide
## 1. Introduction
A fitness coach's primary responsibility is to ensure safety and efficacy in every movement. While everybody is different, the fundamental mechanics of human movement—stability, alignment, and range of motion—remain constant. By monitoring key checkpoints like spinal alignment, joint tracking, and tempo, coaches can guide athletes toward stronger, injury-free workouts. The following guidelines break down the core compound movements into phases, with clear teaching points and coaching cues.
## 2. The Squat: Setup and Stance
The squat is the king of lower-body exercises, but it starts before the descent. The athlete should stand with feet shoulder-width apart or slightly wider, toes pointed slightly outward (5-30 degrees). The spine must be neutral, chest proud, and core braced. Coaches should watch for collapsing arches in the feet or a rounded upper back. A solid setup creates the tension needed for a powerful lift.
## 3. The Squat: Descent (Eccentric Phase)
The movement begins by breaking at the hips and knees simultaneously. The hips should travel back and down, as if sitting in a chair, while the knees track in line with the toes. Coaches must ensure the heels stay glued to the floor. Common errors include "knee valgus" (knees caving in) or the torso collapsing forward. The descent should be controlled and deliberate.
## 4. The Squat: Depth and Reversal
"Depth" is achieved when the hip crease drops below the top of the knee (parallel). While not everyone has the mobility for this, it is the standard for a full range of motion. At the bottom, the athlete should maintain tension—no bouncing or relaxing. The reversal (concentric phase) is driven by driving the feet into the floor and extending the hips and knees, exhaling forcefully.
## 5. The Push-up: The Plank Foundation
A perfect push-up is essentially a moving plank. The setup requires hands placed slightly wider than shoulder-width, directly under the shoulders. The body must form a straight line from head to heels. Coaches should watch for sagging hips (lumbar extension) or piking hips (flexion). Glutes and quads should be squeezed tight to lock the body into a rigid lever.
## 6. The Push-up: Mechanics
As the athlete lowers themselves, the elbows should track back at roughly a 45-degree angle to the torso, forming an arrow shape, not a "T". The chest should descend until it nearly touches the floor. The neck must remain neutral—no reaching with the chin. The push back up should be explosive, fully extending the arms without locking the elbows violently.
## 7. The Lunge: Step and Stability
The lunge challenges balance and unilateral strength. Whether forward or reverse, the step should be long enough to allow both knees to bend to approximately 90 degrees at the bottom. The feet should remain hip-width apart throughout the movement, like moving on train tracks, not a tightrope. Coaches should look for wobbling or the front heel lifting off the ground.
## 8. The Lunge: Alignment
In the bottom position, the front knee should be directly over the ankle, not shooting far past the toes (though some forward travel is acceptable). The torso should remain upright or have a very slight forward lean; collapsing over the front thigh is a fault. The back knee should hover just an inch off the ground. Drive through the front heel to return to the start.
## 9. Tempo and Control
Time under tension builds muscle and control. Coaches should encourage a specific tempo, such as 2-0-1 (2 seconds down, 0 pause, 1 second up). Rushing through reps often masks muscle imbalances and relies on momentum rather than strength. If an athlete speeds up, cue them to "slow down and own the movement."
## 10. Breathing Mechanics
Proper breathing stabilises the core. The general rule is to inhale during the eccentric phase (lowering) and exhale during the concentric phase (lifting/pushing). For heavy lifts, the Valsalva manoeuvre (bracing the core with a held breath) may be appropriate, but for general fitness, rhythmic breathing ensures oxygen delivery and blood pressure management.
## 11. Common Faults and Fixes
- **Squat - Butt Wink**: Posterior pelvic tilt at the bottom. Fix: Limit depth or improve hamstring/ankle mobility.
- **Push-up - Winging Scapula**: Shoulder blades popping up. Fix: Push the floor away at the top (protraction) and engage serratus anterior.
- **Lunge - Valgus Knee**: Front knee collapsing in. Fix: Cue "push the knee out" and engage the glute medius.
- **General - Ego Lifting**: Sacrificing form for reps or weight. Fix: Regress the exercise or slow the tempo

How the AI Agent works

Now we have the instruction file for the AI agent set up. Let’s look at how the code works with the AI agent-creation and markdown instruction file above. In gym_buddy.py, the agent is created and initialised with specific components like so:

def create_agent() -> Agent:
    # Initialize video transport
    video_transport = StreamVideoTransport()

    # Set up AI components
    gemini = GeminiRealtime()
    pose_processor = YOLOPoseProcessor(model_path="yolo11n-pose.pt")

    # Create agent with instructions
    return Agent(
        name="AI Gym Buddy",
        instructions="gym_buddy.md",  # Loads coaching instructions
        video_transport=video_transport,
        llm=gemini,
        processors=[pose_processor]
    )

The gym_buddy.md file contains structured instructions that guide the gym companion agent's behaviour.

## Coaching Style
- Be encouraging and positive
- Provide clear, actionable feedback
- Focus on one correction at a time

## Squat Form
- Keep chest up and back straight
- Knees should track over toes
- Lower until thighs are parallel to ground
- Push through heels to stand

## Safety Guidelines
- Stop user if a dangerous form is detected
- Suggest modifications for beginners
- Remind to keep core engaged

These instructions are loaded with the instructions="gym_buddy.md" parameter in the gym_buddy.py file. The agent then parses this file to understand how to analyse your form during the workout session and provides feedback.

# Processing video frames
async def process_frame(self, frame):
    # Analyze pose using YOLO
    poses = await self.pose_processor.process(frame)

    # Generate feedback based on instructions
    feedback = await self.llm.generate_feedback(
        poses=poses,
        instructions=self.instructions
    )
    return feedback

When giving feedback, the agent compares the detected poses with the ideal form from the markdown. Then, it generates natural language feedback using the specified tone and style. The safety guidelines in the gym_buddy.md are checked first, then specific form corrections are mentioned by the agent.

To add a new exercise, you can update the gym_buddy.md file with a new section like so:

## Push-up Form
- Keep body in a straight line
- Lower until chest nearly touches floor
- Push through palms to return up
- Keep core engaged

The agent will automatically incorporate these instructions the next time it runs. This makes it easy to update and expand the agent's capabilities by simply editing the markdown file.

You can view the complete code for the AI Gym Companion in the GitHub repository.

How to Run the App

First, create a virtual environment in Python with this command:

python -m venv venv

It creates the .venv directory.

Then activate the virtual Python environment like so:

.\venv\Scripts\activate

Now run the AI agent with this command:

uv run gym_buddy.py

You can also start the app with this command:

python gym_buddy.py

It begins loading like so:

The AI agent will:

1. Create a video call

2. Open a demo UI in your browser

3. Join the call and start watching

4. Ask you to do a squat exercise

5. Analyse your moves and positions, and then provide feedback

From the command terminal output above, it also shows that Gemini AI is connected.

The agent then loads in your browser like so:

It also displays a pop-up modal that introduces the Vision Agents. You can skip the intro or click on Next to proceed.

The Vision Agent uses a global edge to ensure optimal call latency. This is useful for the AI gym companion to provide real-time feedback on the exercises the users perform.

The AI gym companion can also provide chat messages on the exercises through the chatbox displayed on the right side of the UI. This is provided through the chat SDK/API.

When you perform a squat, the Vision Agent (powered by Gemini) analyses the video frames in real-time. It detects the completion of the movement and triggers the send_rep_count tool. This instantly updates the exercise counter on your screen and provides an encouraging text and voice response!

Here is a demo video of the AI gym companion during a workout session:

You can also copy the link and share it, or scan the QR code below to test the Gym Companion on your mobile phone.

If you want to test it on your phone, install the Stream Video calls app for iOS devices for a better mobile experience.

Next Steps

In this tutorial, you’ve learned how to build an AI gym companion using Vision Agents.

The Real-Time Gym Companion illustrates how vision AI unlocks human-like interactivity by merging:

• Video perception (seeing)

• LLM understanding (thinking)

• Speech feedback (speaking)

This low-latency technology lets you create real-time fitness apps that give instant feedback, much like a personal trainer would.

You can check out more project use cases with Vision Agents in the GitHub repository.

Design prototyping and testing are critical steps in optimizing website UX functionality. One study reported that improving UX design led to a 400% increase in website conversions.

For such an important task, we need the best possible tools and resources we can get. And lately I’ve been enjoying using Sourcegraph’s Cody. Cody is an AI tool that speeds up coding by helping you understand, write, and fix code. It accesses information from your entire codebase, and also references documentation pages, to provide context about functions and variables, help create new code, and improve your design system.

When combined with Tailwind CSS, which is a utility-first CSS framework, you can rapidly build UI components that are both functional and visually appealing.

In this tutorial, I’ll teach you how to build UIs faster with Cody and Tailwind CSS so you can leverage AI to streamline your workflow.

Prerequisites

• Basic understanding of JavaScript and front-end development.

• Familiarity with Tailwind CSS.

• Node.js installed on your system.

• A code editor like Visual Studio Code (VS Code).

• Cody. Sign up on Sourcegraph to get access (it’s free).

Table of Contents

• What Will We Be Building?

• How to Set Up Your Environment

• How to Create UI Components with AI

• More Complicated UIs

• How to Improve and Manage Existing Codebases with Cody

• Next Steps

What Will We Be Building?

Let’s build yet another Todo App, but with a spin. Each to-do item will have a timer that can be started, paused, and reset. This might be useful to track how much time you spend working on specific tasks.

From the Cody docs, Cody's chat allows you to add files and symbols as context in your messages.

• Type @ and then a filename to include a file as a context.

• Type @# and then a symbol name to include the symbol's definition as context. Functions, methods, classes, types, and so on are all symbols.

Even though Cody will be doing most of the heavy lifting, it’s great to have a plan of how we want the UI to look. Here are the wireframes I created with wireframe.cc:

Alright! Let’s get into it.

How to Set Up Your Environment

This tutorial uses Visual Studio Code, but the development process is similar across other code editors. If you haven’t set up an editor yet, choose one that suits your preference and install Node.js.

As of this article, Sourcegraph Cody is available on Visual Studio Code, Neovim, Cody CLI, Emacs, and all JetBrains IDEs

How to add Cody to your code editor

First, head over to the Cody landing page, click Get Cody for Free, and follow the prompts to sign up for a Sourcegraph account using your preferred authentication method—GitHub, GitLab, or Google.

Pick the right option for your code editor. If you’re using Visual Studio Code, that would be, Install Cody in VS Code.

Opening the extension in your code editor prompts a sign-in:

After signing in, we’re ready to go.

How to set up the project

We’ll be working with a Vite + React + TailwindCSS project, but these ideas can easily be applied to any other framework (think Vue, Astro, Svelte, or regular Vanilla JS) or styling library (like Bootstrap, Bulma, Foundation CSS, or anything you’d prefer).

Run the following command to create a new React project, abc-planning-todo-app:

npm create vite@latest abc-planning-todo-app -- --template react

Then install Tailwind CSS:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Next, update tailwind.config.js with this code to configure Tailwind CSS for the project:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Delete everything in ./src/index.css and add the following Tailwind CSS directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

How to Create UI Components with AI

For consistency, let’s pick a color palette we’ll use for our to-do app.

To use these colors in our Tailwind theme, we first need to give them descriptive names. Let's ask Cody for help!

For the rest of this article, all quotes represent a single prompt message used when chatting with Cody.

What would be good names for the following hex colors?

• 2B2D42

• 8D99AE

• EDF2F4

• EF233C

• D90429

And then,

Update @tailwind.config.js to include these 5 hex colors above:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        'midnight-navy': '#2B2D42',
        'cloudy-sky': '#8D99AE',
        'ice-white': '#EDF2F4',
        'vibrant-red': '#EF233C',
        'ruby-red': '#D90429',
      },
    },
  },
  plugins: [],
}

How to create basic UI components

First, we create the Header component. With templates for relatively uncomplicated components (for example text inputs, headers, buttons and dropdowns), it’s as simple as providing a name for the component, and the copy content it should contain.

Create a simple React Header Component with only company name on the far left and company motto on the far right. Use the Tailwind theme @tailwind.config.js

Cody will generate a Header component, which you can then copy and paste into ./src/components/Header.jsx.

You can also save the code to a new file in your project directly from the Cody chat.

// ./src/components/Header.jsx
import React from 'react';
const Header = () => {
  return (
    <header className="bg-midnight-navy text-ice-white p-4 flex justify-between items-center">
      <div className="text-2xl font-bold">
        Company
      </div>
      <div className="text-cloudy-sky italic">
        Innovate. Create. Inspire.
      </div>
    </header>
  );
};
export default Header;

Next, create the Footer component with this prompt:

Create a simple React Footer Component with content Copyright C ABC Planning. Use the Tailwind theme @tailwind.config.js*. Ensure footer is always at the bottom of the viewport*

// ./src/components/Footer.jsx
import React from 'react';
const Footer = () => {
  return (
    <footer className="bg-midnight-navy text-ice-white p-4 text-center fixed bottom-0 w-full">
      <p>&copy; {new Date().getFullYear()} ABC Planning</p>
    </footer>
  );
};
export default Footer;

Let’s take a look at what we have so far.

More Complicated UIs

Next, we’ll need a container that will hold all our to-dos. Let’s ask Cody to create a to-do container component.

Create a React TodoContainer Component that will serve as a container for Todo items. Use the Tailwind theme @tailwind.config.js*. It should be mobile-responsive*.

We tell Cody:

• What we want (a React component)

• A brief description of how that component behaves/what it does (container for to-dos)

• Any additional context – stylesheets, preferences, conventions, or anything else.

// ./src/components/TodoContainer.jsx
import React from 'react';
const TodoContainer = ({ children }) => {
  return (
    <div className="bg-ice-white min-h-screen p-4 sm:p-6 md:p-8">
      <div className="max-w-4xl mx-auto">
        <h1 className="text-midnight-navy text-3xl font-bold mb-6">Todo List</h1>
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
          {children}
        </div>
      </div>
    </div>
  );
};
export default TodoContainer;

A good Chat-oriented programming (CHOP) strategy is to separate the creation of markup from the creation of content. This simplifies the prompting process.

Cody can generate both very well, but trying to fine-tune a single prompt for both tasks might be challenging. Each prompt should have a clear, specific goal for best results.

Let's now focus on the TodoItem component and split it into sections:

• There's a to-do header which consists of a title with a border.

• There's a View details button.

• There's a timer showing how long ago the to-do was started.

• There are control buttons (which reflect the state of the to-do)

  Create a React TodoItem Component.

  It consists of:

  1. Task title. A header text with a border around it.

  2. A simplified link/button "View details" below the todo header box.

  3. A digital timer that shows hours, minutes, and seconds in the format 00:00:00.

  4. Todo actions - "Start", "Pause", "Reset". Use relevant colors for each. The timer should be able to be started, paused and reset when the respective button is pressed.

  It should look like a card (tall not wide) on a desktop.

  It will be used with @TodoContainer.jsx

  Use @tailwind.config.js theme

    // ./src/components/TodoItem.jsx
    import React, { useState, useEffect } from 'react';
    const TodoItem = ({ title }) => {
      const [time, setTime] = useState(0);
      const [isRunning, setIsRunning] = useState(false);
      useEffect(() => {
        let interval;
        if (isRunning) {
          interval = setInterval(() => {
            setTime((prevTime) => prevTime + 1);
          }, 1000);
        }
        return () => clearInterval(interval);
      }, [isRunning]);
      const formatTime = (seconds) => {
        const hours = Math.floor(seconds / 3600);
        const minutes = Math.floor((seconds % 3600) / 60);
        const secs = seconds % 60;
        return [hours, minutes, secs].map(v => v.toString().padStart(2, '0')).join(':');
      };
      const handleStart = () => setIsRunning(true);
      const handlePause = () => setIsRunning(false);
      const handleReset = () => {
        setIsRunning(false);
        setTime(0);
      };
      return (
        <div className="bg-ice-white rounded-lg shadow-md p-4 flex flex-col space-y-4 h-full">
          <h2 className="text-xl font-bold text-midnight-navy border-2 border-midnight-navy rounded p-2 text-center">
            {title}
          </h2>
          <button className="text-cloudy-sky hover:text-midnight-navy transition-colors">
            View details
          </button>
          <div className="text-3xl font-mono text-midnight-navy text-center">
            {formatTime(time)}
          </div>
          <div className="flex justify-between mt-auto">
            <button 
              onClick={handleStart} 
              className="bg-vibrant-red text-ice-white px-4 py-2 rounded hover:bg-ruby-red transition-colors"
            >
              Start
            </button>
            <button 
              onClick={handlePause} 
              className="bg-cloudy-sky text-midnight-navy px-4 py-2 rounded hover:bg-ice-white transition-colors"
            >
              Pause
            </button>
            <button 
              onClick={handleReset} 
              className="bg-midnight-navy text-ice-white px-4 py-2 rounded hover:bg-cloudy-sky transition-colors"
            >
              Reset
            </button>
          </div>
        </div>
      );
    };
    export default TodoItem;
  

  From our wireframes, each to-do will have a detail state when its description is visible and can be updated. We’ll tell Cody to update the existing TodoItem.jsx file:

  Update @TodoItem.jsx to have a second state, when the view detail button is pressed. In this state, the TodoItem is composed of the following elements only:

  1. Task header with the task title, same as before

  2. A textbox with a description of the task

  3. A save button, that emits an updateTask event, and switches the component back to its default state.

  Include animations between the transition to create a clean feel and experience

  
    // ./src/components/TodoItem.jsx
    import React, { useState, useEffect } from 'react';
    const TodoItem = ({ title, description = '', onUpdateTask }) => {
      const [time, setTime] = useState(0);
      const [isRunning, setIsRunning] = useState(false);
      const [isDetailView, setIsDetailView] = useState(false);
      const [taskDescription, setTaskDescription] = useState(description);
      useEffect(() => {
        let interval;
        if (isRunning) {
          interval = setInterval(() => {
            setTime((prevTime) => prevTime + 1);
          }, 1000);
        }
        return () => clearInterval(interval);
      }, [isRunning]);
      const formatTime = (seconds) => {
        const hours = Math.floor(seconds / 3600);
        const minutes = Math.floor((seconds % 3600) / 60);
        const secs = seconds % 60;
        return [hours, minutes, secs].map(v => v.toString().padStart(2, '0')).join(':');
      };
      const handleStart = () => setIsRunning(true);
      const handlePause = () => setIsRunning(false);
      const handleReset = () => {
        setIsRunning(false);
        setTime(0);
      };
      const handleViewDetails = () => setIsDetailView(true);
      const handleSave = () => {
        onUpdateTask({ title, description: taskDescription });
        setIsDetailView(false);
      };
      return (
        <div className="bg-ice-white rounded-lg shadow-md p-4 flex flex-col space-y-4 h-full transition-all duration-300 ease-in-out">
          <h2 className="text-xl font-bold text-midnight-navy border-2 border-midnight-navy rounded p-2 text-center">
            {title}
          </h2>
          {isDetailView ? (
            <>
              <textarea
                className="flex-grow p-2 border-2 border-cloudy-sky rounded resize-none transition-all duration-300 ease-in-out"
                value={taskDescription}
                onChange={(e) => setTaskDescription(e.target.value)}
                placeholder="Enter task description..."
              />
              <button 
                onClick={handleSave}
                className="bg-vibrant-red text-ice-white px-4 py-2 rounded hover:bg-ruby-red transition-colors"
              >
                Save
              </button>
            </>
          ) : (
            <>
              <button 
                onClick={handleViewDetails}
                className="text-cloudy-sky hover:text-midnight-navy transition-colors"
              >
                View details
              </button>
              <div className="text-3xl font-mono text-midnight-navy text-center">
                {formatTime(time)}
              </div>
              <div className="flex justify-between mt-auto">
                <button 
                  onClick={handleStart} 
                  className="bg-vibrant-red text-ice-white px-4 py-2 rounded hover:bg-ruby-red transition-colors"
                >
                  Start
                </button>
                <button 
                  onClick={handlePause} 
                  className="bg-cloudy-sky text-midnight-navy px-4 py-2 rounded hover:bg-ice-white transition-colors"
                >
                  Pause
                </button>
                <button 
                  onClick={handleReset} 
                  className="bg-midnight-navy text-ice-white px-4 py-2 rounded hover:bg-cloudy-sky transition-colors"
                >
                  Reset
                </button>
              </div>
            </>
          )}
        </div>
      );
    };
    export default TodoItem;
  

  Now let’s create a new root component that makes use of our components:

  Generate an App.jsx that makes use of @Header.jsx*,* @TodoItem.jsx*,* @TodoContainer.jsx*, and* @Footer.jsx appropriately. Use simple JavaScript variables as state data and implement whatever functions are relevant. Have a minimum of 5 to-do items.

  
    // ./src/App.jsx
    import React, { useState } from 'react';
    import Header from './components/Header';
    import TodoContainer from './components/TodoContainer';
    import TodoItem from './components/TodoItem';
    import Footer from './components/Footer';
    const App = () => {
      const [todos, setTodos] = useState([
        { id: 1, title: 'Complete project proposal', description: 'Draft and finalize the project proposal for the client meeting.' },
        { id: 2, title: 'Review code changes', description: 'Go through the pull requests and provide feedback on the code changes.' },
        { id: 3, title: 'Prepare presentation', description: 'Create slides for the upcoming team meeting presentation.' },
        { id: 4, title: 'Update documentation', description: 'Review and update the project documentation with recent changes.' },
        { id: 5, title: 'Team meeting', description: 'Attend the weekly team sync-up and discuss project progress.' },
      ]);
      const handleUpdateTask = (updatedTask) => {
        setTodos(todos.map(todo => 
          todo.id === updatedTask.id ? { ...todo, ...updatedTask } : todo
        ));
      };
      return (
        <div className="flex flex-col min-h-screen">
          <Header />
          <main className="flex-grow">
            <TodoContainer>
              {todos.map(todo => (
                <TodoItem 
                  key={todo.id}
                  title={todo.title}
                  description={todo.description}
                  onUpdateTask={(updatedTask) => handleUpdateTask({ id: todo.id, ...updatedTask })}
                />
              ))}
            </TodoContainer>
          </main>
          <Footer />
        </div>
      );
    };
    export default App;
  

  Here’s what we now have:

How to Improve and Manage Existing Codebases with Cody

To further boost your productivity, Cody offers prompts and commands.

You can save frequently used prompts for future use and share them with other team members within your organization. Commands offer quick, ready-to-use shortcuts for common coding tasks like writing, describing, fixing, and identifying code issues.

Let’s add documentation to our code!

Firstly, select the code you would like to generate documentation for, we’ll use TodoItem.jsx for this example. Run the Document Code command, and we get a JSDoc docstring for the Footer component class.

Let’s make our components more accessible and inclusive

We can save our favorite and frequently used chat prompts on the Prompt Library via the Sourcegraph's Web UI.

Let’s create a new prompt to improve the accessibility of our web app and ensure it adheres to the WCAG standard.

We can now use this prompt back in VS Code.

Above you can see the results from our accessibility prompt.

How to Use AI Responsibly for Code Generation

AI tools can significantly speed up your workflow, but it's essential to remember that AI is still a work in progress. As powerful as these tools can be, they can also make mistakes or "hallucinate," producing code that seems correct but doesn't actually work in your specific context.

To use AI responsibly for coding, it’s crucial to approach it from a point of understanding what needs to be done. Before relying on AI, make sure you have a solid grasp of the task at hand. AI works best when used as a productivity booster rather than a replacement for your expertise.

Here are a few key things to keep in mind when working with AI-generated code:

• Double-check the code: Always run and test the code generated by AI. Even if it looks correct at first glance, there could be subtle errors or inefficiencies. It's your responsibility to ensure the code is functional and meets your project’s requirements.

• Understand the output: Before using any AI-suggested code, take time to understand how it works. This will allow you to quickly identify any mistakes and integrate the code effectively with the rest of your project.

When used thoughtfully and carefully, AI can make your development process more efficient and help you focus on higher-level tasks. However, it’s essential to balance its use with human oversight to ensure the quality and accuracy of the code you're building.

Next Steps

Creating user-friendly UIs has traditionally been time-consuming and difficult to manage. But using Cody, we created an interactive and attractive user interface with minimal effort. Cody supported us throughout the entire development process.

Here are some potential enhancements you can make:

• We can’t create or delete tasks. Try to fix that.

• Develop a component to display total tasks and accumulated hours.

• Add test cases for each component. We can do this quickly using the Generate Unit Tests command.

If you enjoyed learning about Cody, you can try more of its features and applications. Sign up for a free, forever account and boost your productivity designing, creating, documenting, and managing applications.

Further reading

If you want to learn more, you can read this article about chat-oriented programming (CHOP) and how to use Cody for it: Chat-oriented programming (CHOP) in action.

This article explores essential Go tools that empower frontend developers to enhance their workflows, emphasizing simplicity and productivity.

Prequisites

Before diving into the exploration of the Go tools for frontend projects, ensure you have the following in place:

• Go installed on your machine. You can download it from the official Go website.
• Code editor of your choice installed, such as Visual Studio Code, GoLand, or Zed.
• Basic understanding of Go, check out Go's documentation or this Go handbook.

Go Tools for Your Frontend Projects

Here are five Go tools you can try out for your cool frontend projects:

1. Fiber: A Performant Web Framework

Fiber is an Express.js-inspired web framework for Go, known for its high performance and minimalist design. It facilitates efficient routing and middleware support, making it ideal for frontend-backend communication and API development.

Fiber is particularly useful in creating robust and performant APIs that frontend applications can interact with seamlessly.

Code example:

This example will be a simple web app where users can enter their names, submit a form, and receive a personalized greeting in return.

In your code editor, use this struture for the project:

Enter this code for the main.go file:

package main

import (
    "fmt"
    "github.com/gofiber/fiber/v2"
    "github.com/gofiber/template/html/v2"
)

// RenderForm renders the HTML form.
func RenderForm(c *fiber.Ctx) error {
    return c.Render("form", fiber.Map{})
}

// ProcessForm processes the form submission.
func ProcessForm(c *fiber.Ctx) error {
    name := c.FormValue("name")
    greeting := fmt.Sprintf("Hello, %s!", name)
    return c.Render("greeting", fiber.Map{"Greeting": greeting})
}

func main() {
    app := fiber.New(fiber.Config{
        Views: html.New("./views", ".html"),
    })

    // Serve static files (HTML templates and stylesheets).
    app.Static("/", "./static")

    // Define routes.
    app.Get("/", RenderForm)
    app.Post("/submit", ProcessForm)

    // Start the Fiber app on port 8080.
    app.Listen(":8080")
}

The views folder contains two HTML files that display the form and response on the browser. Enter the code for them:

form.html

<!-- views/form.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fiber Example</title>
    <link rel="stylesheet" href="/styles/main.css">
</head>
<body>
    <form action="/submit" method="post">
        <label for="name">Enter your name:</label>
        <input type="text" id="name" name="name" required>
        <button type="submit">Submit</button>
    </form>
</body>
</html>

greeting.html

<!-- views/greeting.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fiber Example</title>
    <link rel="stylesheet" href="/styles/main.css">
</head>
<body>
    <p>{{.Greeting}}</p>
</body>
</html>

Next, in the styles folder inside the static directory, enter this code for the main.css:

/* main.css */

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 20px;
  }

  form {
    max-width: 400px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  label {
    display: block;
    margin-bottom: 10px;
  }

  input {
    width: 100%;
    padding: 8px;
    margin-bottom: 20px;
    box-sizing: border-box;
  }

  button {
    background-color: #007bff;
    color: #fff;
    padding: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  button:hover {
    background-color: #0056b3;
  }

The code for this project can be accessed on this GitHub repo.

Fiber's View Engine

Fiber integrates with view engines, and we'll use the HTML template engine in this example. Setting up the view engine is straightforward, allowing for a clean separation of concerns between the backend and frontend.

app := fiber.New(fiber.Config{
    Views: html.New("./views", ".html"),
})

Serving Static Assets

Fiber simplifies the serving of static assets, ensuring efficient delivery of stylesheets, images, and client-side JavaScript files. In our example, styles are stored in the static folder and linked in the HTML templates.

// Serve static files (HTML templates and stylesheets)
app.Static("/", "/.static")

Run the program using main.go to start the server on port 8080. It diplays a console output generated by the Fiber framework.

go run main.go

Visit http://127.0.0.1:8080/ in your browser to see the response. Here is how it works:

2. Buffalo: Holistic Web Development Ecosystem

Buffalo is a holistic web development ecosystem for Go, providing a complete set of tools, libraries, and conventions for building modern web applications. It simplifies frontend and backend development by offering scaffolding and hot-reload features.

Buffalo is beneficial for rapidly setting up full-stack web applications, enabling developers to focus on building features rather than dealing with boilerplate code.

A typical Buffalo project has the following structure:

myapp/
|-- actions/
|-- grifts/
|-- migrations/
|-- models/
|-- public/
|-- templates/
|-- go.mod
|-- go.sum
|-- main.go

• actions: Contains handlers for web routes.
• grifts: Houses Grift tasks for automation.
• migrations: Stores database migration files.
• models: Defines data models.
• public: Holds static assets like stylesheets and images.
• templates: Stores HTML templates.
• go.mod and go.sum: Track project dependencies and their versions.
• main.go: Entry point of Buffalo app, initializes and starts the server.

Run this command to create a new Buffalo application:

buffalo new myapp

3. Grift: Automating Tasks in Go

Grift is a task runner ideal for automating various project-related tasks. It manages frontend build processes, asset handling, and deployment automation.

Grift proves valuable when automating repetitive tasks in the frontend development workflow, enhancing efficiency and reducing manual intervention.

Code example:

This example demonstrates how Grift can be utilized to bundle and minify JavaScript files in a frontend project.

Project Structure:

Here are the JavaScript files:

file1.js and file2.js, are in the src directory.

file.js`

// file1.js
function greet(name) {
  console.log(`Hello, ${name}!`);
}
greet("John");

file2.js

// file2.js
function multiply(a, b) {
  return a * b;
}
console.log(multiply(3, 4));

Grift Task

Grift task bundles and minifies these JavaScript files into a single file named bundle.js. The task is defined in the main.go file of the project.

main.go

// main.go
package main

import (
    "fmt"
    "github.com/markbates/grift/grift"
    "github.com/tdewolff/minify/v2"
    "github.com/tdewolff/minify/v2/js"
    "io/ioutil"
    "os"
    "path/filepath"
)

// BundleAndMinifyJS is a Grift task that bundles and minifies JavaScript files.
func BundleAndMinifyJS(c *grift.Context) error {
    // ... (code omitted for brevity)

    fmt.Printf("JavaScript files bundled and minified successfully. Output: %s\n", outputPath)
    return nil
}

// main function registers the Grift task and runs it.
func main() {
    grift.Desc("bundle-js", "Bundle and minify JavaScript files")
    grift.Add("bundle-js", BundleAndMinifyJS)

    taskName := "bundle-js"
    context := &grift.Context{}
    if err := grift.Run(taskName, context); err != nil {
        if err.Error() == "task not found" {
            fmt.Println("Task not found.")
            os.Exit(1)
        }
        panic(err)
    }
}

Running Grift Task

To execute Grift task, run the following command in your terminal:

go run main.go bundle-js

This Grift task will bundle and minify file1.js and file2.js into a single file named bundle.js within the dist directory.

Here is the output, showing the new directory and file bundle.js created and also the message printed in the terminal:

4. Gomponents: Creating Web UI Components in Go

Gomponents is a library for generating HTML components in Go. It simplifies the creation of UI components for frontend applications.

Gomponents is particularly useful when you want to generate HTML components dynamically within your Go code, allowing for more flexibility and abstraction in building UIs.

Code example: This web app shows how to use Gomponents and is inspired by the Gomponents tailwindcss example by Markus Wüstenberg..

Create a file main.go and enter the code below:

package main

import (
    "fmt"
    "net/http"

    g "github.com/maragudk/gomponents"
    c "github.com/maragudk/gomponents/components"
    . "github.com/maragudk/gomponents/html"
)

func main() {
    http.Handle("/", createHandler("Welcome!", simpleComponent("Hello, this is the main page!")))
    http.Handle("/contact", createHandler("Contact", simpleComponent("Contact us!")))
    http.Handle("/about", createHandler("About", simpleComponent("About this site!")))

    // Print a message indicating that the server is running
    fmt.Println("Server is running on http://localhost:8080")

    _ = http.ListenAndServe("localhost:8080", nil)
}

func createHandler(title string, body g.Node) http.HandlerFunc {
    return func(w http.ResponseWriter, r *http.Request) {
        _ = Page(title, r.URL.Path, body).Render(w)
    }
}

func simpleComponent(content string) g.Node {
    return Div(
        H1(g.Text(content)),
        P(g.Text("This is a simple component.")),
    )
}

func Page(title, path string, body g.Node) g.Node {
    return c.HTML5(c.HTML5Props{
        Title:    title,
        Language: "en",
        Body: []g.Node{
            Navbar(path),
            Container(body),
        },
    })
}

func Navbar(currentPath string) g.Node {
    return Nav(Class("navbar"),
        Container(
            NavbarLink("/", "Home", currentPath == "/"),
            NavbarLink("/contact", "Contact", currentPath == "/contact"),
            NavbarLink("/about", "About", currentPath == "/about"),
        ),
    )
}

func NavbarLink(path, text string, active bool) g.Node {
    return A(Href(path), g.Text(text),
        c.Classes{
            "active": active,
        },
    )
}

func Container(children ...g.Node) g.Node {
    return Div(Class("container"), g.Group(children))
}

Run the code with this command to start the server:

go run main.go

Then enter this URL in your browser to the Go components: http://localhost:8080 as shown here:

And we have the Home, About, and Contact components built with Gomponents.

5. Present: A Go-based Slide Deck Tool

Present is a tool in the Go ecosystem used for creating slide decks and presentations. It allows developers to generate technical presentations or documentation directly in Go.

Present is beneficial when you need to create and share technical presentations about frontend development topics, project updates, or any other relevant information.

Here's how you can use Present in your projects:

First, create a file named presentation.slide in your code editor and enter this sample code:

# My Frontend Tech Talk

---

## Agenda

1. Introduction
2. Project Scope
3. Live Demo
4. Q&A

Then write your presentation content using CommonMark, a simple markup language. Use headings (#) for slides and --- to separate them.

Install the Present tool like this:

go get -u golang.org/x/tools/cmd/present

Then run the Present tool in the directory containing your presentation file. Your browser then displays a presentation.

present

Why Use Go Tools in Frontend Projects?

• Efficiency: Go tools are designed to enhance efficiency, automate repetitive tasks, and reduce manual intervention in frontend development workflows.

• Performance: Tools like Fiber are optimized for performance, ensuring that your frontend-backend communication is swift and responsive.

• Consistency: Buffalo's conventions and project structure promote consistency, allowing developers to focus on building features rather than dealing with boilerplate code.

• Flexibility: Gomponents' ability to generate HTML components dynamically in Go provides flexibility in constructing UIs within the language.

• Documentation and Presentation: Present simplifies the creation of technical presentations and documentation, keeping your project insights and updates organized.

The seamless integration of Go tools not only streamlines development but also aligns with Go's philosophy of simplicity and efficiency.

Experiment with these tools, and you'll see the positive impact they can have on your workflow.

Happy coding! 💜