AI SDK migration

[CoolSpring8]

Summary by CodeRabbit

Release Notes

• New Features

  • Added support for OpenAI-compatible API providers, enabling integration with broader service options.
  • Implemented automatic model syncing and local persistence with enhanced error handling and user feedback.

• Documentation

  • Updated API security documentation regarding request handling.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

The application is migrated from the OpenAI SDK to the Vercel AI SDK's OpenAI-compatible provider, introducing utilities for model fetching and streaming completions. A patch is applied to the dependency to refactor completion prompt handling with a generalized content-part mapper.

Changes

Cohort / File(s)	Summary
Dependencies & Patches package.json, .bun-patches/@ai-sdk%2Fopenai-compatible@1.0.27.patch	Added @ai-sdk/openai-compatible, @ai-sdk/react, and ai dependencies; removed openai; introduced patchedDependencies entry for @ai-sdk/openai-compatible@1.0.27 to refactor prompt conversion via a generalized toText(content, role) mapper and adjust return shape.
Type Definitions src/types.ts	Added new exported ModelInfo interface with fields: id (string), name (optional string | null), object (optional string), and owned_by (optional string).
Provider Integration src/ai/openaiCompatible.ts	New file introducing normalizeBaseURL helper, buildOpenAICompatibleProvider function to instantiate OpenAI-compatible provider, and fetchOpenAICompatibleModels function to fetch and parse models array from remote endpoint with Authorization header.
App Logic Refactoring src/App.tsx	Replaced OpenAI client with OpenAI-compatible provider; introduced syncModels function for fetching and persisting models; refactored streaming loops to use streamText API; updated state management to use ModelInfo[] for models; added provider-based guard checks before generation; replaced extractTextDelta with direct delta appending.
Component Updates src/components/Header.tsx	Updated models prop type from custom shape to ModelInfo[]; added ModelInfo import; refactored icon rendering structure in segmented control label.
Documentation README.md	Updated security notes to reflect direct client requests and removed dangerouslyAllowBrowser reference; added Vercel AI SDK to Tech Stack section.

Sequence Diagram

sequenceDiagram
    participant User
    participant App
    participant OpenAICompatibleProvider
    participant RemoteAPI as Remote API<br/>(OpenAI-compatible)

    rect rgb(240, 248, 255)
        Note over App,RemoteAPI: Model Synchronization Flow
        User->>App: Load app / Configure base URL
        App->>App: Check stored models
        alt No stored models or baseURL changed
            App->>App: buildOpenAICompatibleProvider(baseURL, apiKey)
            activate OpenAICompatibleProvider
            App->>OpenAICompatibleProvider: fetchOpenAICompatibleModels()
            OpenAICompatibleProvider->>RemoteAPI: GET /models<br/>(+ Authorization header)
            RemoteAPI-->>OpenAICompatibleProvider: { data: ModelInfo[] }
            deactivate OpenAICompatibleProvider
            OpenAICompatibleProvider-->>App: ModelInfo[]
            App->>App: Persist to storage<br/>Set active model
        else Stored models exist
            App->>App: Load from storage
        end
    end

    rect rgb(255, 240, 245)
        Note over App,RemoteAPI: Completion/Chat Streaming Flow
        User->>App: Request completion or chat
        App->>App: Guard: baseURL & provider configured?
        alt Conditions met
            App->>OpenAICompatibleProvider: streamText({ prompt/messages, model, ... })
            OpenAICompatibleProvider->>RemoteAPI: Stream request
            RemoteAPI-->>OpenAICompatibleProvider: Stream deltas
            OpenAICompatibleProvider-->>App: fullStream/textStream
            App->>App: Iterate & append deltas to content
            App-->>User: Render streamed response
        else Missing config
            App-->>User: Show error/toast
        end
    end

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

• src/App.tsx requires careful review of the refactored streaming logic, state management changes, and new provider integration patterns throughout the component lifecycle.
• src/ai/openaiCompatible.ts should be validated for correct HTTP request construction, Authorization header handling, and error propagation.
• Patch file correctness in transforming the completion prompt structure and ensuring backward compatibility with the streaming consumer.
• Type changes across Header.tsx and types.ts should be verified to ensure all usages are consistently updated throughout the codebase.

Possibly related PRs

• feat: add text completion mode #8: Modifies generation and streaming flows in src/App.tsx with provider-based streamText usage and related type adjustments, directly mirroring the architectural changes in this PR.

Suggested labels

codex

Poem

🐰 Hopping through the streams so bright,
Old SDK fades from sight,
Vercel's provider takes the stage,
Compatible models on every page,
Fetching, streaming, all's aligned,
A cleaner path, one step refined!

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'AI SDK migration' directly and clearly describes the main objective of the pull request—migrating from OpenAI SDK to Vercel AI SDK with OpenAI-compatible provider support across the codebase.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch ai-sdk-migration

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

src/ai/openaiCompatible.ts (1)

