UIX

开发者在React项目中集成多个AI后端（如OpenAI和Anthropic），需要统一输出格式并实现流式渲染。

使用UIX库在React应用中集成OpenAI和Anthropic的流式对话，要求统一输出格式并展示文本、代码块和图片。

```tsx import { UIXProvider, useUIX } from '@uix/react'; import { OpenAIAdapter } from '@uix/adapter-openai'; import { AnthropicAdapter } from '@uix/adapter-anthropic'; const adapters = { openai: new OpenAIAdapter({ apiKey: process.env.OPENAI_API_KEY }), anthropic: new AnthropicAdapter({ apiKey: process.env.ANTHROPIC_API_KEY }), }; function Chat() { const { messages, sendMessage } = useUIX({ adapters, defaultAdapter: 'openai' }); return ( <div> {messages.map(msg => ( <div key={msg.id}> {msg.blocks.map(block => { if (block.type === 'text') return <p>{block.text}</p>; if (block.type === 'code') return <pre><code>{block.code}</code></pre>; if (block.type === 'image') return <img src={block.url} alt={block.alt} />; return null; })} </div> ))} <input onKeyDown={e => e.key === 'Enter' && sendMessage(e.target.value)} /> </div> ); } export default function App() { return