<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Omkar tripathi</title>
    <description>The latest articles on Forem by Omkar tripathi (@code_triggered_).</description>
    <link>https://forem.com/code_triggered_</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F785393%2F2b3d5d0a-549b-4d07-9586-e10252136fa4.png</url>
      <title>Forem: Omkar tripathi</title>
      <link>https://forem.com/code_triggered_</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/code_triggered_"/>
    <language>en</language>
    <item>
      <title>Kizuna 絆 the Gemini-web to Local Environment Bridge</title>
      <dc:creator>Omkar tripathi</dc:creator>
      <pubDate>Wed, 04 Mar 2026 11:05:10 +0000</pubDate>
      <link>https://forem.com/code_triggered_/kizuna-5hc8</link>
      <guid>https://forem.com/code_triggered_/kizuna-5hc8</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/mlh-built-with-google-gemini-02-25-26"&gt;Built with Google Gemini: Writing Challenge&lt;/a&gt;&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;╔══════════════════════════════════════════════════════════════╗
║ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ ║
║                                                              ║
║   ██╗  ██╗ ██╗ ███████╗ ██╗   ██╗ ███╗   ██╗  █████╗         ║
║   ██║ ██╔╝ ██║ ╚══███╔╝ ██║   ██║ ████╗  ██║ ██╔══██╗        ║
║   █████╔╝  ██║   ███╔╝  ██║   ██║ ██╔██╗ ██║ ███████║        ║
║   ██╔═██╗  ██║  ███╔╝   ██║   ██║ ██║╚██╗██║ ██╔══██║        ║
║   ██║  ██╗ ██║ ███████╗ ╚██████╔╝ ██║ ╚████║ ██║  ██║        ║
║   ╚═╝  ╚═╝ ╚═╝ ╚══════╝  ╚═════╝  ╚═╝  ╚═══╝ ╚═╝  ╚═╝        ║
║                                                              ║
║          [ The Gemini to Local Environment Bridge ]          ║
║ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ ║
╚══════════════════════════════════════════════════════════════╝
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Integrating AI into our daily coding workflows is a recurring discussion. The discourse focuses heavily on context windows, reasoning models, and whether AI will replace or augment engineers. But I think centering this debate purely on the models themselves is reductive.&lt;/p&gt;

&lt;p&gt;The bigger question to me is the environment. How do we actually connect these floating, cloud-based brains to our physical work?&lt;/p&gt;

&lt;p&gt;For a long time, my workflow was &lt;em&gt;agonizing&lt;/em&gt;. I was stuck in what I call "&lt;strong&gt;&lt;em&gt;Copy-Paste Torture.&lt;/em&gt;&lt;/strong&gt;" I would give the AI context, copy a file from my IDE, paste it into Google Gemini, ask for a change, copy the resulting code, paste it back, run it, hit an error, and start over.&lt;/p&gt;

&lt;p&gt;Gemini was incredibly capable, but the friction of constant context-switching was killing the momentum. A brain in a browser jar has no hands.&lt;/p&gt;

&lt;p&gt;So, I decided to build it a nervous system. I called it &lt;strong&gt;Kizuna&lt;/strong&gt; (絆 - meaning &lt;em&gt;bond&lt;/em&gt; or &lt;em&gt;connection&lt;/em&gt;).&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built with Google Gemini
&lt;/h2&gt;

&lt;p&gt;Kizuna is an end-to-end toolchain that transforms the standard Google Gemini web interface into a localized, agentic IDE companion. I didn't want to just build a wrapper; I wanted to create a system that felt intentional, granting the web-based LLM the ability to read, search, and safely patch a local codebase without compromising my machine.&lt;/p&gt;

&lt;p&gt;To achieve this, I broke the system down into three foundational pillars:&lt;/p&gt;

&lt;h3&gt;
  
  
  1. The Engine (Local Daemon) ⚙️
&lt;/h3&gt;

