<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: MarsCode</title>
    <description>The latest articles on Forem by MarsCode (@dancemove_marscode).</description>
    <link>https://forem.com/dancemove_marscode</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1321032%2F5e6c4c02-078e-478a-b5e2-f9d17653e918.jpg</url>
      <title>Forem: MarsCode</title>
      <link>https://forem.com/dancemove_marscode</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/dancemove_marscode"/>
    <language>en</language>
    <item>
      <title>MarsCode Agent: Powered by LLM for Automated Bug Fixing</title>
      <dc:creator>MarsCode</dc:creator>
      <pubDate>Thu, 01 Aug 2024 07:21:50 +0000</pubDate>
      <link>https://forem.com/marscode/marscode-agent-powered-by-llm-for-automated-bug-fixing-2j7a</link>
      <guid>https://forem.com/marscode/marscode-agent-powered-by-llm-for-automated-bug-fixing-2j7a</guid>
      <description>&lt;h2&gt;
  
  
  Backgroud
&lt;/h2&gt;

&lt;p&gt;The automation of software engineering tasks has long been a goal for researchers and practitioners in the field. Recent progress in large language models (LLMs) like GPT-4o, Claude-3.5, and Doubao Pro has brought us closer to this vision, enabling significant advancements in code generation, program repair, and other software development activities. In this trend, LLM-based agents, intelligent entities capable of perceiving the external environment, operating tools, and making autonomous decisions, have garnered increasing attention from both the research and industry community.&lt;/p&gt;

&lt;p&gt;The automation of software engineering tasks has long been a goal for researchers and practitioners in the field. Developers often encounter various issues such as:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Test case failures, which may include errors or exception stacks due to logic errors or failed test assertions;&lt;/li&gt;
&lt;li&gt;Code output not meeting expectations, with no explicit error messages but clear expected results;&lt;/li&gt;
&lt;li&gt;The need to extend existing functionality or add new features, with clear development requirements and expected outcomes, but uncertainty about how and where to implement them;&lt;/li&gt;
&lt;li&gt;Simple defect fixes, with a rough idea of the solution but requiring assistance due to unfamiliar language features.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In this report, we introduce &lt;a href="//marscode.com/?utm_source=devto&amp;amp;utm_campaign=81"&gt;MarsCode&lt;/a&gt; Agent, a novel framework designed to automate solve above issues using LLMs. By building an agent framework and providing interactive interfaces and tools for code retrieval, debugging, and editing. MarsCode Agent has made it possible for agents to take over some software engineering tasks.&lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/BmgCvmlK10s"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;Core contributions of MarsCode Agent include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;MarsCode Agent has developed a multi-agent collaboration framework that allocates static or dynamic solving pipelines based on the nature of the problem to be addressed, thereby flexibly adapting to various bug fixing challenges.&lt;/li&gt;
&lt;li&gt;MarsCode Agent MarsCode Agent combines code knowledge graphs and language server protocols to provide agents with comprehensive capabilities for code entity retrieval, relationship retrieval, and definition-and-reference navigation, enabling agents to browse and analyze code similarly to human developers.&lt;/li&gt;
&lt;li&gt;For code editing, MarsCode Agent uses conflict-based code edit descriptions and static syntax checking to accurately generate well-formatted code patches.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Multi-Agent Collaborative Framework
&lt;/h2&gt;

&lt;p&gt;The problems and tasks in the field of Research &amp;amp; Development are very diverse, which makes it difficult to solve all problems with a fixed approach. For instance, some simple defect fixes or feature extensions can be completed by reviewing existing relevant code, while deeper exception stacks or complex logic errors may require dynamic code execution and variable tracking to uncover and fix the defects. Therefore, we have adopted a multi-agent collaboration framework to adapt to different development scenarios.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7zgv6td3r8qet6onhb5g.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7zgv6td3r8qet6onhb5g.jpeg" alt="Multi-agent Collaborative Framework"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In dynamic debugging repair scenarios, the collaboration workflow of the agents is as follows:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;The Reproducer creates a reproduction script matching the issue description.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The reproduction script is provided to the Tester for verification, which then supplies the resulting exception stack and other output information to the Programmer for repair.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;After the programmer completes the repair, a testing request is made to the Tester.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The Tester verifies the repair using the reproduction script and determines if the issue is resolved:&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;If resolved, the diff tool is used to capture the code changes as the repair solution, ending the dynamic debugging.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;If unresolved, the exception stack and other output information from the reproduction process are returned to the Programmer.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;5 . The Programmer may continue modifications based on the Tester’s error messages or reset the repository and start anew until the Tester confirms the issue is resolved.&lt;/p&gt;

&lt;p&gt;During this process, we set up a &lt;strong&gt;runtime sandbox environment&lt;/strong&gt; in a Docker container to achieve dynamic debugging, issue reproduction, and validation.&lt;/p&gt;

&lt;p&gt;In static repair scenarios, the agent collaboration process is simpler. The Editor attempts to fix the issue directly based on the code snippets retrieved by the Searcher. Given the randomness in LLM code modifications, we draw on the approach similar to Agentless, generating multiple candidate repair solutions in a single LLM request and normalizing the code using AST. Finally, the model merges and votes on all candidate solutions, selecting the highest-voted one as the final repair solution.&lt;/p&gt;

&lt;p&gt;Since we have not yet completed the development of the sandbox environment on the IDE and cannot run programs dynamically and safely, MarsCode IDE currently only has static fix capabilities.&lt;/p&gt;

&lt;h2&gt;
  
  
  Code Indexing
&lt;/h2&gt;

&lt;p&gt;We have developed several code indexing tools with multilingual support, to satisfy different code search requirements for different software development tasks.&lt;/p&gt;

&lt;p&gt;Code knowledge graph is the main way for MarsCode Agent to perform code retrieval. A code knowledge graph represents code elements, their attributes, and the relationships between these elements in a graph structure, helping agents better understand and manage large codebases.In this graph, vertices represent code entities (such as functions, variables, classes, etc.), and edges represent relationships between these entities (such as function calls, variable references, class inheritance, etc.). This structured representation provides richer information about the codebase.&lt;/p&gt;

&lt;p&gt;MarsCode Agent analyzes and organizes the code and documentation in a repository to generate a multi-directional graph using program analysis techniques. This graph includes semantic nodes, such as variables, functions, classes, and files, and edges representing file structure relationships, function call relationships, and symbol index relationships. This results in a code knowledge graph that integrates code, documentation, and repository information from multiple data sources.&lt;/p&gt;

&lt;p&gt;In addition to the code knowledge graph, we also use the Language Service Protocol (LSP) to provide MarsCode Agent with definition and reference jump capabilities. The process of Agent calling the language server for code recall is consistent with the process of developers using "Ctrl+left button" to click on an identifier in the IDE to jump to the code. Through code jump, MarsCode-Agent has a code browsing and analysis process similar to that of human developers.&lt;/p&gt;

