![\"Ant](\"https:\/\/www.kdjingpai.com\/wp-content\/uploads\/2024\/11\/593f2c93ca482cc.png\" "\\"Ant")
\u6f14\u793a\u5730\u5740\uff1ahttps:\/\/x.ant.design\/docs\/playground\/independent-cn<\/p><\/div>\n
<\/p>\n
\u529f\u80fd\u5217\u8868<\/h2>\n\n- \u7075\u6d3b\u591a\u6837\u7684\u539f\u5b50\u7ec4\u4ef6<\/strong>\uff1a\u8986\u76d6\u5927\u591a\u6570 AI \u5bf9\u8bdd\u573a\u666f\uff0c\u5e2e\u52a9\u5feb\u901f\u6784\u5efa\u4e2a\u6027\u5316\u7684 AI \u4ea4\u4e92\u754c\u9762\u3002<\/li>\n
- \u5f00\u7bb1\u5373\u7528\u7684\u6a21\u578b\u96c6\u6210<\/strong>\uff1a\u8f7b\u677e\u8fde\u63a5\u7b26\u5408 OpenAI \u6807\u51c6\u7684\u63a8\u7406\u670d\u52a1\u3002<\/li>\n
- \u9ad8\u6548\u7684\u6570\u636e\u6d41\u7ba1\u7406<\/strong>\uff1a\u63d0\u4f9b\u5f3a\u5927\u7684\u5de5\u5177\u6765\u7ba1\u7406\u6570\u636e\u6d41\uff0c\u63d0\u5347\u5f00\u53d1\u6548\u7387\u3002<\/li>\n
- \u4e30\u5bcc\u7684\u6a21\u677f\u652f\u6301<\/strong>\uff1a\u63d0\u4f9b\u591a\u79cd\u6a21\u677f\uff0c\u5feb\u901f\u542f\u52a8 LUI \u5e94\u7528\u5f00\u53d1\u3002<\/li>\n
- \u5b8c\u6574\u7684 TypeScript \u652f\u6301<\/strong>\uff1a\u786e\u4fdd\u7c7b\u578b\u8986\u76d6\uff0c\u63d0\u5347\u5f00\u53d1\u4f53\u9a8c\u548c\u53ef\u9760\u6027\u3002<\/li>\n
- \u9ad8\u7ea7\u4e3b\u9898\u5b9a\u5236<\/strong>\uff1a\u652f\u6301\u7ec6\u7c92\u5ea6\u7684\u6837\u5f0f\u8c03\u6574\uff0c\u6ee1\u8db3\u591a\u6837\u5316\u7684\u4f7f\u7528\u573a\u666f\u548c\u4e2a\u6027\u5316\u9700\u6c42\u3002<\/li>\n<\/ul>\n
<\/p>\n
\u4f7f\u7528\u5e2e\u52a9<\/h2>\n\u5b89\u88c5<\/h3>\n
\u53ef\u4ee5\u4f7f\u7528 npm\u3001yarn \u6216 pnpm \u5b89\u88c5 Ant Design X\uff1a<\/p>\n
npm install @ant-design\/x --save\r\nyarn add @ant-design\/x\r\npnpm add @ant-design\/x\r\n<\/code><\/pre>\n\u5728\u6d4f\u89c8\u5668\u4e2d\u5f15\u5165<\/h3>\n
\u5728\u6d4f\u89c8\u5668\u4e2d\u6dfb\u52a0 script \u548c link \u6807\u7b7e\uff0c\u5e76\u4f7f\u7528\u5168\u5c40\u53d8\u91cf\u00a0antd<\/code>\u3002\u6211\u4eec\u5728 npm \u5305\u7684 dist \u76ee\u5f55\u4e2d\u63d0\u4f9b\u4e86\u00a0antdx.js<\/code>\u3001antdx.min.js<\/code>\u00a0\u548c\u00a0antdx.min.js.map<\/code>\u3002<\/p>\n\u4f7f\u7528\u539f\u5b50\u7ec4\u4ef6<\/h3>\n
\u57fa\u4e8e RICH \u4ea4\u4e92\u8303\u5f0f\uff0c\u6211\u4eec\u63d0\u4f9b\u4e86\u4f17\u591a\u539f\u5b50\u7ec4\u4ef6\uff0c\u5e2e\u52a9\u7075\u6d3b\u6784\u5efa AI \u5bf9\u8bdd\u5e94\u7528\uff1a<\/p>\n
\n- \u901a\u7528\u7ec4\u4ef6<\/strong>\uff1a\u5982\u6d88\u606f\u6c14\u6ce1\uff08Bubble\uff09\u3001\u5bf9\u8bdd\u7ba1\u7406\uff08Conversations\uff09<\/li>\n
- \u5524\u9192\u7ec4\u4ef6<\/strong>\uff1a\u5982\u6b22\u8fce\u6d88\u606f\uff08Welcome\uff09\u3001\u63d0\u793a\u96c6\uff08Prompts\uff09<\/li>\n
- \u8868\u8fbe\u7ec4\u4ef6<\/strong>\uff1a\u5982\u8f93\u5165\u6846\uff08Sender\uff09\u3001\u9644\u4ef6\uff08Attachment\uff09\u3001\u5feb\u901f\u547d\u4ee4\uff08Suggestion\uff09<\/li>\n
- \u786e\u8ba4\u7ec4\u4ef6<\/strong>\uff1a\u5982\u601d\u7ef4\u94fe\uff08ThoughtChain\uff09<\/li>\n<\/ul>\n
\u4ee5\u4e0b\u662f\u4f7f\u7528\u539f\u5b50\u7ec4\u4ef6\u521b\u5efa\u7b80\u5355\u804a\u5929\u754c\u9762\u7684\u793a\u4f8b\uff1a<\/p>\n
import React<\/a> from 'react';\r\nimport { Bubble, Sender } from '@ant-design\/x';\r\nconst messages = [{ content: 'Hello, Ant Design X!', role: 'user' }];\r\nconst App = () => (\r\n<div>\r\n<Bubble.List items={messages} \/>\r\n<Sender \/>\r\n<\/div>\r\n);\r\nexport default App;\r\n<\/code><\/pre>\n\u8fde\u63a5\u6a21\u578b\u63a8\u7406\u670d\u52a1<\/h3>\n
\u4f7f\u7528\u00a0useXAgent<\/code>\u00a0\u8fd0\u884c\u65f6\u5de5\u5177\uff0c\u53ef\u4ee5\u8f7b\u677e\u8fde\u63a5\u7b26\u5408 OpenAI \u6807\u51c6\u7684\u6a21\u578b\u63a8\u7406\u670d\u52a1\u3002\u4ee5\u4e0b\u662f\u4f7f\u7528\u00a0useXAgent<\/code>\u00a0\u7684\u793a\u4f8b\uff1a<\/p>\nimport React from 'react';\r\nimport { useXAgent, Sender } from '@ant-design\/x';\r\nconst App = () => {\r\nconst [agent] = useXAgent({\r\nbaseURL: 'https:\/\/your.api.host',\r\nmodel: 'gpt-3.5',\r\n});\r\nfunction chatRequest(text) {\r\nagent.request({\r\nmessages: [{ content: text, role: 'user' }],\r\nstream: true,\r\n});\r\n}\r\nreturn <Sender onSubmit={chatRequest} \/>;\r\n};\r\nexport default App;\r\n<\/code><\/pre>\n\u9ad8\u6548\u7ba1\u7406\u6570\u636e\u6d41<\/h3>\n
\u4f7f\u7528\u00a0useXChat<\/code>\u00a0\u8fd0\u884c\u65f6\u5de5\u5177\uff0c\u53ef\u4ee5\u8f7b\u677e\u7ba1\u7406 AI \u5bf9\u8bdd\u5e94\u7528\u4e2d\u7684\u6570\u636e\u6d41\uff1a<\/p>\nimport React from 'react';\r\nimport { useXChat, useXAgent } from '@ant-design\/x';\r\nconst App = () => {\r\nconst [agent] = useXAgent({\r\nbaseURL: 'https:\/\/your.api.host',\r\nmodel: 'gpt-3.5',\r\n});\r\nconst { onRequest, messages } = useXChat({ agent });\r\nreturn (\r\n<div>\r\n<Bubble.List items={messages} \/>\r\n<Sender onSubmit={onRequest} \/>\r\n<\/div>\r\n);\r\n};\r\nexport default App;\r\n<\/code><\/pre>\n\u4f7f\u7528\u6a21\u5757\u5316 antd<\/h3>\n
@ant-design\/x<\/code>\u00a0\u9ed8\u8ba4\u652f\u6301 ES \u6a21\u5757\u6811\u6447\u52a8\u3002<\/p>\nTypeScript \u652f\u6301<\/h3>\n
@ant-design\/x<\/code>\u00a0\u63d0\u4f9b\u5185\u7f6e\u7684 TypeScript \u5b9a\u4e49\u3002<\/p>\n\u975e React \u5b9e\u73b0<\/h3>\n
\u6b22\u8fce\u8d21\u732e\u975e React \u5b9e\u73b0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"
Ant Design X\u662f\u8682\u8681\u96c6\u56e2\u5f00\u6e90\u7684\u4e00\u4e2a\u5de5\u5177\u5305\uff0c\u65e8\u5728\u5e2e\u52a9\u5f00\u53d1\u8005\u5feb\u901f\u6784\u5efaAI\u9a71\u52a8\u7684\u5bf9\u8bdd\u754c\u9762\u3002\u5b83\u63d0\u4f9b\u4e86\u4e30\u5bcc\u7684\u7ec4\u4ef6\u548c\u6a21\u677f\uff0c\u652f\u6301\u4e0eOpenAI\u6807\u51c6\u517c\u5bb9\u7684\u6a21\u578b\u96c6\u6210\uff0c\u9002\u7528\u4e8e\u667a\u80fd\u5ba2\u670d\u3001AI\u52a9\u624b\u7b49\u591a\u79cd\u5e94\u7528\u573a\u666f\u3002\u901a\u8fc7Ant Design X\uff0c\u5f00\u53d1\u8005\u53ef\u4ee5\u8f7b…<\/p>\n","protected":false},"author":1,"featured_media":61313,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[230],"class_list":["post-14303","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tool","tag-aikaiyuanxiangmu"],"_links":{"self":[{"href":"https:\/\/www.kdjingpai.com\/ja\/wp-json\/wp\/v2\/posts\/14303","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kdjingpai.com\/ja\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kdjingpai.com\/ja\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kdjingpai.com\/ja\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kdjingpai.com\/ja\/wp-json\/wp\/v2\/comments?post=14303"}],"version-history":[{"count":0,"href":"https:\/\/www.kdjingpai.com\/ja\/wp-json\/wp\/v2\/posts\/14303\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kdjingpai.com\/ja\/wp-json\/wp\/v2\/media\/61313"}],"wp:attachment":[{"href":"https:\/\/www.kdjingpai.com\/ja\/wp-json\/wp\/v2\/media?parent=14303"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kdjingpai.com\/ja\/wp-json\/wp\/v2\/categories?post=14303"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kdjingpai.com\/ja\/wp-json\/wp\/v2\/tags?post=14303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/p>\n
\u4f7f\u7528\u5e2e\u52a9<\/h2>\n\u5b89\u88c5<\/h3>\n
\u53ef\u4ee5\u4f7f\u7528 npm\u3001yarn \u6216 pnpm \u5b89\u88c5 Ant Design X\uff1a<\/p>\n
npm install @ant-design\/x --save\r\nyarn add @ant-design\/x\r\npnpm add @ant-design\/x\r\n<\/code><\/pre>\n\u5728\u6d4f\u89c8\u5668\u4e2d\u5f15\u5165<\/h3>\n
\u5728\u6d4f\u89c8\u5668\u4e2d\u6dfb\u52a0 script \u548c link \u6807\u7b7e\uff0c\u5e76\u4f7f\u7528\u5168\u5c40\u53d8\u91cf\u00a0antd<\/code>\u3002\u6211\u4eec\u5728 npm \u5305\u7684 dist \u76ee\u5f55\u4e2d\u63d0\u4f9b\u4e86\u00a0antdx.js<\/code>\u3001antdx.min.js<\/code>\u00a0\u548c\u00a0antdx.min.js.map<\/code>\u3002<\/p>\n\u4f7f\u7528\u539f\u5b50\u7ec4\u4ef6<\/h3>\n
\u57fa\u4e8e RICH \u4ea4\u4e92\u8303\u5f0f\uff0c\u6211\u4eec\u63d0\u4f9b\u4e86\u4f17\u591a\u539f\u5b50\u7ec4\u4ef6\uff0c\u5e2e\u52a9\u7075\u6d3b\u6784\u5efa AI \u5bf9\u8bdd\u5e94\u7528\uff1a<\/p>\n
\n- \u901a\u7528\u7ec4\u4ef6<\/strong>\uff1a\u5982\u6d88\u606f\u6c14\u6ce1\uff08Bubble\uff09\u3001\u5bf9\u8bdd\u7ba1\u7406\uff08Conversations\uff09<\/li>\n
- \u5524\u9192\u7ec4\u4ef6<\/strong>\uff1a\u5982\u6b22\u8fce\u6d88\u606f\uff08Welcome\uff09\u3001\u63d0\u793a\u96c6\uff08Prompts\uff09<\/li>\n
- \u8868\u8fbe\u7ec4\u4ef6<\/strong>\uff1a\u5982\u8f93\u5165\u6846\uff08Sender\uff09\u3001\u9644\u4ef6\uff08Attachment\uff09\u3001\u5feb\u901f\u547d\u4ee4\uff08Suggestion\uff09<\/li>\n
- \u786e\u8ba4\u7ec4\u4ef6<\/strong>\uff1a\u5982\u601d\u7ef4\u94fe\uff08ThoughtChain\uff09<\/li>\n<\/ul>\n
\u4ee5\u4e0b\u662f\u4f7f\u7528\u539f\u5b50\u7ec4\u4ef6\u521b\u5efa\u7b80\u5355\u804a\u5929\u754c\u9762\u7684\u793a\u4f8b\uff1a<\/p>\n
import React<\/a> from 'react';\r\nimport { Bubble, Sender } from '@ant-design\/x';\r\nconst messages = [{ content: 'Hello, Ant Design X!', role: 'user' }];\r\nconst App = () => (\r\n<div>\r\n<Bubble.List items={messages} \/>\r\n<Sender \/>\r\n<\/div>\r\n);\r\nexport default App;\r\n<\/code><\/pre>\n\u8fde\u63a5\u6a21\u578b\u63a8\u7406\u670d\u52a1<\/h3>\n
\u4f7f\u7528\u00a0useXAgent<\/code>\u00a0\u8fd0\u884c\u65f6\u5de5\u5177\uff0c\u53ef\u4ee5\u8f7b\u677e\u8fde\u63a5\u7b26\u5408 OpenAI \u6807\u51c6\u7684\u6a21\u578b\u63a8\u7406\u670d\u52a1\u3002\u4ee5\u4e0b\u662f\u4f7f\u7528\u00a0useXAgent<\/code>\u00a0\u7684\u793a\u4f8b\uff1a<\/p>\nimport React from 'react';\r\nimport { useXAgent, Sender } from '@ant-design\/x';\r\nconst App = () => {\r\nconst [agent] = useXAgent({\r\nbaseURL: 'https:\/\/your.api.host',\r\nmodel: 'gpt-3.5',\r\n});\r\nfunction chatRequest(text) {\r\nagent.request({\r\nmessages: [{ content: text, role: 'user' }],\r\nstream: true,\r\n});\r\n}\r\nreturn <Sender onSubmit={chatRequest} \/>;\r\n};\r\nexport default App;\r\n<\/code><\/pre>\n\u9ad8\u6548\u7ba1\u7406\u6570\u636e\u6d41<\/h3>\n
\u4f7f\u7528\u00a0useXChat<\/code>\u00a0\u8fd0\u884c\u65f6\u5de5\u5177\uff0c\u53ef\u4ee5\u8f7b\u677e\u7ba1\u7406 AI \u5bf9\u8bdd\u5e94\u7528\u4e2d\u7684\u6570\u636e\u6d41\uff1a<\/p>\nimport React from 'react';\r\nimport { useXChat, useXAgent } from '@ant-design\/x';\r\nconst App = () => {\r\nconst [agent] = useXAgent({\r\nbaseURL: 'https:\/\/your.api.host',\r\nmodel: 'gpt-3.5',\r\n});\r\nconst { onRequest, messages } = useXChat({ agent });\r\nreturn (\r\n<div>\r\n<Bubble.List items={messages} \/>\r\n<Sender onSubmit={onRequest} \/>\r\n<\/div>\r\n);\r\n};\r\nexport default App;\r\n<\/code><\/pre>\n\u4f7f\u7528\u6a21\u5757\u5316 antd<\/h3>\n
@ant-design\/x<\/code>\u00a0\u9ed8\u8ba4\u652f\u6301 ES \u6a21\u5757\u6811\u6447\u52a8\u3002<\/p>\nTypeScript \u652f\u6301<\/h3>\n
@ant-design\/x<\/code>\u00a0\u63d0\u4f9b\u5185\u7f6e\u7684 TypeScript \u5b9a\u4e49\u3002<\/p>\n\u975e React \u5b9e\u73b0<\/h3>\n
\u6b22\u8fce\u8d21\u732e\u975e React \u5b9e\u73b0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"
Ant Design X\u662f\u8682\u8681\u96c6\u56e2\u5f00\u6e90\u7684\u4e00\u4e2a\u5de5\u5177\u5305\uff0c\u65e8\u5728\u5e2e\u52a9\u5f00\u53d1\u8005\u5feb\u901f\u6784\u5efaAI\u9a71\u52a8\u7684\u5bf9\u8bdd\u754c\u9762\u3002\u5b83\u63d0\u4f9b\u4e86\u4e30\u5bcc\u7684\u7ec4\u4ef6\u548c\u6a21\u677f\uff0c\u652f\u6301\u4e0eOpenAI\u6807\u51c6\u517c\u5bb9\u7684\u6a21\u578b\u96c6\u6210\uff0c\u9002\u7528\u4e8e\u667a\u80fd\u5ba2\u670d\u3001AI\u52a9\u624b\u7b49\u591a\u79cd\u5e94\u7528\u573a\u666f\u3002\u901a\u8fc7Ant Design X\uff0c\u5f00\u53d1\u8005\u53ef\u4ee5\u8f7b…<\/p>\n","protected":false},"author":1,"featured_media":61313,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[230],"class_list":["post-14303","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tool","tag-aikaiyuanxiangmu"],"_links":{"self":[{"href":"https:\/\/www.kdjingpai.com\/ja\/wp-json\/wp\/v2\/posts\/14303","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kdjingpai.com\/ja\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kdjingpai.com\/ja\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kdjingpai.com\/ja\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kdjingpai.com\/ja\/wp-json\/wp\/v2\/comments?post=14303"}],"version-history":[{"count":0,"href":"https:\/\/www.kdjingpai.com\/ja\/wp-json\/wp\/v2\/posts\/14303\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kdjingpai.com\/ja\/wp-json\/wp\/v2\/media\/61313"}],"wp:attachment":[{"href":"https:\/\/www.kdjingpai.com\/ja\/wp-json\/wp\/v2\/media?parent=14303"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kdjingpai.com\/ja\/wp-json\/wp\/v2\/categories?post=14303"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kdjingpai.com\/ja\/wp-json\/wp\/v2\/tags?post=14303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}