Project IDX is an entirely web-based workspace for full-stack application development, complete with the latest generative AI from Gemini, and full-fidelity app previews, powered by cloud emulators.https://idx.dev/en-ushttps://idx.dev/blog/post/dev-nix-postgres/https://idx.dev/blog/post/dev-nix-postgres/📢 PostFri, 18 Oct 2024 04:00:00 GMT<p>What if you had a package.json for your entire development environment? That&#39;s dev.nix. </p><p>We use Nix in IDX so in one file you can declare the needed runtimes and tools and most importantly their versions. This file is checked into source so anyone contributing to the project has everything they need when the workstation boots up. </p><p>Let&#39;s dive in.</p>https://idx.dev/blog/article/introducing-idx-templates/https://idx.dev/blog/article/introducing-idx-templates/🔖 ArticleTue, 24 Sep 2024 04:00:00 GMT<p>Today we&#39;re announcing our customizable template system that enables you to build parameterized templates to get started on your next project more easily than before. When you visit the <a href="https://idx.google.com">IDX dashboard</a>, you&#39;ll see a list of project types that have customized UI for creating a customized project. These themselves are <a href="https://idx.google.com/templates">templates</a>. </p><p><b>The same system we use for building our official templates is now available for all developers.</b> Every template can be opened through a link, which makes them a great way to quickly create <a href="https://stackoverflow.com/help/minimal-reproducible-example">minimum reproducible examples</a> which makes them a perfect fit for reproducing problems when reporting issues in GitHub, contributing to open source projects. Custom templates can also simplify team setups, conference workshops, tutorials, codelabs, and so much more.</p><p>With one click, you can have a customized version of a project up and running without worrying about which version of Node.js or which version of a CLI they need to download. Templates take in a set of configurations and user input and, from that, you create a customized project.</p><h3>Open Sourced Examples</h3><p>Templates are incredibly powerful and customizable. To show all things you can do with templates, we open sourced our <a href="https://github.com/project-idx/templates">Official Templates</a> as well as a repository for <a href="https://github.com/project-idx/community-templates/">Community Templates</a>. And yes, while we&#39;d totally appreciate a star, we encourage you to fork the Community Repository and send us a PR for a new template.</p><p>In our official <a href="https://github.com/project-idx/templates/tree/main/astro">Astro</a> sample, you can see how we map user input from template parameters to the npm create arguments.</p><p>We also have a <a href="https://developers.google.com/idx/guides/custom-templates">detailed documentation page</a> that describes how the template process works–and we even include an <a href="https://developers.google.com/idx/guides/open-in-idx">&quot;Open in IDX&quot; button generator</a>!</p><p>Our Official Templates repo holds the fully-supported options we list in the <a href="https://idx.google.com/templates">IDX dashboard</a>. Our Community Templates repo is open for anyone to contribute templates for any kind of project. We hope to create a large library of all kinds of things you can build with IDX. So if you have an idea, you can host an &quot;<a href="https://developers.google.com/idx/guides/open-in-idx">Open in IDX</a>&quot; button in your own repo or send us a pull request to our Community Templates repository.</p><h3>The Anatomy of a Template</h3><p>One of our core principles in Project IDX is workspace configurability. We use <a href="https://nixos.org/">Nix</a> under the hood, which makes it easy to add new languages, libraries, and tools to your workspace. IDX workspace configuration is stored in a single file: <a href="https://developers.google.com/idx/guides/customize-idx-env">dev.nix</a>. </p><p><span>type: embedded-entry-inline id: 1LyJbculwF5AY1pO8HcZ48</span></p><p>The file above adds Node.js, Go, and Python to the workspace. It also adds an extension for Tailwind CSS, enables Docker, and runs a local PostgreSQL database. All of this in one file. Any developer who shares this file through source control, like GitHub, will also get the same exact versions and tooling, making it easy to ensure dev machine consistency across teams.</p><p>Our templating system is based on Nix as well. A template needs to have two specific files at the root for IDX to identify it as a template and a dev.nix configuration file for the workspace as well.</p><ol><li><p>idx-template.json - Determines how your template will show up in the IDX&#39;s &quot;New Workspace&quot; UI.</p></li><li><p>idx-template.nix - Receives the values from the user input and usually involves running a language-specific scaffolder command or copying files from the template.</p></li><li><p>.idx/dev.nix - The .idx/dev.nix file that serves as the workspace configuration. This file itself can be parameterized.</p></li></ol><p>Below is an example of a idx-template.nix file from our <a href="https://github.com/project-idx/templates/blob/main/go/idx-template.nix">official Go template</a>.</p><p><span>type: embedded-entry-inline id: KQ2GBTz2C2Tc8rzG6Rd7H</span></p><p>This is a Nix function that takes the user-specified parameters and produces a &quot;bootstrap&quot; shell script that populates the workspace&#39;s project files directory. You can use environment variables specific to IDX workspaces such as $WS_NAME, the user provided workspace name, and $out, the absolute path to the workspace directory.</p><p>Check out our <a href="https://developers.google.com/idx/guides/custom-templates">documentation</a> for more details on our templating and configuration system, including features like lifecycle hooks that can run commands when a workspace is first created or each time a workspace is started.</p><h3>Open in IDX</h3><p>Every template can be shared and opened with a link. IDX provides a full virtual machine which allows you to run all kinds of languages from frontend to backend. This allows you to get started with a link. Our official templates have dedicated links, like Flutter: <a href="https://idx.google.com/new/flutter">https://idx.google.com/new/flutter</a>. </p><p>However, any template can be instantiated by using a GitHub repository link as a URL parameter: <a href="https://idx.google.com/new?template=">https://idx.google.com/new?template=&lt;repo&gt;</a>. </p><p>For example, you can use the <a href="https://github.com/project-idx/community-templates/tree/main/vite-vanilla">Vanilla Vite template</a> stored in our <a href="https://github.com/project-idx/community-templates/">Community Templates repository</a>.</p><p>Keep in mind that templates are only for customization <i>before</i> projects are created. If you only need to import a repository from GitHub, you can still use an <a href="https://developers.google.com/idx/guides/open-in-idx">Open in IDX</a> button and our import link parameter; <a href="https://idx.google.com/import?url=">https://idx.google.com/import?url=</a>&lt;repo-url&gt;. For example: <a href="https://idx.google.com/import?url=https://github.com/project-idx/community-templates">https://idx.google.com/import?url=https://github.com/project-idx/community-templates</a>.</p><h3>Let us know what you think</h3><p>We&#39;re excited to provide everyone with this powerful system to customize workspaces. We believe that it will make collaboration across projects easier, tutorials more interactive, and workshops run much more smoothly. Check out our <a href="https://github.com/project-idx/templates">Official</a> and <a href="https://github.com/project-idx/community-templates">Community</a> repositories, read the <a href="https://developers.google.com/idx/guides/custom-templates">docs</a>, and let us know what you think. You can request templates in both repositories or drop us a line in our <a href="https://community.idx.dev/">community forum</a>.</p>https://idx.dev/blog/article/meet-elijah/https://idx.dev/blog/article/meet-elijah/🔖 ArticleThu, 12 Sep 2024 07:00:00 GMT<blockquote><p><i>This Summer, the IDX team had the pleasure of working with Elijah, a software engineering intern who played a key role in developing our upcoming voice control feature. Read about his experience below.</i></p></blockquote><hr/><h2>The Journey to IDX </h2><p>From Nigeria, where I initially pursued law, to landing my dream internship at Google, my journey has been nothing short of transformative. The turning point came when I had the opportunity to take the SAT, which led to a scholarship at the illustrious HBCU, Fisk University. There, my passion for technology was ignited, and my path was set toward a career in computer science.</p><p></p><p>This Summer, I had the incredible opportunity to intern at Google, working on Project IDX. For those unfamiliar, IDX is an innovative web-based development environment that reimagines accessibility in software development. My role? To contribute to a groundbreaking feature that integrates voice control into the IDE, enabling users to code using just their voice and a microphone.</p><h2>Breaking Barriers with Voice Coding</h2><p>The significance of this project cannot be overstated. It’s not just about creating another cool tool for developers—it&#39;s about revolutionizing inclusivity in tech. Voice coding is a game-changer, particularly for physically disabled developers. By making coding accessible to everyone, regardless of their physical abilities, we are democratizing software development in a way that could transform lives.</p><p><i>(Sound on to hear the voice mode demo!)</i></p><h2>Growth and Learning at Google</h2><p>Working on IDX has been more than just a technical challenge; it’s been a profound learning experience. One of the highlights has been the first-hand access to professionals who are at the top of their field. The chance to learn from these experts, to see how they approach problems, and to receive guidance on my own work has been invaluable. It’s not just about the technical skills—though I’ve certainly gained plenty of those—but also about understanding how to work effectively in a team, manage time, and balance work with personal life.</p><p> </p><p>The team culture at IDX is incredibly intentional. We all have a common goal, and it feels like a family where everyone is rooting for your growth. The support I’ve received, both professionally and personally, has been overwhelming. Google’s ethos of fostering collaboration and encouraging creative problem-solving is evident in every aspect of this internship. It’s a place where you are encouraged to challenge yourself, to push boundaries, and to innovate, all while knowing that you have a network of people who are invested in your success.</p><p> </p><p>One of the most exciting aspects of my work this summer has been developing &quot;Voice Mode,&quot; a feature within Project IDX that enables voice control. Voice Mode allows users to navigate and interact with the development environment using their voice. This innovation not only enhances accessibility but also represents a step towards more natural and intuitive ways of coding. The potential applications of this feature are vast, and I am thrilled to be part of a team that is pioneering such cutting-edge technology.</p><h2>Reflections and Future Aspirations</h2><p>My time at Google has been filled with moments that I will cherish forever, but if I had to pick a standout, it would be the exhilarating experience of networking with fellow interns and seasoned managers. The diversity in backgrounds and expertise is nothing short of inspiring. Every interaction has been a learning opportunity, and each day I am evolving, gaining insights, and expanding my horizons in ways I never imagined.</p><p> </p><p>In conclusion, this internship at Google has not only been a dream come true but also a pivotal moment in my career. I’ve had the chance to work on meaningful projects that have the potential to make a real impact on the world. I’ve grown both professionally and personally, and I’m excited to take these experiences with me as I continue my journey in tech. Whether it’s through developing voice-controlled coding tools or contributing to other innovative projects, I am committed to using technology to make a positive difference in the world.</p>https://idx.dev/blog/article/a-year-of-project-idx/https://idx.dev/blog/article/a-year-of-project-idx/🔖 ArticleThu, 22 Aug 2024 07:00:00 GMT<p>About <a href="https://idx.dev/blog/article/introducing-project-idx">a year ago, we shared our vision for Project IDX</a>: transforming full-stack, multiplatform app development by consolidating essential tools and services within your browser. We’ve been very fortunate to have such an incredible developer community join us on our journey so far. </p><p>Throughout this year we&#39;ve had our focus set on a few goals:</p><ol><li><p>Improve developer productivity with Generative AI tooling backed by Gemini.</p></li><li><p>Redefine what it means to &quot;get started fast&quot; with project templates and integration.</p></li><li><p>Bring native mobile app development to the browser with Flutter, React Native, and soon, <a href="https://idx.dev/blog/article/ai-tools-templates-and-android-studio">Android Studio</a>.</p></li></ol><p></p><p>A development environment traditionally consists of two main parts: the code editor and the languages and tools required to build and run your code. Project IDX unifies both aspects into a single, cohesive experience.</p><p></p><p>Within our code editor, we&#39;ve integrated powerful Generative AI features <a href="https://idx.dev/blog/article/insiders-look-at-gemini-in-idx">backed by Gemini</a>. These provide context-aware code suggestions, unit test generation, comment writing, programming language conversions, and technical question answering — all without ever leaving your workflow. On the development environment side, we&#39;ve built a robust system <a href="https://idx.dev/blog/article/nix-on-idx">based on Nix</a>, allowing for effortless environment configurations. With minimal setup, you can customize your Project IDX workspace with the precise languages, tools, and extensions you need to hit the ground running.</p><p></p><p>We also wanted to redefine what it means to &quot;get started fast&quot;. We wanted to abstract away the complex setups and tedious configurations. Now, a single browser tab is all you need to dive into native mobile app development with Flutter or React Native, or build powerful backends in your language of choice — whether it&#39;s Go, Node, Rust, Python, PHP, C++, or something else entirely. Need databases? Postgres, MySQL, Prisma, and Firebase Data Connect are at your fingertips. And with a few clicks, access tools like the Gemini API, Google Maps, Firebase Genkit, and Google Cloud Secret Manager. Project IDX isn&#39;t just about development speed; it&#39;s about opening doors to possibilities that were once unimaginable within the browser. </p><p>We&#39;ve accomplished so much this year, and we couldn&#39;t have done it without you, our early adopters that created an amazing community. Your feedback, enthusiasm, and support have been instrumental in shaping Project IDX into what it is today – thank you for your continued engagement. </p><p></p><p>Looking ahead, we&#39;re filled with optimism and excitement. Stay tuned for even more improvements. Please keep the feedback coming by posting on <a href="https://community.idx.dev/">our forums</a>, <a href="https://issuetracker.google.com/issues/new?component=1379083&template=1836320">filing bugs</a>, and suggesting / voting on <a href="https://idx.uservoice.com/forums/953956-general">feature requests</a>. </p><p></p><p>We can’t wait to see what you build with Project IDX. </p><p></p>https://idx.dev/blog/post/gitlab-bitbucket-preview-announcement/https://idx.dev/blog/post/gitlab-bitbucket-preview-announcement/📢 PostThu, 08 Aug 2024 23:00:00 GMT<p>Project IDX has always supported working with Github-based projects, but<a href="https://idx.uservoice.com/forums/953956-general/suggestions/46962415-add-gitlab-and-bitbucket-support"> we’ve heard from many of you</a> that you&#39;d also like to see us support both Gitlab and Bitbucket-based repos.</p><p></p><p>That’s why we&#39;re launching our early preview of Gitlab and Bitbucket support, now available to all IDX users. Watch the video below for walkthroughs and details. </p><p> </p>https://idx.dev/blog/article/ai-tools-templates-and-android-studio/https://idx.dev/blog/article/ai-tools-templates-and-android-studio/🔖 ArticleWed, 17 Jul 2024 05:00:00 GMT<h2>Reclaiming time and focus</h2><p>Every development session starts with the goal of staying focused. Breaking flow disrupts your development and leaves you frustrated. Task switching, slow machines, confusing errors –  these distractions take us away from what we developers do best: <i>build and ship</i>.</p><p>That’s why we created Project IDX and <a href="https://idx.dev/blog/article/start-building-with-project-idx-today">opened it up to users around the world this year at Google I/O</a>. We wanted to enable anyone to dive into a world of AI-powered development, seamless integrations, and easy access to templates for a wide range of frameworks and languages.</p><p>We’ve been listening to your feedback and working on new features and enhancements to help you optimize your workflow. Read on to learn about updates to IDX that help you work faster with less friction.</p><h2>Build faster with new templates, integrations, and solutions</h2><h3><b>Android Studio on IDX</b></h3><p>Android Studio is coming soon to Project IDX. With just a few clicks and right in your browser, you&#39;ll be able to set up a workspace that’s running Android Studio to quickly start coding, building, and testing native Android apps. <a href="https://idx.google.com/android-studio">Join the waitlist</a> to be one of the first people to try out our Android Studio on IDX experience.</p><h3><b>Cloud Secret Manager</b></h3><p>One of our goals at IDX is to help you quickly get your development environment up and running, but sometimes you need API keys, passwords, and/or certificates to get a project off the ground securely. That’s why we’ve added Cloud Secret Manager to IDX&#39;s integration panel. Directly within IDX, you can store and retrieve sensitive information from Cloud Secret Manager, making it easier and more secure for you to quickly get started with projects across teams.  </p><h3><b>A new library of end-to-end solutions</b></h3><p>We’ve added 10 end-to-end solution templates, all enabled with Gemini, that demonstrate best practices when building apps that combine the breadth and depth of technologies Google offers. You can use them to see the architecture we&#39;ve used when building GenAI into apps. In particular, <a href="https://idx.google.com/templates?category=solutions">the Compass App</a>, a real travel itinerary app, showcases how you can combine best-in-class Google developer services to build AI-driven applications for both Flutter and Next.js.</p><h3><b>Backend templates</b></h3><p>We added new template support to Project IDX to <a href="https://idx.dev/blog/article/full-stack-development-in-project-idx">reduce the friction associated with backend development</a>. With options for Go, Python, Ruby, .NET, Java, PHP, Dart, C++, and more, you can easily build and test backend APIs or services. And, with our Cloud Run integration, you are just a few clicks away from deploying your API and easily monitoring its progress live. </p><h3><b>Database starter templates</b></h3><p>Thanks to all of <a href="https://community.idx.dev/search?q=database">your feedback</a>, we are introducing a series of templates to <a href="https://idx.dev/blog/article/nix-on-idx">configure your IDX development workspace</a> with support for popular database technologies like Postgres, MySQL, and Prisma. We can&#39;t wait to see what kind of queries you come up with. This is just the start, so stay tuned for updates on how we’re further simplifying how your IDX workspace can connect to databases you create.</p><h3>R<b>eact Native support</b></h3><p>One of our <a href="https://idx.uservoice.com/forums/953956-general/suggestions/47546057-react-native-implementation">most requested features</a> has been for React Native support. So, starting today, we have made our early preview of React Native support (with Expo) available for you to try out. You can preview and test your React Native app fully inside IDX itself, or you can scan the generated QR code and test the app on your physical mobile device as well.</p><h2>Automate common dev tasks with Gemini in IDX</h2><p><a href="https://idx.dev/blog/article/insiders-look-at-gemini-in-idx">Gemini in IDX</a> offers AI assistance at your fingertips, providing you with code completion, chat assistance, and the ability to automate tasks with just a few keystrokes. We&#39;re continuously enhancing Gemini in IDX to make your development process more efficient and intuitive – check out some of our updates: </p><h3><b>IDX Interactive Chat </b></h3><p>With our new interactive chat feature, Gemini in IDX can answer questions, execute commands, run tests, and even make code changes with your permission. </p><h3><b>[Experimental] Write My Docs</b></h3><p>With the new Write My Docs feature, you can ask Gemini to write documentation for your file and Gemini will intuitively pick the best documentation scheme for your file (for example, Javadoc for java files). </p><h3><b>[Experimental] Write My Tests</b></h3><p>With the new Write My Tests feature, you can ask Gemini to write (or update) unit tests for your file. Gemini will look at your folder structure to see if a test for your selected file already exists - if so, it will update the file. If a test is not detected, it will create the test file for you. </p><p>Keep in mind that for all of these features, you don’t have to accept the first draft that Gemini creates for you. You can always ask Gemini to iterate further in the prompt box, just like you would with  AI chat. </p><p>For example, if you need Gemini to generate documentation for a method, you can prompt it further by saying “also add documentation for X method”. You can also expand the change Gemini wants to make to your file to see a quick diff or hit the “review changes” button to see an expanded diff view of your original file before asking Gemini to implement the updates. </p><h3><b>Agent Templates </b></h3><p>Using AI to assist your development workflow is one way to bring speed, ease and quality to your projects. But, there is also great potential to transform application development with Google’s GenAI developer tools. </p><p> Get started building your hybrid AI-applications with the IDX Gemini template or <a href="https://idx.google.com/templates?category=ai-ml">create and share agents</a> by using our basic IDX agentic experience template for your code editor or GitHub Actions.</p><h2>Building Together</h2><p>Our goal with Project IDX has always been to empower you to do what you do best: build and ship. We’re constantly aiming to further minimize disruptions, streamline your workflow, and ultimately, help you stay in flow to create exceptional software – quickly and efficiently.</p><p>To continue to build a truly integrated developer experience that reflects your needs, we need your help. Please check out the newest features included in this IDX release and share your thoughts and feedback via our <a href="https://community.idx.dev">discussion forums</a> or <a href="https://idx.uservoice.com">feature requests portal</a>.</p><p>For walkthroughs and more information on the features mentioned above, check out our <a href="https://developers.google.com/idx/guides">documentation page</a>. If you haven’t already, <a href="http://idx.dev">visit our website</a> to try out Project IDX and join us on our journey. </p><p>We can’t wait to see what you create with Project IDX!</p><p></p>https://idx.dev/blog/article/insiders-look-at-gemini-in-idx/https://idx.dev/blog/article/insiders-look-at-gemini-in-idx/🔖 ArticleThu, 27 Jun 2024 17:00:00 GMT<h2>G<b>emini in IDX: Enhancing Your Development Workflow with AI</b></h2><p>Project IDX is enhanced by Gemini, Google&#39;s latest and most capable family of AI models. Let&#39;s explore how this integration can streamline your coding experience and give you a behind-the-scenes look at how your code interacts with Gemini in IDX.</p><h2><b>Under the Hood: How the Gemini model works within IDX</b></h2><p>Each IDX workspace runs on a dedicated virtual machine (VM) that is preconfigured to Gemini models via task specific APIs. Here&#39;s how it works:</p><p>1. <b>Local Codebase Indexing:</b> When you choose to enable it, a local code-indexer on your VM creates a searchable index of your codebase. This index stays on your machine. <i>You can control which parts of your codebase are not indexed using a </i><a href="https://developers.google.com/idx/guides/aiexclude"><i>.aiexclude file</i></a><i>, ideal for sensitive or proprietary code.</i></p><p>2. <b>Tailored, Context-Aware Prompts: </b>A prompt engine analyzes your current project, tools, errors, open files, and relevant code snippets (if indexing is enabled). This information is used to craft highly tailored prompts for Gemini in IDX, ensuring you receive the most relevant AI assistance.</p><p><b>3. Model Selection:</b> IDX intelligently chooses the right Gemini model for the task: a small model for fast code completions, a larger streaming model for chat, and a powerful model for inline code generation and transformations.</p><p>4. <b>Contextual Post-Processing:</b> Gemini&#39;s responses are formatted for easy integration into your workflow. Code suggestions appear inline, explanations are displayed in the IDX AI chat, and tool actions require your approval.</p><h3><b>Unleashing the Power of Codebase Indexing</b></h3><p>To get the most out of IDX&#39;s AI features, enable codebase indexing. This allows Gemini to understand your project deeply and provide more relevant suggestions and answers.</p><p><b>To Enable:</b> Go to your settings (.vscode/settings.json) and set &quot;IDX.aI.enableCodebaseIndexing&quot;: true. You can also control this from the Gemini Chat window and click on the settings icon.</p><p><b>Important Note:</b> <i>When you enable codebase indexing and use Gemini in IDX features, relevant code snippets are sent to a Gemini model to provide contextually relevant responses. You can control which parts of your codebase are excluded in the codebase index by using a </i><a href="https://developers.google.com/idx/guides/aiexclude"><i>.aiexclude file</i></a><i>, ideal for sensitive or proprietary code you don’t want to be used automatically as context for the various AI surfaces (e.g. Code Completion, Chat, and Inline Generation).</i></p><h2><b>AI Assistance in Your Coding Workflow: Code Completion, Chat, and Generation</b></h2><h4><b>Code Completion</b></h4><p>As you type, Gemini suggests the next piece of code based on your current file and, if enabled, relevant snippets from your project. Press <b>Tab</b> to accept the suggestion or use <b>Cmd/Ctrl+left arrow</b> to accept a word.</p><p>A smaller, faster model drives code completion in IDX. As you type, a local context/prompt engine analyzes your environment, considering factors like prefix, suffix, open files, and error context. This information is used to create and send a formatted request to the model. The model&#39;s response is then assessed for quality, and any responses below a certain threshold are filtered out.</p><p>Additionally, if the code completion API detects that the response contains any form of recitation, it includes a comment in the code along with a link to the AI License Log panel, displaying any licenses that the code might be subject to.</p><h4><b>Pro tips:</b></h4><ul><li><p><b>Add comments to guide code completion: </b><i>Code completion works even better if you start typing right after a code comment. In the example below, the comment hints to Gemini what the intended code should do. </i></p></li></ul><ul><li><p><b>Accept partial completions with Ctrl/Cmd + Right-Arrow:</b> <i>You don’t have to accept the entire completion — you can accept part of the completion by pressing (Ctrl + Right-Arrow, or Cmd + Right-arrow on a Mac). Press Escape at any time to dismiss the autocompletion.</i></p></li></ul><p><i></i></p><ul><li><p><b>Review license information for suggested code: </b><i>If the code completion API detects that the suggested code contains any form of recitation and is subjected to licensed code, a reference is included as a comment in the code along with a link to the AI License Log panel.  You can click on the link shown in code or you can access it from the Chat window toolbar.</i></p></li></ul><h4><b>Code Chat</b></h4><p>Click the &quot;Gemini&quot; button or use <b>Ctrl+Shift+Space</b> (<b>Cmd+Shift+Space</b> on Mac) to open the chat panel. Gemini in IDX can help answer questions about your code, explain concepts, and even modify your code with your approval.</p><p> Gemini in IDX’s code chat is powered by a larger model specifically fine-tuned for coding related tasks. The prompt engine intelligently selects the appropriate context for each user query. If the model decides to take action, it invokes the action handler, which completes the action after receiving user permission. Actions can be repeated until the model determines your query has been adequately addressed. A dedicated streaming response handler manages code formatting, its corresponding UI, and Recitation.</p><h4> <b>Pro tips:</b></h4><ul><li><p><b>Ask IDX-specific questions with the /idx command: </b><i>You can use the “/idx” slash command to ask questions related to Project IDX itself. For example, if you want to know how to install python in IDX (which uses Nix to set up its environment), you can ask “/idx how do I install Python?”.  And if you are importing your own project via Git, and want web previews setup, just ask “/idx how do I setup web preview for this project?”.</i></p></li></ul><ul><li><p><b>Ask about your current file:</b> <i>Gemini in IDX can use the </i><b><i>currently open file</i></b><i> for context so you can easily ask questions about the current file you’re in. For example, you can ask to change the current file, an express.js server, to add a path. </i></p></li></ul><ul><li><p><b>Leverage Gemini&#39;s understanding of your entire project (if indexing is enabled):</b> <i>Gemini in IDX can use your codebase index &amp; contextual understanding when answering your questions. So you can simply ask, “In my current file, how do I change the callServer() method to use fetch instead of XMLHttpRequest?”. </i></p><ul><li><p><b>Note: </b>Make sure codebase indexing is enabled as discussed above.</p></li></ul></li></ul><p></p><ul><li><p><b>Create multiple threads for different conversations:</b> <i>You can create multiple chat threads with Gemini in IDX. Keep conversations short and to a single context to avoid the chat history getting in the way of AI responses when a new request is totally different from the current conversation.</i></p></li></ul><ul><li><p><b>Easily insert code from chat into your editor: </b><i>Use the “Insert code” button on any generated code to move it to the current cursor location on the editor.</i></p></li></ul><ul><li><p><b>Use right-click shortcuts for common tasks like explaining code:</b></p><p><i>We’ve added context-menu items for common repetitive tasks for quick easy access. Just right click, and ask Gemini in IDX to do common things like “Explain code” or “Add comments”. </i></p></li></ul><h4> <b>Inline Code Generation</b></h4><p>Press <b>Cmd/Ctrl + I</b> to trigger inline code generation. Ask Gemini in IDX to write or edit code directly in your editor.</p><p>Code generation is driven by a powerful non-streaming endpoint specifically optimized for coding tasks. The prompt engine intelligently selects the appropriate context &amp; prompt for each user query. The response handler takes different actions depending on the model&#39;s output, such as inserting new code into the editor, modifying existing selected code, displaying code explanations in the chat if the response isn&#39;t intended for the codebase, or handling recitation information.</p><h4><b>Pro tips:</b></h4><ul><li><p><b>Use slash commands like /fix, /errorHelp, /addComments, /explain, and /transform for quick coding assistance: </b><i>You can use slash commands like “/fix” to allow Gemini in IDX to automatically fix errors for you. Some commands like “/fix” will also get the error context from the editor and intuitively provide better recommendations.</i></p></li></ul><h4><b>Experimental Feature: Interactive Chat Threads</b></h4><p>Early testers can explore our new interactive chat feature, where Gemini in IDX can answer questions, execute commands, run tests, and even make code changes with your permission. </p><p>For example, if you ask Gemini to run the unit tests for you, it will attempt to run the command required, such as ”npm run test”, instead of just giving you information on how to do it. Gemini in IDX can also take multiple actions on your behalf until you are satisfied with the outcome. And of course, all this happens with your permission – you can always guide Gemini in IDX by declining, accepting or amending its suggestions. </p><p>Stay tuned for more information on how you can sign up to be an early tester. </p><h4><b>Help Us Improve!</b></h4><p>Your feedback is invaluable. Use the thumbs up/down buttons to rate AI responses and help Gemini in IDX learn and improve.</p><h4><b>Stay Tuned for More!</b></h4><p>We’re constantly working to improve, enhance and update Gemini in IDX to further simplify and streamline your developer workflow. We’re also always working to address your feature requests and bugs you flag for us – so thank you for your continued support and engagement! Please keep the feedback coming by <a href="https://issuetracker.google.com/issues/new?component=1379083&template=1836320">filing bugs</a> and suggesting / voting on <a href="https://idx.uservoice.com/forums/953956-general">feature requests</a>.</p><p>We have lots more in store for you, so be sure to keep an eye out for the latest from Project IDX by engaging with us on the new <a href="https://community.idx.dev">community forums</a> and checking out our <a href="https://idx.dev/blog">blog</a> for product announcements and updates from the team. </p><p>For walkthroughs and more <a href="https://developers.google.com/idx/guides/introduction">information</a> on the features mentioned above, check out our <a href="https://developers.google.com/idx/guides/introduction">documentation page</a>. If you haven’t already, <a href="https://idx.dev/">visit our website</a> to try out Project IDX and join us on our journey. </p><p>We can’t wait to see what you create with Project IDX!</p><p></p>https://idx.dev/blog/post/tips-and-tricks-enabling-docker/https://idx.dev/blog/post/tips-and-tricks-enabling-docker/📢 PostFri, 07 Jun 2024 20:20:00 GMT<p>Learn how Project IDX allows you to enable Docker support with just one line of code so you can quickly and easily customize your workspace.</p>https://idx.dev/blog/post/tips-and-tricks-building-with-gemini-in-idx/https://idx.dev/blog/post/tips-and-tricks-building-with-gemini-in-idx/📢 PostMon, 03 Jun 2024 16:00:00 GMT<p>Learn how to use some of Project IDX&#39;s built-in Al-assistance features to help speed up and refine your developer workflow, all backed by Gemini, Google&#39;s latest and most capable Al model.</p>https://idx.dev/blog/article/start-building-with-project-idx-today/https://idx.dev/blog/article/start-building-with-project-idx-today/🔖 ArticleTue, 14 May 2024 20:00:00 GMT<p>Google I/O 2024 is in full swing, and we&#39;re sharing updates on how Project IDX fits into our mission to create an integrated workspace that can be used to ship full-stack, AI-powered apps across platforms. Read on to learn about how IDX’s new features will help you do higher quality work, more efficiently, with less friction. </p><h2><b>Project IDX is now in beta</b></h2><h3><b>Instant access to Project IDX</b></h3><p>Since we launched Project IDX, we’ve been overwhelmed by your response; hundreds of thousands of you have signed up to try it. We’re excited to announce that Project IDX is now in beta and we’ve removed the waitlist! </p><p>As of today, anyone can sign in with their Google account to start building with AI-assistance, collaboration capabilities, support for a broad range of frameworks and languages, as well as seamless integration with popular Google tools and products like <a href="https://flutter.dev/">Flutter</a> and <a href="https://firebase.google.com/">Firebase</a>. And you can get to work quickly with over a dozen templates pre-loaded with the basic files and packages you need, or by importing your existing GitHub repo and its dependencies, or even starting with a blank slate. </p><h3><b>Additional workspaces and benefits</b></h3><p>And now, if you sign up for the new <a href="https://developers.google.com/profile/u/me">Google Developer Program</a>, you can create up to 5 workspaces in IDX. Members of the program get additional benefits at no cost, including using Gemini models to help you generate summaries of documentation, explain sample code, and answer product questions. If you previously registered for a Google Developer Profile, you&#39;re already enrolled in the program and all set. More benefits are coming soon. </p><h2><b>Improved AI assistance</b></h2><p>Developers around the world are turning to Gemini models for help with writing code and other software development tasks. We’ve integrated the Gemini model deeply into IDX to provide you with assistance directly in your workspace. </p><p>Project IDX already has support for <a href="https://idx.dev/blog/article/build-with-gemini-in-idx">AI-powered code completion, an assistive chat, and contextual code actions</a> like “add comments&#39;&#39; and “explain this code”. We’ve made improvements to provide you with even better code suggestions, and answers to your coding questions.</p><p>Our code completion now better understands your intent across a variety of programming languages:</p><p>Our integrated chat assistance also has a greater understanding of your project’s contents, meaning it gives you more tailored responses:</p><h3><b>Slash Commands </b></h3><p>Since launch, Project IDX has offered you inline AI assistance inside any file by pressing Cmd/Ctrl + I. You’ve been able to simply describe the changes you want to make to your code and Gemini in IDX will provide real-time error correction, code suggestions, and auto-completion in your code. </p><p>Now, you can use slash commands with Gemini in IDX to quickly execute tasks and access features, streamlining your workflow with a simple keystroke. Try slash commands like “/fixError” and “/helpWithError” to fix errors for you. Slash commands like &quot;/addComments&quot;, &quot;/explain&quot;, and &quot;/transform&quot; expedite your developer workflow by automating routine tasks and providing contextual code explanations, freeing you to focus more on problem-solving and less on mundane tasks.</p><h3><b>Interactive chat (Experimental)</b></h3><p>With our new interactive chat in private preview, you can tell Gemini to directly take actions on your behalf. Ask Gemini to complete tasks to save you time and energy, such as summarizing the purpose and behavior of the files within your project, fixing the errors in a given function, or updating files and variables for you. </p><p>For example, you can tell Gemini to complete a terminal command, like “rename all the files in my ./data directory into the form xxx_name.json”. With Gemini in IDX, tedious and time-consuming tasks like renaming lots of files become effortless, allowing you the time to focus on more important aspects of your project.</p><p>Gemini will ask you to review and confirm changes before it makes any edits or runs any commands, so you remain fully in control while you get the productivity benefits of using generative AI in your workflow.</p><p>Keep an eye out for an invite from us to use interactive chat!</p><h2><b>Seamless integration with Google services</b></h2><p>Elevate your development experience with Project IDX’s new built-in integrations panel. Add generative AI features to your app with the Gemini API, deploy to the web with Firebase Hosting, add maps and geolocation with Google Maps Platform APIs, and deploy your full stack apps to Cloud Run with one click for multi-region deployment. We’re continuously adding more products, like <a href="https://checks.google.com/">Checks</a>, so stay tuned for more updates. </p><p>These API and service integrations help you seamlessly incorporate popular Google technologies into your projects without switching to another tab and leaving your development workflow. </p><p>Behind the scenes, IDX automatically handles authentication to Google Cloud and Firebase so tools like gcloud and the Firebase CLI work without any additional setup.</p><h3><b>Enhanced development and debugging for web developers</b></h3><p>Enhance your development workflow with popular debugging tools, now embedded within IDX. With experimental support for the Chrome DevTools Console and <a href="https://developer.chrome.com/docs/lighthouse/overview">Lighthouse</a>, available seamlessly from your preview pane, you can dive deep into debugging and fine-tuning your applications without switching away from your development environment. </p><p>The embedded DevTools window also makes it easy to debug your web application right in your preview window, saving you the headache of moving various tabs around. </p><h2><b>New templates</b></h2><p>With our ever-growing list of project templates, we have been making it easier than ever for you to get up-and-running with building apps using your favorite front-end, back-end, and full-stack frameworks and languages.</p><p>We’re constantly <a href="https://idx.uservoice.com/forums/953956-general?category_id=471061">listening to your feedback</a>, using it to guide product updates like which templates we should add next – check out a few new updates we’re really excited about: </p><ul><li><p><b>Google Maps Platform + Gemini: </b>Use the Gemini API to read the contents of a picture and generate travel ideas based on the location in the image. </p></li></ul><p></p><ul><li><p><b>Google Maps Platform + React:</b> Quickly get started learning how to use the Google Maps Platform API and the IDX integrations panel to build a navigation app. </p></li></ul><p></p><ul><li><p><b>Firebase Data Connect</b> <b><i>[in private preview]:</i></b><i> </i>Use Firebase’s new Cloud SQL-powered service to build an email app, complete with a locally running Postgres instance and rich schema-editing, all right in the browser. To try it out, sign up for <a href="https://developers.google.com/profile/u/me/my-community/dataconnecteap">Firebase Data Connect early access</a>.</p></li></ul><p></p><ul><li><p><b>Firebase Genkit:</b> Add generative AI features to your apps with the new Firebase Genkit framework, providing a consistent API across LLMs to start and scale your Gen AI workflow.</p></li></ul><p>You can access our templates and more from the <a href="https://idx.google.com/">IDX dashboard</a>.</p><h2><b>Open anything in IDX, in seconds</b></h2><p>Users have told us they love how Project IDX lets them start building with a new framework or programming language in seconds, without needing to download and install SDKs, toolchains, etc. You’ll now start seeing “Open in IDX” buttons across select Google developer docs, samples, codelabs, and interactive coding playgrounds. So the next time you want to try something new, you can seamlessly jump into a comprehensive development environment without missing a beat:</p><h2><b>We’re just getting started</b></h2><p>We&#39;re constantly working on adding new capabilities to Project IDX to further streamline and simplify your end-to-end developer workflow. We have lots more in store for you, so be sure to keep an eye out for the latest from Project IDX by engaging with us on the new <a href="https://community.idx.dev">community forums</a> and checking out our <a href="https://idx.dev/blog">blog</a> for product announcements and updates from the team. </p><p>We’re also always working to address your feature requests and bugs you flag for us – so thank you for your continued support and engagement! Please keep the feedback coming by <a href="https://issuetracker.google.com/issues/new?component=1379083&template=1836320">filing bugs</a> and suggesting / voting on <a href="https://idx.uservoice.com/forums/953956-general">feature requests</a>. </p><p>For walkthroughs and more information on the features mentioned above, check out our <a href="https://developers.google.com/idx/guides/introduction">documentation page</a>. If you haven’t already, <a href="https://idx.dev/">visit our website</a> to try out Project IDX and join us on our journey. </p><p>We can’t wait to see what you create with Project IDX! </p><p></p>https://idx.dev/blog/article/build-with-gemini-in-idx/https://idx.dev/blog/article/build-with-gemini-in-idx/🔖 ArticleThu, 15 Feb 2024 05:00:00 GMT<p>A few weeks ago, we <a href="https://idx.dev/blog/article/introducing-android-emulators-ios-simulators-and-other-product-updates-from">announced</a> a series of product updates to Project IDX to help streamline and simplify full-stack, multiplatform software development. This week, we’re excited to share how Project IDX uses <a href="https://blog.google/technology/ai/google-gemini-ai/">Gemini models</a> to provide you with AI features to further speed up and refine your end-to-end developer workflow.</p><p>Project IDX launched with support for AI-powered code completion, an assistive chatbot, and contextual code actions like “add comments&#39;&#39; and “explain this code” to help you write high-quality code faster. Since launch, and thanks to your feedback, we’ve been working hard to add new AI functionality to help boost your productivity even more. </p><h4><b>Work faster with inline AI assistance</b></h4><p>You can now get <a href="https://developers.google.com/idx/guides/idx-ai-inline">inline AI assistance</a> inside any file by pressing Cmd/Ctrl + I. Simply describe the changes you want to make to your code and IDX inline AI assistance will provide real-time error correction, code suggestions, and auto-completion in your code. </p><p>We integrated these AI enhancements directly into Project IDX’s centralized workspace to equip you with the necessary tools and resources for full-stack app development where and when you need them. From setting up your workspace to testing your app, IDX AI assistance helps accelerate and improve your workflow, ensuring that your end-to-end development experience is faster, easier, and higher quality.</p><p>For example, let’s say you want to add an authenticated API endpoint to your server. You can tell IDX AI to write the code necessary to enable secure task management using Firebase Authentication and Cloud Firestore. Given an input prompt, IDX AI assistance can write the code to construct the route, determine which APIs to use to verify the token, and save the data to the database. Instead of writing boilerplate code, you can focus on higher-level design and problem solving.</p><p>Then, let&#39;s say you want to clean up your code a bit to improve its quality, readability, and maintainability. IDX AI assistance can help you quickly and easily refactor your code, so you can get right into optimizing your work without the hassle of manual refactoring. </p><p>And, as you wrap up your project, IDX AI can help you test and debug your code to make sure your application is running smoothly before deployment. Tell IDX AI assistance to write you a unit test for a function to ensure it’s working properly, saving you time and effort as you inspect the quality of your app.</p><h4><b>Easily add AI features with the Gemini API template</b></h4><p>We’re also simplifying the process of building with the Gemini API with <a href="https://developers.google.com/idx/guides/build-gemini-api-app">Project IDX’s new Gemini API template</a>. The Gemini API template uses the Gemini Pro model to embed AI-powered features into your applications without additional configuration on your end, so you can get started working with the Gemini API quickly and easily. There&#39;s even an option to use the Gemini API via the popular <a href="https://www.langchain.com/">LangChain</a> framework to simplify the process of building LLM-powered apps. </p><p>The Gemini API template is multimodal, meaning it can provide context-aware prompt output for a myriad of input modalities including images, text and, of course, code. This can help you add features like conversational interfaces, summarization of user reviews, translation, and automatic image caption creation. </p><p>To demonstrate its functionality, we pre-configured the Gemini API template with ‘Baking with the Gemini API’, a recipe builder application that, using the Gemini model’s multimodal capabilities, can reverse-engineer possible recipes for baked goods from just a picture. </p><p>But this recipe builder is just one example of the Gemini API template in action – with support for different input modalities and context-aware output generation, you can use IDX’s Gemini API template to create a myriad of innovative and impactful applications that deliver AI-enhanced experiences to your users. </p><h3><b>Stay tuned for more AI updates </b></h3><p>These updates are a continuation of our efforts to leverage Google’s AI innovations for Project IDX, so make sure to keep an eye out for more announcements to come, including the expansion of AI in IDX to more than 150 countries/regions in the coming weeks. </p><p>Thank you for your continued support and engagement – please keep the feedback coming by <a href="https://issuetracker.google.com/issues/new?component=1379083&template=1836320">filing bugs</a> and <a href="https://idx.uservoice.com/forums/953956-general">feature requests</a>. For walkthroughs and more information on all the features mentioned above, check out our <a href="https://developers.google.com/idx/guides/introduction">documentation</a>. If you haven’t already, <a href="https://idx.dev/">visit our website</a> to sign up to try Project IDX and join us on our journey. Also, be sure to check out our new <a href="https://idx.dev/blog">Project IDX Blog</a> for the latest product announcements and updates from the team. </p><p>We can’t wait to see what you create with Project IDX! </p>https://idx.dev/blog/post/ios-simulator-video/https://idx.dev/blog/post/ios-simulator-video/📢 PostThu, 01 Feb 2024 05:00:00 GMT<p>Giving you in-browser access to an iOS simulator is definitely one of the bigger features we announced with Project IDX last week! </p><p> This simulator isn&#39;t just for mobile apps, it&#39;s great for web apps too. Check out the video below that shows how easy it is to test a web app across desktop and mobile devices!</p>https://idx.dev/blog/article/nix-on-idx/https://idx.dev/blog/article/nix-on-idx/🔖 ArticleWed, 31 Jan 2024 05:00:00 GMT<p>Over here on <a href="https://idx.dev/">Project IDX</a>, we like to work fast. A big part of that means making sure we’re building the tools we need to increase efficiency and streamline the grunt work that hampers our velocity. As developers coding in a browser-based workspace, one of the pain points we felt keenly was the startup cost of setting up a new workspace with all the dependencies we needed, and the environment configuration we wanted. So, one of our priorities in building IDX was to address that pain point with streamlined workspace configuration — which we did by building Nix into IDX. </p><h2>How does Nix fit into IDX?</h2><p>IDX uses <a href="https://nixos.org/manual/nix/stable/introduction">Nix</a> to define the environment configuration for each workspace. Nix is a purely functional package manager that assigns unique identifiers to each dependency, which ultimately means your environment can contain multiple versions of the same dependency, seamlessly. However, for us, the extensibility, programmatic configuration and effective environment caching we get from Nix provides the biggest payoff.</p><p>Nix is also reproducible and declarative. In the context of IDX, this means you can share your Nix configuration file across workspaces to load the same environment configuration. IDX defines the preview environment and workspace package configurations directly in the code repository with the <code>.idx/dev.nix</code> file. So, if you want to jumpstart your pair programming, you can share your Nix configuration file as part of your code repo and your teammates can dive right in with minimal setup. This is also a cornerstone of how we build templates for a wide variety of frameworks and languages in IDX.</p><p>If you’re familiar with Nix, however, you might notice that our implementation doesn’t follow a strictly traditional Nix model. We built Nix into IDX workspaces as a way to manage packages and configure VM environments attached to them, not as a pure, complete NixOS installation. </p><h2>Why did we choose Nix?</h2><p>We wanted IDX workspaces to work for any developer, anywhere. Part of our philosophy is to avoid proprietary tools, languages, or configuration models wherever we can. Beyond that, we want to contribute to the developer community whenever possible. Nix is widely available and community supported, so it made sense to build it into IDX as our configuration model. </p><p>In addition to the IDX-specific attributes and packages to define the preview environment in your browser-based workspace, you can depend on any <a href="https://search.nixos.org/packages">packages that are available on Nix</a>. We wanted to support a tool that most of our engineers could use, and that could support the tools our developer users want.</p><p>For example, using Nix allowed us to add instant tooling to IDX. When you want to use a tool from the command line, all you have to do is run its command. If it&#39;s not already installed in your environment, the terminal shows a prompt with available Nix packages exposing a command with that name. If you choose one, IDX then grabs the package behind the scenes and executes the command. Easy peasy.</p><h2>How do you use Nix on IDX?</h2><p>When you create a new workspace, a <code>.idx</code> folder with a <code>dev.nix</code> file is automagically added to your root directory. (If it isn’t, you can create it yourself to enable Nix.) You can define packages and your preview environment configuration here, following the <a href="https://nix.dev/tutorials/first-steps/nix-language#attribute-set">Nix attribute set syntax</a>. You can see a list of IDX-specific packages and a detailed sample in the <a href="https://developers.google.com/idx/guides/customize-idx-env#nix_attributes_and_package_libraries">IDX technical documentation</a>.</p><h2>What’s next for Nix on IDX?</h2><p>We firmly believe that the sky’s the limit for flexibility and extensibility in IDX workspaces, and we’re working hard to boost productivity for our developers — and ourselves — as much as possible. We recently also made it easier to edit <code>dev.nix</code> files thanks to syntax highlighting, auto-completion and error detection.</p><p>Beyond that, we’re hoping to add even more templates to make startup and setup even easier and faster for common workspace setups. Because, as we might’ve mentioned once or twice, we here at Project IDX like to work fast.</p>https://idx.dev/blog/post/jan-update-thread/https://idx.dev/blog/post/jan-update-thread/📢 PostTue, 30 Jan 2024 05:00:00 GMT<p>Yesterday we announced new features in Project IDX</p><ul><li><p>📱 Android Emulator &amp; iOS Simulator in browser</p></li><li><p>💻 A template gallery ready for your new projects</p></li><li><p>🐳 Docker in a single line of code</p></li><li><p>🌎 AI in 15 new regions</p></li><li><p>⚡ Instantly run CLI tools</p></li></ul><p>⬇️ Here&#39;s a wrap up of everything you need to know</p>https://idx.dev/blog/article/introducing-android-emulators-ios-simulators-and-other-product-updates-from/https://idx.dev/blog/article/introducing-android-emulators-ios-simulators-and-other-product-updates-from/🔖 ArticleThu, 25 Jan 2024 05:00:00 GMT<p>Six months ago, we <a href="https://idx.dev/blog/article/introducing-project-idx">launched Project IDX</a>, an experimental, cloud-based workspace for full-stack, multiplatform software development. We built Project IDX to simplify and streamline the developer workflow, aiming to reduce the sea of complexities traditionally associated with app development. It certainly seems like we&#39;ve piqued your interest, and we love seeing what IDX has helped you build.</p><p>For example, we recently learned about <a href="https://lingonberry.ai/tanaki">Tanaki</a>, an AI-enhanced content creation app built using Project IDX:</p><p><a href="https://twitter.com/okpasquale">Pasquale D’Silva</a>, one of the developers that built Tanaki, said:</p><blockquote><p><i>Using the IDX shared workspace to build Tanaki has been so fun. It allows our remote team of imagineers to build together in one place. It is a magic collaboration portal!</i></p></blockquote><p>Developers at Google have also been using IDX internally to help speed up development across various projects. One example is the <a href="https://firebase.blog/">Firebase Blog</a>, where the full authoring, development, and deployment of the <a href="https://astro.build/">Astro</a>-powered project is handled using IDX:</p><p>Another interesting project leveraging IDX’s extensibility model is <a href="http://malloydata.dev">Malloy</a>, a new open-source data language available as a VS Code extension that operates against databases like BigQuery:</p><p>Lloyd Tabb, a Distinguished Software Engineer at Google, told us: </p><blockquote><p><i>I use IDX with the </i><a href="http://malloydata.dev"><i>Malloy</i></a><i> project. I often have several different data projects going simultaneously and IDX lets me quickly spin up an instance to solve a problem and it is trivial to configure.</i> </p></blockquote><p>If you want to share what IDX has helped you build, use the <a href="https://twitter.com/hashtag/ProjectIDX?src=hashtag_click">#ProjectIDX</a> tag on X.</p><h2>What’s new in IDX?</h2><p>In addition to seeing how you’re using IDX, a key part of building Project IDX <a href="https://idx.uservoice.com">is your feedback</a>, so we’ve continued to roll out features for you to test. We&#39;re excited to share the latest updates we&#39;ve implemented to expedite and streamline multiplatform app development, so you can deliver with speed, ease and quality.</p><h3><b>Preview your app directly in IDX with our iOS simulator and Android emulator</b></h3><p>We’re bringing the iOS Simulator and Android Emulator to the browser. Whether you’re building a Flutter or web app, Project IDX now allows you to preview your applications without having to leave your workspace. When you use a Flutter or web template, Project IDX intelligently loads the right preview environment for your application — Safari mobile and Chrome for web templates, or Android, iOS, and Chrome for Flutter templates. </p><p>IDX’s web and Android emulators allow you to develop, test, and debug directly from your workspace, consolidating your multi-step, multiplatform process into one place. With iOS simulation you can spot-check your app&#39;s layout and behavior while you work. This feature is still experimental, so be sure to test it out and <a href="https://idx.uservoice.com/forums/953956-general">send us feedback</a>. </p><h3><b>Get started fast with a rich library of project templates</b></h3><p>Four of our top ten <a href="https://idx.uservoice.com/forums/953956-general?status_id=5378749">feature requests</a> have been to support more templates, so we’re pleased to share that we’ve added new templates for Astro, Go, Python/Flask, Qwik, Lit, Preact, Solid.js, and Node.js. Use these templates to jump right into your project so you can spend less time setting up and more time creating. </p><p>Of course you can still import your own repo from GitHub, directly from your local files, or you can choose your own setup using a custom Nix environment. </p><h3><b>Quickly build and customize your IDX workspace with improvements to Nix </b></h3><p>IDX uses Nix to define the environment configuration for each workspace to give you flexibility and extensibility in IDX – even our templates and previews are configured using Nix to ensure they’re working correctly inside IDX. We’re continuously working on Nix improvements to help boost your productivity, so now you can: </p><ul><li><p>Customize IDX starter templates easily by leveraging Nix extensibility.</p></li><li><p>Reduce the likelihood of errors and write code more efficiently with Nix file editing, including support for syntax highlighting, error detection, and suggested code completions.</p></li><li><p>Recover from broken configurations quickly and avoid unnecessary rebuild attempts with major improvements to our environment customization workflow, including seamless environment rebuilds and troubleshooting.</p></li></ul><h3><b>Easily build, test, and deploy apps with additional new IDX features and resources</b></h3><ul><li><p>Auto-detect network ports needed for applications or services and adjust the firewall settings to permit ingress and egress without any additional configuration on your end.</p></li><li><p>Instantly run command-line tools, scripts, and utilities directly within your workspace without the need to install them locally on your machine. </p></li><li><p>Simplify the process of working with Docker containers and images directly from the development environment by enabling Docker in your dev.nix file.</p></li></ul><h3><b>AI launched in 15 new regions</b></h3><p>We’ve launched our AI capabilities in the following 15 countries: India, Australia, Israel, Brazil, Mexico, Colombia, Argentina, Peru, Chile, Singapore, Bangladesh, Pakistan, Canada, Japan, and South Korea. More countries will be enabled with AI access soon – indicate your interest for AI expansion in this <a href="https://idx.uservoice.com/forums/953956-general/suggestions/46838062-expand-to-europe-and-other-regions">feature tracking post</a> and stay tuned for more AI updates.</p><h2>Improving together </h2><p>We&#39;re constantly working on adding new capabilities to help you do higher quality work, more efficiently, with less friction. We’ve addressed dozens of your feature requests and fixed a multitude of bugs you flagged for us, so thank you for your continued support and engagement – please keep the feedback coming by <a href="https://issuetracker.google.com/issues/new?component=1379083&template=1836320">filing bugs</a> and <a href="https://idx.uservoice.com/forums/953956-general">feature requests</a>.</p><p>For walkthroughs and more information on all the features mentioned above, check out our <a href="https://developers.google.com/idx/guides/introduction">documentation page</a>. If you haven’t already, visit our website to <a href="https://idx.dev/">sign up to try Project IDX</a> and join us on our journey. Also, be sure to check out our new <a href="https://idx.dev/blog">Project IDX Blog</a> for the latest product announcements and updates from the team. </p><p>We can’t wait to see what you create with Project IDX! </p><p></p>https://idx.dev/blog/article/how-we-built-project-idx-a-high-level-overview/https://idx.dev/blog/article/how-we-built-project-idx-a-high-level-overview/🔖 ArticleTue, 09 Jan 2024 05:00:00 GMT<p>Project IDX is a browser-based development experience that we designed to make the end-to-end multi-platform app development workflow faster and more frictionless. We&#39;re developers building a tool for developers, and we want to share a high-level overview of how we&#39;ve built IDX.</p><h2>Goals: What we strive for</h2><p>Before we get into the technical details powering IDX, let&#39;s take a look at some of the lofty goals we have for IDX.</p><h3><b>Familiar and secure environment</b></h3><p>As soon as users visit IDX, we want to put them in a familiar and secure environment. To that end, IDX was built on <a href="https://github.com/microsoft/vscode">Code OSS</a>. Code OSS doesn&#39;t just feel familiar to developers, it also has a great selection of extensions that you can bring in through <a href="https://open-vsx.org/">Open VSX</a>. We enhanced Code OSS with our own customization (themes, tools, and plugins) to bring several unique features to IDX on top of basic Code OSS.</p><p>Developers can be pretty particular about modifying their development environment (we are too!) and we wanted to support that. We have a strong affinity for the tools we&#39;ve gradually mastered over the years to boost our productivity and we wouldn&#39;t want to give them up. We knew when we decided to build a new tool that asking developers to embrace a completely unfamiliar environment would be an unrealistic expectation. Therefore, our aim was to incorporate Code OSS, ensuring that developers step into a familiar environment when they transition to IDX.</p><h3><b>Beyond prototypes</b></h3><p>We want developers to use IDX for more than just prototypes. We didn&#39;t want to just put out a toy environment that only works for proof-of-concept apps. Every IDX workspace comes with a full Debian-based VM and provides full access to the terminal so you can install your favorite tools. VMs automatically hibernate and activate as needed. </p><p>IDX provides the convenience of using a VM without any of the headaches that come with managing infrastructure, security updates, billing, etc.</p><h3><b>Batteries included</b></h3><p>Because IDX comes with a full Debian VM, we&#39;re able to preset the environment just right even before you write your first line of code. </p><p>Take Flutter, for example: Our research shows that developers spend an average of 6 hours setting up their dev environment before they write the first lines of code. With IDX, you can get going in a Flutter environment with just one click. When you select a Flutter template, the workspace already has the Android SDK and Flutter tool chain set up. The <a href="https://developer.android.com/tools/adb">Android Debug Bridge</a> (<code>adb</code>) connections are wired up. Flutter &quot;devtools&quot; are connected and work out-of-the-box. Everything is also connected back to your workspace so changes hot reload instantly and step-through debugging is set up without any configuration required. </p><p>Select different templates or create your own to get your environment to work the way you want it, with everything you need to get up and running quickly. You can always customize your workspace environment to your taste (it&#39;s based on Code-OSS after all), but we aspire to be close to your perfect setup for the job at hand at the click of a button.</p><h3><b>Integrated previews</b></h3><p>Being web developers ourselves, we&#39;re all used to setting up our development environment by:</p><ol><li><p>cd-ing into our folder</p></li><li><p>Running the server (<code>npm run dev</code>) </p></li><li><p>Opening up the preview. </p></li></ol><p></p><p>With IDX, we wanted to cut this down to even fewer steps, leading us to a preview within the workspace. Rather than switching different tabs or windows, we wanted to provide a way to instantly start coding in your workspace and see the results. An integrated preview also provides benefits during collaboration and opportunities to improve the debugging experience.</p><h3><b>Collaboration</b></h3><p>Software development is akin to a team sport, whether you&#39;re part of a larger team or a solo developer collaborating with a client. The availability of a seamless collaboration method is advantageous for everyone. If our tools like documents and spreadsheets can facilitate collaboration, why should our coding workspaces lag behind? In the creation of IDX, our aim was to prioritize and simplify collaboration and sharing, making it effortless for users to engage in activities like pair-programming and sharing code previews.</p><h3><b>AI-enabled</b></h3><p>We are constantly exploring how Google&#39;s AI innovations can help you write code faster. Project IDX has smart code completion, an assistive chatbot, and contextual code actions like &quot;add comments&quot; and &quot;explain this code.&quot; In collaboration with the models that power studio bot and Duet, we are working on making IDX AI even better in being a constant companion that helps you as you write code.</p><h3><b>Meet the community where they are</b></h3><p>We want to meet our developer community where they are. Because of that, IDX doesn&#39;t rely on users knowing any Google-proprietary tech (eg., Bazel or Boq). We use the tools that are popular with developers today so we can boost productivity in those tools for all of us.</p><h2>Technology: Behind the scenes</h2><h3><b>Google Cloud</b></h3><p>IDX workspaces are built on top of <a href="https://cloud.google.com/workstations">Google&#39;s Cloud Workstations</a> offering. Cloud workstations enable us to provision and scale VMs. We have a <a href="https://cloud.google.com/workstations/docs/create-configuration">custom workstation configuration</a> that deploys our specially provisioned docker container when a new VM is spun up. </p><p>Cloud Workstations formed the perfect infrastructure layer for our production because:</p><ul><li><p>It allows us to spin up VMs on demand.</p></li><li><p>It&#39;s fast, secure, and scalable.</p></li><li><p>It allows us to configure a base environment specially designed for IDX.</p></li></ul><h3><b>AI models</b></h3><p>AI features of IDX are powered by <a href="https://cloud.google.com/vertex-ai/docs/generative-ai/code/code-models-overview">codey</a> and Gemini. The same models also power <a href="https://developer.android.com/studio/preview/studio-bot">Studio Bot</a> and <a href="https://cloud.google.com/blog/products/application-modernization/introducing-duet-ai-for-google-cloud">Duet</a>. Different models power different AI features. For example a 12b model powers our code completion while a 24b model powers streaming conversation and code generation features. As more powerful models are being developed within Google, we&#39;ll incorporate them to make IDX AI even better at helping you work.</p><p>To learn more about our AI features, read our <a href="https://developers.google.com/idx/guides/code-with-idx-ai">IDX AI product documentation</a>.</p><h3><b>Managing Previews</b></h3><p>In line with the batteries-included approach, we want to get you productive within seconds of creating an IDX workspace. An IDX workspace doesn&#39;t just start up with your code, but also with the preview already running (when applicable).  A preview server running on your VM manages your previews. In most cases, this allows you to immediately start making changes to your code and see the change &quot;hot reload&quot; in the preview as soon as your workspace is created. </p><p>The preview server exposes controls that allow you to hot reload the previews as you change the code and execute commands like &quot;Hard Restart&quot; that would stop your preview and fully restart it. Learn more about <a href="https://developers.google.com/idx/guides/preview-apps">previews in IDX in our documentation</a>.</p><h3><b>Environment Setup</b></h3><p>As mentioned earlier, IDX workspaces are built on top of Google Cloud Workstations which allow us to spin up our custom <a href="https://www.docker.com/">Docker</a> containers. Within these containers, we package various system software such as tools for running services, scheduling jobs (such as <a href="http://supervisord.org/">Supervisor</a>), and other custom written jobs such as preview server.</p><p>To keep our Docker containers small and easier to maintain, we keep separate containers for web and mobile stacks (Flutter). When you create a new workspace, Google Cloud Workstation brings up our container and executes the entrypoint script responsible for setting up everything you need to start coding.</p><h3><b>Service Account-based authentication</b></h3><p>Given that workspaces are shared, we want a way to securely connect your VM with other services. This is done through <a href="https://cloud.google.com/iam/docs/service-account-overview">Service Accounts</a>. Every workspace is set up with a unique service account that only has enough permissions to communicate with authorized services from that VM. A custom <a href="https://cloud.google.com/compute/docs/metadata/overview">metadata server</a> running on the VM securely manages this access. Access to the service account is only provisioned based on explicit requests from the user. </p><h3><b>Nix</b></h3><p>In our pursuit of offering versatile and highly customizable workspaces for diverse development needs, we have made it one of our goals to support various popular programming stacks like Node.js, Python, Rust, and Go. To achieve this, we extensively explored different options that would enable us to deliver a user-friendly and flexible environment without imposing excessive maintenance burdens on our team. After careful consideration, we concluded that adopting Nix as our solution would best align with our objectives. </p><p><a href="https://nixos.org/">Nix</a> is a purely functional package manager and build system that provides reproducibility, atomic upgrades and rollbacks, isolation, sandboxing, and package versioning and conflict resolution. By ensuring explicit and isolated dependencies, Nix allows for consistent and predictable builds across different systems and over time. </p><p>IDX uses Nix as a way to provide this flexibility to developers while reducing the complexity and the learning curve that comes with learning a new configuration language. Learn more about <a href="https://developers.google.com/idx/guides/customize-idx-env#nix+idx">Nix + IDX</a>.</p><h2>High-level architecture</h2><h2>Further details</h2><p>This blog post only covers the very high-level details of IDX. In further blog posts, we&#39;ll discuss each area in detail, the technical details and challenges in developing those features. </p><h2>Where are we going?</h2><h3><b>Sharing and collaboration</b></h3><p>Although we aspire to achieve the level of seamless sharing and collaboration found in Google Docs, we are aware that we have a significant journey ahead of us. Our objective is to create a platform that enables developers to effortlessly collaborate with both technical and non-technical team members, facilitating activities such as preview sharing and pair programming. While real-time editing and commenting features are currently in our roadmap, we acknowledge that there is work to be done to fulfill our goal of providing a comprehensive and user-friendly collaborative environment.</p><h3><b>More AI features</b></h3><p>It is clear to us that we are only on day-1 for AI when it comes to helping developers. Currently, Project IDX has smart code completion, an assistive chatbot, and contextual code actions like &quot;add comments&quot; and &quot;explain this code.&quot;  We are exploring several ways to use the power of generative AI to help you code including (but not limited to) the following areas:</p><ul><li><p>Write and edit code with AI.</p></li><li><p>Let AI understand your code base better and suggest changes.</p></li><li><p>Let AI understand docs specific to your code base and answer questions based on that.</p></li><li><p>Let AI automatically debug and fix issues with your code.</p></li><li><p>Let AI pair program with you helping your write better/safer code and tests.</p></li></ul><h3><b>More customization</b></h3><p>As shared earlier, one of our key design goals was to enable developers to build and be productive on all kinds of stacks on Project IDX. All of this will be powered by Nix, so developers will have the ability to bring their stack of choice and get productive. </p><h2>Get Involved</h2><p>We are just at the beginning of this journey to improve the end-to-end development workflow, and we can only make good on this vision with your help. Get involved by <a href="http://idx.dev">joining our waitlist</a> and <a href="http://idx.uservoice.com">requesting features</a>! Let&#39;s build this together!</p>https://idx.dev/blog/post/new-gemini-template/https://idx.dev/blog/post/new-gemini-template/📢 PostWed, 13 Dec 2023 05:00:00 GMT<p>💜 Rolling out soon and already available for some in Project IDX: a new multimodal Gemini template (<code>gemini-pro-vision</code>) in JS and Python!<i> (Attached video skips a couple steps, e.g. getting your API key from Google AI Studio).</i></p><p>Want to try out Project IDX? <a href="https://idx.dev/#waitlist">Join the waitlist</a></p>https://idx.dev/blog/post/generate-ts-types/https://idx.dev/blog/post/generate-ts-types/📢 PostThu, 30 Nov 2023 06:00:00 GMT<p>🔮 <b>IDX AI + TypeScript tip!</b> </p><p>Take a nested JSON object and prompt for the types. You&#39;ll get the parent type with all the children types specified as well.</p><p></p>https://idx.dev/blog/article/welcome-to-the-idx-blog/https://idx.dev/blog/article/welcome-to-the-idx-blog/🔖 ArticleThu, 30 Nov 2023 05:00:00 GMT<p>Today, we are so excited to ship our official Project IDX blog out to the world. We&#39;re not just excited because we think that every good developer tool needs a blog. We&#39;re excited for what&#39;s in store.</p><h2>All IDX updates. In one place.</h2><p>The IDX Blog is going to be more than a spot for the occasional blog or product update. We want to keep you informed on progress we’re making, even when features aren’t fully baked or even ready for release, so we’ll post here often. When we <a href="./introducing-project-idx">first launched Project IDX back in August</a>, it was an early look; the blog will help us continue to show you where we&#39;re headed. </p><p>We built this blog to support a variety of different content forms: from long-form posts to social-style posts and short videos so you can get a quick peek into a feature in development, a video overview of a new use case, or a technical deep dive on a more advanced concept. </p><p>Often, you&#39;ll find this content spread out across different platforms. Blogs on the blog. Videos on YouTube. Social posts on social media sites. We created this blog to be the place for all content and updates with <a href="../rss.xml">one feed to subscribe to it all</a>, because RSS will never go out of style.</p><p></p><h2>Long-form posts</h2><p>On the IDX team, we are passionate about knowledge sharing. We have an amazing weekly &quot;Show and Tell&quot; meeting where we demo new concepts and the status of upcoming features. It becomes a place to learn more about the engineering behind the scenes as well. We want to take this internal passion and share it externally with you.</p><p>We&#39;ll be posting Engineering blogs that go behind the scenes about how specific IDX features work and even some of the technology that powers it as well.</p><h2>Tips, tricks, and more</h2><p>Sometimes all you need is 244 characters. IDX is young but already has so many features that we want to share with you. Did you know that IDX AI can write unit tests for you? Or that you can build a custom environment to develop on Go, Rust, PHP, or Python?</p><p>We&#39;re going to be posting new content ranging from technical deep dives to byte-sized posts about all the things you can do with IDX and other awesome tools like Angular, Flutter, Go, Firebase, and much more. Again, If you want to stay up to date check out our RSS feed.</p><h2>Our blog stack</h2><p>When a developer finally ships their blog, it&#39;s almost a law that the very first post needs to be about how the blog was made.</p><h2>Astro with View Transitions</h2><p>This blog is built on our existing <a href="https://astro.build">Astro</a> site and backed by a headless CMS. Astro makes building content-based sites a breeze. We wanted to take advantage of Astro&#39;s View Transition API features to create smooth transitions from page to page. Huge shoutout to the Astro team for making such a great tool.</p><h2>Deployed on Firebase</h2><p>Even though the transition feels like a Single Page Application (SPA) the entire site is a statically generated Multi-Page Application (MPA) deployed on Firebase Hosting using the Web Frameworks integration.</p><h2>Check back for more content and updates</h2><p>This is the first post of many updates to come. Next week we&#39;re releasing a blog about the underlying architecture of Project IDX itself. Make sure to subscribe to the RSS feed and reach out to us on social media if you want us to post about any specific topics. </p><p>We built Project IDX because we want to work with you to make multiplatform app development better, so please give the feedback and suggestions coming either through the <a href="https://idx.uservoice.com">Feature Requests portal</a> or by <a href="https://b.corp.google.com/issues/new?component=1379083&template=1836320">filing bugs</a>. We can&#39;t wait to see what you&#39;ll build with Project IDX.</p>https://idx.dev/blog/article/full-stack-development-in-project-idx/https://idx.dev/blog/article/full-stack-development-in-project-idx/🔖 ArticleThu, 16 Nov 2023 05:00:00 GMT<p>We launched Project IDX, our new browser-based development experience, to simplify the chaos of building full stack apps and streamline the development process from (back)end to (front)end. </p><p>In our experience, most web applications are built with at-least two different layers: a frontend (UI) layer and a backend layer. When you think about the kind of app you’d build in a browser-based developer workspace, you might not immediately jump to full-stack apps with robust, fully functional backends. Developing a backend in a web-based environment can get clunky and costly very quickly. Between different authentication setups for development and production environments, secure communication between backend and frontend, and the complexity of setting up a fully self-contained (hermetic) testing environment, costs and inconveniences can add up. </p><p>We know a lot of you are excited to try IDX yourselves, but in the meantime, we wanted to share this post about full-stack development in Project IDX. We’ll untangle some of the complex situations you might hit as a developer building both your frontend and backend layers in a web-based workspace — developer authentication, frontend-backend communication, and hermetic testing — and how we’ve tried to make it all just a little bit easier. And of course we want to hear from you about what else we should build that would make full-stack development easier for you.</p><h2>Streamlined app previews</h2><p>First and foremost, we&#39;ve streamlined the process of enabling your applications frontend communication with its backend services in the VM, making it effortless to preview your full-stack application in the browser.</p><p>IDX workspaces are built on Google Cloud Workstations and securely access connected services through <a href="https://cloud.google.com/iam/docs/service-account-overview">Service Accounts</a>. Each workspace’s unique service account supports seamless, authenticated preview environments for your applications frontend. So, when you use Project IDX, application previews are built directly into your workspace, and you don’t actually have to set up a different authentication path to preview your UI. Currently, IDX only supports web previews, but Android and iOS application previews are coming soon to IDX workspaces near you.</p><p>Additionally, if your setup necessitates communication with the backend API under development in IDX from outside the browser preview, we&#39;ve established a few mechanisms to temporarily provide access to the ports hosting these API backends.</p><h2>Simple front-to-backend communication</h2><p>If you’re using a framework that serves both the backend and frontend layers from the same port, you can pass the $PORT flag to use a custom PORT environment variable in your workspace configuration file (powered by Nix and stored directly in your workspace). This is part of the basic setup flow in Project IDX, so you don’t have to do anything particularly special (outside of setting the variable in your config file). Here’s an example Nix-based configuration file:</p><p><span>type: embedded-entry-inline id: 6iey3INRLrC9ZQc7TPmnKy</span> </p><p>However, if your backend server is running on a different port from your UI server, you’ll need to implement a different strategy. One method is to have the frontend proxy the backend, as you would with <a href="https://vitejs.dev/config/server-options.html">Vite&#39;s custom server options</a>. </p><p>Another way to establish communication between ports is to set up your code so the javascript running on your UI can communicate with the backend server using AJAX requests.</p><p>Let’s start with some sample code that includes both a backend and a frontend. Here’s a backend server written in Express.js:</p><p><span>type: embedded-entry-inline id: nAf2R7kYSr65cwYE9PqDi</span></p><p>The bolded line in the sample — <code>app.use(cors());</code> — sets up the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS">CORS headers</a>. Set up might be different based on the language/framework of your choice, but your backend needs to return these headers whether you’re developing locally or on IDX. </p><p>When you run the server in the IDX terminal, the backend ports show up in the IDX panel. And every port that your server runs on is automatically mapped to a URL you can call.</p><p>Now, let&#39;s write some client code to make an AJAX call to this server. <span>type: embedded-entry-inline id: 1TFwWPKbrrNzaBoOtGecXK</span></p><p>We’ve also made sure that the <code>fetch()</code> call includes credentials. IDX urls are authenticated, so we need to include credentials. This way, the AJAX call includes the cookies to authenticate against our servers. </p><p>If you’re using <code>XMLHttpRequest</code> instead of fetch, you can set the “<code>withCredentials</code>” property, like this:</p><p><span>type: embedded-entry-inline id: 3xkFSTeYRdTtkp5NCAa7J4</span></p><p>Your code might differ from our samples based on the client library you use to make the AJAX calls. If it does, check the documentation for your specific client library on how to make a credentialed request. Just be sure to make a credentialed request. </p><h2>Server-side testing without a login</h2><p>In some cases you might want to access your application on Project IDX without logging into your Google account — or from an environment where you <i>can’t </i>log into your Google account. For example, if you want to access an API you&#39;re developing in IDX using either Postman or cURL from your personal laptops&#39;s command line. You can do this by using a temporary access token generated by Project IDX.</p><p>Once you have a server running in Project IDX, you can bring up the command menu to generate an access token. This access token is a short-lived token that temporarily allows you to access your workstation. </p><p>It’s extremely important to note that this access token provides access to your entire IDX workspace, including but not limited to your application in preview, so you shouldn’t share it with just anyone. We recommend that you only use it for testing. </p><p>When you run this command from IDX, your access token shows up in a dialog window. Copy the access token and use it to make a cURL request to a service running on your workstation, like this one:</p><p><span>type: embedded-entry-inline id: 4473NZtcGuV9pv28Pbj0pZ</span></p><p>And now you can run tests from an authenticated server environment! </p><h2>Web-based, fully hermetic testing</h2><p>As we’ve highlighted, you can test your application’s frontend and backend in a fully self-contained, authenticated, secure environment using IDX. You can <i>also</i> run local emulators in your web-based development environment to test your application’s backend services. </p><p>For example, you can run the <a href="https://firebase.google.com/docs/emulator-suite">Firebase Local Emulator Suite</a> directly from your IDX workspace. To <a href="https://firebase.google.com/docs/emulator-suite/install_and_configure">install the emulator suite</a>, you’d run firebase init emulators from the IDX <i>Terminal</i> tab and follow the steps to configure which emulators you want on what ports.</p><p>Once you’ve installed them, you can configure and use them the same way you would in a local development environment from the IDX terminal. </p><p>As you can see, Project IDX can meet any and all of your development needs — from frontend to backend and every emulator in between.</p>https://idx.dev/blog/post/nix-in-the-wild-project-idx/https://idx.dev/blog/post/nix-in-the-wild-project-idx/📢 PostThu, 02 Nov 2023 05:00:00 GMT<p>We use <a href="https://nixos.org/">Nix</a> at Project IDX to manage development environments. Nix is an open source environment manager that is fast, scalable, and deterministic. With Nix, there&#39;s no more &quot;it works on my machine&quot; problems. Nix may not be a tool you&#39;ve heard of before, but it&#39;s been invaluable for us. In this interview I go into details about how we Nix to power IDX development environments, ensuring that everyone on the team is using the same tools and versions.</p>https://idx.dev/blog/post/generate-typescript-types-unit-tests-and-jsdoc-comments-with-project-idx-ai/https://idx.dev/blog/post/generate-typescript-types-unit-tests-and-jsdoc-comments-with-project-idx-ai/📢 PostThu, 19 Oct 2023 05:00:00 GMT<p>Generative AI is full of time savers. The AI Chat in Project IDX has a contextual understanding of your codebase and can help you generate TypeScript types, write unit tests, and documentation based comments like JSDoc.</p>https://idx.dev/blog/post/project-idx-on-syntax-fm/https://idx.dev/blog/post/project-idx-on-syntax-fm/📢 PostFri, 06 Oct 2023 13:00:00 GMT<p>What&#39;s the experience of Project IDX? I had an incredible chat on <a href="https://syntax.fm/show/676/google-idx-vs-code-in-the-browser-with-david-east">Syntax.fm</a> discussing the details of IDX. We go over Flutter apps on IDX, how we use nix for custom environments, latency in cloud environments, project sharing, extensions, and a whole lot more.</p>https://idx.dev/blog/post/project-idx-cloud-based-development-future-of-coding-with-roman-nurik/https://idx.dev/blog/post/project-idx-cloud-based-development-future-of-coding-with-roman-nurik/📢 PostFri, 15 Sep 2023 13:00:00 GMT<p>Will your future development environment be entirely based in the cloud? I had a chat with <a href="https://twitter.com/codepo8">Chris Heilmann</a> of <a href="https://www.wearedevelopers.com/">WeAreDevelopers</a> about what the future of coding looks like and the shift from local environments to cloud based ones.</p>https://idx.dev/blog/post/project-idx-full-stack-application-development-with-generative-ai/https://idx.dev/blog/post/project-idx-full-stack-application-development-with-generative-ai/📢 PostWed, 23 Aug 2023 13:00:00 GMT<p>Project IDX is still in early development but we wanted to share a preview of it&#39;s current capabilities. We just posted a video that covers project creation, terminal commands, deployment, environment customization, and generative AI for coding tasks.</p>https://idx.dev/blog/article/introducing-project-idx/https://idx.dev/blog/article/introducing-project-idx/🔖 ArticleTue, 08 Aug 2023 13:00:00 GMT<p>These days, getting an app from zero to production–especially one that works well across mobile, web, and desktop platforms–can feel like building a Rube Goldberg machine. You’ve got to navigate an endless sea of complexity, duct-taping together a tech stack that&#39;ll help you bootstrap, compile, test, deploy, and monitor your apps.</p><p>While Google’s been working on making multiplatform app development easier for years—from <a href="https://angular.dev">Angular</a> and <a href="https://flutter.dev/">Flutter</a> to <a href="https://cloud.google.com/">Google Cloud</a> and <a href="https://firebase.google.com">Firebase</a>—it feels like <b>there’s even more we can do to make the entire multiplatform app development workflow faster and more frictionless.</b> So several months ago, a few of us got together and started experimenting. And today, we’re excited to share a very early look at our experiment, which we’re calling <a href="idx.dev">Project IDX</a>. </p><p>Project IDX is a browser-based development experience built on Google Cloud Workstations and powered by <a href="https://cloud.google.com/vertex-ai/docs/generative-ai/code/code-models-overview">Codey</a>, a foundational AI model trained on code and built on PaLM 2. It’s designed to make it easier to build, manage and deploy full-stack web and multiplatform applications, with popular frameworks and languages. Project IDX is also built on Code OSS, so it should feel familiar no matter what you’re building.</p><p>A big part of why we’re sharing Project IDX today is we’d love to hear from the broader developer community on what could help you work even faster. In the meantime, here’s a preview of what’s possible today with Project IDX.</p><h2><b>Get to work quickly, from anywhere</b></h2><p>At the heart of Project IDX is our conviction that you should be able to develop from anywhere, on any device, with the full fidelity of local development. Every Project IDX workspace has the full capabilities of a Linux-based VM, paired with the universal access that comes with being hosted in the cloud, in a datacenter near you.</p><h2><b>Import your existing app, or start something new</b></h2><p>Project IDX lets you import your existing projects from GitHub so you can pick up right where you left off. You can also create new projects, with pre-baked templates for popular frameworks, including Angular, Flutter, Next.js, React, Svelte, Vue, and languages such as JavaScript, Dart, and (coming soon) Python, Go, and more. We’re also actively working to add first-class support for more project types and frameworks. If you have any suggestions, we’d love your feedback on which stacks to support.</p><h2><b>Preview your app across platforms</b></h2><p>Creating successful apps today means optimizing your app design and behavior across platforms, and previewing your apps just as your users would see them. To make this easier, Project IDX includes a built-in web preview and, coming soon, a fully-configured Android emulator and an embedded iOS simulator, all available directly in the browser.</p><h2><b>Help from AI</b></h2><p>We spend a lot of time writing code, and recent advances in AI have created big opportunities to make that time more productive. With Project IDX, we’re exploring how Google’s innovations in AI—including the <a href="https://cloud.google.com/vertex-ai/docs/generative-ai/code/code-models-overview">Codey</a> and PaLM 2 models powering <a href="https://developer.android.com/studio/preview/studio-bot">Studio Bot</a> in Android Studio, <a href="https://cloud.google.com/blog/products/application-modernization/introducing-duet-ai-for-google-cloud">Duet in Google Cloud</a> and more—can help you not only write code faster, but also write higher-quality code. Currently, Project IDX has smart code completion, an assistive chatbot, and contextual code actions like “add comments” and “explain this code”. Our AI capabilities are in their very early days, and we’re working on making IDX AI even better at helping you as you work</p><h2><b>Publish to the web with Firebase Hosting</b></h2><p>Finally, a common pain point in getting your app into production is deploying it. We’ve made this easier by integrating <a href="https://firebase.google.com/products/hosting">Firebase Hosting</a>, making it possible to deploy a shareable preview of your web app, or deploy to production with a fast, secure, and global hosting platform, with just a few clicks. And because Firebase Hosting supports dynamic backends, powered by Cloud Functions, this works great for full-stack frameworks like Next.js.</p><h2><b>Let’s build Project IDX together</b></h2><p>We shared how we think Project IDX can start to make multiplatform app development better, along with some strides we’ve started making in these areas. But we are just at the beginning of this journey to improve the end-to-end development workflow, and we can only make good on this vision with your help. So with that, we’d like to share an early version of Project IDX with you—rough edges and all—to iterate on what’s working well and what could be even better for your app team’s workflow. To join us on our journey, <a href="https://idx.dev">visit our website</a> to sign up and be one of the first to try Project IDX.</p><p>As for what’s next, we’re continuously working on adding new capabilities and addressing your feedback. We’re already working on new collaboration features, as we know how important those are in this hybrid work world, as well as deeper framework integrations and more personalized/contextual AI. Please share your feature requests with us as well!</p>