&lt;p&gt;In addition to LSP and CKG, we have uniformly encapsulated common capabilities such as file retrieval within a project (find a file) and identifier retrieval within a project or file (grep) under the MarsCode Agent framework, thereby providing the Agent with a code retrieval tool library with a consistent calling style.&lt;/p&gt;

&lt;h2&gt;
  
  
  Code Editing
&lt;/h2&gt;

&lt;p&gt;In our long-term exploration of AI agents for software development, we tried various methods of using LLMs for code edit descriptions and found that current LLMs have generally weak code modification capabilities. We concluded that LLM code edit descriptions need the following characteristics:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;No strict format validation, with descriptions that can be stably applied after processing and parsing;&lt;/li&gt;
&lt;li&gt;No need to provide line number ranges or perform line number calculations, as LLMs are unstable in this aspect;&lt;/li&gt;
&lt;li&gt;Simple, concise descriptions to minimize token and time costs.
Inspired by Aider’s code change method, we developed our relatively stable code edit tool: MarsCode Agent AutoDiff. &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;AutoDiff’s code edit description resembles git conflict markers, where the agent provides the file path, original code, and replacement code within conflict markers. AutoDiff parses the edit block, matches the provided original code snippet to the most similar segment in the file, and replaces it with the provided replacement code. It then adjusts the indentation of the replacement code based on the modified file context. Finally, the differences before and after the modification are compared to generate a unified diff format change file. &lt;/p&gt;

&lt;p&gt;Although AutoDiff can correctly complete most code editing requests, there are still common LLM code editing syntax problems such as type errors, undefined variables, indentation errors, and incorrect bracket closures. To address these problems, we use the language server protocol to perform static code diagnosis on files before and after AutoDiff modification. If the Agent's modification introduces a syntax error, the relevant diagnostic information is returned to the Agent for modification and adjustment.&lt;/p&gt;

&lt;h2&gt;
  
  
  Experiments
&lt;/h2&gt;

&lt;p&gt;We evaluated the performance of MarsCode Agent on the SWE-bench Lite dataset.&lt;/p&gt;

&lt;p&gt;SWE-bench is a highly challenging benchmark for LLMs to solve program logic and functional bugs. This dataset consists of 2294 issues from 12 industrial-grade Python code repositories on GitHub. Given a codebase and a description of the issue to be resolved, the agent needs to retrieve and edit the code from the repository, ultimately submitting a code patch that resolves the issue. Solving problems in SWE-bench typically requires understanding and coordinating changes across multiple functions, classes, or even files, necessitating interaction with the execution environment, handling extremely long contexts, and performing more complex reasoning than traditional code generation. Evaluations show that directly applying Claude2 and GPT-4 can only solve 4.8% and 1.7% of the instances, respectively.&lt;/p&gt;

&lt;p&gt;Due to the high difficulty of SWE-bench, subsequent research found that evaluating all 2294 instances of SWE-bench is a time and token-intensive process that is frustrating and does not validate short-term progress. Therefore, the authors of SWE-bench extracted 300 instances with complete issue descriptions, clear-solving logic, and relative ease of resolution to form the SWE-bench Litedataset. Currently, the SWE-bench Lite dataset has become the benchmark for evaluating the capability of agents to solve software engineering problems, with over 20 companies and research organizations participating in the evaluation and submissions.&lt;/p&gt;

&lt;p&gt;In the latest SWE-bench Lite evaluation, MarsCode Agent successfully solved 102 instances, achieving a solve rate of 34%.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Items&lt;/th&gt;
&lt;th&gt;Value&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Resolved Issues&lt;/td&gt;
&lt;td&gt;102&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Resolved Rate&lt;/td&gt;
&lt;td&gt;102 / 300 = 34%&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Precision of File Localization&lt;/td&gt;
&lt;td&gt;265 / 300 = 88.3%&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Precision Rate of Code Snippet Localization&lt;/td&gt;
&lt;td&gt;206 / 300 = 68.7%&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Percentage of Issues Progressed to Dynamic Debugging&lt;/td&gt;
&lt;td&gt;84 / 300 = 28.0%&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Percentage of Issues Progressed to Static Repair&lt;/td&gt;
&lt;td&gt;202 / 300 = 72.0%&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Success Rate of Dynamic Debugging&lt;/td&gt;
&lt;td&gt;32 / 84 = 38.1%&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Success Rate of Static Repair&lt;/td&gt;
&lt;td&gt;70 / 216 = 32.4%&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  Future Plans
&lt;/h2&gt;

&lt;p&gt;The MarsCode team is committed to the implementation and application of AI Agent methods in the field of software engineering. In the future, we will continue to focus on the following optimization directions:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Reduce the cost of calling large language models, promote the implementation of MarsCode Agent in more scenarios, and provide high-quality intelligent software development services to more users;&lt;/li&gt;
&lt;li&gt;Strengthen the collaboration and interaction between users and Agents, and enhance users' control over the Agent operation process;&lt;/li&gt;
&lt;li&gt;Support Agents to dynamically debug user workspaces safely to avoid problems such as user environmental pollution;&lt;/li&gt;
&lt;li&gt;Further improve the accuracy of file error location and code modification accuracy.&lt;/li&gt;
&lt;/ol&gt;

</description>
      <category>ai</category>
      <category>automation</category>
      <category>powerfuldevs</category>
      <category>bugfix</category>
    </item>
    <item>
      <title>User Story EP2: How I made my own screenshot-to-code project</title>
      <dc:creator>MarsCode</dc:creator>
      <pubDate>Wed, 05 Jun 2024 07:22:52 +0000</pubDate>
      <link>https://forem.com/marscode/how-i-made-my-own-screenshot-to-code-project-2enh</link>
      <guid>https://forem.com/marscode/how-i-made-my-own-screenshot-to-code-project-2enh</guid>
      <description>&lt;h2&gt;
  
  
  Background
&lt;/h2&gt;

