前几天试了一下用ai编程工具，开发了前后端分离的工程。感觉在前端上花费的工作还是比较多的，联调有些费劲。

如果能直接用低代码开发工具，通过简单的配置把前端关键逻辑开发好，然后在网页里面嵌入这个现成的界面，应该能省下不少时间。这两天研究了一下扣子的AI应用，想看一下能不能满足我要求。

虽然最后失败了，但还是分享一下探索的过程，希望对其他感兴趣的朋友有用。

先说一下我要开发的功能：一个小说改写工具，用户输入男女主角和小说名称，让大模型按用户要求改写故事。

这个功能后台倒比较简单，设计一个提示词，加上几行样板python代码调用大模型就行了，但还需要一个前端界面。

如果让ai生成界面，然后再做前后端联调，估计又要折腾一段时间。所以我想能不能偷懒直接用扣子AI应用的界面。于是去研究了一下扣子AI应用开发。

创建AI应用的入口和创建智能体的入口差不多，都是在工作空间里面点创建按钮，只是最后选择的是右边的应用而不是左边的智能体。

创建应用入口

参考文章：释放创造力的门钥匙：探索免费AI写作工具的无限可能-让灵犀AI写作变得轻松又有趣

点击进去能看到很多模板，我选择了一个跟我目标界面样式最相近的模板。

应用模板

参考文章：AI写作助手大揭秘-如何利用AI提升你的写作效率与质量

进来后可以看到有两个编辑区，一个是用户界面，一个是业务逻辑。业务逻辑其实就是工作流，跟普通智能体的工作流是一样的。我这里重点介绍一下用户界面这块编辑区。

用户界面编辑区

界面这里有三个页面，先试一下界面运行效果，看看他们是什么关系。点击右上角的预览。可以看到出来的先弹出中间页面，然后点击界面的两个卡片，分别可以进入不同的写作助手界面。

首页

点击左边卡片出来的界面

点击右边卡片出来的界面

左边的界面比较适合我需求，所以重点研究一下左边界面。首先要研究的是为什么首页是中间的页面，是根据什么配置决定的。是界面顺序，还是界面文字（名字叫主页）还是其他什么呢。

经过我折腾几次试验，最终发现，原来是左边的结构标签，点击后可以设置首页。由于我要的界面只是左边界面，所以修改一下，把左边界面改个名，然后顺便设置为首页。

然后要研究的是，这个界面的交互。主要要搞清楚的地方有三个，一是点击按钮后按钮变灰，是怎么实现的。二是怎么调用大模型的。三是拿到结果后，怎么输出到右边文本框的。

先研究左边的按钮，看它的配置。

打开配置，很容易就发现禁用功能，是利用工作流的状态属性来控制的。配置界面提供了地方让人写代码，语法看着像是python的引用变量。调用大模型则是在事件那里，可以选择点击时调用哪个工作流。

并且在调用工作流这里，还可以配置传给工作流的参数取值逻辑。

不过没看到将输出填到文本框的逻辑，再继续看看文本框有什么配置。

点开文本框，可以看到里面配置了内容取值。那界面基本就明白了。再看看工作流，是怎么配置的。

试运行结果

大模型配置

看到这里，基本明白了。用户在界面上填的内容，会做为变量传入给工作流，并到最后拼装成大模型的提示词。

于是我按着这个逻辑，修改了一下界面和工作流。

我的界面

我的工作流

提示词

# 角色：小说改写作家
你擅长根据用户需求重新改写经典小说，如果有必要，你可以使用bingWebSearch搜索小说相关信息，包括作者信息，男女主角介绍，作者写作风格，故事内容等。


## 核心任务
将经典小说{{xiaoshuoming}}改编，把原男主角名字改为「{{nanzhujue}}」、原女主角名字改为「{{nvzhujue}}」，同时需满足：
1. 严格替换所有主角相关姓名/称谓
2. 保留故事经典场景与经典对白
3. 不要遗漏经典人物台词
4. 保留原来故事大纲不要改动，只改名字
5. 注意不要提到原来主角名称
6. 情节忠于原著
7.与主角相关人物姓名也需要随之做必要调整，例如父亲兄弟需要与新主角同一姓氏
8.改写后全文不超过5000字，只保留必要情节和经典场景与经典对白
9.{{qita}}

