前端 UI 组件的 AI 时代来了！！！

大厂技术  高级前端  Node进阶
点击上方 程序员成长指北，关注公众号
回复1，加入高级Node交流群

本文将教您如何构建一个AI驱动的前端UI组件生成器，它可以帮助您生成Next.js Tailwind CSS UI组件，并提供实现教程。我们将涵盖以下内容：

• 使用Next.js、TypeScript和Tailwind CSS构建UI组件生成器Web应用程序。

• 使用CopilotKit将AI功能集成到UI组件生成器中。

• 集成嵌入式代码编辑器，以对生成的代码进行更改。

前提条件

为了充分理解本教程，您需要对React或Next.js有基本的了解。以下是构建AI驱动的UI组件生成器所需的工具:

• Ace Code Editor - 一个使用JavaScript编写的可嵌入代码编辑器，具有与原生编辑器相匹配的功能和性能。。

• Langchain - 提供一个框架，使AI代理能够搜索网络并研究任何主题。

• OpenAI API - 提供一个API密钥，使您能够使用ChatGPT模型执行各种任务。

• Tavily AI - 一个搜索引擎，使AI代理能够在应用程序中进行研究并访问实时知识。。

• CopilotKit - 一个用于构建自定义AI聊天机器人、应用内AI代理和文本区域的开源协作框架。

项目设置和包安装

首先，在终端中运行下面的代码片段来创建一个Next.js应用程序：

npx create-next-app@latest aiuigenerator

接下来，安装Ace代码编辑器和Langchain包及其依赖项。

npm install react-ace @langchain/langgraph

最后，安装CopilotKit。这些包使我们能够从React状态中检索数据并将AI协同助手添加到应用程序中。

npm install @copilotkit/react-ui @copilotkit/react-textarea @copilotkit/react-core @copilotkit/backend

恭喜！您现在已经准备好构建一个由人工智能驱动的博客了。

构建UI组件生成器前端界面

在这个部分中，我将带您逐步完成创建UI组件生成器前端的过程，使用静态内容来定义生成器的用户界面。

首先，打开您的代码编辑器，前往/[root]/src/app目录，并创建一个名为components的文件夹。在components文件夹内，创建两个文件，分别命名为Header.tsx和CodeTutorial.tsx。

在Header.tsx文件中，添加以下代码，定义一个名为Header的函数组件，用于渲染生成器的导航栏。

"use client";
 
import Link from "next/link";
 
export default function Header() {
  return (
    <>
      <header className="flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-gray-800 border-b border-gray-200 text-sm py-3 sm:py-0 ">
        <nav
          className="relative max-w-7xl w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8"
          aria-label="Global">
          <div className="flex items-center justify-between">
            <Link
              className="w-full flex-none text-xl text-white font-semibold p-6"
              href="/"
              aria-label="Brand">
              AI-UI-Components-Generator
            </Link>
          </div>
        </nav>
      </header>
    </>
  );
}

在CodeTutorial.tsx文件中，添加以下代码，定义一个名为CodeTutorial的函数组件，用于渲染生成器的主页，显示生成的UI组件、嵌入式代码编辑器和生成的实现教程。

"use client";
 
import Markdown from "react-markdown";
import { useState } from "react";
import AceEditor from "react-ace";
import React from "react";
 
export default function CodeTutorial() {
  const [code, setCode] = useState<string[]>([
    `<h1 class="text-red-500">Hello World</h1>`,
  ]);
  const [codeToDisplay, setCodeToDisplay] = useState<string>(code[0] || "");
  const [codeTutorial, setCodeTutorial] = useState(``);
 
  function onChange(newCode: any) {
    setCodeToDisplay(newCode);
  }
 
  return (
    <>
      <main className=" min-h-screen px-4">
        <div className="w-full h-full min-h-[70vh] flex justify-between gap-x-1 ">
          <div className="w-2/3 min-h-[60vh] rounded-lg bg-white shadow-lg p-2 border mt-8 overflow-auto">
            <div
              className="w-full min-h-[60vh] rounded-lg"
              dangerouslySetInnerHTML={{ __html: codeToDisplay }}
            />
          </div>
          <AceEditor
            placeholder="Placeholder Text"
            mode="html"
            theme="monokai"
            name="blah2"
            className="w-[50%] min-h-[60vh] p-2 mt-8 rounded-lg"
            onChange={onChange}
            fontSize={14}
            lineHeight={19}
            showPrintMargin={true}
            showGutter={true}
            highlightActiveLine={true}
            value={codeToDisplay}
            setOptions={{
              enableBasicAutocompletion: true,
              enableLiveAutocompletion: true,
              enableSnippets: false,
              showLineNumbers: true,
              tabSize: 2,
            }}
          />
        </div>
        <div className="w-10/12 mx-auto">
          <div className="mt-8">
            <h1 className="text-white text-center text-xl font-semibold p-6">
              Code Tutorial
            </h1>
            {codeTutorial ? (
              <Markdown className="text-white">{codeTutorial}</Markdown>
            ) : (
              <div className="text-white">
                The Code Tutorial Will Appear Here
              </div>
            )}
          </div>
        </div>
      </main>
    </>
  );
}

接下来，进入/[root]/src/page.tsx文件，并添加以下代码，导入CodeTutorial和Header组件，并定义一个名为Home的函数组件。

import React from "react";
import Header from "./components/Header";
import CodeTutorial from "./components/CodeTutorial";
 
export default function Home() {
  return (
    <>
      <Header />
      <CodeTutorial />
    </>
  );
}

接下来，删除 globals.css 文件中的 CSS 代码，并添加以下 CSS 代码。

@tailwind base;
@tailwind components;
@tailwind utilities;
 