&lt;p&gt;I am a front-end developer, and tasks like creating web pages are the most time-consuming parts of my job. I hope AI can help me with these tasks and free up more time for me to enjoy my coffee breaks. ☕️&lt;br&gt;
Recently, I stumbled upon an amazing open-source project on GitHub trending: &lt;a href="https://github.com/abi/screenshot-to-code" rel="noopener noreferrer"&gt;https://github.com/abi/screenshot-to-code&lt;/a&gt;, which has garnered a lot of attention. As of now, it has already received an astonishing 53 k+ ⭐️.&lt;br&gt;
The project supports various tech stacks and popular Large Language Models:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Tech stacks: HTML + Tailwind, React + Tailwind, etc.&lt;/li&gt;
&lt;li&gt;Large Language Models: such as GPT-4o, Claude 3 Sonnet, etc.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It felt like discovering a hidden treasure🤩 , and I couldn't wait to give it a try. However, after reading the repository's documentation, I encountered two issues:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The available Large Language Models are all paid services, so I want to use Gemini, which currently offers a free version.&lt;/li&gt;
&lt;li&gt;It doesn't support my preferred tech stack: React + Ant Design + Tailwind.
So, I decided to fork the repository and add support for Gemini.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Preparation:&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;a href="https://ai.google.dev/pricing?hl=zh-cn" rel="noopener noreferrer"&gt;Obtain the API key&lt;/a&gt;, which is still free for now.&lt;/li&gt;
&lt;li&gt;Set up an environment with Python and Node.js. Since I’m not very familiar with this tech stack, the setup seemed complicated, so I chose &lt;a href="https://www.marscode.com/?utm_source=devto&amp;amp;utm_medium=contmkt" rel="noopener noreferrer"&gt;MarsCode&lt;/a&gt;, an AI Cloud IDE product.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Final Outcome:&lt;/strong&gt;&lt;br&gt;
Using Gemini with React, based on React + Ant Design + Tailwind, and taking the React homepage as an example:&lt;br&gt;
&lt;a href="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExNGlpaHp5bGJuNGNidWZ2NTlwMWl4cnJuNTlvNW52OXB6dW90c3pjdyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/HCkDsCCuKjILInGNL3/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExNGlpaHp5bGJuNGNidWZ2NTlwMWl4cnJuNTlvNW52OXB6dW90c3pjdyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/HCkDsCCuKjILInGNL3/giphy.gif"&gt;&lt;/a&gt;&lt;br&gt;
The final result is the following HTML page.&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.imgur.com%2FhemprfE.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.imgur.com%2FhemprfE.png"&gt;&lt;/a&gt;&lt;br&gt;
It's not perfect, but the overall layout and text are well reproduced, which seems to save me a lot of time on writing UI code. Cool!&lt;br&gt;
FYI：&lt;a href="https://github.com/KernLex/screenshot-to-code" rel="noopener noreferrer"&gt;https://github.com/KernLex/screenshot-to-code&lt;/a&gt; &lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Detailed Development Process&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;The &lt;a href="https://github.com/abi/screenshot-to-code" rel="noopener noreferrer"&gt;screenshot-to-code&lt;/a&gt; project includes both front-end and back-end code. The back-end is written in Python and can be found in the &lt;a href="https://github.com/abi/screenshot-to-code/tree/main/backend" rel="noopener noreferrer"&gt;backend&lt;/a&gt; directory, while the front-end is built with React and is located in the &lt;a href="https://github.com/abi/screenshot-to-code/tree/main/frontend" rel="noopener noreferrer"&gt;frontend&lt;/a&gt; directory.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Creating the Project&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;First, let's follow the project's instructions to get the repository running on MarsCode:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;em&gt;&lt;strong&gt;Fork the Repository:&lt;/strong&gt;&lt;/em&gt; Start by forking the screenshot-to-code repository to your GitHub account.&lt;/li&gt;
&lt;li&gt;
&lt;em&gt;&lt;strong&gt;Create a Project on MarsCode&lt;/strong&gt;&lt;/em&gt;

&lt;ol&gt;
&lt;li&gt;Go to MarsCode and create a new project. &lt;/li&gt;
&lt;li&gt;Select screenshot-to-code,and use the "All in One" template. &lt;/li&gt;
&lt;/ol&gt;


&lt;/li&gt;

&lt;/ol&gt;

&lt;p&gt;With these steps, you will have the project set up and running smoothly on MarsCode.&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.imgur.com%2FF5KXDRX.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.imgur.com%2FF5KXDRX.png"&gt;&lt;/a&gt;&lt;br&gt;
(&lt;em&gt;MarsCode supports one-click import of GitHub projects, making it very convenient.&lt;/em&gt;)&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.imgur.com%2FbPGIrLG.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.imgur.com%2FbPGIrLG.png"&gt;&lt;/a&gt;&lt;br&gt;
(&lt;em&gt;The theme looks pretty cool, and there is an AI Assistant on the right side that provides functionality similar to GitHub Copilot.&lt;/em&gt;)&lt;/p&gt;

&lt;p&gt;Next, let's start the project in the IDE according to the &lt;a href="https://github.com/abi/screenshot-to-code" rel="noopener noreferrer"&gt;project instructions&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Start Backend Service&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;The backend service is implemented in Python and uses Poetry for dependency management.&lt;br&gt;
&lt;em&gt;&lt;strong&gt;1. Install Dependencies&lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

1. sh
2. cd backend
3. poetry install
4. poetry shell


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;&lt;em&gt;&lt;strong&gt;2. Configure API KEY&lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

1. sh
2. echo "OPENAI_API_KEY=sk-your-key".env


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;&lt;em&gt;&lt;strong&gt;3. Start Backend Service:&lt;/strong&gt;&lt;/em&gt; Since I don't have access to OpenAI and Claude APIs yet, we can mock the data by executing the following command in the Terminal:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

1. sh
2. MOCK=true poetry run uvicorn main:app --reload --port 7001


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;h3&gt;
  
  
  &lt;strong&gt;Start Frontend Service&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;em&gt;&lt;strong&gt;1. Install Dependencies:&lt;/strong&gt;&lt;/em&gt;&lt;br&gt;
Open a new Terminal and execute the following commands to install dependencies:&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

1. sh
2. cd frontend
3. yarn


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;&lt;em&gt;&lt;strong&gt;2. Start Frontend Service&lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

1. sh
2. yarn dev


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.imgur.com%2FDLV1mG4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.imgur.com%2FDLV1mG4.png"&gt;&lt;/a&gt;&lt;br&gt;
(&lt;em&gt;MarsCode provides a very useful feature called Networking, which allows for port forwarding. This project start with 2 services: port 5173 for the frontend page service, and port 7001 for the backend service.&lt;/em&gt;)&lt;/p&gt;

&lt;p&gt;Next, we can open the access address for the frontend page (the Address corresponding to port 5173). &lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.imgur.com%2FMxPPUkH.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.imgur.com%2FMxPPUkH.png"&gt;&lt;/a&gt;&lt;br&gt;
(&lt;em&gt;However, when we uploaded an image, an error occurred&lt;/em&gt;)&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.imgur.com%2FO6aJBMX.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.imgur.com%2FO6aJBMX.png"&gt;&lt;/a&gt;&lt;br&gt;
(&lt;em&gt;After checking the network requests on the page, we found that the frontend requested a websocket address with the domain name 127.0.0.1.&lt;/em&gt;)&lt;/p&gt;

