我正在参加「豆包MarsCode初体验」征文活动豆包MarsCode体验官-｛玩转AI｝开启智能编程之旅，拿手机大奖 - 掘金 (juejin.cn)

前言

6月中旬某个下午，正在冲击三级作者的我刚刚发布完自己的文章，突然在掘金看到这样一条消息：

身为一个正在学习的大学生，看到这条推荐，我脑子里只有几个关键字

豆包？！字节旗下，国内著名大模型之一！

编码？！跟代码有关？！

还是智能编码？！

难道说？本大学生还没毕业马上就可以不用写代码编程了！！！

定好闹钟，并在一周时间内复习，哦不，预习完所有课程，稳稳拿下期末考试后

6.26下午四点，我准时蹲点在掘金，豆包MarsCode发布会直播间

我对那��什么抽奖啊，T恤，一点兴趣都没有，眼中只有这豆包MarsCode（狗头）

正文

近两年，国内外AI热潮掀起，关于AI的产品没有一万也有九千了

字节作为国内互联网领头者之一，这AI IDE的产品也是让很多程序员激动。

待到发布会结束，等到产品上线，我已经迫不及待想上手了

会是一代软件开发新范式吗？

进入官网

云端工作平台这几年十分火热，得益于以下几点

强大的协作性：云IDE允许开发者在云平台上共享代码和资源，支持实时协作，这对于分布式团队和远程工作尤其有利，可以显著提升团队的开发效率。
便利性：开发者不需要在本地机器上安装和配置复杂的开发工具或库，所有的开发环境都存在于云端，只需通过网络浏览器即可访问和开始编码，降低了开发的门槛和环境配置的复杂度。
跨平台兼容性：不论开发者使用的是哪种操作系统，都能通过浏览器访问同一款云IDE进行代码开发，消除了因操作系统差异造成的开发环境不一致的问题。
安全性和可恢复性：云IDE可以实时保存开发者的工作进度并备份在云端，确保数据的安全，即使本地设备发生故障，也能快速恢复工作环境和代码。
高可用性和容灾能力：公有云通常提供高可用机制，这意味着即便某个数据中心发生故障，云IDE服务仍能通过其他数据中心继续运行，减少服务中断的风险。
灵活的资源分配：开发者可以根据需求动态调整计算资源，例如CPU和内存，对于处理大量数据或执行密集型任务特别有用。
成本效益：对于偶尔使用或小规模项目，云IDE可能比维护自己的硬件和软件环境更经济，因为它通常按需付费，避免了前期的资本支出。
易于升级和更新：云IDE的更新和维护由提供商负责，用户可以自动获得最新版本的功能和修复，无需手动升级。
随时随地访问：只要有互联网连接，开发者可以从任何地点访问他们的项目和代码，增强了工作灵活性。

像微软公司现在也在大力推广他们的云端Office。

既然我们要深度体验，我们就来写一个Vue和AI聊天的页面，看看如何吧

我们点击进入IDE来开始MarsCode之旅

映入眼帘的就是这三个选项

一个可以阅读MarsCode的使用文档，里面详细说明了MarsCode的一些注意事项

还有一个是通过模板创建新项目，里面的模板丰富，几乎是将当前开发中的大部分模板都覆盖了

emmm......但是身为一个正在学习Vue的大学生，只学过JS，MarsCode里面的Vue模板仅提供TS语言，我也仅能通过创建node项目再安装Vue脚手架来实现

最重磅的也是官方非常推荐的，从github中直接导入仓库，这个功能可以说是一大便利了，后续也希望能够推出从gitee中导入仓库

那我就先创建一个node项目试试水吧

点击node，我们直接创建一个node项目

一个非常标准的IDE呈现在眼前

左侧是文件列表，右侧是豆包AI聊天页面，可以随时问他一些问题，还可以通过选中所写代码来让他解释

