AI 驅動的聊天應用程式
建構即時串流回應的對話介面,並可按對話切換模型。RAG(檢索增強生成)
結合嵌入進行搜尋,再使用聊天補全進行生成。內容生成管線
使用成本最佳化路由大規模生成內容。程式碼助手
使用最佳的程式碼專用模型建構程式碼生成工具。多模型 A/B 測試
比較相同提示下不同模型的輸出以評估品質。即時 React 聊天 UI
使用 React hooks 建構互動式 AI 聊天介面。@openmodex/react hooks 開箱即用地處理串流、訊息狀態和中止支援。Documentation Index
Fetch the complete documentation index at: /llms.txt
Use this file to discover all available pages before exploring further.
使用 OpenModex 建構的常見模式和使用案例。
import OpenModex from '@openmodex/sdk';
const client = new OpenModex({
apiKey: process.env.OPENMODEX_API_KEY,
fallbackModels: ['claude-3.5-sonnet', 'gemini-2.0-flash'],
});
// Use GPT-4o for complex questions, mini for simple ones
const stream = await client.chat.completions.create({
model: isComplexQuery ? 'gpt-4o' : 'gpt-4o-mini',
messages: conversationHistory,
stream: true,
});
for await (const chunk of stream) {
process.stdout.write(chunk.choices[0]?.delta?.content ?? '');
}
// 1. Create embeddings for your knowledge base
const embedding = await client.embeddings.create({
model: 'text-embedding-3-small',
input: userQuery,
});
// 2. Search your vector database
const relevantDocs = await vectorDB.search(embedding.data[0].embedding);
// 3. Generate an answer with context
const response = await client.chat.completions.create({
model: 'gpt-4o',
messages: [
{ role: 'system', content: `Answer based on this context:\n${relevantDocs}` },
{ role: 'user', content: userQuery },
],
routing: { strategy: 'quality_optimized' },
});
// Generate 1000 product descriptions cost-efficiently
const descriptions = await Promise.all(
products.map(async (product) => {
const response = await client.chat.completions.create({
model: 'gpt-4o-mini', // cost-effective for structured tasks
messages: [
{ role: 'system', content: 'Write a 100-word product description.' },
{ role: 'user', content: JSON.stringify(product) },
],
routing: { strategy: 'cost_optimized' },
cache: { enabled: true, ttl: 86400 }, // cache for 24h
});
return response.choices[0].message.content;
})
);
const response = await client.chat.completions.create({
model: 'claude-3.5-sonnet', // best at code
messages: [
{ role: 'system', content: 'You are a senior software engineer.' },
{ role: 'user', content: `Review this code and suggest improvements:\n${code}` },
],
routing: {
fallback: ['deepseek-chat', 'gpt-4o'], // code-capable fallbacks
},
});
// Compare responses from different models
const comparison = await client.models.compare([
'openai/gpt-4o',
'anthropic/claude-3.5-sonnet',
'google/gemini-2.0-flash',
]);
// Run the same prompt against multiple models
const results = await Promise.all(
['gpt-4o', 'claude-3.5-sonnet', 'gemini-2.0-flash'].map(async (model) => {
const response = await client.chat.completions.create({
model,
messages: [{ role: 'user', content: testPrompt }],
});
return {
model,
content: response.choices[0].message.content,
cost: response.usage?.cost_usd,
latency: response.openmodex?.latency_ms,
};
})
);
import { useChat } from '@openmodex/react';
function SupportChat() {
const { messages, input, setInput, sendMessage, isLoading, stop } = useChat({
apiKey: process.env.NEXT_PUBLIC_OPENMODEX_KEY,
model: 'gpt-4o-mini',
system: 'You are a helpful customer support agent for Acme Corp.',
});
return (
<div className="chat-container">
{messages.map((m) => (
<div key={m.id} className={`message ${m.role}`}>
{m.content}
</div>
))}
<form onSubmit={(e) => { e.preventDefault(); sendMessage(); }}>
<input value={input} onChange={(e) => setInput(e.target.value)} />
<button disabled={isLoading}>Send</button>
</form>
</div>
);
}
@openmodex/react hooks 開箱即用地處理串流、訊息狀態和中止支援。