openui-integrate

This is the core command. It connects the component library to an LLM backend and creates the streaming pipeline.

Read references/adapter-matrix.md before starting — it contains the full adapter internals and compatibility details.

---

Step 1 — Detect or ask the stack

Check the project for clues about the backend:

• Look for existing API routes (app/api/, pages/api/, server/*)
• Check package.json for openai, @anthropic-ai/sdk, ai (Vercel AI SDK), @langchain/openai
• Check for non-JS backends: requirements.txt (Python), go.mod (Go), Cargo.toml (Rust)

If the stack cannot be determined automatically, ask the user:

1. What is your backend language? (TypeScript/JavaScript, Python, Go, Rust)
2. What LLM provider or SDK? (OpenAI, Anthropic, Vercel AI SDK, LangChain, other)

---

Step 2 — Follow the integration matrix

Read references/adapter-matrix.md for the full adapter details.

TypeScript / JavaScript backends

OpenAI SDK (Chat Completions):

• Frontend adapter: openAIReadableStreamAdapter()
• Frontend format: openAIMessageFormat
• Read and adapt: templates/api-route-openai.ts.template
• Install: npm install openai

Anthropic SDK (Claude):

• Frontend adapter: openAIAdapter()
• Frontend format: openAIMessageFormat
• Read and adapt: templates/api-route-anthropic.ts.template
• Install: npm install @anthropic-ai/sdk
• Note: The backend converts Anthropic streaming events into OpenAI-compatible SSE (data: {json}\n\n lines terminated by data: [DONE])

Vercel AI SDK:

• Frontend: native (uses useChat or processMessage)
• Read and adapt: templates/api-route-vercel-ai.ts.template
• Install: npm install ai @ai-sdk/openai
• Note: Uses streamText + toUIMessageStreamResponse()

LangChain / LangGraph:

• Frontend adapter: openAIAdapter()
• Frontend format: openAIMessageFormat
• Read and adapt: templates/api-route-langchain.ts.template
• Install: npm install @langchain/openai @langchain/core
• Note: The backend converts LangChain stream chunks into OpenAI-compatible SSE