js开发一个类似ChatGPT的AI应用助手

// 项目技术栈
const techStack = {
  frontend: {
    framework: 'Next.js 14', // App Router + React Server Components
    ui: 'Tailwind CSS + Shadcn UI',
    state: 'Zustand',
    realtime: 'Server-Sent Events'
  },
  backend: {
    runtime: 'Node.js',
    framework: 'Next.js API Routes',
    database: 'PostgreSQL + Prisma',
    cache: 'Redis'
  },
  ai: {
    provider: 'OpenAI API',
    framework: 'Langchain',
    vectorStore: 'PineconeDB'
  }
}

// app/api/chat/route.ts
import { OpenAIStream } from '@/lib/openai'
import { StreamingTextResponse } from 'ai'

export async function POST(req: Request) {
  const { messages } = await req.json()

  // 调用 OpenAI API 获取流式响应
  const stream = await OpenAIStream({
    model: 'gpt-4',
    messages,
    temperature: 0.7,
    stream: true
  })

  // 返回流式响应
  return new StreamingTextResponse(stream)
}

// components/Chat.tsx
function Chat() {
  const [messages, setMessages] = useState<Message[]>([])
  const [isLoading, setIsLoading] = useState(false)

  const handleSubmit = async (content: string) => {
    setIsLoading(true)

    try {
      const response = await fetch('/api/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          messages: [...messages, { role: 'user', content }]
        })
      })

      if (!response.ok) throw new Error('请求失败')

      // 处理流式响应
      const reader = response.body!.getReader()
      const decoder = new TextDecoder()
      let aiResponse = ''

      while (true) {
        const { done, value } = await reader.read()
        if (done) break

        // 解码并追加新内容
        aiResponse += decoder.decode(value)
        // 更新UI
        setMessages(prev => [...prev.slice(0, -1), { role: 'assistant', content: aiResponse }])
      }
    } catch (error) {
      console.error('聊天出错:', error)
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <div className='flex flex-col h-screen'>
      <div className='flex-1 overflow-auto p-4'>
        {messages.map((message, index) => (
          <Message key={index} {...message} />
        ))}
        {isLoading && <TypingIndicator />}
      </div>
      <ChatInput onSubmit={handleSubmit} disabled={isLoading} />
    </div>
  )
}

// lib/vectorStore.ts
import { PineconeClient } from '@pinecone-database/pinecone'
import { OpenAIEmbeddings } from 'langchain/embeddings/openai'

export class VectorStore {
  private pinecone: PineconeClient
  private embeddings: OpenAIEmbeddings

  constructor() {
    this.pinecone = new PineconeClient()
    this.embeddings = new OpenAIEmbeddings()
  }

  async initialize() {
    await this.pinecone.init({
      environment: process.env.PINECONE_ENV!,
      apiKey: process.env.PINECONE_API_KEY!
    })
  }

  async storeConversation(messages: Message[]) {
    const index = this.pinecone.Index('conversations')

    // 将对话转换为向量
    const vectors = await Promise.all(
      messages.map(async message => {
        const vector = await this.embeddings.embedQuery(message.content)
        return {
          id: message.id,
          values: vector,
          metadata: {
            role: message.role,
            timestamp: Date.now()
          }
        }
      })
    )

    // 存储向量
    await index.upsert({
      upsertRequest: {
        vectors
      }
    })
  }

  async retrieveContext(query: string, limit = 5) {
    const index = this.pinecone.Index('conversations')
    const queryVector = await this.embeddings.embedQuery(query)

    // 查询相似向量
    const results = await index.query({
      queryRequest: {
        vector: queryVector,
        topK: limit,
        includeMetadata: true
      }
    })

    return results.matches.map(match => ({
      content: match.metadata.content,
      score: match.score
    }))
  }
}

// lib/prompts.ts
export const createChatPrompt = (context: string, query: string) => ({
  messages: [
    {
      role: 'system',
      content: `你是一个专业的AI助手。请基于以下上下文信息,
        用简洁专业的语言回答用户问题。如果问题超出上下文范围,
        请诚实告知。

        上下文信息:
        ${context}
        `
    },
    {
      role: 'user',
      content: query
    }
  ],
  temperature: 0.7, // 控制创造性
  max_tokens: 1000, // 控制回答长度
  presence_penalty: 0.6, // 鼓励话题扩展
  frequency_penalty: 0.5 // 避免重复
})

// hooks/useChat.ts
export function useChat() {
  const [messages, setMessages] = useState<Message[]>([])

  // 使用防抖避免频繁请求
  const debouncedChat = useMemo(
    () =>
      debounce(async (content: string) => {
        // ... 发送请求
      }, 500),
    []
  )

  // 使用缓存避免重复请求
  const cache = useMemo(() => new Map<string, string>(), [])

  const sendMessage = async (content: string) => {
    // 检查缓存
    if (cache.has(content)) {
      setMessages(prev => [...prev, { role: 'assistant', content: cache.get(content)! }])
      return
    }

    // 发送请求
    await debouncedChat(content)
  }

  return { messages, sendMessage }
}

// lib/streaming.ts
export class StreamProcessor {
  private buffer: string = ''
  private decoder = new TextDecoder()

  process(chunk: Uint8Array, callback: (text: string) => void) {
    this.buffer += this.decoder.decode(chunk, { stream: true })

    // 按完整的句子进行处理
    const sentences = this.buffer.split(/([.!?。！？]\s)/)

    if (sentences.length > 1) {
      // 输出完整的句子
      const completeText = sentences.slice(0, -1).join('')
      callback(completeText)

      // 保留未完成的部分
      this.buffer = sentences[sentences.length - 1]
    }
  }
}

// lib/monitoring.ts
export class AIMonitoring {
  // 记录请求延迟
  async trackLatency(startTime: number) {
    const duration = Date.now() - startTime
    await this.metrics.gauge('ai_request_latency', duration)
  }

  // 监控令牌使用
  async trackTokenUsage(prompt: string, response: string) {
    const tokenCount = await this.countTokens(prompt + response)
    await this.metrics.increment('token_usage', tokenCount)
  }

  // 监控错误率
  async trackError(error: Error) {
    await this.metrics.increment('ai_errors', 1, {
      type: error.name,
      message: error.message
    })
  }
}