如何利用OpenAI Apps SDK UI构建响应式ChatGPT应用界面

【免费下载链接】apps-sdk-ui 项目地址: https://gitcode.com/gh_mirrors/ap/apps-sdk-ui

OpenAI Apps SDK UI是一个轻量级、可访问的设计系统，专为使用Apps SDK构建高质量ChatGPT应用而设计。它提供了与Tailwind集成的设计令牌、精选的React组件库以及为ChatGPT内部一致体验优化的实用工具。无论你是开发新手还是有经验的开发者，这个工具都能帮助你快速构建出专业且响应式的ChatGPT应用界面。

🚀 核心功能亮点

Apps SDK UI为ChatGPT应用开发带来了诸多强大功能，让你的开发过程更加高效和愉悦：

• 设计令牌：涵盖颜色、排版、间距、尺寸、阴影、表面等多种设计元素，确保界面风格统一
• Tailwind 4集成：预先配置了Apps SDK UI的设计令牌，无需额外设置即可使用
• 无障碍组件：基于Radix原语构建，具有一致的样式，确保应用对所有用户友好
• 实用工具：提供暗模式、响应式布局和ChatGPT优化行为的相关工具
• 最小化样板代码：只需导入样式，用提供者包装，即可开始构建应用

📋 准备工作

在开始使用Apps SDK UI之前，请确保你的开发环境满足以下要求：

• React 18或19：你可以从React官方网站获取安装指南
• Tailwind 4：安装方法请参考Tailwind CSS官方文档

🔧 快速安装步骤

1. 安装包

首先，使用npm安装Apps SDK UI包：

npm install @openai/apps-sdk-ui

2. 设置样式

将基础样式和Tailwind层添加到全局样式表（例如main.css）的顶部：

@import "tailwindcss";
@import "@openai/apps-sdk-ui/css";
/* 确保Tailwind能够找到Apps SDK UI组件中的类引用 */
@source "../node_modules/@openai/apps-sdk-ui";

/* 你的应用程序其他CSS */

然后在渲染任何组件之前导入样式表：

// 必须首先导入，以确保Tailwind层和样式基础在任何潜在的组件样式之前定义
import "./main.css"

import { StrictMode } from "react"
import { createRoot } from "react-dom/client"
import { App } from "./App"

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

3. 配置路由器（可选）

<AppsSDKUIProvider>有助于定义默认的路由器链接组件，用于<TextLink>和<ButtonLink>等组件中。

这个提供者是可选的 - 也可以通过as属性将路由器链接直接传递给组件。

// 必须首先导入，以确保Tailwind层和样式基础在组件样式之前定义
import "./main.css"

import { AppsSDKUIProvider } from "@openai/apps-sdk-ui/components/AppsSDKUIProvider"
import { StrictMode } from "react"
import { createRoot } from "react-dom/client"
import { Link } from "react-router"
import { App } from "./App"

declare global {
  interface AppsSDKUIConfig {
    LinkComponent: typeof Link
  }
}

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <AppsSDKUIProvider linkComponent={Link}>
      <App />
    </AppsSDKUIProvider>
  </StrictMode>,
)

💡 开始构建你的应用

现在你的项目已经准备好使用Apps SDK UI了！下面是一个简单的预订卡示例，展示了如何使用Tailwind类和组件：

import { Badge } from "@openai/apps-sdk-ui/components/Badge"
import { Button } from "@openai/apps-sdk-ui/components/Button"
import { Calendar, Invoice, Maps, Members, Phone } from "@openai/apps-sdk-ui/components/Icon"

export function ReservationCard() {
  return (
    <div className="w-full max-w-sm rounded-2xl border border-default bg-surface shadow-lg p-4">
      <div className="flex items-start justify-between gap-3">
        <div>
          <p className="text-secondary text-sm">Reservation</p>
          <h2 className="mt-1 heading-lg">La Luna Bistro</h2>
        </div>
        <Badge color="success">Confirmed</Badge>
      </div>
      <div>
        <dl className="mt-4 grid grid-cols-[auto_1fr] gap-x-3 gap-y-2 text-sm">
          <dt className="flex items-center gap-1.5 font-medium text-secondary">
            <Calendar className="size-4" />
            Date
          </dt>
          <dd className="text-right">Apr 12 · 7:30 PM</dd>
          <dt className="flex items-center gap-1.5 font-medium text-secondary">
            <Members className="size-4" />
            Guests
          </dt>
          <dd className="text-right">Party of 2</dd>
          <dt className="flex items-center gap-1.5 font-medium text-secondary">
            <Invoice className="size-4" />
            Reference
          </dt>
          <dd className="text-right uppercase">4F9Q2K</dd>
        </dl>
      </div>
      <div className="mt-4 grid gap-3 border-t border-subtle pt-4 sm:grid-cols-2">
        <Button variant="soft" color="secondary" block>
          <Phone />
          Call
        </Button>
        <Button color="primary" block>
          <Maps />
          Directions
        </Button>
      </div>
    </div>
  )
}

📚 探索更多组件和功能

Apps SDK UI提供了丰富的组件库，你可以在项目的src/components/目录下找到它们。一些主要组件包括：

• Alert：用于显示重要信息和通知
• Avatar：用户头像展示组件
• Button：多种样式和功能的按钮组件
• Checkbox：复选框组件
• DatePicker：日期选择器
• Input：文本输入框
• Markdown：Markdown渲染组件
• Menu：菜单组件
• Select：下拉选择组件
• Tooltip：工具提示组件

每个组件都有对应的文档和示例，你可以在组件目录中找到.mdx文件（如src/components/Button/Button.mdx）了解更多使用方法。

🎨 设计和样式

Apps SDK UI包含丰富的设计资源，你可以在src/styles/目录下找到：

• 基础样式：base.css
• 全局样式：globals.css
• Tailwind工具类：tailwind-utilities.css
• 组件变量：variables-components.css
• 基本变量：variables-primitive.css
• 语义变量：variables-semantic.css

这些样式文件定义了统一的设计语言，确保你的应用在ChatGPT环境中具有一致的外观和感觉。

📝 总结

通过使用OpenAI Apps SDK UI，你可以快速构建出响应式、美观且功能丰富的ChatGPT应用界面。它提供了完整的设计系统和组件库，让你能够专注于应用的核心功能，而不必担心UI的一致性和可用性。无论你是开发新手还是经验丰富的开发者，Apps SDK UI都能帮助你提升开发效率，创建出专业级别的ChatGPT应用。

现在就开始使用Apps SDK UI，释放你的创造力，构建令人惊叹的ChatGPT应用吧！

【免费下载链接】apps-sdk-ui 项目地址: https://gitcode.com/gh_mirrors/ap/apps-sdk-ui