&lt;p&gt;Since we are developing on MarsCode, which is essentially a remote service, we need to change this domain name to the proxy address of the backend service.&lt;/p&gt;

&lt;p&gt;Create the file frontend/.env.local and configure the service address for development so that the frontend connects to the proxy service's WebSocket. For example:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

1. VITE_WS_BACKEND_URL=wss://omt69uy22k6flz8q8c4rrmujn8g9dgp150vkwziswevdxig1dlce2o4pybh9v3.ac1-preview.marscode.dev


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Note: The value of VITE_WS_BACKEND_URL should correspond to the proxy address of port 7001, and the protocol should be wss.&lt;br&gt;
&lt;a href="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExcm5qMWZ6dzFsbmUyZnlueTR2aXJjdjljc3NiMGtkZmtlZWZ5bm81ZCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/PemujUE1zbqcChLC1t/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExcm5qMWZ6dzFsbmUyZnlueTR2aXJjdjljc3NiMGtkZmtlZWZ5bm81ZCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/PemujUE1zbqcChLC1t/giphy.gif"&gt;&lt;/a&gt;&lt;br&gt;
(&lt;em&gt;The service is Working normally now.&lt;/em&gt;)&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Adding Gemini&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;To add Gemini to the frontend page, we need to modify two areas: support for selecting Gemini and the frontend tech stack (React + Ant Design + Tailwind).&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.imgur.com%2Fly0ZF2c.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.imgur.com%2Fly0ZF2c.png"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.imgur.com%2FnBwMuYY.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.imgur.com%2FnBwMuYY.png"&gt;&lt;/a&gt;&lt;br&gt;
(&lt;em&gt;In frontend/src/lib/models.ts, add Gemini as an option.&lt;/em&gt;)&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.imgur.com%2FVwkftZZ.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.imgur.com%2FVwkftZZ.png"&gt;&lt;/a&gt;&lt;br&gt;
(&lt;em&gt;Add a new frontend tech stack: React + Ant Design + Tailwind.&lt;/em&gt;)&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Modifying Prompt&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;In the file &lt;a href="https://github.com/KernLex/screenshot-to-code/blob/main/backend/prompts/screenshot_system_prompts.py" rel="noopener noreferrer"&gt;screenshot_system_prompts.py&lt;/a&gt;, add a new prompt.&lt;br&gt;
Referring to the prompt structure from screenshot-to-code, I made some adjustments to the prompt structure for better understanding and also added support for Ant Design.&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

1. REACT_TAILWIND_ANTD_SYSTEM_PROMPT  = """
2.  # Character
3. You're an experienced React/Tailwind developer who builds single page apps using React, Tailwind CSS, and Ant Design based on provided screenshots.
4. 
5. ## Skills
6. ### Skill 1: App Development
7. - Examine the screenshot provided by the user.
8. - Use React, Tailwind, and Ant Design to create a web application that precisely matches the screenshot.
9. - Ensure the app's elements and layout align exactly with the screenshot. 
10. - Carefully consider icon size, text color, font size, and other details to match the screenshot as closely as possible.
11. - Use the specific text from the screenshot.
12. 
13. ### Skill 2: App Modification
14. - Evaluate a screenshot (The second image) of a web page you've previously created.
15. - Make alterations to make it more similar to a provided reference image (The first image).
16. 
17. ### Skill 3: Precision &amp;amp; Details
18. - Strictly follow the reference and don't add extra text or comments in the code.
19. - Duplicate elements as needed to match the screenshot without leaving placeholders or comments.
20. - Use placeholder images from https://placehold.co with detailed alt text descriptions for later image generation.
21. 
22. ## Constraints:
23. - Use React, Tailwind, and Ant Design for development.
24. - Use provided scripts to include Dayjs, React, ReactDOM, Babel, Ant Design, and Tailwind for standalone page operation.
25. - Use FontAwesome for icons.
26. - Can use Google Fonts.
27. - Return the entire HTML code without markdown signifiers.
28. - Use these script to include React so that it can run on a standalone page:
29.     &amp;lt;script src="https://unpkg.com/react/umd/react.development.js"&amp;gt;&amp;lt;/script&amp;gt;
30.     &amp;lt;script src="https://unpkg.com/react-dom/umd/react-dom.development.js"&amp;gt;&amp;lt;/script&amp;gt;
31.     &amp;lt;script src="https://unpkg.com/@babel/standalone/babel.js"&amp;gt;&amp;lt;/script&amp;gt;
32.     &amp;lt;script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.11/dayjs.min.js"&amp;gt;&amp;lt;/script&amp;gt;
33.     &amp;lt;script src="https://cdnjs.cloudflare.com/ajax/libs/antd/5.17.3/antd.min.js"&amp;gt;&amp;lt;/script&amp;gt;
34. - Use this script to include Tailwind: &amp;lt;script src="https://cdn.tailwindcss.com"&amp;gt;&amp;lt;/script&amp;gt;
35. """


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;This prompt mainly instructs the large model to generate frontend code for the specified tech stack based on the input image. We can support different frontend tech stacks by adjusting the prompt.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Calling Gemini API in the Backend Service&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;The core logic for generating code is located in backend/routes/generate_code.py. Add a branch to handle the logic for calling Gemini.&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.imgur.com%2F9pa17wY.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.imgur.com%2F9pa17wY.png"&gt;&lt;/a&gt;&lt;br&gt;
stream_gemini_response is mainly used to transform the prompt and call the Gemini &lt;a href="https://ai.google.dev/api/python/google/generativeai" rel="noopener noreferrer"&gt;API&lt;/a&gt; to return the response. This response is the frontend code generated by the large model.&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

1. async def stream_gemini_response(
2.     messages: List[ChatCompletionMessageParam],
3.     api_key: str,
4.     callback: Callable[[str], Awaitable[None]],
5. ) -&amp;gt; str:
6.   """
7.     This function streams the Gemini response by generating content based on the given messages.
8.     
9.     Parameters:
10.         messages (List[ChatCompletionMessageParam]): A list of chat completion messages.
11.         api_key (str): The API key for the Gemini model.
12.         callback (Callable[[str], Awaitable[None]]): A callback function to handle the generated content.
13.         
14.     Returns:
15.         str: The generated response text.
16.     """
17.   genai.configure(api_key=api_key)
18.   
19.   generation_config = genai.GenerationConfig(
20.     temperature = 0.0
21.   )
22.   model = genai.GenerativeModel(
23.     model_name = "gemini-1.5-pro-latest",
24.     generation_config = generation_config
25.   )
26.   contents = parse_openai_to_gemini_prompt(messages);
27.   
28.   response = model.generate_content(
29.     contents = contents,
30.     #Support streaming
31.     stream = True,
32.    )
33.    
34.   for chunk in response:
35.     content = chunk.text or ""
36.     await callback(content)
37. 
38.   if not response:
39.     raise Exception("No HTML response found in AI response")
40.   else:
41.     return response.text;


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;The function &lt;a href="https://github.com/KernLex/screenshot-to-code/blob/b56931752e0e94a181bd7471abe0aaa70626c623/backend/llm.py#L263" rel="noopener noreferrer"&gt;parse_openai_to_gemini_prompt&lt;/a&gt; converts the OpenAI prompt into the Gemini prompt format.&lt;/p&gt;