我们先初始化一下我们这个Vue项目，使用命令npm init vite来构建

与在本地IDE开发一样，命令的使用也是通用的，因为使用的是node模板，所以整个项目也是在node环境下的，node中内置的包也都能够正常下载安装

我们在云端IDE中下载的包也是存在云端的，并不会影响自己电脑的内存

我们启动它试试`npm run dev`

大家都知道，Vue项目运行会分配一个本地的端口：5173,

但是因为是云端IDE，每一个项目其实都在这个IDE的服务器内，而服务器会给每一个项目分配一个URL，所以当运行这个项目时，MarsCode会告诉你这个URL的地址并能外部访问

老板就可以随时看着你工作辣！

同时MarsCode提供一个WebView随时看网页的效果

我们先来写点东西

先来试试路由

手一滑，打漏了一个install，但是旁边亮起了一个什么玩意

点一下

旁边的AI对话框自动弹出，并跟你解释为什么出错

还真是不错，不需要再复制粘贴到网页端的大模型去问了

我们接着来引入路由

你说我们都AI编程了，这种简单的东西还需要自己写吗？

我们直接全选代码Ctrl+I,召唤神器！

这样一个代码内的AI对话框就出来了

使唤它！

它就自动生成一份代码并帮你去重，你只需点一下那个小小的Yes就能修��代码

然后我们再自己完成一下App.vue的编写

再懒惰的使用MarsCode编写路由文件，因为MarsCode会访问该项目内的其他文件来帮助它理解你想要代码，所以你的代码要是想要精准，提示词需要更加精确，文件名也要写的更加语义化

我想要在该项目中引入tailwind.css这个样式库

在原来，我可能需要去查看官方文档，而现在，我只需要点开左侧的聊天框，问他

而MarsCode也知道哪一项是命令，在右上角放了一个Run，当你点击它

连复制粘贴的步骤都不需要了！

它来帮你复制，你只需要回车就行了，就差把饭喂你嘴里了

当然了，它的代码生成功能现在也并不是一个完全体，也仅仅能够生成简单的块级元素，无法制作更加精美的样式

现在也无法像ChatGPT一样能够上传图片生成代码，但是我相信会有那么一天的，直接上传设计图片交给AI，AI直接生成页面，这个目标应该不久之后就能实现了。

剩下的内容就要交给我们自己编写了

代码在末尾自取哦

总结

MarsCode作为一款云端IDE，确实是给程序员带来了很多便利，但是我也仍然发现了很多bug和设计不合理存在。

但是毕竟现在生成式模型现在仍然发展不成熟，其生成的内容也会根据提示词的略微不同而会发生很大变化，人类在进步，大模型也在进步。

不可置否的是，MarsCode的代码补全、代码生成、代码debug技能已经比某A字旗下的AI代码工具强了，我也非常期待MarsCode能够在未来做出更多更大的更新，拥抱新时代。

附件

Home.vue 复制代码