&lt;p&gt;Code is where software lives, but you can't just give an AI raw shell access—that's a massive security risk. I built a local backend service to act as a secure sandbox. It translates strict JSON intents from the browser into optimized local file reads, writes, and Git operations.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;╔══════════════════════════════════════════════════════════════╗
║ ░░░░░░░░░░░░░░ THE PATH JAIL (SANDBOX) ░░░░░░░░░░░░░░░░░░░░░ ║
╠══════════════════════════════════════════════════════════════╣
║                                                              ║
║  ╭── [ ALLOWED WORKSPACE ] ──────────────────────────────╮   ║
║  │                                                       │   ║
║  │   📂 /workspace/my-app/     (Sandbox Root)            │   ║
║  │    ├── 📄 src/main.js             [ ✓ ] OK            │   ║
║  │    └── 📄 package.json            [ ✓ ] OK            │   ║
║  │                                                       │   ║
║  ╰───────────────────────────────────────────────────────╯   ║
║                                                              ║
║  ╭── [ BLOCKED EXTERNALS ] ──────────────────────────────╮   ║
║  │                                                       │   ║
║  │   🚨 /etc/passwd                  [ ⨉ ] BLOCKED: 403  │   ║
║  │                                                       │   ║
║  ╰───────────────────────────────────────────────────────╯   ║
║                                                              ║
║  ▪ Engine drops all path traversal requests (../)            ║
║  ▪ Symlinks are resolved prior to boundary validation        ║
╚══════════════════════════════════════════════════════════════╝
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;The Engine resolves all symlinks before executing. If an AI hallucinates a path traversal, the system structurally drops the request.&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  2. The Bridge (Chrome Extension)
&lt;/h3&gt;

&lt;p&gt;A web extension that sits quietly on the right side of the Gemini window. Building this was an architectural challenge. Because Gemini streams text, scraping the DOM naively crashes the parser with incomplete JSON. I had to build a &lt;code&gt;MutationObserver&lt;/code&gt; that waits for the absolute "completion" state of the chat UI before parsing. It captures the AI's outputs, relays them to my local engine via a Background Worker (to bypass strict browser CORS restrictions), and injects the results back into the chat.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. The Protocol (Documentation &amp;amp; Rules)
&lt;/h3&gt;

&lt;p&gt;A deterministic system prompt fed to Gemini at the start of every chat. This acts as the "Operating Manual." LLMs are chaotic; they need boundaries. The protocol forces Gemini to use a strict JSON schema instead of conversational markdown.&lt;/p&gt;

&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;Here is a look at the complete, fully-boxed architectural flow of Kizuna:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;╔══════════════════════════════════════════════════════════════╗
║ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ BROWSER ENVIRONMENT ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ║
║                                                              ║
║  ┌────────────────┐   [ DOM ]     ┌───────────────────────┐  ║
║  │  🧠 Gemini UI  │ ◀───────────▶ │  🧩 Chrome Extension   │  ║
║  └────────────────┘               └───────────────────────┘  ║
║          ▲                                    │              ║
║          │ (Injects UI Data)                  │ (WebSockets) ║
╠══════════╪════════════════════════════════════╪══════════════╣
║          │                                    ▼              ║
║  ┌───────┴────────────────────────────────────┴───────────┐  ║
║  │  💻 KIZUNA ENGINE (Local Daemon :8080)                 │  ║
║  │                                                        │  ║
║  │  ╭─────────────────╮          ╭─────────────────────╮  │  ║
║  │  │ 🛡️ Path Sandbox │ ───────▶ │ 🛠️ Tool Dispatcher   │  │  ║
║  │  ╰─────────────────╯          ╰───┬──────┬──────┬───╯  │  ║
║  │                                   │      │      │      │  ║
║  │                                [Read] [Write] [Git]    │  ║
║  │                                   │      │      │      │  ║
║  │                                 ╭─┴──────┴──────┴─╮    │  ║
║  │                                 │ 📂 Local Storage│    │  ║
║  │                                 ╰─────────────────╯    │  ║
║  └────────────────────────────────────────────────────────┘  ║
║                                                              ║
║ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ LOCAL ENVIRONMENT ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ ║
╚══════════════════════════════════════════════════════════════╝
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;When I ask Gemini to "Update the database connection," it doesn't write me a markdown tutorial. It outputs its intent directly:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"action"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"patch_file"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"path"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"src/config.js"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"search"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"localhost"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"replace"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"process.env.DB_HOST"&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The extension picks this up, the engine verifies the path hasn't escaped the workspace, the file is safely patched, and the success message is injected directly back into the Gemini chat or I pasted it manually sometimes.&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Learned
&lt;/h2&gt;

&lt;p&gt;Through this work, I learned to question the constraints of LLMs first, not treat them as assumptions.&lt;/p&gt;

&lt;h3&gt;
  
  
  Abstract Syntax Trees (ASTs) vs. Raw Text
&lt;/h3&gt;