&lt;p&gt;Note：install Gemini SDK first&lt;/p&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

&lt;ol&gt;
&lt;li&gt;cd backend&lt;/li&gt;
&lt;li&gt;poetry add google-generativeai&lt;/li&gt;
&lt;/ol&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;h2&gt;
&lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;strong&gt;Conclusion and  Future Plan&lt;/strong&gt;&lt;br&gt;
&lt;/h2&gt;

&lt;p&gt;The overall code modifications are not too complex. MarsCode's configuration-free environment, AI Assistant, Networking, and deployment features have saved me a lot of time! Next, I will continue to optimize the generated code quality by adjusting the Large Language Models and prompts, and compare the results of Gemini and GPT-4o to choose the best model to reduce my time spent on UI development.&lt;/p&gt;

</description>
      <category>marscode</category>
      <category>userstories</category>
      <category>image2code</category>
      <category>github</category>
    </item>
    <item>
      <title>User Story EP1 : How Alex Built His First GPT Action from Scratch🎉</title>
      <dc:creator>MarsCode</dc:creator>
      <pubDate>Fri, 24 May 2024 03:48:59 +0000</pubDate>
      <link>https://forem.com/marscode/user-story-ep1-how-alex-built-his-first-gpt-action-from-scratch-48ca</link>
      <guid>https://forem.com/marscode/user-story-ep1-how-alex-built-his-first-gpt-action-from-scratch-48ca</guid>
      <description>&lt;blockquote&gt;
&lt;p&gt;This article comes from User @ Alex Liu,big shoutout to ALEX for an incredible share! 🌟&lt;br&gt;
Calling all users to join in and share your stories too! 📚&lt;br&gt;
We have awesome gifts worth up to $200 waiting for those with amazing tales to tell! 🎁&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Recently, with some free time on my hands, I developed a cool GPT Action using MarsCode. It allows querying of information on popular GitHub projects. It's been quite enjoyable, so I thought I'd share my development process and insights.&lt;br&gt;
&lt;a href="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExY3Q5cTA4dDlrMml2Z29zN3FtMTMxMGlycm43bmxhY2R0b3RkY2NydSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/5ldlNWHkbAogvGfpfQ/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExY3Q5cTA4dDlrMml2Z29zN3FtMTMxMGlycm43bmxhY2R0b3RkY2NydSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/5ldlNWHkbAogvGfpfQ/giphy.gif" width="480" height="265"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;(&lt;em&gt;how it works↑&lt;/em&gt;)&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;About GPT Actions: You can think of them as handy little helpers powered by AI, capable of fetching all sorts of information for you. For more details, check out "&lt;a href="https://platform.openai.com/docs/actions/introduction" rel="noopener noreferrer"&gt;Actions in GPTs.&lt;/a&gt;"&lt;br&gt;
Developing GPT actions may require an IDE, deployment platform, and API testing tools, among others. That's why I opted for MarsCode – it offers a one-stop solution, allowing me to quickly create a development project and streamline the development of GPT Actions. &lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Alright, let's take a look at my entire development process&lt;/p&gt;
&lt;h3&gt;
  
  
  Step1: Designing GPT Actions
&lt;/h3&gt;

&lt;p&gt;This is where you get to brainstorm what you want your GPT to do. For mine, I wanted it to scour GitHub Trending for hot projects based on programming language and time frame. Here's what I came up with for inputs and outputs:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Inputs: the programming language to search for the time frame for the search (e.g., daily, weekly, monthly)&lt;/li&gt;
&lt;li&gt;Outputs: Project list, including project name, author, link, star count, and recent star increments.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;
  
  
  Step2: Setting Up the Project
&lt;/h3&gt;

&lt;p&gt;MarsCode makes this part a breeze. With its variety of ready-to-use development frameworks and templates, I was spoilt for choice. Since I'm more comfortable with Node.js, I opted for the Node.js for AI Plugin template.&lt;/p&gt;

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

