skills.rest
TanStack
TanStackOFFICIAL
Explore all skills by this author →
Website𝕏@tan_stackGitHub

ai-core/custom-backend-integration

Connect useChat to custom SSE and NDJSON backends with per-request authentication.

3.0k|295|Updated Oct 8, 2025
Search Tags:#authentication#streaming#sse#ndjson#custom-backend#usechat#connection-adapter
One-click install
npx skills add https://github.com/TanStack/ai --skill ai-core-custom-backend-integration
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ai-core/custom-backend-integration
Source: https://github.com/TanStack/ai/tree/main/packages/typescript/ai/skills/ai-core/custom-backend-integration
Command: npx skills add https://github.com/TanStack/ai --skill ai-core-custom-backend-integration

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps developers hook useChat into non-TanStack-AI backends by teaching how to bridge SSE, NDJSON, and custom protocol streams while handling auth, dynamic URLs, and request options that the default adapters do not cover.

Core Features & Use Cases

  • SSE streaming with auth: Use fetchServerSentEvents alongside custom headers, credentials, and fetch clients to connect chat widgets to SSE endpoints.
  • NDJSON streaming: Swap to fetchHttpStream when your backend emits newline-delimited JSON instead of text/event-stream while still leveraging dynamic URL and header resolution.
  • Custom adapters: Implement ConnectConnectionAdapter or SubscribeConnectionAdapter for WebSockets, gRPC-web, server functions, or other protocols and learn the error-recovery patterns around retries and abort signals.
  • Use Case: A team exposes a proprietary chat service that requires per-request tokens and emits chunks over a custom stream, so they apply these patterns to connect useChat safely with those headers and protocols.

Quick Start

Connect useChat through fetchServerSentEvents or fetchHttpStream to your API endpoint while passing dynamic auth headers so the chat can stream from your backend.

Frequently Asked Questions about ai-core/custom-backend-integration

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I connect useChat to a custom SSE backend with authentication?▼

You can connect useChat to a custom SSE backend with authentication by using fetchServerSentEvents alongside custom headers, credentials, and fetch clients to stream tailored AI responses while resolving dynamic URLs and passing per-request tokens.

Can I stream chat responses from an NDJSON endpoint using useChat?▼

Yes, you can stream chat responses from an NDJSON endpoint using useChat by applying fetchHttpStream to read newline-delimited JSON instead of text/event-stream while still leveraging dynamic URL and header resolution for your custom backend.

How do I integrate useChat with WebSocket or gRPC-web protocols?▼

To integrate useChat with WebSocket or gRPC-web protocols, implement ConnectConnectionAdapter or SubscribeConnectionAdapter custom adapters to handle your specific protocol streams, dynamic request options, and error-recovery patterns like retries and abort signals.

What is the best way to handle per-request authentication for custom AI streams?▼

The best way to handle per-request authentication for custom AI streams is to pass dynamic auth headers and tokens through custom ConnectionAdapter implementations or fetchServerSentEvents options when connecting useChat to proprietary HTTP or WebSocket endpoints.

Does useChat support custom retry logic and abort signals for HTTP streams?▼

Yes, useChat supports custom retry logic and abort signals for HTTP streams by implementing custom ConnectionAdapter implementations that manage error-recovery patterns, dynamic headers, and request options for your proprietary streaming endpoints.

Related Skills

Explore More Software Engineering Skills→
seanchiuaiseanchiuai
14

real-time

Coordinate real-time communication across SSE, NDJSON streaming, and WebSocket voice channels.

Community
Advanced
wangzi6224wangzi6224
3

use-x-chat

Integrate the useXChat hook from Ant Design X to manage AI chat states in React.

Community
Advanced
quanngynxquanngynx

ai-elements

Create AI chat interface components for Next.js and shadcn/ui projects.

Community
Basic
FlowingSPDGFlowingSPDG
2

streamdeck-native-plugin

{Error: Answer is incorrect. Please see below for the correct answer: {Error:Incorrect tagline format. Please see the below error.}}

Community
Advanced