&lt;p&gt;The naive approach to the context window is to just send the AI the whole file. But why send a 1,000-line file when the AI just needs to know what the file &lt;em&gt;does&lt;/em&gt;? Sending raw text is a massive waste of tokens and scatters the model's focus.&lt;/p&gt;

&lt;p&gt;I built a tool into the engine that parses code into an Abstract Syntax Tree (AST). Instead of returning raw code, it strips the implementation logic and returns a "Skeleton" of class names, imports, and function signatures.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;╔══════════════════════════════════════════════════════════════╗
║ ░░░░░░░░░░░░░░░ AST PARSER ROUTING LOGIC ░░░░░░░░░░░░░░░░░░░ ║
╠══════════════════════════════════════════════════════════════╣
║                 [ 📄 Gemini Requests File ]                  ║
║                              │                               ║
║                              ▼                               ║
║                  ╭───────────────────────╮                   ║
║                  │  Is File &amp;gt; 300 Lines? │                   ║
║                  ╰───────────┬───────────╯                   ║
║                              │                               ║
║            ┌───( YES )───────┴───────( NO )────┐             ║
║            │                                   │             ║
║            ▼                                   ▼             ║
║    ╭───────────────╮                   ╭───────────────╮     ║
║    │  🌳 AST Parse │                   │  📝 Raw Read   │    ║
║    ╰───────┬───────╯                   ╰───────┬───────╯     ║
║            │                                   │             ║
║    ╭───────▼───────╮                   ╭───────▼───────╮     ║
║    │ ▪ Classes     │                   │ ▪ Full Logic  │     ║
║    │ ▪ Signatures  │                   │ ▪ Implement.  │     ║
║    │ ▪ Docstrings  │                   │ ▪ Variables   │     ║
║    ╰───────┬───────╯                   ╰───────┬───────╯     ║
║            │                                   │             ║
║    █▓▒░ Token Cost: ~5%                Token Cost: 100% ░▒▓█ ║
╚══════════════════════════════════════════════════════════════╝
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To make this work, I learned to rely on highly descriptive function names and docstrings. With good docstrings, the AI could understand the codebase's intent just by pinging the AST, mapping out the architecture flawlessly.&lt;/p&gt;

&lt;h3&gt;
  
  
  Sandboxing and Heuristics
&lt;/h3&gt;

&lt;p&gt;I actually used Gemini itself to help create a dataset filtering hundreds of developer CLI commands into "safe" and "harmful" categories. This allowed me to build heuristic judgments into the local sandbox, entirely disabling &lt;code&gt;shell: true&lt;/code&gt; evaluations in Node.&lt;/p&gt;

&lt;h3&gt;
  
  
  The Ultimate Safety Net (Auto-Commits)
&lt;/h3&gt;

&lt;p&gt;You can never trust an AI blindly. I didn't want it making untracked changes. I built a feature into the engine that automatically runs a local &lt;code&gt;git commit&lt;/code&gt; after &lt;em&gt;every (almost) single file change&lt;/em&gt; and kept git files backed up when messing around with git commits and refactoring. If the AI messed up, I had an instant, local undo button. Git became the AI's eyes and my safety net.&lt;/p&gt;

&lt;h2&gt;
  
  
  Google Gemini Feedback
&lt;/h2&gt;

&lt;p&gt;I think of designing with AI in two stages: when the system hums, and when the material fights back.&lt;/p&gt;

&lt;h3&gt;
  
  
  ✅ The 70% Magic
&lt;/h3&gt;

&lt;p&gt;When it worked, it felt like magic. About 70% of the time, the system operated perfectly. &lt;strong&gt;Reading code worked phenomenally well.&lt;/strong&gt; Gemini 2.5 Pro could absorb the AST skeletons, navigate the directory, and reason about system design with striking clarity.&lt;/p&gt;

&lt;h3&gt;
  
  
  ⚠️ When the material fights back (The 30% Chaos)
&lt;/h3&gt;

&lt;p&gt;The remaining 30% of the time was a battle against the realities of the medium: hallucinations, syntax errors, and context degradation.&lt;/p&gt;

&lt;h4&gt;
  
  
  1. The Writing Problem: Surgical Diffs vs. End-to-End
&lt;/h4&gt;

