From c0d81d62e64b164a096b4e9d2a36da7fb64591f5 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 27 Sep 2025 09:54:53 +0000 Subject: [PATCH 1/4] Initial plan From f1438897ac130e9b3db759d9a83b3ddf024d0e2b Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 27 Sep 2025 09:59:35 +0000 Subject: [PATCH 2/4] Add English translation of agentic 101 README.md as README_EN.md Co-authored-by: falkorichter <50506+falkorichter@users.noreply.github.com> --- agentic 101/README_EN.md | 301 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 301 insertions(+) create mode 100644 agentic 101/README_EN.md diff --git a/agentic 101/README_EN.md b/agentic 101/README_EN.md new file mode 100644 index 0000000..f94dc22 --- /dev/null +++ b/agentic 101/README_EN.md @@ -0,0 +1,301 @@ +footer: Β© Falko Richter - This presentation was built *without* AI +slidenumbers: true + +# TechTalk: Vibe Coding + +--- + +## About me + +* International Media Informatics HTW 🌎 +* 16 Years IT - crossfunctional IC/EM/Product + * TIC-mobile/Sinnerschrader/Accenture, Sensorberg (IOT), Kitchenstories πŸ‘¨β€πŸ³ Wayfair (πŸ‡ΊπŸ‡Έ furniture retailer) +* 35services 🧰 KTG Elementary School 🚸 Berlindroid πŸ€– +* Cargo bikes πŸš΄β€β™‚οΈ Quadcopters ✈ Podcaster, Dad of 2 πŸ‘§ + +--- + +* German, questions welcome in English +* This is being recorded, presentation will be available at the end ([open source](https://github.com/falkorichter/presentations/blob/main/agentic%20101/README.md)) +* Q&A at the end + * Florian is taking notes for Q&A topics +* 90 minutes, Florian keeps track of time :) + +### Questions? + +--- + +## What do you already know? + +* Which AI use cases are you already using (privately) +* Vibe coding? + +--- + +## IT Milestones +* personal computer / internet +* web 2.0 +* iPhone +* cloud +* ? + +--- + +# Terms + +- OpenAI, Anthropic (Companies) +- ChatGPT, [claude](https://claude.ai/) (Products) +- GPT-4, Gemini 2.5 Pro, Claude Sonnet 4, Claude Opus 4.1 (LLMs) + +... + +--- + +## vibe coding + +# What is this actually? + +[x.com/karpathy](https://x.com/karpathy/status/1886192184808149383) + +"There's a new kind of coding I call "vibe coding", where you fully give in to the vibes, embrace exponentials, and forget that the code even exists." + +--- + +> Vibe Coding refers to a type of software development in which almost exclusively the prompt of a large language model is served in order to generate the source code required for the software. +> +> +> Vibe Coding works with the tools of prompt engineering. Unlike qualified software development, which includes checking and testing the source code and the product for error-free operation by specialists, Vibe Coding should not require any prior knowledge or training. +-- [de.wikipedia.org/wiki/Vibe_Coding](https://de.wikipedia.org/wiki/Vibe_Coding) + +--- +## vibe coding + +### "Pure" Vibe-Coding: +In its most exploratory form, the user completely trusts that the AI output will work as intended. As Karpathy put it, it's like "forgetting that the code even exists". Therefore, this method is best suited for rapid ideation or for what he calls "weekend projects" where speed is the primary concern. [cloud.google.com](https://cloud.google.com/discover/what-is-vibe-coding?hl=de) + +--- + +## ~~vibe coding~~ **agentic coding** + +### Responsible AI-assisted development: +"This is about the practical and professional application of the concept. In this model, AI tools act as powerful support or 'pair programmer'. The user gives instructions to the AI, reviews, tests and understands the generated code and takes full responsibility for the end product." [cloud.google.com](https://cloud.google.com/discover/what-is-vibe-coding?hl=de) + +--- + +## Tried for you: tools + +* [Cursor](https://cursor.com/) (VS fork) +* windsurf ([VS fork](https://windsurf.com/editor) with integration, [plugins](https://windsurf.com/plugins)) +* [github CoPilot](https://github.com/features/copilot) (online) +* [cline.bot](https://cline.bot/) (VS code plugin) +* gemini +* notebookLM -> knowledge management + * `35services` [link](https://notebooklm.google.com/notebook/be006e4a-dcd2-4c13-894c-1f165020c52e) + * `35services Taxes` [link](https://notebooklm.google.com/notebook/2a477e34-a6c9-48ae-b563-e79b01de4a56) + * `Google and other podcasts` [link](https://notebooklm.google.com/notebook/2c344d3e-8a01-4fc4-a566-9b0c5ffb2cf3) + +--- + +## Tried for you: use-cases + +* "pure" vibe coding" / "Responsible AI-assisted development" +* code completion/ review (copilot, gemini, cursor) +* Writing [ADRs](https://github.com/joelparkerhenderson/architecture-decision-record) and RFCs +* (Security) reviews (`Android -> PHP -> Microservice`) +* Diagrams + +Generate images, edit images (πŸ‘») + + +--- + +## LLM + +* large language model / Language Model +* Programming == Language +* trained with GIT histories `->` Programming processes + +`LLMs are very good at duplicating solutions to problems that have already been solved. So basic programming patterns are very easy for it to spit out.` + +--- + +> Well.. one obvious reason is that this is what they were trained of, so this is what they excel at. An LLM is essentially a completion algorithm, that must adhere to the same alphabet soup it has swallowed during its training. +-- Asaf Atzmon [beeblebrux.medium.com/llms-are-all-the-vibe-but-whats-next-c653d5b7cae5](https://beeblebrux.medium.com/llms-are-all-the-vibe-but-whats-next-c653d5b7cae5) + +--- + +## Components / how does it work? +* frontend/app + * Integrations + * MCP +* llm + * local / remote [Vertex.ai](https://cloud.google.com/vertex-ai?hl=de)... + +![](images/cline_vertex1.png) + +[VS Code](/Applications/Visual\ Studio\ Code.app/Contents/MacOS/Electron) + +--- + +![](images/cline.png) + +--- + +![](images/cline_vertex1.png) + +--- + +![](images/cline_vertex2.png) + +--- + +![inline](images/cline_vertex3.png) + +--- + + + +* feedback loop +* multi agent +* plan / act mode +* background mode + + +--- + +# Other tools: +* [goose](https://block.github.io/goose/) (command line) +* [junie from Jetbrains](https://www.jetbrains.com/de-de/junie/) (plugin) +* [claude code](https://claude.com/product/claude-code) (command line) +* [cursor CLI](https://cursor.com/de/docs/cli/overview) +* [cline plugins](https://docs.cline.bot/getting-started/installing-cline) in other IDEs (VS Code, JetBrains IDEs) + +--- + +## MCP + +* [https://claude.ai/share/d5385d25-9238-4f20-afd8-1835ddf5e909](https://claude.ai/share/d5385d25-9238-4f20-afd8-1835ddf5e909) +* [server-concepts#how-tools-work](https://modelcontextprotocol.io/docs/learn/server-concepts#how-tools-work) + +``` +/** + * Returns comprehensive tool definitions optimized for AI agent interaction. + * Tools are categorized and include detailed usage guidance, examples, and workflow patterns. + */ + listTools(): Promise<{ tools: MCPToolDto[] }> + + async callTool(name: string, args: any): Promise +``` +* [github.com/falkorichter/fairsplit/blob/main/src/mcp/mcp.service.ts#L33](https://github.com/falkorichter/fairsplit/blob/main/src/mcp/mcp.service.ts#L33) + + +--- + +## case study 1: Building a Chrome plugin + +--- +## case study 1: Building a Chrome plugin +#### product briefing +[https://github.com/falkorichter/agentic-archive.is-ifier](https://github.com/falkorichter/agentic-archive.is-ifier) + + + +* [https://github.com/falkorichter/agentic-archive.is-ifier/commit/1e1de4979801079e9404a4297a7b4aeedc4e520b](https://github.com/falkorichter/agentic-archive.is-ifier/commit/1e1de4979801079e9404a4297a7b4aeedc4e520b) initial README + +--- +## case study 1: Building a Chrome plugin +#### github copilot + * pull request [https://github.com/falkorichter/agentic-archive.is-ifier/pull/2](https://github.com/falkorichter/agentic-archive.is-ifier/pull/2) + * [https://github.com/falkorichter/agentic-archive.is-ifier/pull/2/agent-sessions/63746a6c-0dde-4a6f-a928-87fad3e00952](https://github.com/falkorichter/agentic-archive.is-ifier/pull/2/agent-sessions/63746a6c-0dde-4a6f-a928-87fad3e00952) + +--- + +* "Now let me test the extension by taking a screenshot using a browser to verify it works correctly. First, let me open the extension in a browser:" [deeplink](https://github.com/falkorichter/agentic-archive.is-ifier/pull/2/agent-sessions/63746a6c-0dde-4a6f-a928-87fad3e00952#:~:text=Now%20let%20me%20test,playwright%2Dmcp%2Dserver%2Dbrowser_navigate) +* "Now let me create a basic icon. I'll create a simple PNG with "is!" text:" +* "Now let me test the extension by taking a screenshot using a browser to verify it works correctly. First, let me open the extension in a browser:" + +--- + +```text +Error: page.goto: net::ERR_BLOCKED_BY_CLIENT at file:///home/runner/work/agentic-archive.is-ifier/agentic-archive.is-ifier/test.html Call log: + +navigating to "file:///home/runner/work/agentic-archive.is-ifier/agentic-archive.is-ifier/test.html", waiting until "domcontentloaded" +``` + +--- + +## case study 1: Building a Chrome plugin +### building tests + +Tests were there from the beginning πŸ’ͺ + +`Can we setup github CI for the project please to ensure tests are run as part of the PR` [issues/3](https://github.com/falkorichter/agentic-archive.is-ifier/issues/3) +* [tests/test-runner-headless.js](https://github.com/falkorichter/agentic-archive.is-ifier/pull/4/files#diff-445db4a234ffa5f8a0a5822dc73e2b4d75ff94b4771ecb1ba92e1a975c38baaf) +* [/main/tests/test-functions.js#L322](https://github.com/falkorichter/agentic-archive.is-ifier/blob/main/tests/test-functions.js#L322) +* [live](file:///Users/falkorichter/Documents/workspaces/open%20source/agentic-archive.is-ifier/tests/test.html) + + +--- + +## Hallucinations + +[Example](https://github.com/falkorichter/agentic-archive.is-ifier/pull/43/files#diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5R255) + +[https://github.com/falkorichter/agentic-archive.is-ifier/issues/34](https://github.com/falkorichter/agentic-archive.is-ifier/issues/34) + +--- + +## copilot suggests + +[https://github.com/falkorichter/agentic-experiences/pull/2#issuecomment-3192211640](https://github.com/falkorichter/agentic-experiences/pull/2#issuecomment-3192211640) copilot actions + +> @falkorichter πŸ‘‹ This repository doesn't have [Copilot instructions](https://docs.github.com/enterprise-cloud@latest/copilot/how-tos/configure-custom-instructions/add-repository-instructions?tool=webui). With Copilot instructions, > I can understand the repository better, work faster and produce higher quality PRs. + +> I can generate a .github/copilot-instructions.md file for you automatically. Click [here](https://github.com/falkorichter/agentic-experiences/issues/new?title=✨+Set+up+Copilot+instructions&body=Configure%20instructions%20for%20this%20repository%20as%20documented%20in%20%5BBest%20practices%20for%20Copilot%20coding%20agent%20in%20your%20repository%5D%28https://gh.io/copilot-coding-agent-tips%29%2E%0A%0A%3COnboard%20this%20repo%3E&assignees=copilot) to open a pre-filled issue and assign it to me. I'll write the instructions, and then tag you for review. + + + +--- + + +## 2 fairsplit + +https://github.com/tobiasheine/fairsplit/pull/40 + +> * 🎯 Product Agent: Requirements gathering and story grooming +> * πŸ’» Development Agent: Code implementation and architecture +> * πŸ§ͺ Testing Agent: Quality assurance and test creation +> * πŸš€ DevOps Agent: Deployment and infrastructure management +> * πŸ“‹ Orchestrator Agent: Workflow coordination and process enforcement +[https://github.com/tobiasheine/fairsplit/blob/07ab4fd678a839bace397cf9509c10322ea6b605/CASE_STUDY_STORY.md#the-multi-agent-architecture-solution](the-multi-agent-architecture-solution) + +--- +### list of case studies +* huge refactoring, repetitive tasks +* AI meeting notes + notebookLM +* security analysis kotlin/PHP/java +* colleague's question +* ... + +--- +### my experiences + +* Skepticism (Hallucinations) +* WOW 🀯 ([TiB_Verein](https://github.com/falkorichter/TiB_Verein)) - WOW 😳 +* Great complement in extremely many areas +* "Your Junior developer" - or a [Staff Bug Fixing Engineer](https://medium.com/for-self-taught-developers/i-spent-6-years-as-a-senior-developer-then-ai-fixed-my-bug-in-15-minutes-thats-when-i-knew-i-94d9fef9990a) [archive.is](https://archive.is/U8F3z) + +--- + +## Q&A + +--- + +### Overflow + +* `Mermaid Diagrams`: [cursor.com/de/docs/configuration/tools/mermaid-diagrams](https://cursor.com/de/docs/configuration/tools/mermaid-diagrams) + +--- + +> In an AI-driven world, staying comfortable is the riskiest career move you can make. +-- ([source](https://medium.com/for-self-taught-developers/i-spent-6-years-as-a-senior-developer-then-ai-fixed-my-bug-in-15-minutes-thats-when-i-knew-i-94d9fef9990a) [archive.is](https://archive.is/U8F3z)) \ No newline at end of file From 889992d5e43e51dc3d53114c714ccd7c12213930 Mon Sep 17 00:00:00 2001 From: Falko Richter Date: Mon, 29 Sep 2025 10:16:51 +0200 Subject: [PATCH 3/4] Revise footer in README_EN.md Updated footer to include link to the presentation and mention GitHub Copilot. --- agentic 101/README_EN.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/agentic 101/README_EN.md b/agentic 101/README_EN.md index f94dc22..98cf844 100644 --- a/agentic 101/README_EN.md +++ b/agentic 101/README_EN.md @@ -1,4 +1,4 @@ -footer: Β© Falko Richter - This presentation was built *without* AI +footer: Β© Falko Richter - This [presentation](README.md) was built *without* AI and translated with [Github Copilot](https://github.com/falkorichter/presentations/pull/8) slidenumbers: true # TechTalk: Vibe Coding @@ -298,4 +298,4 @@ https://github.com/tobiasheine/fairsplit/pull/40 --- > In an AI-driven world, staying comfortable is the riskiest career move you can make. --- ([source](https://medium.com/for-self-taught-developers/i-spent-6-years-as-a-senior-developer-then-ai-fixed-my-bug-in-15-minutes-thats-when-i-knew-i-94d9fef9990a) [archive.is](https://archive.is/U8F3z)) \ No newline at end of file +-- ([source](https://medium.com/for-self-taught-developers/i-spent-6-years-as-a-senior-developer-then-ai-fixed-my-bug-in-15-minutes-thats-when-i-knew-i-94d9fef9990a) [archive.is](https://archive.is/U8F3z)) From cd2d6a71a204effcc657777f2f7b3846e1e1e97c Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 29 Sep 2025 08:17:33 +0000 Subject: [PATCH 4/4] Add translation note specifying Claude 3.5 Sonnet was used for English translation Co-authored-by: falkorichter <50506+falkorichter@users.noreply.github.com> --- agentic 101/README_EN.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/agentic 101/README_EN.md b/agentic 101/README_EN.md index 98cf844..53e29c1 100644 --- a/agentic 101/README_EN.md +++ b/agentic 101/README_EN.md @@ -1,6 +1,8 @@ footer: Β© Falko Richter - This [presentation](README.md) was built *without* AI and translated with [Github Copilot](https://github.com/falkorichter/presentations/pull/8) slidenumbers: true +> **Translation Note:** This English version was translated from the original German presentation using Claude 3.5 Sonnet (Anthropic) as part of GitHub Copilot's AI assistance. + # TechTalk: Vibe Coding ---