u/socialmeai

I wanted to share how I handled streaming on the frontend for our AI chat on SocialMe Ai.

Instead of relying on a library, I built a custom composable (useSocialChat) in Vue/Nuxt.

Core idea:

Handle the entire streaming lifecycle in one place.

What it does:

-> Sends request via fetch

-> Reads response using ReadableStream.getReader()

-> Uses TextDecoder to process chunks

-> Parses structured JSON events

-> Updates the last AI message incrementally

We also handle:

-> tool results mid-stream

-> reactive UI updates

-> loading state

Why this worked well:

-> Keeps UI logic clean

-> Avoids scattered state updates

-> Easy to extend

Big takeaway: Streaming is not just a backend problem. Frontend handling is just as critical for good UX.

I wanted to share how I handled streaming on the frontend for our AI chat on SocialMe Ai. Instead of relying on a library, I built a custom composable (useSocialChat) in Vue/Nuxt.

Core idea:

Handle the entire streaming lifecycle in one place.

What it does:

-> Sends request via fetch

-> Reads response using ReadableStream.getReader()

-> Uses TextDecoder to process chunks

-> Parses structured JSON events

-> Updates the last AI message incrementally

We also handle:

-> tool results mid-stream

-> reactive UI updates

-> loading state

Why this worked well:

-> Keeps UI logic clean

-> Avoids scattered state updates

-> Easy to extend

Big takeaway: Streaming is not just a backend problem. Frontend handling is just as critical for good UX.

I wanted to share how I handled streaming on the frontend for our AI chat on SocialMe Ai.

Instead of relying on a library, I built a custom composable (useSocialChat) in Vue/Nuxt.

Core idea:

Handle the entire streaming lifecycle in one place.

What it does:

-> Sends request via fetch

-> Reads response using ReadableStream.getReader()

-> Uses TextDecoder to process chunks

-> Parses structured JSON events

-> Updates the last AI message incrementally

We also handle:

-> tool results mid-stream

-> reactive UI updates

-> loading state

Why this worked well:

-> Keeps UI logic clean

-> Avoids scattered state updates

-> Easy to extend

Big takeaway: Streaming is not just a backend problem. Frontend handling is just as critical for good UX.

I wanted to share something I recently implemented that significantly changed how my product SocialMe Ai feels: tool (function) calling.

Before:

User asks a question

AI returns text

After:

User asks a question

Model decides whether to call a function

We execute that function

Stream the result back

UI renders structured output

Example:

User: “Give me LinkedIn post ideas about AI tools”

Model triggers:

generate_post_idea(topic="AI tools", platform="LinkedIn")

SocialMeAi:

detect the function call in the stream

execute our internal logic

return structured data

Frontend:

renders a “Post Idea Card” instead of plain text

What changed:

Output became usable, not just readable

UX feels interactive instead of passive

Easier to extend with more tools

Challenges:

Handling function calls mid-stream

Syncing tool results with UI state

Designing structured outputs

Big takeaway:

Tool calling feels like the layer that turns LLMs into actual software systems.

I wanted to share something I recently implemented that significantly changed how my product SocialMe Ai feels: tool (function) calling.

Before:

User asks a question

AI returns text

After:

User asks a question

Model decides whether to call a function

We execute that function

Stream the result back

UI renders structured output

Example:

User: “Give me LinkedIn post ideas about AI tools”

Model triggers:

generate_post_idea(topic="AI tools", platform="LinkedIn")

SocialMeAi:

detect the function call in the stream

execute our internal logic

return structured data

Frontend:

renders a “Post Idea Card” instead of plain text

What changed:

Output became usable, not just readable

UX feels interactive instead of passive

Easier to extend with more tools

Challenges:

Handling function calls mid-stream

Syncing tool results with UI state

Designing structured outputs

Big takeaway:

Tool calling feels like the layer that turns LLMs into actual software systems.

I wanted to share something I recently implemented that significantly changed how my product SocialMe Ai feels: tool (function) calling.

Before:

User asks a question

AI returns text

After:

User asks a question

Model decides whether to call a function

We execute that function

Stream the result back

UI renders structured output

Example:

User: “Give me LinkedIn post ideas about AI tools”

Model triggers:

generate_post_idea(topic="AI tools", platform="LinkedIn")

SocialMeAi:

detect the function call in the stream

execute our internal logic

return structured data

Frontend:

renders a “Post Idea Card” instead of plain text

What changed:

Output became usable, not just readable

UX feels interactive instead of passive

Easier to extend with more tools

Challenges:

Handling function calls mid-stream

Syncing tool results with UI state

Designing structured outputs

Big takeaway:

Tool calling feels like the layer that turns LLMs into actual software systems.

I wanted to share how we recently implemented a custom AI streaming setup in our SaaS instead of relying on an SDK.

Stack:

* Nuxt (Nitro backend)

* Vue composables

* Gemini (LLM)

Core idea:

Move away from “request → response” and treat everything as a stream.

Architecture:

1. Client sends message → `/api/chat/ask`

2. Nitro API calls Gemini

3. We iterate over the streaming response

4. For each chunk:

   * send `{ type: "text", content: "..." }`

   * if function call detected → execute tool and send `{ type: "tool_result", data: ... }`

5. Frontend reads stream via `ReadableStream.getReader()`

6. Updates UI incrementally

Interesting parts:

* Handling partial vs final messages

* Injecting tool results mid-stream

* Keeping UI reactive without flicker

* Persisting messages only after stream completes

Result:

Much faster perceived performance and way more flexibility in UI.

Tradeoff:

More complexity vs SDK-based approach

I’m building a Chat UI for SocialMe AI, and recently I made a pretty big architectural decision, removed the Vercel AI SDK entirely.

Initially, it was great for getting started:

* quick setup

* easy API calls

* decent abstraction

But once we started building real product features, we hit limitations.

We needed:

* proper streaming (not just delayed responses)

* function/tool calling inside the flow

* control over how responses are structured and rendered

The SDK started getting in the way more than helping. Plus one of the major reasons was Credit Card to be added to your Vercel account to use their AI SDK. Though it is not mentioned in their documents directly. The docs say to add API key for Vercel AI. And to enable this feature, you need a credit card on your account.

So we replaced it with:

* a custom Nitro API streaming layer

* direct integration with Gemini

* a Vue composable to handle chunked responses

Now the feature:

* stream text in real-time

* detect tool calls and execute them mid-stream

* render UI components dynamically based on tool output

It works great now, but it definitely added complexity.

Tradeoff we’re seeing:

Full control

Better UX

-> More code to maintain

-> More debugging (especially around streaming)