&lt;p&gt;While reading was elegant, writing was clumsy. Gemini 2.5 Pro struggled heavily with surgical, line-by-line insertions. Standard &lt;code&gt;diff&lt;/code&gt; patching is notoriously flaky with LLMs—they hallucinate line numbers or forget indentation. When I asked for complex changes across a large file, it would misplace the code entirely.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;The Workaround:&lt;/strong&gt; The solution wasn't to push harder; it was to change the abstraction. I stopped asking for line manipulations. Instead, I updated the protocol to force verbatim block patching or end-to-end rewrites of the entire file. The &lt;code&gt;search&lt;/code&gt; block had to match the local file &lt;em&gt;exactly&lt;/em&gt;, down to the space, or the Engine rejected it.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h4&gt;
  
  
  2. Amnesia and The Autonomous Self-Healing Loop
&lt;/h4&gt;

&lt;p&gt;Sometimes, the AI would just forget its own rules. It would hallucinate bad JSON syntax (trailing commas, unescaped quotes) or start outputting raw markdown. If I fixed it manually in my IDE, the sync between the "brain" and the "hands" broke.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;The Workaround:&lt;/strong&gt; I built an &lt;strong&gt;Autonomous Self-Correction Loop&lt;/strong&gt;. If the Chrome extension failed to &lt;code&gt;JSON.parse()&lt;/code&gt; the output, it automatically generated an error payload and injected it directly back into the chat. Gemini would immediately apologize, fix the syntax, and re-emit the tool call without me typing a single word and if this was too often then I inserted Protocol docs again.&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;╔══════════════════════════════════════════════════════════════╗
║ ░░░░░░░░░░░░░ AUTONOMOUS SELF-HEALING LOOP ░░░░░░░░░░░░░░░░░ ║
╠══════════════════════════════════════════════════════════════╣
║                                                              ║
║   [🧠 Gemini UI]         [🧩 Extension]          [💻 Engine] ║
║         │                      │                      │      ║
║         │ 1. Invalid JSON      │                      │      ║
║         │ ───────────────────▶ │                      │      ║
║         │                      │ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓   │      ║
║         │ 2. Catch Error       │ ▓ JSON Parse Fails ▓ │      ║
║         │ ◀─────────────────── │ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓   │      ║
║         │                      │                      │      ║
║         │ 3. Fixes Syntax      │                      │      ║
║         │ ───────────────────▶ │                      │      ║
║         │                      │ 4. Valid Request     │      ║
║         │                      │ ━━━━━━━━━━━━━━━━━━━▶ │      ║
║         │                      │                      │      ║
║         │                      │  ╭────────────────╮  │      ║
║         │                      │  │ ⚙️ Validates   │  │      ║
║         │                      │  │ ⚡ Executes    │  │      ║
║         │                      │  ╰────────────────╯  │      ║
║         │                      │ 5. Returns Data      │      ║
║         │                      │ ◀━━━━━━━━━━━━━━━━━━━ │      ║
║         │ 6. Inject Status     │                      │      ║
║         │ ◀━━━━━━━━━━━━━━━━━━━ │                      │      ║
║                                                              ║
╚══════════════════════════════════════════════════════════════╝
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  3. Context Degradation (The Final Boss)
&lt;/h4&gt;

&lt;p&gt;This compounds when the conversation gets too long. When dealing with detailed codebases, the LLM eventually loses its understanding of the current situation. The context window fills up, attention mechanisms drift, and it makes bad decisions.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;The Master Workaround:&lt;/strong&gt; To tackle this, I created a specific &lt;strong&gt;"Summarization Prompt"&lt;/strong&gt; within the Chrome extension. When a chat got too long and the AI started losing the plot, I didn't try to salvage it.&lt;/p&gt;

&lt;p&gt;I would run the prompt, instructing Gemini to condense its current understanding of the architecture, the problem, and our progress into one cohesive document. I would then open a brand new chat, paste that summary along with my base JSON rules, and resume.&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;╔══════════════════════════════════════════════════════════════╗
║ ░░░░░░░░░ CONTEXT HANDOVER PROTOCOL (SUMMARIZATION) ░░░░░░░░ ║
╠══════════════════════════════════════════════════════════════╣
║                                                              ║
║  [ ⏳ STAGE 1: Degradation ]                                 ║
║   │                                                          ║
║   ╰─▶ 💬 Long Chat Session ──▶ ⚠️ Hallucinations Begin       ║
║                                                              ║
║  [ 💉 STAGE 2: The Handoff ]                                 ║
║   │                                                          ║
║   ├─▶ 1. Inject "Summarization Prompt" via Extension         ║
║   ╰─▶ 2. Gemini Generates Cohesive 'State Document' 🗂️        ║
║                                                              ║
║  [ ✨ STAGE 3: Resurrection ]                                ║
║   │                                                          ║
║   ├─▶ 1. Close Degraded Session 🗑️                            ║
║   ├─▶ 2. Open Empty Chat Session 🆕                          ║
║   ├─▶ 3. Inject [ Base Rules + State Document ] 📥           ║
║   ╰─▶ 4. Fresh AI Instance with Perfect Context 🚀           ║
║                                                              ║
╚══════════════════════════════════════════════════════════════╝
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;It was like giving the AI a fresh cup of coffee and a perfect handover document.&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Elevating the craft
&lt;/h3&gt;