&lt;p&gt;(&lt;em&gt;Clicking on "Create," I swiftly entered the project space↑&lt;/em&gt;)&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuqbontuy4rrvpza7mrvf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuqbontuy4rrvpza7mrvf.png" alt="Image description" width="800" height="443"&gt;&lt;/a&gt;&lt;br&gt;
(&lt;em&gt;The overall layout of MarsCode is quite similar to VS Code, so there wasn't much of a learning curve for me, as someone accustomed to using VS Code. BTW, I have to mention its theme – I really like it! It's a pity it's not open-source.😄↑&lt;/em&gt;)&lt;/p&gt;
&lt;h3&gt;
  
  
  Step3 Development
&lt;/h3&gt;

&lt;p&gt;For anyone diving into this template for the first time, it's a smart move to give the README a thorough read. Since it's a template project, sticking to the presets is the way to go.&lt;br&gt;&lt;br&gt;
In this template, each function file needs to export a function called handler that conforms to the following TypeScript definition:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;export async function handler({ input, logger }: Args&amp;lt;Input&amp;gt;): Promise&amp;lt;Output&amp;gt; {
  const name = input.name || 'world';

  logger.info(`user name is ${name}`);

  return {
    message: `hello ${name}`
  };
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;When an HTTP request comes in, MarsCode executes this function and passes in input and logger. The logic for the action is written within the handler function, which provides several predefined TypeScript types:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Args: The arguments passed to MarsCode when executing the handler, including input and logger.&lt;/li&gt;
&lt;li&gt;Input: The input of the HTTP request.&lt;/li&gt;
&lt;li&gt;logger: This logs information, including methods like &lt;a href="https://logger.info/" rel="noopener noreferrer"&gt;logger.info&lt;/a&gt;, logger.error, and logger.debug. These logs appear in the Runtime logs panel of the deployment dashboard and in the API Test's log panel.&lt;/li&gt;
&lt;li&gt;Output: The output of the function.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;After grasping all that, I jumped right into coding. I created github/searchTrending.ts under the api directory to fetch GitHub Trending data. Here's how I broke it down into 2 steps:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Fetching GitHub Trending Page: I started by making a fetch request to &lt;a href="https://github.com/trending" rel="noopener noreferrer"&gt;https://github.com/trending&lt;/a&gt; to grab the page's HTML. Since MarsCode's Node.js version is v20.12.2, I could directly use fetch for network requests.&lt;/li&gt;
&lt;li&gt;Parsing HTML with cheerio:  I had the HTML, I used cheerio to parse it and extract repo data like names, descriptions, and star counts.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxoz8bpbixq77dtdgzp31.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxoz8bpbixq77dtdgzp31.png" alt="Image description" width="800" height="433"&gt;&lt;/a&gt;&lt;br&gt;
(&lt;em&gt;During the coding process, MarsCode AI Assistants were super helpful. They provided features like code auto-completion and generating code based on comments. The fields for the &lt;code&gt;GitHubRepo&lt;/code&gt; interface were automatically inferred, making the whole process incredibly convenient. 😎↑&lt;/em&gt;)&lt;/p&gt;

&lt;p&gt;Once the dependencies are installed, we can dive into writing the core logic of the plugin:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;async function searchTrending(input: Input): Promise&amp;lt;GitHubRepo[]&amp;gt; {
  let url = 'https://github.com/trending';
  // You can filter by language and time period
  if (input.language) {
    url += `/${input.language}`;
  }
  if (input.since) {
    url += `?since=${input.since}`;
  }

  try {
    // Fetch the HTML from GitHub Trending.
    const response = await fetch(url);
    const body = await response.text();
    // Parse the HTML with cheerio to extract project information.
    const $ = cheerio.load(body);
    // Initialize the list for repository info.
    let repositoriesInfo = [];

    // Iterate over all &amp;lt;article class="Box-row"&amp;gt; elements on the page.
    $('article.Box-row').each(function () {
      const article = $(this);
      // Extract data.
      const name = article.find('h2.h3 a').text().trim();
      const url = 'https://github.com' + article.find('h2.h3 a').attr('href');
      const author = article.find('span.text-normal').text().trim().replace(' /', '');
      const stars = article.find('a[href*="/stargazers"]').last().text().trim().replace(/,/g, ''); // Remove commas from numbers.
      const todayStarsText = article.find('.d-inline-block.float-sm-right').text().trim();
      const todayStarsMatch = todayStarsText.match(/(\d+)/);
      const todayStars = todayStarsMatch ? parseInt(todayStarsMatch[0], 10) : 0;
      const language = article.find('[itemprop="programmingLanguage"]').text().trim();
      const description = article.find('p.color-fg-muted').text().trim();  Extract repo description

      repositoriesInfo.push({
        description,
        language,
        name,
        url,
        author,
        stars,
        todayStars
      });
    });

    return repositoriesInfo;
  } catch (error) {
    console.error('Error fetching data:', error);
  }
  return [];
}

Call the searchTrending function in the handler:
typescript
/**
 * Search the GitHub trending repos
 */
export async function handler({ input, logger }: Args&amp;lt;Input&amp;gt;): Promise&amp;lt;Output&amp;gt; {
  const projects = await searchTrending(input);

  return {
    projects,
  };
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now that we've wrapped up the main coding part, we can move on to testing this action. 🚀&lt;/p&gt;

&lt;h3&gt;
  
  
  Step4: API test
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExMDNvOXZyOTJheHFpM2Zjdjdqbnd0b29yanVibGlhcm0yMzZpMjdtOSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/9jYv7PoaVGCEgDeW9A/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExMDNvOXZyOTJheHFpM2Zjdjdqbnd0b29yanVibGlhcm0yMzZpMjdtOSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/9jYv7PoaVGCEgDeW9A/giphy.gif" width="480" height="265"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;(&lt;em&gt;MarsCode offers a testing tool: API Test. In the API Test panel, you can input the parameters for the interface. Click "Send," and you can check the logs through the Output panel. 🔍↑&lt;/em&gt;)&lt;/p&gt;

&lt;h3&gt;
  
  
  Step5: Deployment
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExcGJydndwaXltY3pzY3EwaWc3a3Q1dzVrNzNzM2kwMm1ydm55YnNsbSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/GvRHDkZf4Zbmt2mbeS/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExcGJydndwaXltY3pzY3EwaWc3a3Q1dzVrNzNzM2kwMm1ydm55YnNsbSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/GvRHDkZf4Zbmt2mbeS/giphy.gif" width="480" height="266"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;(&lt;em&gt;Click the "Deploy" button at the top, enter the Changelog, and then click "Start." Your project will begin deploying, and you can monitor the deployment process through the logs. 🚀↑&lt;/em&gt;)&lt;/p&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExemZpNXgxZGIyYWk3eHk4d3JnNDVmYmpmam50cThrYnp5azhvYWRjYiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/zEs0MmGn3s5CxMtR6a/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExemZpNXgxZGIyYWk3eHk4d3JnNDVmYmpmam50cThrYnp5azhvYWRjYiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/zEs0MmGn3s5CxMtR6a/giphy.gif" width="480" height="265"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;(&lt;em&gt;After a successful deployment, you can view the service details through Service Detail. This includes the OpenAPI Schema, Bearer token, domain name, and more.↑&lt;/em&gt;)&lt;/p&gt;

&lt;h3&gt;
  
  
  Final Step
&lt;/h3&gt;

&lt;p&gt;For details on how to add the action to your ChatGPT, there's a document from MarsCode team &lt;a href="https://docs.marscode.com/tutorials/develop-cloud-functions#step-3-add-an-action-to-your-chatgpt" rel="noopener noreferrer"&gt;Add an action to your ChatGPT&lt;/a&gt;.  I won't go into it here, but you can refer to that for a step-by-step guide. 📄🤖&lt;/p&gt;

&lt;h3&gt;
  
  
  Some of my ideas
&lt;/h3&gt;

&lt;p&gt;Even though this was my first time developing a GPT Action, I found MarsCode's custom solution pretty impressive overall. The process was smooth with hardly any hiccups. Moving forward, I'm considering developing more AI Bots to cover various other scenarios. If anyone has ideas, feel free to join in and let's create something awesome together! 🚀&lt;/p&gt;

&lt;p&gt;FYI : &lt;a href="https://github.com/L-mofeng/marscode-github-trending-action" rel="noopener noreferrer"&gt;https://github.com/L-mofeng/marscode-github-trending-action&lt;/a&gt;&lt;/p&gt;

</description>
      <category>marscode</category>
      <category>userstories</category>
      <category>gptaction</category>
    </item>
    <item>
      <title>#MarsCodeChallenge: 3 Days of Coding and $10 reward Upon Completion!</title>
      <dc:creator>MarsCode</dc:creator>
      <pubDate>Wed, 22 May 2024 08:03:57 +0000</pubDate>
      <link>https://forem.com/dancemove_marscode/marscodechallenge-3-days-of-coding-and-10-reward-upon-completion-1fnp</link>
      <guid>https://forem.com/dancemove_marscode/marscodechallenge-3-days-of-coding-and-10-reward-upon-completion-1fnp</guid>
      <description>&lt;p&gt;Are you ready for a coding adventure like no other? Get set for the MarsCode Challenge, where you'll embark on a three-day journey to explore the amazing features of MarsCode and win prizes along the way. Whether you're a seasoned developer or just starting out, this challenge is perfect for anyone looking to level up their coding skills and have a blast doing it.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is the MarsCode Challenge?
&lt;/h2&gt;

&lt;p&gt;The MarsCode Challenge is a three-day coding event hosted by MarsCode, the ultimate AI-powered coding companion. From May 21st, 16:00 to May 28th, 16:00 (GMT+8) , participants will complete a series of coding tasks designed to showcase the capabilities of MarsCode and help you hone your coding skills. Each day, you'll tackle a new challenge and share your progress on social media for a chance to win exciting prizes.&lt;/p&gt;

&lt;h2&gt;
  
  
  How Does it Work?
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Day 1: Create and Explore
&lt;/h3&gt;

&lt;p&gt;On the first day of the challenge, participants will dive into MarsCode and create their very own coding projects. From building simple projects to experimenting with AI conversation abilities, the possibilities are endless. Share your creations (by posting screenshots or videos of your projects) on social media using the hashtag #MarsCodeChallenge and tag &lt;a class="mentioned-user" href="https://dev.to/marscode_team"&gt;@marscode_team&lt;/a&gt;  to show off your skills.&lt;br&gt;
Here is an example of how to post:&lt;/p&gt;

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

&lt;p&gt;Tips:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://docs.marscode.com/tutorials/develop-projects-from-templates" rel="noopener noreferrer"&gt;How to create a project using templates&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://docs.marscode.com/tutorials/develop-projects-from-github-repositories" rel="noopener noreferrer"&gt;How to create a project from Git repositories&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://docs.marscode.com/ai-assistant/chat-with-the-ai-assistant" rel="noopener noreferrer"&gt;Chat with the  AI Assistant&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Day 2: Develop and Innovate
&lt;/h3&gt;

&lt;p&gt;Day two is all about putting your coding skills to the test. Choose any project you like (such as  FaaS or Web/Service Projects) and take it to the next level with MarsCode. Whether you're coding in Python, JavaScript, or any other language, MarsCode is here to help you every step of the way. Don't forget to share your progress with us on social media using the hashtag #MarsCodeChallenge and tag &lt;a class="mentioned-user" href="https://dev.to/marscode_team"&gt;@marscode_team&lt;/a&gt;  for a chance to win.&lt;br&gt;
Here is an example of how to post:&lt;/p&gt;

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

&lt;p&gt;Tips: &lt;a href="https://docs.marscode.com/tutorials/develop-cloud-functions" rel="noopener noreferrer"&gt;How to develop an AI plugin&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Day 3: Reflect and Share
&lt;/h3&gt;

&lt;p&gt;On the final day of the challenge, participants will reflect on their MarsCode experience and share their thoughts with the world. What did you learn? What challenges did you overcome? Share your insights on social media using the hashtag #MarsCodeChallenge and tag &lt;a class="mentioned-user" href="https://dev.to/marscode_team"&gt;@marscode_team&lt;/a&gt;  to complete the challenge.&lt;br&gt;
Here is an example of how to post:&lt;/p&gt;

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

&lt;p&gt;(Note: You can say whatever you feel about MarsCode.)&lt;/p&gt;

&lt;h2&gt;
  
  
  Prizes and Rewards
&lt;/h2&gt;

&lt;p&gt;Grand Prize: $10 Amazon Gift Card&lt;br&gt;
The first 100 participants to complete all three days of the challenge will receive a &lt;strong&gt;$10 Amazon Gift Card&lt;/strong&gt; (or another equivalent reward)  as a token of our appreciation. Winners will be notified via direct message on social media within 7 business days of the end of the challenge.&lt;/p&gt;

&lt;h2&gt;
  
  
  Ready to Take on the Challenge?
&lt;/h2&gt;

&lt;p&gt;The MarsCode Challenge kicks off on May 21st at 16:00 and runs until May 28th at 16:00(GMT+8), so mark your calendars and get ready to code your way to victory. Whether you're coding solo or teaming up with friends, this is your chance to showcase your skills and win amazing prizes. Are you up for the challenge? Let's find out!&lt;/p&gt;

</description>
    </item>
    <item>
      <title>MarsCode: Code and Innovate Faster with AI, Start for Free</title>
      <dc:creator>MarsCode</dc:creator>
      <pubDate>Tue, 07 May 2024 03:30:04 +0000</pubDate>
      <link>https://forem.com/marscode/marscode-code-and-innovate-faster-with-ai-start-for-free-4kk0</link>
      <guid>https://forem.com/marscode/marscode-code-and-innovate-faster-with-ai-start-for-free-4kk0</guid>
      <description>&lt;p&gt;MarsCode provides an IDE(Integrated Development Environment)  and an AI extension to assist your programming tasks.&lt;br&gt;
MarsCode IDE is an AI-powered Cloud IDE. The built-in AI Assistant and the out-of-the-box development environment let you focus more on the development of various projects.&lt;/p&gt;

&lt;p&gt;To assist the creation of cloud functions, MarsCode IDE also provides a series of capabilities covering code generation, debugging, storage, deployment, schema generation, and more, which greatly reduces development costs.&lt;/p&gt;

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

&lt;h1&gt;
  
  
  &lt;center&gt; Powerful AI Assistant , Develop Efficiently and Stay Focused &lt;/center&gt;
&lt;/h1&gt;

&lt;p&gt;MarsCode IDE offers the GPT-powered AI Assistant, equipped with numerous capabilities such as &lt;strong&gt;code completion, code generation, code optimization, code comments generation, code explanation&lt;/strong&gt;, and more, all aimed at improving your coding efficiency.&lt;/p&gt;

&lt;p&gt;MarsCode IDE uses high-performance operator optimization and Speculative Decoding technology to improve inference performance, and uses static analysis techniques to filter and correct the model output results, providing you with a better experience beyond traditional code continuation.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Code completion:&lt;/strong&gt; The AI Assistant can comprehend the existing code context and auto-generate subsequent appropriate code snippets. You just need to click the enter key at the corresponding code to wrap the line and  just press the Tab key to automatically complete the code. The AI Assistant can analyze and comprehend the code you've written to produce high quality outputs. &lt;/p&gt;

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

&lt;p&gt;It also supports generating code snippets based on the code comments you provide.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpxl5vjsioj1mgs6il8hp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpxl5vjsioj1mgs6il8hp.png" alt="Code snippets based on code comments"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Code generation:&lt;/strong&gt; The AI Assistant can understand natural language and generate corresponding codes in the code editor.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Bug fix:&lt;/strong&gt; The AI Assistant can detect the bugs in your code and fix them.&lt;/p&gt;

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

&lt;p&gt;&lt;strong&gt;Q&amp;amp;A:&lt;/strong&gt; We have made targeted optimizations for the development-related field. Whether you are a new or experienced developer, simply enter your question in the dialog box, and MarsCode will provide  accurate answers to solve your development problems.&lt;/p&gt;

&lt;p&gt;The AI Assistant supports back-and-forth Q&amp;amp;A which allows you to engage in conversational interactions with it. It provides two types of chat box: side chat box and inline chat box. You can choose the way you like to use it.&lt;/p&gt;

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

&lt;h1&gt;
  
  
  &lt;center&gt; AI Plugin Development &amp;amp; Deployment, All-in-one Solution for GPTs &lt;/center&gt;
&lt;/h1&gt;

&lt;p&gt;Alongside its code editing capability, MarsCode IDE integrates &lt;strong&gt;API Test, Storage, and Deploy tools&lt;/strong&gt;, allowing you to expedite the development of cloud functions. With cloud functions, you can build serverless web applications. Cloud functions can respond to HTTP requests, execute backend logic, and integrate with third-party services provided by MarsCode to enhance the functionality of your application, such as handling the uploads and downloads of files, or using Redis storage to store data. &lt;/p&gt;

&lt;p&gt;MarsCode IDE offer an all-in-one solution for GPTs. You can use AI templates to create AI Plugin projects and swiftly develop cloud functions using built-in frameworks, debugging tools, and storage services. With the deployment capability, you can effortlessly publish your functions with one-click. You can choose Python or Node.js to create a project. Moreover, the auto-generation of schemas for GPTs actions enables you to quickly build your own GPTs.&lt;/p&gt;

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

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

&lt;h1&gt;
  
  
  &lt;center&gt; Out-of-the-box IDE: Develop Anytime and Anywhere &lt;/center&gt;
&lt;/h1&gt;

&lt;p&gt;MarsCode IDE provides the development environments and templates for languages such as C, C++, C#, Go, JavaScript, Java, Node.js, Rust, TypeScript, and more. This helps you avoid the hassle of complex environmental configurations, allowing you to focus more on product development.&lt;/p&gt;

&lt;p&gt;As a cloud-based IDE, you only need a computer, laptop, or tablet that can access a web browser to open MarsCode and complete your development tasks. You can import projects from Github with just one-click and quickly develop existing projects.&lt;/p&gt;

&lt;p&gt;You no longer have to worry about the limitations of your local device's resources for project development, deployment, and storage. With MarsCode's elastic cloud resources, all your project needs can be met effortlessly and scale when needed on-demand.&lt;/p&gt;

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

&lt;h1&gt;
  
  
  &lt;center&gt; Free to Start Your New Project &lt;/center&gt;
&lt;/h1&gt;

&lt;p&gt;You can use MarsCode for free within resource limitations. Let's try it now!&lt;br&gt;
Visit &lt;a href="https://www.marscode.com" rel="noopener noreferrer"&gt;https://www.marscode.com&lt;/a&gt;, if you are using MarsCode for the first time, you will be directed to the welcome page after logging in. Click the +Project button in the upper-left corner of the page and you can select  templates such as Python for AI Plugin or Node.js for AI Plugin template, complete the project information, and then you can create and start your  project.&lt;/p&gt;

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

&lt;h1&gt;
  
  
  &lt;center&gt; MarsCode Extension, Get Started with Your Local IDE &lt;/center&gt;
&lt;/h1&gt;

&lt;p&gt;MarsCode Extension is an intelligent programming assistant that offers AI features, with intelligent code completion being its representative function. It supports &lt;strong&gt;100+ programming languages&lt;/strong&gt; and mainstream IDEs, providing suggestions for writing single lines of code or entire functions during the coding process. Additionally, it supports auxiliary features such as code explanations, code reviews, and issue fixes, enhancing coding efficiency and quality.&lt;br&gt;
You can use it in &lt;strong&gt;Visual Studio Code&lt;/strong&gt; and &lt;strong&gt;JetBrains&lt;/strong&gt;.&lt;br&gt;
Install in Visual Studio Code:&lt;/p&gt;

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

&lt;p&gt;Install in JetBrains IDEs:&lt;/p&gt;

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

&lt;h1&gt;
  
  
  &lt;center&gt; Share, Explore and Create, Building the AI Era of IDE Together. &lt;/center&gt;
&lt;/h1&gt;

&lt;p&gt;For further discussion and sharing of tips, we invite you to join &lt;a href="https://www.marscode.com/community?utm_source=Dev&amp;amp;utm_medium=article&amp;amp;utm_campaign=0506" rel="noopener noreferrer"&gt;our online community&lt;/a&gt; where you can gain direct support from our team, submit suggestions and feedback, and exchange ideas with fellow developers. If you encounter any issues or have specific needs, our team is always ready to assist you.&lt;/p&gt;

&lt;p&gt;Your insights and suggestions are invaluable in helping us improve and evolve. Whether it's a feature you love, a challenge you've faced, or an idea you have for future updates, we're eager to hear it all. You can share your thoughts right here in this thread or through our official customer feedback channels. Together, let's make MarsCode the best it can be!&lt;/p&gt;

&lt;h1&gt;
  
  
  &lt;center&gt; About Us &lt;/center&gt;
&lt;/h1&gt;

&lt;p&gt;At MarsCode, we're a startup passionate about revolutionizing development tools with AI. Launched by a team of experienced tech enthusiasts, we're here to simplify and enhance your coding experience.&lt;/p&gt;

&lt;p&gt;In the future, we will continue to share technical insights, product updates, and best practices with everyone here, helping more developers significantly reduce software development costs and enhancing productivity.&lt;/p&gt;

&lt;p&gt;Join us on this journey to accelerate your idea to launch!&lt;/p&gt;

&lt;p&gt;Discord: &lt;a href="https://www.marscode.com/community" rel="noopener noreferrer"&gt;https://www.marscode.com/community&lt;/a&gt;&lt;br&gt;
E-mail: &lt;a href="mailto:feedback@marscode.com"&gt;feedback@marscode.com&lt;/a&gt;&lt;br&gt;
X:&lt;a href="https://twitter.com/MarsCode_Team" rel="noopener noreferrer"&gt;https://twitter.com/MarsCode_Team&lt;/a&gt;&lt;br&gt;
Youtube: &lt;a href="https://www.youtube.com/watch?v=3cNsYYVEiCo" rel="noopener noreferrer"&gt;https://www.youtube.com/watch?v=3cNsYYVEiCo&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>beginners</category>
      <category>programming</category>
      <category>tutorial</category>
    </item>
  </channel>
</rss>
