专栏名称: 前端大全

分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

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

前端大全 · 公众号 · · 2024-06-06 11:50

正文


本文译者为 360 奇舞团前端开发工程师 
原文作者：Bonnie 
原文地址：
https://dev.to/tcms/ai-powered-frontend-ui-components-generator-nextjs-gpt4-langchain-copilotkit-1hac

本文将教您如何构建一个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

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([
    `Hello World
`,
  ]);
  const [codeToDisplay, setCodeToDisplay] = useState(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! 👋 I can help you generate code and its tutorial.",
          }}>
          <CodeTutorial />
        CopilotSidebar>
      CopilotKit>
    >
  );
}

接下来，运行开发服务器并在浏览器中导航到http://localhost:3000。你应该会看到应用内聊天机器人已经被集成到了UI组件生成器中。

将CopilotKit后端添加到博客

在这里，我将引导您完成将UI组件生成器与CopilotKit后端集成的过程，该后端负责处理来自前端的请求，并提供函数调用以及各种大型语言模型（LLM）后端，例如GPT。

此外，我们还将集成一个名为Tavily的AI agent，它能够在网上研究任何主题。