&lt;p&gt;The Kizuna system did not work flawlessly out of the box. But building it taught me that modern LLMs are not a pipeline; they are a search. They hallucinate, they forget, and they make errors.&lt;/p&gt;

&lt;p&gt;But by building the right scaffolding—strict constraints, local safety nets, AST parsers, and clever workarounds like the self-healing loop and summarization prompt—you can harness them to do incredible things. It forced me to be intentional about how software is written, and it laid a profound foundation for the systems I want to build next.&lt;/p&gt;

&lt;h1&gt;
  
  
  GeminiChallenge #AI #WebDev #Productivity #Agents #Automation #SoftwareDesign
&lt;/h1&gt;

</description>
      <category>devchallenge</category>
      <category>geminireflections</category>
      <category>gemini</category>
    </item>
    <item>
      <title>DialogueAI: Interactive Playground for assemblyai with automatic code generation</title>
      <dc:creator>Omkar tripathi</dc:creator>
      <pubDate>Sat, 23 Nov 2024 13:47:18 +0000</pubDate>
      <link>https://forem.com/code_triggered_/dialogueai-interactive-playground-for-assemblyai-speech-to-text-api-and-lemur-api-and-generate-30de</link>
      <guid>https://forem.com/code_triggered_/dialogueai-interactive-playground-for-assemblyai-speech-to-text-api-and-lemur-api-and-generate-30de</guid>
      <description>&lt;p&gt;This is a submission for the &lt;a href="https://dev.to/challenges/assemblyai"&gt;AssemblyAI Challenge:&lt;/a&gt; : Sophisticated Speech-to-text and No More Monkey Business.&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built : &lt;a href="https://github.com/triggeredcode/DialogueAI" rel="noopener noreferrer"&gt;DialogueAI ( GITHUB )&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;I built DialogueAI, an interactive platform that leverages the powerful capabilities of AssemblyAI's sophisticated speech-to-text API and their LeMUR summarization model. The primary goal of this platform is to simplify the process for users who are new to these APIs, helping them overcome the steep learning curve typically associated with diving into new documentation.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Key Features of the Platform&lt;/strong&gt;:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Interactive Playground&lt;/strong&gt;: Users can explore and experiment with various API functionalities through an intuitive interface. Input boxes, selection options, model selection, and summary types are all easily adjustable.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Instant Results&lt;/strong&gt;: With a single click, users can execute API calls and see the results immediately. This feature helps bridge the gap between learning and actual implementation.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Code Generation&lt;/strong&gt;: For those who prefer to handle API calls manually, the platform generates the necessary code snippets, which can be directly run on their systems. This feature significantly reduces the time and effort required to understand and use the API.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Smart Summary Page&lt;/strong&gt;: Similar to the main playground, this page offers various configuration options and examples to help users generate summaries of transcripts quickly. Users can also get the generated code to use by themselves.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;By providing these features, the platform ensures that users can quickly and efficiently learn how to use AssemblyAI's APIs, reducing the frustration and time typically spent navigating complex documentation. This makes it an invaluable tool for developers and anyone looking to incorporate speech-to-text and summarization capabilities into their projects.&lt;/p&gt;

&lt;h2&gt;
  
  
  Journey
&lt;/h2&gt;

&lt;p&gt;The inspiration for this platform came from my own experience when I first encountered AssemblyAI's API. I found it a bit confusing to get started with the documentation and the API usage. So, I set out to solve this problem not just for myself but for everyone else who might face the same challenge.&lt;/p&gt;

&lt;h3&gt;
  
  
  Tech Used
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Frontend&lt;/strong&gt;: React, TypeScript, Tailwind CSS&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;API&lt;/strong&gt;: AssemblyAI Speech-to-Text, LeMUR LLM model summary API&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Animations&lt;/strong&gt;: Framer Motion&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Working Features
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Interactive Speech-to-Text Configurations&lt;/strong&gt;:

