Reimagine Product Development Matter in Action

Reimagine Product Development: Matter in Action 🔗 **Source:** [Reimagine Product Development: Matter in Action](https://www.youtube.com/watch?v=nVk5yP7m12Y) > [!note]+ Document Notes > tags: [matter, product-development, ai-coding, jetbrains] > author: JetBrains > source: YouTube > reference: https://www.youtube.com/watch?v=nVk5yP7m12Y > date created: 2025-01-05 14:32 > > # 🏷️ Title: Reimagine Product Development: Matter in Action >  ## 🧰 Action Inbox - [H1] Join Matter waitlist for fast-track access to early program — 00:24 #matter - [H2] Test repository mirroring with private repos — 09:45 #setup - [H3] Implement team collaboration via Slack integration — 31:20 #collaboration ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - [JetBrains Matter](https://www.jetbrains.com/matter/) - [GitHub Copilot Statistics](https://github.com/features/copilot) ## 📝 Summary - JetBrains introduced Matter, a VIP coding tool designed for product teams including designers and product managers - AI is accelerating product development lifecycles by 3x, allowing non-developers to create prototypes and iterate on existing codebases - Matter enables safe collaboration through repository mirroring, live previews, and GitHub pull request integration - The tool addresses the growing trend of AI-accelerated fullstack development teams where single individuals can handle entire product cycles - Key stakeholders include product managers, designers, and developers seeking faster iteration cycles ## 📖 Main Content Matter represents JetBrains' response to the rapidly evolving AI-assisted development landscape. With GitHub Copilot usage growing from 1.2 million to 37 million users between 2022-2024, and 70-97% of developers now using AI tools, the traditional product development workflow is being compressed. The tool specifically targets modern product teams where designers and product managers want to prototype directly with code rather than creating specifications. Unlike traditional coding tools that require technical expertise, Matter provides a web-based interface with chat-driven development against existing codebases. Key technical features include repository mirroring for safe experimentation, automatic environment setup, live preview sharing, and seamless handoff to developers via GitHub pull requests. The system supports complex setups including monorepos, private registries, and Docker containers. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/nVk5yP7m12Y?t=0) — [H1] Introduction and team overview - Key idea: JetBrains team introduces Matter as VIP coding tool for product teams - Evidence: "We are super excited to chat about matter, a VIP coding tool for your existing code bases" #### ⏱️ [02:45](https://youtu.be/nVk5yP7m12Y?t=165) — [H2] AI adoption statistics in development - Key idea: Massive growth in AI tool adoption among developers - Evidence: "GitHub Copilot was used by 1.2 million users in 2022 and by end of 2024 it already been used by 37 million users" #### ⏱️ [04:30](https://youtu.be/nVk5yP7m12Y?t=270) — [H2] Team AI usage experiences - Key idea: Each team member shares their AI adoption journey - Evidence: "I started using AI back in 2023 when chat GPT 35 came out" #### ⏱️ [07:15](https://youtu.be/nVk5yP7m12Y?t=435) — [H1] Product development lifecycle compression - Key idea: AI is compressing entire product development from research to deployment - Evidence: "AI is now compresses the entire product development life cycle from research and product development to design and actually coding" #### ⏱️ [09:45](https://youtu.be/nVk5yP7m12Y?t=585) — [H2] Matter demo setup with GitHub integration - Key idea: Matter connects to existing repositories through mirroring - Evidence: "We are making a copy of your repository on our server... it's called mirror because we will be updating it with each new change" #### ⏱️ [12:30](https://youtu.be/nVk5yP7m12Y?t=750) — [H3] Personal access token requirements - Key idea: Private repositories require GitHub personal access tokens for Matter integration - Evidence: "Matter doesn't have access to it obviously and we need to provide the access" #### ⏱️ [15:20](https://youtu.be/nVk5yP7m12Y?t=920) — [H2] Environment setup automation - Key idea: Matter's AI agent automatically configures development environments - Evidence: "Matter AI agent tries to figure it out how to actually work with this repository what are the patterns here" #### ⏱️ [18:45](https://youtu.be/nVk5yP7m12Y?t=1125) — [H3] NPM private registry handling - Key idea: Enterprise setups require private registry tokens for dependencies - Evidence: "We have our own libraries our own component libraries... we download them from our private registry" #### ⏱️ [22:10](https://youtu.be/nVk5yP7m12Y?t=1330) — [H1] Live preview functionality demonstration - Key idea: Matter provides live web preview of changes to existing applications - Evidence: "This is our existing metro landing page... now we can see the very same website also online" #### ⏱️ [24:35](https://youtu.be/nVk5yP7m12Y?t=1475) — [H2] Typewriter effect implementation - Key idea: Simple UI changes can be implemented through chat interface - Evidence: "I want to add a typewriter effect to that line" #### ⏱️ [27:50](https://youtu.be/nVk5yP7m12Y?t=1670) — [H2] Component reuse from existing codebase - Key idea: Matter's AI reuses existing components rather than creating new ones - Evidence: "The agent figured it out to use the button from our codebase" #### ⏱️ [31:20](https://youtu.be/nVk5yP7m12Y?t=1880) — [H1] Figma integration for design handoff - Key idea: Designers can import Figma designs directly into Matter for implementation - Evidence: "We have the feature is import from Figma... you can paste a link to the Figma artboard" #### ⏱️ [35:45](https://youtu.be/nVk5yP7m12Y?t=2145) — [H1] GitHub pull request creation - Key idea: Matter generates GitHub pull requests for developer handoff - Evidence: "We decided to go even further in this workflow and introduce a handoff via pull request in GitHub" #### ⏱️ [39:20](https://youtu.be/nVk5yP7m12Y?t=2360) — [H2] Collaboration features and team mentions - Key idea: Team members can collaborate through mentions and shared previews - Evidence: "I can mention here Elena as well... she can easily duplicate the idea and without bothering my task" ## 📚 References - [GitHub Copilot](https://github.com/features/copilot) - [Cursor AI Editor](https://cursor.sh/) - [Lovable](https://lovable.dev/) - [Claude AI](https://claude.ai/) ## 🗣️ Paraphrase - JetBrains developed Matter to bridge the gap between designers/product managers and code, allowing non-technical team members to iterate on real applications - The tool addresses the compressed product development cycle where AI enables individuals to handle entire product workflows from ideation to deployment - Matter's core innovation is safe experimentation on existing codebases through repository mirroring and automated environment setup ## 📰 Newsletter 🚀 **Matter: JetBrains' New Tool Transforms Product Team Collaboration** JetBrains just unveiled Matter, a groundbreaking VIP coding tool that's reshaping how product teams work together. With AI adoption skyrocketing (GitHub Copilot grew from 1.2M to 37M users in just two years!), traditional handoffs between designers, PMs, and developers are becoming bottlenecks. **What makes Matter special?** It lets designers and product managers work directly with existing codebases through an intuitive chat interface, creating live previews that can be shared with stakeholders. No more lengthy spec documents or "imagine how this would look" conversations. **Key benefits:** - Safe experimentation through repository mirroring - Automatic environment setup for complex projects - Seamless Figma integration for design import - Direct GitHub pull request generation for developer handoff The team reports 3x faster development cycles since implementing Matter in their own workflow. Perfect for modern product teams embracing AI-accelerated development! Resources: [JetBrains Matter](https://jetbrains.com/matter/), [Developer Docs](https://developer.jetbrains.com/), [AI Assistant Guide](https://jetbrains.com/ai/) ## ✅ Action Items #### DevRel - Developer advocacy: Create tutorials for Matter onboarding, demo at conferences, track adoption metrics - Education: Develop workshops for product team collaboration, office hours for technical questions - Developer experience: Improve documentation for private registry setup, enhance error messages - Developer marketing: Content strategy around AI-assisted product development, case study campaigns - Community management: Foster user feedback collection, moderate support forums #### OSPO - Policy & Governance: Review contribution policies for AI-generated code, establish review guidelines - License Compliance: Scan Matter-generated code for licensing issues, train teams on compliance - Security Management: Implement vulnerability scanning for generated code, establish security attestations - Software Inventory: Track SBOM for AI-generated components, establish ownership protocols - Developer Support: Provide training on secure AI coding practices, implement tooling standards #### Community - Maintainers: Support roadmap development for AI coding tools, create governance templates - Contributors: Onboard new contributors to AI-assisted development workflows - Sponsors: Report on ROI of AI tooling investments, transparent budget allocation - Ecosystem: Coordinate with other AI coding tool providers, establish best practices #### WordPress - Core: Evaluate AI assistance for WordPress core development, establish coding standards - Core Performance: Profile AI-generated code performance, optimize generated components - Community: Create Matter integration tutorials for WordPress development - Training: Develop learning paths for AI-assisted WordPress development - Documentation: Update DevHub with AI coding best practices #### The WPCC - Programs: Fund AI coding tool access for WordPress contributors - Projects: Governance frameworks for AI-generated contributions - Funding: Matched grants for teams adopting AI development workflows #### FAIR - Technical independence: Ensure AI coding tools don't create vendor lock-in - Policies: Establish transparency requirements for AI-generated code - Governance artifacts: Create charters for AI tool usage in open source projects ## 🧪 Hypotheses - Teams using Matter will see 2-3x faster iteration cycles on UI/UX changes compared to traditional design-dev handoffs - Non-technical team members will contribute 40-60% more directly to product development when given AI coding tools - Repository mirroring reduces development environment setup friction by 80%+ for complex projects - AI-generated code quality from tools like Matter will approach human-written code standards within 12 months ### 📊 Methodology - A/B testing of product development cycles with and without Matter integration - Survey analysis of team productivity metrics before and after AI tool adoption - Code quality assessment comparing AI-generated vs human-written components - Time-to-delivery measurement for features developed through Matter vs traditional workflows ### ❓ Questions - How does code quality from AI tools like Matter compare to human-written code in production environments? - What are the security implications of AI-generated code in enterprise development workflows? - How will traditional software engineering roles evolve as non-technical team members gain coding capabilities? ### 🔮 Future Research - Long-term maintainability of AI-generated codebases - Integration patterns between AI coding tools and existing CI/CD pipelines - Training requirements for product teams adopting AI coding workflows ### 💡 Implications - Practice: Traditional design-dev handoff processes will need fundamental restructuring - Policy: Organizations need governance frameworks for AI-generated code contributions - Security: New security review processes required for AI-generated code - Education: Product managers and designers need basic coding literacy training - Funding: Budget allocation shifts toward AI tooling vs traditional development resources ### 🧠 Learning Styles Assessment Reading level estimate: 12th grade (technical product demonstration) #### 👀 Visual learners - Present: Live demo with screen sharing, UI walkthroughs, visual code changes - Improve: Architecture diagrams showing Matter's integration points, flowcharts of development process #### 🔊 Aural learners - Present: Live presentation with detailed verbal explanations - Improve: Audio summary of key features, podcast-style discussion segments #### 🗣️ Verbal learners - Present: Clear technical terminology definitions, analogies for complex concepts - Improve: Glossary of AI coding terms, comparison tables with other tools #### 🧩 Kinesthetic learners - Present: Live demonstration, step-by-step setup process - Improve: Hands-on tutorial checklist, interactive sandbox environment #### 🧠 Logical learners - Present: Clear progression from problem to solution, technical architecture - Improve: Decision trees for tool adoption, ROI calculations #### 🧑‍🤝‍🧑 Social learners - Present: Team collaboration scenarios, Q&A session - Improve: Community forums, peer review processes #### 🧘‍♀️ Solitary learners - Present: Individual tool exploration capabilities - Improve: Self-paced learning modules, personal project templates #### 🌿 Naturalistic learners - Present: Product development lifecycle analogies - Improve: Ecosystem thinking about tool integration ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Clear verbal descriptions during demo - Improve: Alt text for visual demonstrations, structured heading hierarchy #### Keyboard navigation - Present: Web-based interface supports keyboard interaction - Improve: Documented keyboard shortcuts, skip navigation options #### Contrast and readability - Present: Clear visual presentation in demo - Improve: High contrast themes, adjustable font sizes #### Text resizing and reflow - Present: Web-based interface with responsive design - Improve: Zoom compatibility testing, mobile optimization #### Media and captions - Present: Live presentation format - Improve: Auto-generated captions, transcript availability #### Forms and interactions - Present: Chat interface with clear input/output - Improve: Form validation feedback, accessible error states ### 🌍 DEIB Assessment #### Cultural breadth - Present: International team with diverse backgrounds - Improve: Multi-language support documentation, global use case examples #### Inclusive language - Present: Gender-neutral technical terminology - Improve: Plain language explanations, avoid cultural idioms #### Neurodiversity support - Present: Multiple interaction modes (chat, visual, code) - Improve: Consistent UI patterns, customizable interface options #### Representation - Present: Mixed-gender presenting team - Improve: Diverse use case scenarios, inclusive imagery in documentation #### Psychological safety - Present: Encouraging tone about experimentation - Improve: Clear error handling messaging, supportive community guidelines ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Clear problem-solution logic from AI adoption trends to tool development - Inductive strength: Usage statistics support claims about market demand - Causal reasoning: Direct demonstration of cause-effect relationships in development speed - Analogical strength: Effective comparisons to existing development workflows #### Fallacies - Appeal to popularity: Heavy reliance on adoption statistics without addressing quality concerns - Hasty generalization: 3x speed improvement claim base --- ## Full Transcript [00:09] Hi everyone. Uh first of all uh thank [00:12] you very much for joining us today. We [00:15] are super excited to chat about matter [00:18] uh a vip coding tool for your existing [00:20] code bases. [snorts] Uh just a very [00:24] short important information. Um uh [00:27] everyone who uh join our weight list [00:29] today using the link in the chat uh or [00:33] this stream uh will have uh fasttrack [00:36] access to the matter. We will invite you [00:39] uh to uh our early access program [00:42] tomorrow [snorts] [00:43] and also feel free to ask questions in [00:46] our chat. Uh we will uh take care of [00:49] them uh in our Q&A session. And actually [00:52] let's start with a short introduction of [00:55] our speakers. Uh we are the matter [00:58] product team and I will start with [01:01] myself. Uh my name is Elena. Uh and I am [01:05] the product manager uh at matter. Um and [01:09] I have uh research and um marketing uh [01:13] background. Uh and also I really love to [01:16] work uh in early stage product [01:18] development when you need to uh figuring [01:21] things out and actually bring something [01:24] new to the world. And also today we have [01:27] Anon Sukhanoshinka uh matter uh tech [01:31] lead. Uh Anton could you please [01:33] introduce yourself? [01:35] >> Yeah sure. Uh hi folks. I've been a [01:37] fullstack web developer for more than a [01:39] decade now. I think I enjoy exploring [01:42] complex problems and really [01:44] understanding the details behind them. [01:46] And uh besides I really enjoy working [01:49] with non-dev colleagues. Uh I like [01:52] especially what I like is uh to blend my [01:55] uh technical knowledge, technical skills [01:57] with their design and UX skills to [01:59] achieve great results and to actually to [02:01] to come up with the best possible [02:03] outcome. Uh that's it for me I think. [02:07] >> Uh great. Thank you very much. Uh also [02:10] we have uh Vladimir Petachkov today with [02:13] us. Uh he is a matter product designer. [02:16] Uh Vladimir could you please introduce [02:19] yourself? [02:20] >> Yeah sure. Thank you Elana. Uh hi [02:23] everyone. I am Vladimir, product [02:25] designer at Matter and I'm of course [02:28] really excited to be here today. And [02:30] what excites me the most is that Matter [02:33] actually is one of the first Jet Brands [02:36] products that truly includes designers [02:38] and product managers as core users, not [02:40] just developers. And you know that feels [02:43] great honestly. So yeah, passing the [02:46] mick to Yan Nicholas. [02:48] >> Yeah, my name is Yan Nicholas Wman. I'm [02:51] developer advocate for AI here at Jet [02:53] Brains. Before that, I did developer [02:56] advocacy for web. So, this is kind of [02:58] like way up in my wheelhouse. Before [03:00] that, I did like a bunch of consulting [03:02] for Fortune 500 companies, which is [03:03] always not fun. [snorts] [03:06] [laughter] [03:07] >> Cool. Thank you. So, uh let's get [03:10] started. Uh could you please share my [03:13] screen? [03:18] Um yes uh let's start. Um so um at Jet [03:23] Brains we've been uh building tools for [03:26] software developers for 25 years already [03:30] and uh we have millions of developers um [03:34] um as our customers and actually this is [03:38] pretty it provide us pretty unique uh [03:40] point of view because we see how deeply [03:43] AI uh integrates in the software [03:46] development uh pipeline already [snorts] [03:49] and Um yeah let's uh check some numbers. [03:53] Um in 2022 [03:56] uh GitHub Copilot was used by um 1.2 2 [04:01] million users [snorts] and uh by the end [04:04] of 2024 [04:06] uh it already uh been used by uh 37 [04:09] million users and also based on various [04:12] researches uh we know that uh from 70 to [04:16] uh 97% of uh developers uh now using AI [04:20] tools um for various um tasks coding [04:25] related tasks and uh I'm curious [04:28] everyone uh what is your experience with [04:31] um AI tooling in your software [04:33] development or not only software [04:34] development life. Uh Anton, let's start [04:37] with you. [04:38] >> Yeah, let's start with software [04:39] developer. Right. [laughter] [04:41] >> Exactly. [04:42] >> So yeah, I started using AI back in 2023 [04:47] I guess uh when chat GPT 35 came out. I [04:52] used copilot before as you said in 2022 [04:55] but at that time it was just an autocomp [04:58] completion tool I think so and I didn't [05:00] perceive it as as you know as AI but [05:03] with when the charge appeared uh I [05:07] started to I don't know to fill in [05:09] something interesting uh in this [05:11] direction and uh at first I used it to [05:15] mainly to generate code snippets for my [05:18] pet project it was u u written with [05:22] Google Firebase and I wasn't really good [05:25] with the API and Chad GPT helped me uh [05:28] to actually learn it uh and to [05:32] to achieve the results I would say so [05:34] but it was just a bad project since then [05:37] I've tried a a bunch of tools um [05:41] including cursor including branch junior [05:43] for my daily work since then I think um [05:48] uh when cloud code came out I stuck with [05:52] it and I think I'm still like a big fan [05:55] of it and uh for me it's especially [05:58] impressive uh how such a simple terminal [06:00] style uh terminal based UI can be so [06:05] powerful and self-sufficient for solving [06:07] real uh tasks. Um Yan Nicholas, what [06:11] about you? [06:12] >> Uh similar in a way I I think I started [06:17] using it a little bit later. I think I [06:19] started using it once cloud was more on [06:21] the rise with like 3.7 something like [06:23] that mostly in the chatbased [06:25] interaction. I pivoted to agentic usage [06:29] which is just a bliss for developer [06:30] advocacy because you can spin up a demo [06:33] project in like matter of minutes [06:35] instead of crafting it properly. Um I [06:39] started using Juny and the Gentai a lot [06:42] more at that time when we we released [06:44] Juny what beginning of this year. [06:46] Um [06:49] >> yeah yeah yeah [06:50] >> feels like forever ago. Um [06:53] now as developer advocacy advocate I [06:55] also like using it to challenge my own [06:58] bias and perception of things just to [07:00] get like an outsider view. Not saying AI [07:03] is not biased. It very much is biased [07:05] but it's still a different perspective [07:07] from my own. So that's one of the things [07:08] where I really like using it just like [07:11] as a verification step in a way. [07:16] What about [07:18] >> Yeah, thank you very much for the [07:20] dinner. What about you? [07:22] >> Uh yeah, thank you Anton. Thank you [07:24] Nicholas. Uh so yeah, as like many [07:27] people around my journey with AI started [07:29] I guess with JPT mostly for writing [07:32] help, brainstorming and occasionally [07:34] experimenting with product or user [07:37] research. After that, um, I tried a [07:40] whole bunch of no code AI tools like CL, [07:44] GZ, Lovable, you name it, and I [07:46] definitely saw the potential, but at [07:49] that point, I was still hard to imagine [07:51] how any of them could fits naturally [07:54] into my everyday design workflow. [07:57] Then I started to investigate so-called [08:00] developer oriented tools like cursor. [08:03] And to be honest, it wasn't easy from [08:05] the very beginning since I'm a designer [08:07] and I like some knowledge about it. But [08:09] at some point, you get used to how it [08:12] works. And the result was impressive [08:15] actually until one day cursor deleted [08:18] all my weak work after I hit apply all [08:20] changes button. [08:22] That was a really valuable lesson of [08:24] learning how the git works. Thank you [08:27] for that cursor. [laughter] [08:29] So yeah, how about you Elena? How do you [08:31] use AI? [08:33] >> Uh yeah, actually I use uh I heavily use [08:36] AI in my daily uh workflows. Uh I uh [08:41] create documents, I do brainstorming and [08:44] research uh together with uh cloud code [08:47] or chat GPT. Uh also a year ago I [08:52] started to explore uh prototyping uh [08:55] with AI [snorts] and my first experience [08:58] was with cursor and honestly for me it [09:02] was difficult um to adopt it because I [09:06] do not have coding background and uh [09:09] yeah uh and also uh back that time uh as [09:14] I remember um lovable was just launched [09:17] uh it's VIP coding tool for like [09:19] non-developers and I started to uh [09:23] explore um this tool and I started to [09:26] create prototypes [09:28] uh with lovable uh and uh yeah for me [09:31] it's very like great um great way to uh [09:36] visualize my ideas to explain my ideas [09:39] and for example when uh we just started [09:42] to explore um our matter on boarding um [09:46] flow I iterated it on the very very [09:49] first uh version uh together with [09:51] lovable and uh yeah it was really great [09:55] uh because before I had to uh create a [09:59] document uh describe all my ideas then [10:02] uh pass them to uh designers and then to [10:06] developers and the whole um pipeline uh [10:11] it took I don't know months uh but uh in [10:15] my previous companies uh in our team [10:17] it's much much faster [10:18] Um but uh yeah, with this AI [10:22] prototyping, I just really don't need uh [10:25] to wait. I can uh do uh all this stuff [10:28] uh on my own. And um just one sec. Um [10:36] yeah and [10:38] actually we see that AI is now um [10:41] compresses the entire product [10:43] development life cycle uh from research [10:46] and product development to design and uh [10:50] actually coding and development process [10:53] [snorts] and we see that uh everyone uh [10:56] designers, product managers and uh [11:00] developers of course uh now co-create [11:02] with AI and um yeah um AI is as AI is [11:07] reshaping uh um also our team product [11:11] development workflow. It would be great [11:13] if Vladimir uh you could share your [11:16] thoughts on how do you feel actually uh [11:20] once we implemented these u AI workflows [11:23] in our in our processes. [11:26] >> Yeah, such a great question. Thanks for [11:28] asking. Uh so well we literally designed [11:31] matter in matter now and though I'm [11:35] biased but this is something we I think [11:38] we accelerated our development cycle [11:40] maybe three times and sometimes I see [11:43] the changes I made next day on [11:46] production and yeah this is so [11:48] satisfying for designers because before [11:51] you need to wait for like for weeks for [11:55] days sometimes but depends on the [11:56] situation and yeah And speaking of my [11:59] own workflows, I also started to design [12:02] right in matter more often rather than [12:05] in Figma. And uh yeah, I think it like [12:08] it changing right now and I already feel [12:11] it. Okay, maybe you have any other real [12:15] examples from the industry, Elena? [12:18] >> Uh yeah, sure. Uh great question. Uh we [12:22] see that and we know that uh intercom uh [12:26] intercom it's um platform for uh [12:30] customer support um that their uh [12:33] product design team uh now is using [12:36] cursor uh for pro as a prototyping tool [12:39] and also that their product designers [12:42] now create GitHub pull requests uh for [12:46] developers and that's how they try to [12:49] handle small UI fixes. Uh and also um [12:54] there was a great interview uh maybe a [12:57] year sorry a week a week ago uh on Lenny [13:02] newsletter podcast and uh there was um [13:06] LinkedIn [clears throat] uh CPO uh who [13:09] told that they um launched uh fullstack [13:12] builders program and basically uh [13:15] fullstack builder program is small it is [13:19] about small AI accelerated bots [13:23] uh where one person or very tiny team [13:26] can handle the whole uh product [13:30] development um cycle from idea to design [13:34] code and launch and uh yeah it's [13:39] actually the type of teams we are [13:42] building matter for because we are [13:45] building matter for um those modern uh [13:49] product teams and Uh here um I want to [13:54] um hand in the screen to Vladimir and [13:57] Anton uh and we will proceed with matter [14:01] demo. [14:03] >> Yeah, thank you Lena. Um yeah, thank you [14:06] Alex for sharing my screen. Um so yeah, [14:09] let's set up the project and since we [14:12] did the product for non-developer people [14:15] and that's very important with existing [14:17] code bases in mind. One of the trickiest [14:20] challenges in my mind was to design the [14:23] right on boarding of course and honestly [14:25] I think the team nailed it. Uh but yeah [14:27] let me show you the whole cycle. So also [14:30] another important note it should be a [14:33] web based project and in our case we'll [14:35] take uh our own landing page. [14:38] Uh so we have it on GitHub. I'll just [14:41] copy the link and uh paste it to matter. [14:52] Okay. So now matter see the link from [14:56] GitHub and it already provided me a name [15:00] for my project. I will just slightly [15:02] improve it and yeah remove this and that [15:06] and I think we're good to go. [15:10] Yeah, and actually I need to mention one [15:12] more thing. Uh you may ask and you may [15:15] wonder uh how often designers have an [15:18] access uh to a GitHub and I assume not [15:22] too often [laughter] and in that case uh [15:25] you actually have two options. You [15:27] actually have several options. First you [15:29] can invite uh a developer and teammate [15:31] from your team uh by clicking on that [15:33] button and uh uh developer will help you [15:38] to set the project and the main thing is [15:41] that you need to do it only once and [15:43] after that the whole team will benefit [15:46] uh on this setup. This is very [15:48] important. Okay. Uh let's get back to [15:52] the demo. Uh so now um matter asked me [15:56] for a personal access token and so maybe [15:59] could you please clarify why we need [16:01] that? Yeah, the thing is in this [16:04] particular scenario, the thing is that [16:06] the repository under the question [16:08] jetbrain/matter landing it's a private [16:10] repository and uh matter doesn't have [16:14] access to it obviously and we need to [16:16] provide the access and if you have a [16:18] public repo in this case it can be more [16:21] or less fine without a token but with [16:23] private repo that just doesn't work this [16:26] way. uh you need to authorize matter [16:28] there and the easiest way to do this uh [16:31] and it doesn't require much rights from [16:34] you. You do not need to be an admin in [16:35] the repository. Better to be an admin [16:37] but you do not need to uh is to provide [16:40] the access token which you can obtain by [16:43] clicking the get access token button. [16:45] Can you please click? Yeah, [16:47] >> sure. [16:47] >> Every time [16:48] >> just need to login in your GitHub [16:50] account and uh here's the screen [16:52] developer settings where you can issue [16:54] new personal access token. You can add a [16:56] name here and you're good to go, but I [17:00] already did it before. And I'll just [17:02] need to paste it here. And also before I [17:05] uh said apply, I wanted to add that uh [17:09] today we're lucky to have Anton here on [17:11] the stream and I can ask him questions. [17:13] But if you don't have a developer close [17:16] to you, you can just uh hit the how to [17:18] generate a token button and matter will [17:21] provide you and clarify you where you [17:23] can uh find it. And there is also [17:25] another option. You can uh request a [17:28] support. Uh of course the our support [17:31] will not generate a token for you but uh [17:34] we'll do our best to explain where to [17:36] find one. Okay, I think we good to go. [17:39] Let's proceed. Yeah, now we're checking [17:42] the connection and yeah uh we now [17:45] starting to mirroring the project and [17:48] again Anton maybe you can shed some [17:50] light on this very important procedure. [17:54] Yeah. So what's going on here actually [17:56] is we are making a copy of your [17:58] repository on our server in order to [18:01] basically it's not only copy but it's [18:04] like it's called mirror because we will [18:06] be updating it uh with uh each new [18:08] change in your original rapper but uh [18:11] you may think of this copy as a safe [18:13] space. So basically uh every idea, every [18:17] change you make uh does not affect the [18:20] original repo unless uh you explicitly [18:23] allow this. And uh I heard quite often [18:27] that uh designers are afraid [18:29] experimenting in the existing code [18:30] bases. [18:31] >> That's true. That's true. [laughter] [18:32] Especially my case with cursor sorry my [18:35] my case with cursor when I delete it [18:38] like by myself kind of uh with matter [18:41] it's completely safe uh like so-called [18:44] sandbox where you can experiment and [18:47] yeah without thinking of being uh [18:50] screwed in the end. [18:52] >> Yeah. Yeah. And what's happening [18:54] further? So actually the repository is [18:57] uh cloned it's mirrored and now matter [19:00] uh AI agent tries to figure it out uh [19:02] how to actually work with this [19:04] repository what are the patterns here it [19:07] reads readme and uh it generates [19:09] instructions and in particular the task [19:12] it has currently is to figure it out how [19:16] to launch your application how to launch [19:18] it uh how to prepare the environment and [19:21] how to um show you the your website [19:25] basically so you can see it interact [19:27] with it and uh yeah ask to to do some [19:31] changes this procedure takes I don't [19:34] know maybe a minute maybe two minutes [19:36] usually but I think we are pretty close [19:40] to the to the next step or no not yet so [19:43] it's basically it's exploring yep [19:45] >> I also got a question from the chat that [19:47] we can put in like a little intermetso [19:50] um can I use metro with a privately [19:53] self-host the GitLab instead of GitHub. [19:57] >> Yes, I can answer this. I think it's [20:00] Yeah. Um, it can uh and the [20:04] authorization will be a bit different in [20:06] this case. You will need to provide your [20:08] uh SSH keys or probably password. No, I [20:12] think it's only it works only with SSH [20:14] keys. So basically you will provide your [20:16] SSH key and we will clone this [20:18] repository and it will work [20:21] quite fine except uh we do not support [20:25] uh GitLab merge request merge requests [20:28] at the at the moment later on we'll be [20:30] we'll be showing the flow with GitHub [20:32] pull requests so it's not the case for [20:35] GitLab yet but I think we will support [20:37] it yeah in the future. [20:39] >> Cool. Thank you. [20:40] >> Yeah thank you. I think our repository [20:43] is ready which is actually great and uh [20:47] yeah now matter asked us to provide some [20:49] npm token. Anton could you please tell [20:52] us what does the agent actually want [20:53] here? What kind of npm token? [20:56] >> Yeah pretty confusing for a nondev sorry [20:58] but [20:59] >> absolutely [21:00] >> that's the real world scenario actually [21:02] and that was intended that we stumble [21:04] upon it. Uh basically uh what's [21:08] happening here? Uh our repository [21:11] uses uh it downloads dependencies from [21:14] private registry. So you may have heard [21:16] about npmjs.org. It's a public registry [21:20] with all like public packages you may [21:23] import uh you may um you may install to [21:26] your uh application. And the thing is [21:29] that inside jet brains uh we have our [21:32] own libraries our own component [21:33] libraries like uh you you you may see [21:36] their names here actually web team resqi [21:39] etc. [21:39] >> Yeah research team [21:41] >> yeah and we download them from our [21:43] private registry which requires [21:44] authentication unfortunately for non-dev [21:47] but it's a secure way actually to [21:49] distribute the dependencies inside [21:52] inside an organization. Luckily, [21:54] Vladimir already already. [laughter] [21:57] >> Yeah, I shared [21:58] >> you provided me the token before. So, [22:00] now I can easily paste it here. But [22:04] again, if you don't know what the what [22:07] agent asks you, uh don't be bothered by [22:11] either inviting a developer or um [22:14] requesting a support. We are here to [22:16] help you. But for now, uh let's [22:20] >> Yeah. [22:21] >> Yeah. Let's proceed. And one one more [22:22] important thing here is that you can [22:24] mention people in chat. Uh I think we [22:26] can we can show it a bit later [22:28] >> but uh you you can also mention your [22:31] developer. You can invite him or her of [22:33] course uh and mention [22:35] >> that's actually a great addition. Thank [22:37] you for uh mentioning that. uh since you [22:40] are on the stream it it will be a bit [22:43] strange to ask help uh from you in the [22:46] chat but yeah I can do that as well and [22:48] you will receive a notification and you [22:50] will receive even a Slack notification [22:52] because we also have a Slack integration [22:54] but you just need to turn it on anyway [22:57] let's proceed with the setup uh Anton [23:00] please go ahead and uh explain what is [23:03] going on right now with the project [23:05] >> yeah yeah yeah so it's it's just to you [23:08] know uh I'm explaining just out of your [23:10] your curiosity because actually in the [23:13] happy past scenario you do not need to [23:15] know that uh so it's basically just it [23:18] should happen automatically and it it [23:20] will happen automatically I hope fingers [23:22] crossed uh yeah and currently um the [23:26] agent tries to figure it out so it [23:28] noticed that uh this project requires [23:31] not JS24 and the default environment [23:34] okay so it it was faster than I expected [23:36] right uh yeah so I We already have a [23:40] premium environment uh running right and [23:42] now we are waiting for warm scripts [23:46] >> also running. [23:46] >> Yeah. So basically the the uh there are [23:48] two kinds of scripts. So warm-up script [23:50] is a preparation script which actually [23:53] makes your environment uh suitable for [23:56] this project and uh the second script [23:59] and I can see here also that uh I [24:01] started uh speaking about that uh it it [24:04] noticed that uh it needs to install [24:07] NodeJS 24. Let's see if it will succeed [24:10] because it's something. [24:11] >> Let's see. Fingers crossed. Yeah, [24:13] >> fingers crossed again. Yeah, as as as [24:15] usual. And uh you can also um go to the [24:20] timeline and open the [24:22] >> Yeah. [24:23] >> Uh yeah, open the terminal. [24:25] >> Let's check this process. [24:27] >> Yeah. And here we see that uh it looks [24:29] like it succeeded with the NodeJS [24:31] installation. And now it downloads the [24:33] dependencies from uh our private [24:36] registry which I told you about just [24:38] just a couple of minutes ago. It should [24:41] take around I don't know a minute. [24:44] >> Like a minute as well. Yeah, [24:45] >> like a minute. Yes. Not not that much. [24:48] But the good uh news is here that you [24:52] need to do it once and then we will take [24:54] the snapshot of your file system and we [24:58] will reuse it for later ideas for later [25:01] tasks. So this is on boarding you need [25:03] to invest your time but then everything [25:06] will be happening much faster. [25:11] >> Yep. [25:12] >> Okay. Now yeah the warm-up script also [25:15] succeeded. Now we can what next [25:18] actually? [25:20] >> Yeah. And next we have the the next [25:21] script. You can also open it. Thank you. [25:24] It's much simpler. Uh and uh it [25:27] basically it runs the development server [25:29] for our landing page. And uh this [25:32] strange structure uh about like CD [25:35] lending/metra it's needed because uh I [25:38] forgot to mention it before but this [25:40] repository is a monor repository [25:42] actually with all our landing pages and [25:45] >> it's pretty huge. Yeah to be honest all [25:48] pages from jetbrains.com [25:50] are stored there. Yes, exactly. It's [25:53] pretty huge and that's why it required [25:56] sometime. Well, [25:57] >> yay. Yay. Success. Uh, all looks great [26:02] to me. And as uh I mentioned before, [26:05] this is our existing metro landing page [26:08] which is located uh online. And now we [26:11] can see the very same website also [26:14] online. And I can open it in in Utah. [26:17] And yeah, everybody here works as on the [26:20] real [26:22] um website which is great and now uh for [26:26] me preview looks good and we can proceed [26:29] with the first task I guess [26:32] let's see okay [26:35] uh for those who are like uh the ideas [26:38] for the first task task uh we have a few [26:41] of them already created but uh for now I [26:46] have some task in mind and let me start [26:51] with something simple. Uh so my idea for [26:55] now is to uh add a typewriter effect. [27:00] Firstly, I will use one of our very [27:02] interesting. So yeah, let me first [27:04] explain you about the UI of the matter. [27:07] Uh I assume it should be pretty familiar [27:09] for everyone who ever tried to use VIP [27:12] coding tools. You have a chat to the [27:14] left and you have a live preview on the [27:17] right. But in our case again this is a [27:21] live preview of your application [27:23] existing application from GitHub you [27:25] know uh and uh it is pretty fascinating [27:29] actually and you can write in the chat [27:32] you can ask questions uh to to agent and [27:35] you will see uh agent response here and [27:39] you can use different tools from here is [27:41] like you can copy link you can change uh [27:44] uh the zoom level uh you can also check [27:47] uh the device mode uh by selecting [27:50] different devices and uh yeah actually [27:55] >> yeah I just wanted to interrupt you [27:57] sorry sorry sorry sorry about this [27:58] feature I just uh recalled that uh this [28:02] this is what was one of the first [28:04] features you implemented in matter [28:06] itself and mer [laughter] [28:08] >> yeah that's true [28:09] >> that's true uh thank you for uh [28:12] mentioning that this feature indeed was [28:14] uh v coded by myself in matter and as [28:19] far as I remember it was merged mostly [28:22] without any changes by one of our font [28:25] developers which was I was like really [28:27] excited back then uh okay uh let's go to [28:31] the next tool here is the select element [28:34] tool and I will use it right away to [28:37] actually select uh this line and I'd [28:40] like to add a typewriter effect to that [28:43] line so I prepared some prop in advance [28:46] And what I basically want basically want [28:48] I want to change the last word to [28:52] something similar close by meaning like [28:53] a synonym the same shortness and uh [28:57] let's see how it will go. [29:00] So now um started the process of [29:03] thinking [29:05] and soon we will see some uh [29:09] clarification what is going on some [29:11] process behind [29:15] it takes time sometimes [29:17] >> it I guess it takes time for for the [29:19] like for the first launch uh of the task [29:22] it might be not that fast but yeah it's [29:25] a bit longer than usual I think demo I [29:28] Yeah, 100%. [29:30] >> Nice. So, basically that's that's [29:32] interesting that uh the agent didn't say [29:34] anything and just started executing. [29:37] It's unusual. [29:38] >> That's weird. That's unusual. Yeah. [29:40] >> Yeah. But then the the reason appeared [29:43] um what I say here is that what what's [29:46] going on here actually is that uh the [29:48] agent tries to localize this place in [29:51] the codebase and where we can see that [29:54] >> and I already see some changes. Yeah. [29:55] like 49 lines [29:58] >> already. [29:59] >> Yeah, we can see the synonyms here. Even [30:02] if you cannot read code, you you may see [30:05] that those words should appear. And uh [30:09] Yep. Let's see. [30:10] >> Oh, nice. And new version was just [30:13] created. Yeah, that's basically what I [30:16] wanted [30:17] >> from matter. Can you please [30:19] >> change the word like [30:20] >> can you please zoom in it a bit with [30:23] like not 50% but yeah I think that much [30:26] nicer. Thank you. [30:27] >> Yeah. Cool. Uh great. And now we can add [30:32] something more complex I guess. So as [30:35] you can see right now on the metro [30:37] landing we don't have any entry points [30:39] for metal application and it's actually [30:43] pretty sad. Let's fix it. And first [30:46] let's add uh a login button to the [30:49] header. [30:51] And I could do it both ways. I can just [30:53] prompt it here u in the input and see [30:56] how it goes. And I also can help agent a [31:00] little bit and select once again with [31:02] the select element tool the header to [31:05] provide like a better context to the [31:07] agent. [31:08] And uh what it will add it just add a [31:12] button to the header opposite the jet [31:13] branch logo aligned to the right. [31:18] >> Yeah. Let's see if if the agent will say [31:22] something this time. [31:26] >> But yeah, this demo effect. [laughter] [31:28] >> Yeah, that's that's interesting. It's [31:30] not a problem, but that that's just not [31:32] how I used to to this. But by the way, [31:35] which model do we use? Can can you [31:37] please hover on the code icon? [31:39] >> Right now we use [31:41] >> open model. [31:42] >> Yeah. [31:42] >> Yeah. [31:44] It might be that something changed in [31:46] this model just like just today. I think [31:50] that's the reason. [31:54] >> Let us check what was changed so far. [31:58] >> Yeah. So what I wanted to notice here is [32:01] that the agent uh figured it out to use [32:04] uh the button from our codebase. Uh so [32:09] it didn't invent a new button uh [32:12] [laughter] the existing one but yeah we [32:14] have something funny here. Uh it's like [32:16] >> yeah we have something funny but design [32:19] wise not that funny. I would expect it [32:21] to be more contrast I would say. But [32:24] okay uh as you mentioned before this is [32:26] not just a random button which was [32:28] created or hutinated by the agent but [32:31] this is a real button from uh our uh [32:34] library component library right? Yeah, [32:37] right. And I think that what's wrong [32:39] here is the theming settings actually. [32:41] So, it didn't figure it out how to [32:43] properly uh put steming setting, but you [32:45] can prompt it as as as a designer, you [32:48] know. Just say, [32:49] >> yeah, I just wanted to ask something [32:51] simple here. Just uh fix the contrast of [32:54] the button. I think agent will handle [32:58] it. Yeah, let's see. [32:59] >> Let's see. Let's see. [33:01] Yeah, sometimes that happens. But uh if [33:04] the agent uh was implementing the button [33:07] from from scratch, I I'd say it it will [33:09] be it will be better. But uh it won't be [33:12] that usable on the later stage of the [33:15] development. [33:16] >> Yes, that's true. That's true. [33:16] >> We don't need we do not need new button [33:18] in the codebase. [33:20] >> Okay. So it's styled it nice. Okay. [33:24] >> Agent added some styles. Now at least I [33:26] can see it [snorts] again. It's not uh [33:30] the case to check the smartness of the [33:32] agent. Yeah. And also design-wise I [33:35] would make it a little bit different but [33:37] to check to check uh the like some idea [33:40] to check some use cases I think it's [33:42] fine for now. Okay. But what next? Uh I [33:46] think it would be nice to implement some [33:49] form uh which will appear after clicking [33:52] on the login button in the header. And [33:56] uh with that uh we will also want to [33:59] share another interesting feature. We [34:01] have the feature is import from Figma. [34:05] It's basically an integration with Figma [34:08] and you can paste a link to uh the Figma [34:13] u artboard. So here I have um this form [34:18] created in Figma and uh what I need I [34:21] just need to copy u link to selection [34:25] and then pass the selection to matter. [34:29] Yes. So let's send it to matter and as [34:32] you can see already I see unfurled Figma [34:36] frame which is so great you will see in [34:40] a moment. [34:41] >> Uh Vladimir may I ask you uh why do you [34:45] still use Figma in your work? Maybe can [34:48] you elaborate on that? [laughter] [34:50] >> Yeah Anton thank you very nice question. [34:53] uh I ask myself every time about this [34:57] but actually uh I can say that uh those [35:00] wipe coding tools now can u you know [35:04] replace Figma because sometimes it's [35:07] easier to start uh like the raw idea in [35:10] Figma even for me and uh it's basically [35:13] save you time it's like a piece of paper [35:15] where you can easily uh try different [35:18] things different styles and yeah I think [35:21] uh we will stick with Figma for for some [35:24] time. I don't know about the future but [35:26] for now it works perfectly fine uh with [35:29] like this flow. I first start to do [35:32] something in Figma but then I can go to [35:35] uh matter for example and u share my [35:39] artifact to u matter in instead of you [35:43] know uh replacing it with a prompt and [35:46] describing the the like this artboard [35:49] with uh this form by words. It's like [35:53] just save a lot of time. But let's let's [35:55] check uh what is going on here. First of [35:58] all, which is really great and really [36:00] fascinating. Uh metal already downloaded [36:03] all the icons from uh my uh Figma [36:07] mockup. So I don't need to provide any [36:10] SVG icons uh anywhere. [36:15] >> Okay, it seems new version. Yeah, [36:18] already finished. Let's see what we have [36:21] here. I'm excited. [36:25] Okay, let's recall what we had and what [36:28] we have right now. [36:29] >> That was close. [36:31] >> That was a close call. Um, okay. I have [36:35] some ideas why we see those uh green [36:38] gradients here. Because uh as far as as [36:42] far as I remember uh we have some hover [36:45] effects uh for those buttons and I will [36:49] ask matter to just uh show those uh [36:55] green uh gradients [36:59] only on uh hover on the button right [37:05] let's see how it will go and maybe you [37:07] can clarify what was wrong because I [37:10] rounded corners. It's not really [37:13] something difficult. [37:15] >> Uh yeah, it's it indeed you're right. [37:18] It's not that difficult to round the [37:19] corners for of the div, but uh the [37:22] tricky thing here is that uh matter [37:25] actually reused the component from the [37:27] codebase for the popup again. And it's [37:30] not that customizable, but it's it's an [37:32] existing popup. And uh our [37:36] >> our agent decided uh to No, that's this [37:39] is actually a wrong place. It's just an [37:43] [laughter] [37:43] >> I'm a designer. Yeah, you know. [37:47] >> Uh yeah. Uh so it it reused the pop-up [37:51] from our component library. It's not [37:52] that customizable, but it still decided [37:55] to use it because why not? Because uh we [37:58] need to, you know, not to not to not to [38:01] create new pop-up every time. I think [38:03] but if you uh really need to you may [38:08] force meta to invent a new pop-up. I do [38:11] not think we need to do this right now. [38:13] Uh [38:14] >> yeah, but I mean let's let's see uh what [38:16] was happened with the last prompt I [38:18] sent. [38:19] >> Yep. [38:20] >> Yeah, great. I think now it looks pretty [38:23] nice. Uh so maybe we can [clears throat] [38:27] proceed with this uh um rule to you know [38:32] uh made the same design as in Figma and [38:35] to uh force a design. What do you think? [38:38] What would you suggest to write here? [38:40] >> I think we can jump to the uh to pull [38:44] requests and stuff like that because I [38:46] personally already like the result. I [38:48] think you can. [38:49] >> That's true. That's true. Actually with [38:50] this artifact, so sorry for interrupting [38:52] you. With this artifact, I can already [38:55] pass it to either Elena or to developers [38:59] or to any other stakeholders because the [39:01] concept is clear. Uh and uh also I can [39:06] like send uh a summary of the task [39:09] because it's like some document I can [39:12] use for creating an issue and issue [39:14] tracker. And again uh since there there [39:18] is a I had a link for uh that I can open [39:22] it in uh in Utah and share with Elena [39:25] and she can uh comment on that. She can [39:28] open um it the link on her own laptop. [39:31] It's very convenient to be honest and uh [39:34] but since we are a software developer [39:37] company right we decided to go even [39:40] further in this workflow and introduce [39:44] um a handoff uh via pull request in [39:48] GitHub. It's like I I think it make it [39:51] uh the whole process so seamless in a [39:54] familiar to developer way. So let's just [39:57] click continue in GitHub [40:00] >> button. And the thing is that we do not [40:03] want to lose your work. We we would like [40:05] to use it as a foundation for the [40:08] developers work. And as far as I see the [40:11] code quality quality is already quite [40:13] high. So it it uh certain changes such [40:17] as uh typing effect I would have merged [40:20] right away. Why not? Uh and uh regarding [40:23] the login uh form, we need to add [40:27] certain behavior there because the [40:29] buttons they do not work actually at the [40:31] moment. We can achieve it via matter. [40:33] Why not? We can achieve it uh with the [40:36] developer with with uh their local [40:39] tooling. So that's that's actually up to [40:42] you. And what I especially uh can you [40:44] please add me as a reviewer for this? [40:46] >> Yeah, sure. Sure. [40:48] I was just uh about to add you as a [40:51] reviewer and uh assign this pull request [40:55] to you and I can even ask you uh to [40:58] check this uh so [41:00] >> yeah well almost yeah [41:02] >> almost [41:03] >> the developer to it's not that easy [41:06] >> that's true that's true [41:08] >> uh I also wanted to mention what's nice [41:10] here uh Vladimir can you please scroll [41:13] up yeah uh to the description is that uh [41:17] there is the link to the original matter [41:19] task and to the original matter preview [41:21] and uh when I start looking at the uh [41:25] pull request as a developer I can see [41:27] the preview and that's actually very [41:30] valuable because uh I cannot imagine how [41:32] the markup looks like uh and I cannot I [41:35] need to either check out this locally [41:37] and launch or I can just actually see it [41:41] uh in matter and that's that's a huge [41:44] difference huge difference for me. Yeah. [41:47] >> Yeah. So let's get back to matter and to [41:51] sum it up what we have in the end. We [41:54] have first of all created draft of the [41:56] pull request and besides this artifact [42:00] uh we have a live preview with all the [42:02] changes. We can open in a new tab and [42:05] you can see how your site or web [42:08] application looks uh the same way it is [42:11] looks uh in the open in a new browser [42:14] tab. You can continue actually to uh [42:17] work here uh in the select element mode. [42:22] Besides, we have uh a summary of all the [42:26] changes uh which were introduced in this [42:30] task or idea as we call it. And what [42:35] also curious actually if I pass this to [42:38] Elena for example and she decided to [42:41] change something uh on top of my changes [42:44] she can easily duplicate the idea and [42:47] without bothering my task she can [42:49] proceed with new ideas on top of my [42:52] ideas and here's where real [42:54] collaboration started to work right and [42:58] I can mention here Elena as well but not [43:01] now but [gasps] for example I can [43:04] mention Anton here. Uh like so [43:08] can you check this? [43:11] Do you like it? [43:14] And yeah, [43:15] >> well I already have a pull request but [43:17] thank you. [laughter] [43:19] >> Yeah, thank you. I think uh this is it. [43:21] Maybe Elena, you have have something to [43:24] add here. [43:26] >> Uh yeah. Uh thank you very much folks [43:28] for this demo. [43:30] >> [snorts] [43:30] >> Uh so let's just um summarize uh what [43:33] we've seen uh today. So [snorts] we uh [43:37] set up uh new project in matter and we [43:41] actually connected uh monorapper uh in [43:45] less than five minutes [snorts] and I [43:47] think it's a great actually result. Uh [43:51] then we um yeah started to iterate on [43:56] our tasks uh using our chat with AI [44:00] agent and uh using our live preview [44:03] [snorts] uh and then we yeah just uh [44:06] check few use cases uh and created a [44:10] GitHub pull request for uh developer uh [44:14] which uh he or she u can check and then [44:18] merge. Uh I want to add on top that um I [44:23] as a product manager um actually now uh [44:26] use pretty similar workflow. So for [44:30] example, if I have an idea uh I can uh [44:34] just jump directly to matter uh chat and [44:37] start iterate on our user interface and [44:42] once I'm happy uh with result I [snorts] [44:45] just create um I just copy actually this [44:48] prd which matter uh uh prepared for us [44:53] and uh yeah uh just create um issue [44:57] tracker issue in issue tracker uh and to [45:00] get um also share the link uh to live [45:03] preview I generated or uh sometimes I [45:07] start with issue tracker uh where I [45:11] describe my ideas and tasks uh task um [45:15] uh I I want to I want to be ready and [45:19] yeah I just copy this um issue this PRD [45:22] to matter chat and start from this uh [45:27] point and then uh uh I use same flow. So [45:30] I iterate on the uh UI on our prototype [45:35] and then uh share it uh with my [45:38] engineering team or sometimes um I can [45:41] also create GitHub pull request. Um and [45:44] uh yeah this live preview is very cool [45:48] stuff for me as a PM because sometimes I [45:52] need to validate my ideas with uh [45:55] customers or like real world users and [45:58] uh then I yeah really can iterate uh on [46:02] my own uh and share this link [46:06] uh with uh for example users during my [46:09] user interview and ask them to iterate [46:13] uh interact with um this artifact with [46:16] this live preview because it's like real [46:18] working uh website and uh this is really [46:22] huge uh thing for me as a product [46:24] manager. Um yeah and uh as we already [46:28] mentioned uh at the beginning uh this [46:31] matter workflow helped us to speed up [46:35] our own feature development uh at least [46:38] three times. Sometimes we think m maybe [46:40] [clears throat] even [46:41] >> even more [46:42] >> even even more. Uh yeah and um yeah we [46:46] are very happy uh that you uh spend some [46:50] time uh today with us um and uh yeah [46:54] that's actually it we could proceed with [46:57] Q&A section um section section [47:01] >> you I technically have like a million [47:03] and one technical question for Anthem [47:05] but I should probably do that offline. [47:07] Um, one thing that you kind of touched [47:10] on in the chat, um, but let me just pull [47:12] it up. Where's my cursor? There. Um, is [47:16] the preview link public? Can I just send [47:18] it out on social media and can everyone [47:20] have a look and provide feedback? [47:22] Slightly exaggerating. [47:24] >> May I answer this? [47:27] >> I was the first to answer actually. That [47:29] that's a funny thing because initially [47:31] they were public but then we decided [47:33] that for an enterprise environment and [47:36] uh to to make things safer we close it [47:38] by default under the authorization. So [47:41] uh only if uh you have a person in the [47:45] in matter uh only then they can see the [47:48] preview and that's by design but I think [47:50] that it is easier to do this anonymous [47:53] now because it's it's harder to [47:55] implement you know the authentification [47:57] and it's easier to make it anonymous uh [48:00] but one thing I would like you to know [48:03] probably is that um with the development [48:07] environment so as you may have seen like [48:10] it was yarn rundev. So it's it's a dev [48:14] server. It's not really designed for [48:17] high load. I think you cannot share it [48:19] like I don't know [48:21] >> in Twitter if you are really a popular [48:24] person but to share it with stakeholders [48:26] it's perfectly fine. Yes. And I think we [48:29] will implement the uh anonymous uh [48:32] access tool in the future. [48:35] >> Cool. Thank you very much on clarifying [48:37] on that. is the does the preview link [48:39] expire at some point or do you just keep [48:42] it up for an infinite amount of time in [48:44] case someone circles back to it? [48:47] >> Uh I can also handle this question [48:49] because [48:49] >> I I figured [laughter] [48:51] >> because it's also a technical one. [48:53] Sorry. Uh so so basically as you may [48:55] have noticed uh under the hood we [48:57] actually spin up a virtual machine and [49:00] it works uh and serves this uh web [49:04] server. But the thing is that it's um [49:08] this virtual machine it's actually not [49:11] completely free and uh it is fine when [49:14] you work with it. But if we notice that [49:16] you do not use it for a certain amount [49:18] of time, we actually hibernate it and [49:20] when someone comes and uh try to access [49:24] the preview, we wake up uh wake it up [49:28] and uh then serve the preview again. But [49:30] you need to wait. But anyway, this [49:33] experience is not that great I would [49:35] say. So, and we have it in mind to [49:37] actually add the deployments feature. [49:39] So, uh when we are going to hibernate [49:42] your environment, we are going to build [49:45] your uh front end packet and uh put it [49:50] on on CDN actually and serve it from [49:52] there. In this way, it will be [49:54] completely free for you and uh the [49:57] preview will be loading instantly in [49:59] this case. So this feature we have in [50:01] mind in the in our road map it will work [50:03] for certain kind of projects for sure [50:06] for front end only projects because uh [50:08] what we forgot to mention here uh with [50:10] matter you can develop any kind of web [50:14] project so if you have a back end you [50:16] can spin it up there if you have I don't [50:18] know database in docker whatever you can [50:21] spin it up in the container but if your [50:24] setup is pretty simple and you have on [50:27] the front end on the static uh resources [50:31] we can serve it from CDN and it will [50:34] work blazingly fast. Yeah, that's it [50:36] basically. [50:37] >> That is super cool. That would be like [50:39] huge for enterprise with like different [50:41] staging environments if you just the the [50:44] hoops I had to go through to get like a [50:46] certain staging environment if I can [50:47] just say metric take care of that. [50:52] Cool. Uh there are a couple questions in [50:54] the chat. So before I keep going back to [50:56] my technical questions, just calling [50:58] dips basically, uh let's go over the [51:01] questions from the chat. Um [51:04] if the program you want to import [51:06] requires a somewhat extensive database [51:08] and you literally just touched on that [51:10] to some extent. Um with Docker, [51:13] Postgress, Superbase, you name it. Can I [51:16] get this running or will the build just [51:19] yell at me and big red flashy angry [51:22] text? [51:24] Well, it may yell at you and big uh red [51:27] flashy text, but uh technologically wise [51:30] uh there is no [51:32] uh nothing standing on your way. So you [51:34] have a machine virtual machine and uh [51:37] it's pretty generic. [51:40] you want to do a container we talk on [51:42] capabilities as I said and yes we can [51:45] run a data database there actually we've [51:48] seen one of our clients let's do that [51:50] but uh what may [51:54] on your [51:55] >> sorry I need a quick sanity check am I [51:57] just hearing you terribly [51:59] >> yeah me too me too [52:01] >> okay [52:02] >> could you please uh move the mic a bit [52:05] closer maybe just [52:08] yeah no [52:09] >> now it's radio voice. [52:10] >> Yeah, [52:11] >> maybe I just Yeah, I just accidentally [52:13] touched it and that Okay, [52:16] >> don't touch. [52:17] >> That's interesting. What What What was [52:18] the What were the last words that you [52:20] that [52:21] >> I hardly anything so just [laughter] [52:25] >> just repeat your [52:26] >> just repeat just repeat. Yeah, I just [52:28] wanted to say that technological wise uh [52:31] there is no like limitations of what you [52:35] can run there. So we have a you have a [52:37] virtual machine like a generic uh uh [52:41] Linux docker container with docker and [52:44] docker capabilities as I said before and [52:46] you may run another docker container [52:48] with posgress database inside or just a [52:50] posgress database as a process and uh it [52:54] should work perfectly well. you may uh [52:58] what can go wrong actually is that uh [53:01] you may need a really huge machine like [53:04] I don't know with uh quite [snorts] a [53:06] lot of RAM I think now we have uh 16 GB [53:10] of RAM by by default but you we can [53:13] increase uh the size for you it's just [53:15] just ask us for now it's not available [53:18] from the UI but we can we can do that [53:20] but we've never met such huge setups for [53:23] now technological wise it should be fine [53:26] Yes. [53:27] >> So, it's one of those things should work [53:29] might have a couple rough edges because [53:31] it's officially not [53:33] quite there. Is that fair summary? [53:37] >> Uh yeah, it's usually depends on your [53:39] setup. Yes, [laughter] it depends. I [53:41] think yeah, it should work in most of [53:44] the cases, but for certain very uh like [53:48] uh [53:49] uh very demanding cases, it might not [53:52] work. So, yeah, it depends, but give it [53:54] a try. [53:56] Cool. Uh, and if so, if it doesn't work, [53:58] I can give you Anton's personal phone [54:00] number. Just give him a call. No [54:02] problem. [laughter] [54:02] >> Of course, you and my home address. This [54:05] is actually how the uh invite support [54:09] works. We just call [laughter] Anton and [54:11] like [54:14] >> um one more question about our extensive [54:17] JR ecosystem. In Juny you can create a [54:21] guidelines file with markdown to take [54:25] keep track of certain requirements [54:28] boundaries etc etc. Is that a thing that [54:31] is supported by meta as well? [54:33] >> Vladimir do you want to answer? [54:35] >> Uh yeah I can answer actually we do have [54:39] a guidelines feature inside of measure. [54:41] Uh and uh if we can share my screen I [54:44] can even show where is located. Can we [54:49] Great. Thank you very much. [54:50] >> I think it will be useful. Yeah. [54:52] >> Yeah. So, uh here we have a coding [54:54] guidelines [54:56] which one can customize and can add uh [54:59] more information and instructions to the [55:01] agent and as far as I remember they work [55:04] pretty fine. I mean they really help [55:07] agent to solve task right Anton please [55:10] clarify. Yeah, in my experience, yes, [55:13] they help. And we also when you import [55:16] your project uh to matter, we also try [55:19] to figure it out if you used code MD [55:21] there for instance before and we import [55:23] uh code there. Uh we support it too. [55:26] >> Cool. [55:27] >> And we also thought uh about to add some [55:30] guidelines based on your like discussion [55:34] with the agent later. We've been [55:36] thinking about that as well, like [55:37] updating uh on the go. Uh but yeah, [55:42] anyway, you can make it manually right [55:44] away. So, it's uh supported in matter. [55:48] >> Neat. That's cool. Uh that was the last. [55:51] Okay, that should be the next question. [55:54] Uh does matter really improve the [55:57] communication between designers and [55:59] developers? And I was wondering that the [56:00] same question. [56:03] Um, how is that from your experience [56:05] [laughter] as a I think it's also up to [56:07] Vimemer to answer as a designer. [56:11] >> Yeah, that's a very good question. So, [56:15] first of all, let me make like a step [56:18] back. Uh, so we had this collaboration [56:21] in mind from the very beginning of our [56:24] work uh on matter. And as you can see [56:27] that I can like mention folks uh in the [56:30] chat and also can share my link with [56:34] preview to other folks. Uh this all [56:37] works in a collaboration and we believe [56:39] that collaboration is actually the key [56:41] of product development and we don't aim [56:44] to you know uh those like indie [56:47] developers or indie designers vice [56:50] versa. Um we aim to teams specifically [56:54] because as I mentioned before we think [56:57] that this is uh like the main value uh [57:00] of product development and uh the thing [57:04] that really matters is the team uh [57:07] beside the project and I think with [57:10] matter we kind of nailed it in terms of [57:12] we supported basic scenarios with um [57:16] also with the Slack integration with a [57:19] handoff of uh either with the summary [57:22] and the isser and uh with the pull [57:25] request feature. Yeah, maybe Elena can [57:28] add something on top based on her [57:30] experience. [57:32] Um yeah um I covered uh this topic a bit [57:37] uh earlier but uh uh I feel that it's [57:41] much much easier to explain your ideas [57:46] uh to developers and to stakeholders [57:50] uh because also as I mentioned before [57:52] you don't need to write Google document [57:56] and uh ask all the audience to imagine [58:00] uh what uh what is your idea about? [58:03] [snorts] So uh for me matter um is a [58:08] tool uh which help to uh speed up speed [58:12] up and improve uh collaboration and [58:15] communication and for me as a product [58:17] manager uh it is crucial because uh it's [58:21] one of my uh key you know uh [58:24] responsibility is to communicate with [58:26] various uh folks inside team and outside [58:28] of the team. Uh so yeah uh I think it's [58:32] a great uh great tool uh for uh [58:35] improving communication in general. [58:38] Yeah. And may I just ask one more thing [58:40] on top? Sorry folks. I just realized [58:43] that actually during our setup both our [58:46] setup and both working on the task uh [58:49] some from time to time I need some help [58:52] from Anton. And what is really great [58:55] because Anton sometimes might be [58:56] unavailable right? So he might be [58:59] invocation or whatever. [59:01] uh but if I share uh if I mention him [59:05] here or if I share the link to the task [59:07] the context of the task will remain the [59:09] same and this won't work with a local [59:14] setup right if you're working for [59:15] example in cursor and you have this [59:18] local setup local host and things like [59:20] that you can't explain uh like easily uh [59:24] if you need help from a developer [59:26] colleague and with matter you actually [59:28] can just share the link to the uh chat [59:32] and they will see exactly the same uh [59:35] like chat history with all the prompts I [59:37] used with all the artifacts I used like [59:40] uh Figma link and like yeah and this [59:44] make it so much easier to explain and to [59:47] help when you need help. So yeah, I [59:50] think this is one of the greatest uh [59:53] like improvement of my flow since I [59:56] switched from like like not switched [59:58] from cursor but since I tried cursor and [60:00] I experienced different problems with uh [60:03] both with the setup and sometimes with [60:05] some uh like lack of knowledge of uh [60:08] software development and when I need [60:10] help uh from my colleagues now with [60:13] matter I don't need any of that. I just [60:15] can share the link and I can just [60:17] mention the person here and yeah [60:21] basically [60:23] >> I'm curious also to hear Anton's [60:25] perspective on that because now if I [60:27] like playing devil's advocate right [60:29] assuming you're a team of three people [60:31] Anton being the only developer now you [60:33] have three developers so quote to quote [60:37] um how is that with your workload just [60:40] reading through code quality goes a [60:42] little bit in that direction how do How [60:45] has your work changed with matter? [60:48] >> Yeah, from my perspective, it's actually [60:51] uh [60:53] 50/50. I would say some changes uh they [60:56] are at the moment uh they can be merged [60:59] almost as it is and I really enjoy uh [61:02] like doing only small tweaks uh to to [61:06] the solution and merging them because it [61:09] uh actually it unloads me because um I [61:12] do not like implementing markup as close [61:15] as possible to the to the yeah uh to the [61:18] mockup and uh if designer has passed me [61:22] this then I am pretty sure that this is [61:26] exactly the that they they want to see [61:28] in production. So visually uh uh and I [61:32] think that in this sense I can only [61:34] refactor certain things uh under the [61:36] hood but I need to keep the look uh the [61:39] same. So actually markup things are yeah [61:42] for me it's it's a huge relief. I can [61:46] concentrate on the on more interesting [61:48] tasks on logic on I don't know [61:50] refactoring even on updating guidelines [61:52] for the agent because I see that the [61:54] agent uh performs strangely or do does [61:58] uh uh weird things for instance so it's [62:02] my my my flow uh changed in in this [62:06] sense that I'm more like a facilitator [62:08] and mentor and uh besides uh it's [62:11] probably my personal trait but uh I like [62:14] actually helping people. I like [62:15] mentoring like [laughter] uh [62:17] >> That's true. [62:18] >> That's so true. [62:19] >> Yeah. I like uh coming to uh designer [62:23] tasks and help even uh help them [62:26] prompting uh sometimes or explaining why [62:29] why this thing doesn't work. But uh I'm [62:32] not sure that it's like up for everyone. [62:35] It I think uh people usually work in a [62:38] bit different environment. So they uh [62:40] actually pass the work via pull request. [62:42] So it's it's 50/50. But in the worst [62:45] case scenario when I see that the code [62:48] is completely unusable it's complete [62:50] mess. But uh I I must notice also here [62:52] that uh with the new models it's uh more [62:55] rare scenario now. So the new model uh [62:58] uh the newer model uh the better code [63:01] quality is it's still sometimes yeah can [63:04] be messier but uh in the worst case [63:07] scenario I have a reference [63:08] implementation. I know how it should [63:10] look like and I see and and I also have [63:14] a definition of done uh written for me [63:17] and I can implement it from scratch. I [63:19] can reprompt it as I as I like and uh [63:23] yeah for me it it wouldn't be a waste of [63:26] time. I I can quite quickly I can [63:29] understand quite quickly uh whether this [63:31] code uh worth my attention or it's [63:34] complete mess. But yeah, I think that uh [63:37] this 50/50 will be [63:39] shifting to 8020 I guess. So [63:44] >> yeah that's that's cool. [63:47] I can very much share that opinion with [63:48] Markdown. That's like I don't I don't [63:50] want to deal with that. [laughter] [63:54] >> We have one more comment in chat. It's [63:56] actually quite funny but thank you very [63:58] much. We have source maps enabled in [64:00] message brains web UI. Yeah sometimes [64:03] that happens. Uh can blame AI I guess [64:05] for that but we we will disable them. [64:07] Thank you. Really [64:10] >> you just wanted to make this the [64:11] experience more able to explore for [64:13] everyone? You know, it's a feature. [64:15] >> Yeah. Yeah. Open source, you know, [64:17] [laughter] [64:17] >> basically. [64:22] >> Any last words before we wrap things up? [64:28] >> It was great to chat today with you [64:31] folks. Uh thank you very much uh for [64:35] this conversation. I enjoy it a lot. And [64:38] uh yes, as I uh mentioned in the [64:40] beginning, uh if you join uh um our [64:44] weight list, matter weight list uh today [64:47] using the link I posted in the chat [64:49] earlier, we will provide you matter [64:52] access uh tomorrow. So you don't need to [64:55] wait uh in our weight list. So feel free [64:59] to use this option. Uh and it would be [65:02] also great to um collect your feedback. [65:06] Um yeah, as we are uh at the very early [65:10] stage uh right now uh and we continue to [65:13] improve our product uh based on the user [65:16] uh feedback and uh yeah it is very very [65:19] important for us. Thank you very much. [65:23] >> Yeah, thank you everyone who joined the [65:25] session. It was really uh great to share [65:28] this experience from the very beginning [65:31] like with setting up the product uh to [65:33] handing off to developer the pull [65:35] request and I'm really glad that uh [65:38] although it didn't go the way we uh [65:42] think it will go in terms of uh because [65:44] the agent is kind of unpredictable but [65:47] I'm glad uh it worked fine. So yeah uh [65:50] we will continue to make matter inside [65:53] of matter and I hope uh we will hear [65:56] more promising stories based on your [66:00] experience working with matter and how [66:02] will how you use it. Yeah. So thank you. [66:07] >> Yeah and also from my side I also see [66:10] one more question in chat. I think I [66:12] will address it quickly. I'm not sure I [66:14] actually competent enough to address it [66:16] but I will try. Uh so will it possible [66:18] to use meta with a compos desktop [66:20] project? Yes, including the select tool. [66:22] Uh I'm not that experienced with compos [66:25] desktop. Um so sorry for that. But uh if [66:29] you can launch this compos desktop [66:31] project in web inside web in a web [66:35] browser. Uh I I hope there is you know [66:37] like crossplatform uh capability here. [66:41] In this sense you may use it inside [66:44] matter in I frame as we shown. Uh yeah I [66:49] think it should be possible but it will [66:51] be interesting to see if you uh if you [66:54] will try and uh and you will succeed. It [66:57] would be interesting experience I think [66:59] because most of the time we work with [67:01] like we can work with any front- end [67:03] technology but we better work with uh [67:06] conventional technologies such as uh [67:08] Webpack, White, React and stuff like [67:11] that. So it will be really interesting [67:13] to see um I guess so. Yeah, I think it [67:17] should work in the case it can be [67:19] launched in the web browser. That's it [67:22] from my side regarding this question and [67:25] uh final words. I don't know. Thank you [67:27] folks. It was really a pleasure to to [67:29] share all these things with you. I'm [67:31] really really excited to share my [67:34] experience as a developer and I really [67:36] like explaining things and what's going [67:38] on behind the scenes. It's my pleasure. [67:44] >> Cool. Thank you so much everyone. [67:47] >> Thank you. Bye bye. [67:49] >> Bye. Bye bye.