好消息，好消息，前端可以使用免费的ai模型构建一个ai聊天会话了

前言

前往openrouter ai申请一个免费的 key，然后使用ew-chat我写的这个ai聊天，就可以完成一个聊天会话网页。

在线地址。

在线地址由于没有api\_key,所以询问问题会报错。

效果如下图所示:

聊天会话的数据都使用永久会话存储在本地，以下是这个聊天会话的详细功能介绍。

说明：这个项目是使用trae编辑器帮忙编写，然后本人再修补一些trae处理不了的问题完成的。

功能分析

这个聊天会话包含了多个功能。

1. 多语言切换
2. 主题切换，包含深色和浅色2种主题模式
3. 下载ai回答记录。
4. 可以刷新回答，也可以停止会话。
5. 上传文件并发送。
6. 新增会话，编辑会话名字，删除会话，清除历史会话等。
7. 内容渲染基于markdown，包含代码高亮，复制等功能。
8. 响应式网站。

技术栈

1. highlight.js来实现代码高亮
2. ew-message消息提示框插件
3. ew-responsive-store实现永久会话存储
4. marked来实现内容渲染

具体功能

具体功能如下图所示:

核心api原理

核心api请求主要是如下这一段代码。

const response = await fetch('https://openrouter.ai/api/v1/chat/completions', {
    method: 'POST',
    headers: {
                'Authorization': `Bearer ${API_KEY}`,
                'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        model: MODEL,
        messages: chats.value[chatId].messages.map(msg => ({
            role: msg.role,
            content: msg.content
        })),
        stream: true
    })
});

可以看到我们只要申请了key，就可以使用这个接口，然后得到ai回答的数据，我们通过fetch向openrouter ai发送请求就行了。

感兴趣的可以看看源码，自行下载下来体验吧。如果觉得有用，希望不吝啬点赞收藏并给个star。