body {
  height: 100vh;
  background-color: rgb(16, 23, 42);
}
 
pre {
  margin: 1rem;
  padding: 1rem;
  border-radius: 10px;
  background-color: black;
  overflow: auto;
}
 
h2,
p {
  padding-bottom: 1rem;
  padding-top: 1rem;
}
 
code {
  margin-bottom: 2rem;
}

最后，在命令行中运行 npm run dev 命令，然后导航至 http://localhost:3000/。

现在您应该在浏览器上查看UI组件生成器的前端界面，如下所示：

使用 CopilotKit 将人工智能功能集成到组件生成器中

在这个部分，您将学习如何在UI组件生成器中添加一个AI copilot，使用CopilotKit生成UI组件代码和实现教程。

CopilotKit提供了前端和后端两个包。它们可以让您将React状态连接起来，并使用AI代理在后端处理应用程序数据。

首先，让我们将CopilotKit的React组件添加到博客前端。

将CopilotKit添加到博客前端

在这里，我将引导您完成将UI组件生成器与CopilotKit前端集成的过程，以促进UI组件代码和实现教程的生成。

首先，请使用以下代码片段，在 /[root]/src/app/components/CodeTutorial.tsx 文件的顶部导入 useMakeCopilotReadable 和 useCopilotAction自定义钩子。

import {
  useCopilotAction,
  useMakeCopilotReadable,
} from "@copilotkit/react-core";

在 CodeTutorial 函数内部，状态变量下面，添加以下代码，该代码使用 useMakeCopilotReadable 钩子(hook)来添加将作为应用内聊天机器人上下文的代码。该钩子使得代码对于copilot易于可读。

useMakeCopilotReadable(codeToDisplay);

在上述代码下方，添加以下代码，该代码使用useCopilotAction钩子来设置一个名为generateCodeAndImplementationTutorial的动作，该动作将启用生成UI组件代码和实现教程的功能。

该动作接收两个参数，分别名为code和tutorial，用于生成UI组件代码和实现教程。

该动作包含一个处理函数，该函数根据给定的提示生成UI组件代码和实现教程。

在处理函数内部，codeToDisplay状态被更新为新生成的代码，而codeTutorial状态被更新为新生成的教程，如下所示。

useCopilotAction(
    {
      name: "generateCodeAndImplementationTutorial",
      description:
        "Create Code Snippet with React.js(Next.js), tailwindcss and an implementation tutorial of the code generated.",
      parameters: [
        {
          name: "code",
          type: "string",
          description: "Code to be generated",
          required: true,
        },
        {
          name: "tutorial",
          type: "string",
          description:
            "Markdown of step by step guide tutorial on how to use the generated code accompanied with the code. Include introduction, prerequisites and what happens at every step accompanied with code generated earlier. Don't forget to add how to render the code on browser.",
          required: true,
        },
      ],
      handler: async ({ code, tutorial }) => {
        setCode((prev) => [...prev, code]);
        setCodeToDisplay(code);
        setCodeTutorial(tutorial);
      },
    },
    [codeToDisplay, codeTutorial]
  );

接下来，进入/[root]/src/app/page.tsx文件，并在顶部使用以下代码导入CopilotKit前端包和样式。

import { CopilotKit } from "@copilotkit/react-core";
  import { CopilotSidebar } from "@copilotkit/react-ui";
  import "@copilotkit/react-ui/styles.css";

然后，使用CopilotKit来包裹CopilotSidebar和CodeTutorial组件，如下所示。CopilotKit组件指定了CopilotKit后端端点的URL（/api/copilotkit/），而CopilotSidebar渲染了应用内聊天机器人，你可以通过它给出提示来生成UI组件代码和实现教程。

export default function Home() {
  return (
    <>
      <Header />
      <CopilotKit url="/api/copilotkit">
        <CopilotSidebar
          instructions="Help the user generate code. Ask the user if to generate its tutorial."
          defaultOpen={true}
          labels={{
            title: "Code & Tutorial Generator",
            initial: "Hi! 
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/黑客灵魂/article/detail/872612
推荐阅读
articlecocos2dx 3.x for lua "异步加载"实现过程...
在lua中，cocos2dx 建立的栈只能被一个线程（主线程）访问，如果在c＋＋建立子线程，然后通过c++调用lua回调...
                
                    赞
踩
articlePython机器学习算法入门指南(全)，Python框架django项目_python机器算法...
书籍的好处就在于权威和体系健全，刚开始学习的时候你可以只看视频或者听某个人讲课，但等你学完之后，你觉得你掌握了，这时候建...
                
                    赞
踩
article关于清除swap分区的问题_运行中的主机可以清理swap么...
一、场景：服务器运行应用过多，可用的系统内存不足时，数据会交换至swap分区，引起系统的卡顿，反应很慢。后续关掉了应用，...
                
                    赞
踩
articleMQTT从入门到放弃_mqttcallbackextended...
mqtt_mqttcallbackextendedmqttcallbackextended               ...
                
                    赞
踩
article【数据结构】树的基本知识点_数据结构中的树的考点...
文章目录前言一、基本概念1.1 树的基本概念1.2 二叉树二、树的基本操作2.1 数的存储结构2.2 树的增删改查2.3...
                
                    赞
踩
articleMYSQL5.6主从配置_一般不用root帐号,注:“%”表示所有客户端都可能连,只要帐号,密码正确...
本人按此教程 Mysql5.6主从热备配置 配置成功，由于原文无法转载，所以在这里简单总结以供以后参考。为了方便，用字母...
                
                    赞
踩
articleCSS制作一个卡通头像（笔记）_用css3来实现一个完整的卡通形象...