36-39: Consider skipping the Authorization header when no API key is set.

Right now you always send Authorization: Bearer _PLACEHOLDER_ when apiKey is empty. Some self‑hosted or keyless endpoints may treat a missing header differently from an invalid token. You might want to only add the header when apiKey is truthy to maximize compatibility.

.bun-patches/@ai-sdk%2Fopenai-compatible@1.0.27.patch (1)

19-35: Patched completion prompt logic changes semantics; confirm it matches your usage.

The new toText/promptText path now:

• Flattens system/user/assistant content into plain text lines without role prefixes.
• Treats any non‑text content (aside from explicit tool-call error) as an InvalidPromptError.
• Returns stopSequences: [] instead of stopping on the next user turn.

This is a substantial behavioral change from the original role‑tagged, stop‑sequence‑driven format. It’s fine if your callers only need a raw text prompt, but be aware that:

• Any future content part types (e.g., images) will now throw.
• Other code using this patched build may see different completion behavior than the upstream library.

Worth double‑checking this aligns with how you use completionModel today.

Also applies to: 52-92

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between bbc79b8 and ff896a9.

⛔ Files ignored due to path filters (1)

• bun.lock is excluded by !**/*.lock

📒 Files selected for processing (7)

• .bun-patches/@ai-sdk%2Fopenai-compatible@1.0.27.patch (1 hunks)
• README.md (1 hunks)
• package.json (2 hunks)
• src/App.tsx (7 hunks)
• src/ai/openaiCompatible.ts (1 hunks)
• src/components/Header.tsx (2 hunks)
• src/types.ts (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (3)

src/ai/openaiCompatible.ts (1)

src/types.ts (1)

• ModelInfo (14-19)

src/components/Header.tsx (1)

src/types.ts (1)

• ModelInfo (14-19)

src/App.tsx (2)

src/types.ts (1)

• ModelInfo (14-19)

src/ai/openaiCompatible.ts (2)

• buildOpenAICompatibleProvider (7-23)
• fetchOpenAICompatibleModels (25-46)

🔇 Additional comments (8)

package.json (1)

12-19: Patched dependency version coupling looks intentional; note upgrade implications.

Using ^1.0.27 for @ai-sdk/openai-compatible while patching @ai-sdk/openai-compatible@1.0.27 is fine, but once the installed version drifts above 1.0.27 the patch will silently stop applying. Consider pinning the dependency or adding a brief comment in the repo about keeping the patch and version in sync.

Also applies to: 51-54

README.md (1)

27-33: Updated security and tech‑stack notes look accurate and clear.

The README now correctly reflects that keys are stored in the browser and that the app uses a client‑side OpenAI‑compatible flow via the Vercel AI SDK; this aligns with the new implementation.

src/types.ts (1)

13-19: Good centralization of model metadata via ModelInfo.

Defining ModelInfo once and reusing it across the app (provider, App, Header) is a clean way to keep model typing consistent while allowing provider‑specific fields via optionals.

src/components/Header.tsx (1)

2-6: Header typing and model select mapping look solid.

Using models: ModelInfo[] and deriving Select options from { value: model.id, label: model.name || model.id } fits the new shared type well, and the simplified icon span with aria-hidden="true" keeps the segmented control accessible.

Also applies to: 41-45, 60-62

src/ai/openaiCompatible.ts (1)

4-23: Provider factory and model‑fetch helper are well‑factored and safe by default.

The base‑URL normalization plus null/error guards make it hard to misconfigure the provider, and fetchOpenAICompatibleModels’s error handling and shape check before returning ModelInfo[] are straightforward and robust.

Also applies to: 25-46

src/App.tsx (3)

3-12: Provider wiring and model sync flow look clean and resilient.

Using ModelInfo[] for models, memoizing openAIProvider from { baseURL, apiKey }, and centralizing model fetching/persistence in syncModels (with overrides and a silent flag) gives you a nicely contained integration with the OpenAI‑compatible backend. The initial effect that restores base URL, key, and models from IndexedDB, then conditionally syncs, also reads well and has sensible early‑return behavior when cached models exist.

Also applies to: 17-20, 28-40, 42-49, 51-101, 103-131

---

530-551: Settings save + model resync flow is sensible.

On save you persist the new base URL and key, then immediately call syncModels with explicit overrides in silent mode. That ensures the local model list stays in sync with the new endpoint without spamming toasts, while still letting the user manually resync via the button when desired.

---

376-401: The code at lines 472-476 is correct as written and requires no changes.

The review suggested changing reasoning to reasoning_content in the appendToNode call, but this is incorrect. The appendToNode function signature expects delta: { content?: string; reasoning?: string }, and the code properly uses the reasoning field. Internally, the implementation maps delta.reasoning to node.reasoningContent, correctly bridging the naming conventions between the delta parameter and the node structure.

The identical pattern correctly appears at all mentioned locations (428-437, 452-457, 459-477).