DevChat Programming Assistant: A new tool to improve programming efficiency

Article directory

    • Foreword
    • What is DevChat?
    • DevChat Registration
    • Detailed explanation of DevChat usage tutorial
      • Python environment setup
      • VScode installation
      • DevChat plug-in installation
      • DevChat plug-in configuration
    • DevChat hands-on experience
    • Advantages of DevChat
    • Summarize

Foreword

Which programming assistant is the best? DevChat is here to help! Code generation is slow? Model load is heavy? Poor generation effect? Are the services expensive? …The arrival of the era of large models has brought us a lot of benefits in code writing. Large models such as foreign ChatGPT and Claude, domestic Wen Xinyiyan, and Spark large models have all achieved remarkable results, and they have also given us programs It has brought some benefits to programmers; but at the same time, it seems to have also brought us some troubles, such as the choice of models. It is difficult for domestic programmers to experience the benefits brought by models such as ChatGPT and Claude, or they have to open Several web pages are used to generate code, and the code generation experience is very bad. But DevChat has cleverly solved these problems and provided great help for my daily code writing.

What is DevChat?

DevChat is an innovative AI programming assistant launched by Simayi, a domestic R&D performance analysis platform. This tool provides developers with a new programming method that combines a variety of mainstream large models, including ChatGPT, Codex, etc., to help developers improve their programming efficiency. It supports multiple functions such as natural language programming, code writing, code generation and code completion. It provides a one-stop service without cumbersome configuration, making development work more efficient. Different from this, DevChat can also switch between different AI models at any time according to user needs, allowing users to more flexibly choose the model that suits their needs.

Please add image description

DevChat Registration

Before using this very useful plug-in, we need to register a DevChat account to obtain the DevChat Key.

First we need to open the DevChat official website and click on the free trial in the upper right corner to enter the registration interface.

  • DevChat official website: https://www.devchat.ai/zh

After entering the registration interface, enter your username and your email. After verification, click Sign Up to register.

After registering, you will get an email containing your DevChat Key. Be sure to save this email, which can be used later when configuring VSCode.

Then return to the homepage, click Login to enter the login interface, enter your email, and then click Send Code to obtain the verification code.

Then you will get an email containing a login verification code. Enter your verification code and click Sign In to log in.

If you log in successfully and jump to your user interface, it means that the DevChat registration part above has been completed.

Detailed tutorial on using DevChat

Python environment setup

Using this plug-in requires a Python environment. Click Downloads on the Python official website to download it. The following is the Python official website.

  • Python official website: https://www.python.org/

Click Download Python to download the Python installation package.

Then click the installation package to run and follow the prompts to install.

VScode installation

Next, you need to install the VScode editor. Click the URL below to enter the VScode official website, and click Download for Windows to download the installation package.

  • VScode official website: https://code.visualstudio.com/

Then click the installation package to run and follow the prompts to install VScode.

DevChat plug-in installation

Then open VScode and click Extensions to enter the app store interface

Enter our protagonist devchat to find this plug-in and click to install.

After installation, you can proceed with the following DevChat plug-in configuration steps.

DevChat plug-in configuration

Press and hold Ctrl + Shift + P, or click the search box above, enter >devchat key, and select DevChat: Input DevChat Access Key and press Enter to configure DevChat Key.

Then enter the DevChat Key sent in the previous email here, which is the Access Key of the email received previously.

Then click the little rabbit (DevChat) in the sidebar to use it!

If OpenAI key or DevChat key is not configured, the following requirements will appear in DevChat to configure OpenAI key or DevChat key the page

If the configuration is successful, the following chat box will be displayed, and then you can happily chat and write code!

DevChat hands-on experience

First, we need to choose the model we need. There are many models for us to choose from. GPT-4, CLAUDE-2, and Wenxinyiyan cover almost all models on the market.

There are two ways to press the slash. Of course, you can also ask questions directly.

Here is a piece of code I generated using the ChatGPT model in DevChat:

Certainly! To create an HTML page with a dynamic heart, you can use HTML, CSS, and JavaScript. Here’s a simple example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Heart</title>
    <style>
        body {<!-- -->
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background-color: #f5f5f5;
        }

        #heart {<!-- -->
            color: red;
            font-size: 3em;
            animation: heartbeat 1s infinite;
        }

        @keyframes heartbeat {<!-- -->
            0%, 100% {<!-- -->
                transform: scale(1);
            }
            50% {<!-- -->
                transform: scale(1.2);
            }
        }
    </style>
</head>
<body>
    <div id="heart"> & amp;hearts;</div>

    <script>
        // You can add JavaScript code here for any dynamic behavior if needed
    </script>
</body>
</html>
</code><img class="look-more-preCode contentImg-no-view" src="//i2.wp.com/csdnimg.cn/release/blogv2/dist/pc/img/newCodeMoreBlack.png" alt ="" title="">

In this example:

  • The #heart div contains the heart symbol (?).
  • The CSS styles make the heart red, set its font size, and apply a heartbeat animation.
  • The @keyframes rule defines the heartbeat animation, which scales the heart from its normal size to 1.2 times its size and back, creating a pulsating effect.

Feel free to customize the code according to your preferences!

Code effect demonstration:

Please add image description

The quality of the generated front-end code is very good. It is very good for a front-end novice like me to use DevChat to complete daily learning work.

Advantages of DevChat

After trying this tool myself, I summarized some of my opinions below:

  1. Multi-model integration: DevChat not only integrates a variety of mainstream large models, but also allows users to choose freely. For complex tasks, you can choose the powerful GPT-4 model, and for simple tasks, you can use lower-cost models like GPT-3.5 or Claude2. This enables DevChat to perform well in a variety of application scenarios.

  2. Precise context control: DevChat has precise context management capabilities, allowing users to seamlessly add any code snippet to the conversation. This means no more reliance on guesswork, but control is given back to the user, making programming smoother.

  3. Prompt word catalog: DevChat provides a simple and extensible prompt word catalog, allowing users to customize their needs to meet the requirements of the team and individuals. This flexibility is very helpful for different development scenarios.

  4. Prompt template management: It also provides flexible prompt template management and supports the ask-code function, which can answer various questions in the code base and reduce the burden on developers.

  5. Enterprise-level data security: DevChat is integrated with Microsoft Azure services to ensure data security, making it a trustworthy enterprise-level tool.

Summary

DevChat is a powerful AI programming assistant that provides developers with an excellent programming experience. Its multi-model integration, context control, prompt word directory, prompt template management and other functions make it useful in different scenarios. For developers, it is an excellent tool to improve programming efficiency. And recently, this plug-in is free to use. If you are worried about Bishe recently, come and give it a try!