<template>
    <div class="flex flex-col h-screen">
        <div class="flex flex-nowrap fixed w-full items-baseline
        top-0 px-6 py-4 bg-gray-100">
            <div class="text-2xl font-bold">
                ChatGPT
            </div>
            <div class="ml-4 text-sm text-gray-500">
                基于OpenAI的ChatGPT自然语言模型人工智能对话
            </div>
            <div class="ml-auto px-3 py-2 text-sm cursor-pointer hover:bg-white rounded-md" @click="clickConfig()">
                设置
            </div>
        </div>
        <div class="flex-1 mx-2 mt-20 mb-2">
            <div v-for="item of messageList.filter((v) => v.role != 'system')" :class="[
                'group flex flex-col px-2 py-3 my-5 rounded-lg',
                item.role === 'AI' ? 'bg-green-100' : '',
                'border border-gray-300'
            ]">
                <div class="flex justify-between item-center mb-2 ml-1">
                    <div class="text-xl">
                        {{ item.role }}:
                    </div>
                    <div class="ml-5 text-m">
                        {{ item.content }}
                    </div>
                </div>

            </div>

        </div>
        <div class="flex-1"></div>
        <div class="sticky bottom-0 w-full p-6 pb-8 bg-gray-100">
            <div class="mb-2 text-sm text-gray-500" v-if="isConfig">
                请输入API KEY：
            </div>
            <div class="flex">
                <input v-model="messageContent" class="input flex-1" :type="isConfig ? 'password' : 'text'"
                    :placeholder="isConfig ? 'sk-xxxxxx' : '请输入'" @keydown.enter="sendOrSave()" />
                <button class="btn ml-4 p3 p2 rounded-md hover:bg-white hover:text-gray-500 " @click="sendOrSave()"
                    v-if="isConfig">保存</button>
                <button class="btn ml-4 p3 p2 rounded-md hover:bg-white hover:text-gray-500" :disabled="isTalking"
                    @click="sendOrSave()" v-if="!isConfig">发送</button>
            </div>
        </div>
    </div>

</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { chat } from '../libs/gpt'

onMounted(() => {
    if (getAPIKey()) {
        isConfig.value = false
    }
})

const isConfig = ref(true) // true api-key 设置 false 聊天
const messageContent = ref('')
const isTalking = ref(false) // llm 正在返回
const clickConfig = () => {
    isConfig.value = true
    messageContent.value = ''
}
const sendOrSave = () => {
    if (!messageContent.value.length) return;
    if (isConfig.value) {
        // save api-key
        if (saveAPIKey(messageContent.value.trim())) {
            isConfig.value = false
        }
        messageContent.value = ''

    } else {
        // send message
        sendMessage()
        messageContent.value = ''
    }
}

const messageList = ref([
    {
        role: 'system',
        content: "你是人工智能客服，请尽可能简洁回答问题"
    },
    {
        role: 'AI',
        content: `你好，我是AI语言模型，我可以提供一些常用服务和信息，例如：

1. 翻译：我可以把中文翻译成英文，英文翻译成中文，还有其他一些语言翻译，比如法语、日语、西班牙语等。

2. 咨询服务：如果你有任何问题需要咨询，例如健康、法律、投资等方面，我可以尽可能为你提供帮助。

3. 闲聊：如果你感到寂寞或无聊，我们可以聊一些有趣的话题，以减轻你的压力。

请告诉我你需要哪方面的帮助，我会根据你的需求给你提供相应的信息和建议。`
    }
])




const sendMessage = async () => {
    const message = messageContent.value.trim();
    try {
        isTalking.value = true

        messageList.value.push({
            role: '你',
            content: message
        })
        const data = await chat(messageList.value, getAPIKey())
        messageList.value.push({
            role: 'AI',
            content: data
        })

        messageContent.value = ''


    } catch (err) {

    } finally {
        isTalking.value = false
    }

}

const saveAPIKey = (apikey) => {
    localStorage.setItem('api-key', apikey)
    return true
}

const getAPIKey = () => {
    return localStorage.getItem('api-key')
}
</script>

<style lang="css" scoped></style>

gpt.js 复制代码

export const chat =async (messages,apikey) =>{
    try{
        const result = await fetch("https://api.302.ai/v1/chat/completions",{
            method:"POST",
            headers:{
                "Content-Type":"application/json",
                // 授权信息
                "Authorization":`Bearer ${apikey}`

            },
            body:JSON.stringify({
                model:"gpt-3.5-turbo",
                messages:messages
            })

            
        })
        const  data = await result.json()
        console.log(data);
        return data.choices[0].message.content
    }catch(err){
        throw(err)
    }
}

「豆包Marscode体验官」就差把饭喂嘴里了——智能云端IDE实战AI对话页面

前言

豆包？！ 字节旗下，国内著名大模型之一！

编码？！ 跟代码有关？！