推荐我做的开源项目：前端组件生成器
直接用自然语言生成可运行的完整前端组件！告别查组件文档手搓卡片的过去🤣对我这种前端小白不要太友好
GitHub: github.com
✨描述你的需求生成代码，复制进你的nextjs项目即可！（需要OpenAI apikey）

✨技术栈
- 基于shadcn组件库生成
- 用langgraph搭建的agent
- streamlit实现交互
- shadcn 官方文档进行了数据预处理

✨为什么做这个？
Shadcn组件库我很喜欢，但构建一个特定需求的组件工作流：查文档 -> 复制粘贴 -> 改代码 -> 查文档 的流程完全可以自动化。不想做重复劳动！但GPT不能直接生成shadcn代码因为它没学过（或者说不太会）

✨Agent工作流
用langgraph搭建了四个步骤
- 选择：根据shadcn官方文档和用户问题选择需要的组件
- 大纲：根据选择组件的文档和用户问题生成前端页面大纲
- 写代码：生成代码
- 精炼：重新调整一遍代码（必不可少，因为实测发现第三步直接写的不太行）

✨原理很简单
就是读文档，用文档相关的组件写代码。基本能实现不报错直接复制运行！没有使用vector database因为觉得语义不准确，直接用GPT 3.5做路由更简单。

✨整个测试流程还用了dspy，要是有兴趣，可以再展开讲讲数据处理和原型搭建。

现在还是初步demo阶段，不知道有啥想法没！
之后可能想做的是加上图片输入格式。

下一条经验分享：m.okjike.com