## 风格要求
1. 保持故事完整
2. 场景衔接自然
3. 保留原著文字风格
4. 不要只做场景堆砌，行文要流畅
5. 要求故事分章节，注意章节之间情节过渡，要像小说，而不是散文
6. 输出的故事情节要完整，让没读过原著的人也能看懂
7. 章节之间的情节要连贯
8.输出要完整，不要只输出一半

## 注意
不要生成无关内容。

注意提示词是这一整个开发中最复杂的，因为大模型的行为很难预测，只能通过不断调整提示词，才能找到满意的效果。不过在扣子进行工作流调试是要消耗资源点数的，一天只有免费的500点，一次运行大概要50点左右。所以提示词最好先自己在豆包或者元宝上调试过了再来扣子整体联调。

这里我在原来的大模型工作流后面增加了一个文字编辑的节点，因为我发现实际调试时，经常会输出到一半，变量被载断的情况。调整了好久，发现经常在输出两千多个字节后就自动停了，故事写到一半。我猜测是豆包工具调用这个模型有bug，所以后面加了另一个大模型，让它对输出结果进行校验补充。

这里再介绍几个容易踩坑的地方：

结束节点，这里注意不要随意切换返回变量和返回文本选项，会影响最后文本框输出格式。这里切换时没提示，我开始不知道会影响结果。

大模型有时并不能理解用户输入的小说内容是什么会瞎编，所以最好引入bingWebSearch插件，并且在提示词中明确告诉它可以使用bingWebSearch。

不同大模型对于同样的提示词，响应的内容质量差别比较大。建议做文本处理，还是用deepseek好一些。

还有界面这里的markdown文本框，需要修改高度和溢出显示选项，不然输出的内容多了，没法看到溢出内容。

如果一个按钮同时触发多个工作流，在禁用那里，要同时判断两个工作流的loading，因为两个工作流运行耗时不同，经常会出现一个跑完另一个还在等的情况。

完整效果见这里：
https://www.coze.cn/store/project/7502802186326327359?bid=6g81rnhig9g09

界面写完，发布才是重点。我的目标是在我自己的网页上嵌入这个界面，查了帮助文档，总是找不到介绍。可以选择发布到API，但API看起来又只能在后台调用。

唯一比较像的是chatSDk，于是按要求创建了一个会话流并发布到chatSDK，并写了一个网页加载sdk。

    
    
    


    
欢迎使用智能体
    
点击右下角图标开始对话

    
	
    
    
    // 方法1: 使用DOMContentLoaded事件
        document.addEventListener('DOMContentLoaded', function() {
            // 在这里编写文档就绪后要执行的代码
            initAgent();
        });
        
        function initAgent() {
        	try {
	            new CozeWebSDK.WebChatClient({
	                "config": {
	                    "type": "app",
	                    "appInfo": {
	                        "appId": "7502361792816218127",
	                        "workflowId": "7502817585072701455"
	                    }
	                },
	                "auth": {
	                    "type": "token",
	                    "token": "pat_xxxx", //这里需要换成在扣子申请的apikey
	                    onRefreshToken: function () {
	                        return "pat_xxxx"
	                    }
	                }
	            });
            } catch (error) {
	            console.error('SDK初始化失败:', error);
	            alert('智能体服务暂时不可用，请稍后再试');
            }
        }    
    

但最终出来的效果是这样的

只是一个简单的聊天界面，没有我之前画的AI应用界面。问了一下周围人，也没找到有人试过把扣子应用的界面嵌入到网页的。应该是我自己想多了，只能放弃这条路了。还是要花时间把ai应用的前端脚手架搞起来才行。

就分享到这，如果大家有谁能把扣子的应用界面嵌入到自己网页的，欢迎在评论区分享。