&lt;ul&gt;
&lt;li&gt;Users can easily configure and experiment with various settings.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Single Click Run&lt;/strong&gt;: Execute the configuration and see results immediately.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Single Click Code Generation&lt;/strong&gt;: Generates the code based on the configuration for users to use directly.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Configurations Available&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;API Key&lt;/li&gt;
&lt;li&gt;Speech Model&lt;/li&gt;
&lt;li&gt;Word Boost&lt;/li&gt;
&lt;li&gt;Profanity Filter&lt;/li&gt;
&lt;li&gt;Audio Range&lt;/li&gt;
&lt;li&gt;Audio Intelligence&lt;/li&gt;
&lt;li&gt;Summary Model&lt;/li&gt;
&lt;li&gt;Summary Type&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqdy3i857awn7gcagyd66.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqdy3i857awn7gcagyd66.png" alt="Interactive Speech-to-Text Configurations" width="800" height="580"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnocbuprkv0chetc8oksv.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnocbuprkv0chetc8oksv.png" alt="Interactive Speech-to-Text Configurations" width="800" height="782"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fx02awcqmd34mypjg7b1e.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fx02awcqmd34mypjg7b1e.png" alt="Interactive Speech-to-Text Configurations" width="800" height="531"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fx71uvjj0gqdk68us9wfa.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fx71uvjj0gqdk68us9wfa.png" alt="Interactive Speech-to-Text Configurations" width="800" height="759"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgv348kbgt4e2fi0vtgr9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgv348kbgt4e2fi0vtgr9.png" alt="Interactive Speech-to-Text Configurations" width="800" height="740"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flmpst5ngfabyrn1jpbky.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flmpst5ngfabyrn1jpbky.png" alt="Generted code and summary" width="800" height="541"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9xrqfn5u7mzg5s8wre01.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9xrqfn5u7mzg5s8wre01.png" alt="Generted code and summary" width="800" height="842"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Interactive Summary Generation with LeMUR&lt;/strong&gt;:

&lt;ul&gt;
&lt;li&gt;Users can generate summaries with various options and configurations.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Single Click Run&lt;/strong&gt;: Instantly generate summaries.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Single Click Code Generation&lt;/strong&gt;: Provides the code for generating summaries.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Configurations Available&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;API Key&lt;/li&gt;
&lt;li&gt;Summary Type (Basic, Custom)&lt;/li&gt;
&lt;li&gt;Transcript ID&lt;/li&gt;
&lt;li&gt;Model&lt;/li&gt;
&lt;li&gt;Prompt&lt;/li&gt;
&lt;li&gt;Custom Prompt&lt;/li&gt;
&lt;li&gt;Max Output Tokens (Example Pre-coded)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzom6koz439t2yeyymp3p.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzom6koz439t2yeyymp3p.png" alt="Image description" width="800" height="817"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb41b3qm3srzvokf5d8h9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb41b3qm3srzvokf5d8h9.png" alt="Image description" width="800" height="790"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs71aqh9fddn9eory9zn4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs71aqh9fddn9eory9zn4.png" alt="Image description" width="800" height="826"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk1smmt2kluqj1giglqee.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk1smmt2kluqj1giglqee.png" alt="Image description" width="800" height="758"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  In Development
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Chat with the Transcript&lt;/strong&gt;: Using LeMUR API to enable interactions with the generated transcript.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Interactive Quiz Generation&lt;/strong&gt;: Generate quizzes based on the transcript.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff2o3u1j1vuli16ygw7yb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff2o3u1j1vuli16ygw7yb.png" alt="Image description" width="800" height="468"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Journey
&lt;/h3&gt;

&lt;p&gt;So far, I've successfully addressed the initial problem statements for the speech-to-text API and LeMUR summary model. This project has been incredibly exciting to work on, pushing the boundaries of what can be done with API interactions and user interface design.&lt;/p&gt;

&lt;p&gt;Looking ahead, I plan to expand the platform to include interactive playgrounds and code generation capabilities for real-time APIs and more sophisticated use cases of LeMUR. This will further streamline the learning and implementation process for developers and enhance the overall user experience.&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>assemblyaichallenge</category>
      <category>ai</category>
      <category>developertool</category>
    </item>
  </channel>
</rss>
