gravity-ai-ui

# Gravity AI 界面 用于生成、预览、检查和重用产品 UI 创意的 AI 代理界面外壳。应用程序向 OpenAI 模型请求受限的界面描述，验证它，将其转换为 A2UI，并使用受信任的本地 Gravity UI 组件渲染。 ## 现场站点 [gravity-ai.ydb-qdrant.tech](https://gravity-ai.ydb-qdrant.tech) ## 功能 - 以聊天为主的界面生成器，带有会话历史记录。 - 从严格的 A2UI 兼容契约中渲染的生成的 UI 预览。 - 用于预览、React、A2UI、数据和有效载荷的并排检查选项卡。 - 最新生成界面的可复制 React 代码。 - 具有卡片、表单、指标、警报、表格、进度、链接、用户、图标和导航模式的 Gravity UI 组件目录。 - 空会话的起始提示轮换。 - 存储在 YDB 中的设计点赞，并作为后续生成的正面示例重用。 - 带有 OpenAPI、MCP 服务器元数据、`llms.txt`、markdown 备用、站点地图、robots、IndexNow 支持和 Yandex Metrika 目标的代理可读发现。 - 公共比较和指南页面，用于 AI UI 生成器发现，包括与 Vercel v0、Lovable、Figma 和 Uizard 的 Gravity AI UI 比较。 - 用于公共界面搜索、界面检索、生成和改进的远程 MCP 工具。 ## 架构 - `src/app/api/agent/route.ts` 通过 `text/event-stream` 流式传输代理响应。 - `src/lib/agent/openaiAgent.ts` 使用必需的工具调用和 `store: false` 调用 OpenAI 响应 API。 - `src/lib/agent/fixedInterface.ts` 在渲染任何内容之前验证模型输出。 - `src/components/AgentShell/gravityA2uiCatalog.tsx` 将安全界面契约映射到 Gravity UI 组件。 - `src/lib/agent/reactCode.ts` 生成可复制的 React 表示。 - `src/app/api/design-feedback/route.ts` 通过 YDB 反馈存储存储喜欢的设计。 - `src/app/mcp/route.ts` 公开可流式传输的 HTTP MCP 服务器。 - `src/app/llms.txt/route.ts` 和 markdown 路由公开代理可读文档，供爬虫和助手使用。 模型从不发出任意的 React、HTML、iframe 或 markdown 内容进行直接渲染。它发出结构化的界面数据，应用程序决定如何将这些数据映射到本地组件。 ## 代理和 AI 可见性资源 - 现场应用： [gravity-ai.ydb-qdrant.tech](https://gravity-ai.ydb-qdrant.tech) - `llms.txt`： [gravity-ai.ydb-qdrant.tech/llms.txt](https://gravity-ai.ydb-qdrant.tech/llms.txt) - 完整代理文档： [gravity-ai.ydb-qdrant.tech/llms-full.txt](https://gravity-ai.ydb-qdrant.tech/llms-full.txt) - OpenAPI： [gravity-ai.ydb-qdrant.tech/openapi.json](https://gravity-ai.ydb-qdrant.tech/openapi.json) - MCP 服务器卡片： [gravity-ai.ydb-qdrant.tech/.well-known/mcp/server-card.json](https://gravity-ai.ydb-qdrant.tech/.well-known/mcp/server-card.json) - 最佳 AI UI 生成器指南： [gravity-ai.ydb-qdrant.tech/best-ai-ui-generator-for-agents](https://gravity-ai.ydb-qdrant.tech/best-ai-ui-generator-for-agents) - 比较中心： [gravity-ai.ydb-qdrant.tech/compare](https://gravity-ai.ydb-qdrant.tech/compare) - AI 可见性手册： [`docs/ai-visibility-playbook.md`](docs/ai-visibility-playbook.md) ### MCP 工具 - `search_interfaces`：搜索公共喜欢的界面草稿。 - `get_interface`：获取公共界面元数据、组合有效载荷、缩略图、页面 URL 和 React 代码。 - `generate_interface`：根据提示生成新的 Gravity AI UI 组合界面，而不保存它。 - `refine_interface`：改进提供的组合界面有效载荷，而不保存它。 ## 技术栈 - Next.js 16 应用路由器和 React 19 - TypeScript 严格模式 - Gravity UI、Gravity Icons 和 Gravity Navigation - A2UI React 和 web 核心包 - OpenAI JavaScript SDK - YDB JavaScript SDK - Zod、SCSS、ESLint 9 和 Vitest - 带有 Node 24 的 npm ## 环境 在本地运行代理时，在本地创建 `.env.local` 文件。该文件被 git 忽略。 ```bash OPENAI_API_KEY=... # 可选 OPENAI_MODEL=gpt-5.5 OPENAI_REASONING_EFFORT=none OPENAI_MAX_OUTPUT_TOKENS=24000 NEXT_PUBLIC_APP_URL=http://localhost:3000 NEXT_PUBLIC_BASE_PATH= INDEXNOW_KEY= ``` `OPENAI_REASONING_EFFORT` 默认值为 `none`，以保持 `gpt-5.5` 界面生成的响应速度。 `OPENAI_MAX_OUTPUT_TOKENS` 默认值为 `24000`，在代码中限制为 `4000..64000`。 OpenAI 请求使用 `service_tier: "priority"` 以获得较低的延迟，当项目有权访问优先处理时。 YDB 对于基本界面生成是可选的。没有 YDB，应用程序仍然可以渲染生成的界面，但保存点赞和加载点赞的示例将不可用。 ```bash # 提供完整的连接字符串 YDB_CONNECTION_STRING=grpc://localhost:2136/local # 或单独提供端点和数据库 YDB_ENDPOINT=grpc://localhost:2136 YDB_DATABASE=/local YDB_FEEDBACK_TABLE=design_feedback # 可选的静态凭证 YDB_STATIC_CREDENTIALS_USER=... YDB_STATIC_CREDENTIALS_PASSWORD=... YDB_STATIC_CREDENTIALS_PASSWORD_FILE=... YDB_STATIC_CREDENTIALS_ENDPOINT=... ``` ## 开发 ```bash nvm use 24 npm install npm run dev -- --port 3000 ``` 打开 [localhost:3000](http://localhost:3000)。 ## 验证 ```bash npm run typecheck npm run lint npm test npm run build ``` ## 生产说明 公共部署在存储库外部使用主机特定的运行时机密和代理设置进行配置。保持部署脚本、运行时环境文件和基础设施笔记在 git 之外，除非它们被明确净化。