@slack/[email protected]

AI-Enabled Features: Loading States, Text Streaming, and Feedback Buttons

🍿 Preview

2025-10-06-loading-state-text-streaming-feedback.mov

📚 Changelog

• https://docs.slack.dev/changelog/2025/10/7/chat-streaming

⚡ Getting Started

Try the AI Agent Sample app to explore the AI-enabled features and existing Assistant helper:

# Create a new AI Agent app
$ slack create slack-ai-agent-app --template slack-samples/bolt-js-assistant-template
$ cd slack-ai-agent-app/

# Add your OPENAI_API_KEY
$ export OPENAI_API_KEY=sk-proj-ahM...

# Run the local dev server
$ slack run

After the app starts, send a message to the "slack-ai-agent-app" bot for a unique response.

⌛ Loading States

Loading states allows you to not only set the status (e.g. "My app is typing...") but also sprinkle some personality by cycling through a collection of loading messages:

app.event('message', async ({ client, context, event, logger }) => {
    // ...
    await client.assistant.threads.setStatus({
        channel_id: channelId,
        thread_ts: threadTs,
        status: 'thinking...',
        loading_messages: [
            'Teaching the hamsters to type faster…',
            'Untangling the internet cables…',
            'Consulting the office goldfish…',
            'Polishing up the response just for you…',
            'Convincing the AI to stop overthinking…',
        ],
    });

    // Start a new message stream
});

• https://docs.slack.dev/reference/methods/assistant.threads.setStatus

🔮 Text Streaming Helper

The client.chatStream() helper utility can be used to streamline calling the 3 text streaming methods:

app.event('message', async ({ client, context, event, logger }) => {
    // ...

    // Start a new message stream
    const streamer = client.chatStream({
        channel: channelId,
        recipient_team_id: teamId,
        recipient_user_id: userId,
        thread_ts: threadTs,
    });

    // Loop over OpenAI response stream
    // https://platform.openai.com/docs/api-reference/responses/create
    for await (const chunk of llmResponse) {
        if (chunk.type === 'response.output_text.delta') {
            await streamer.append({
                markdown_text: chunk.delta,
            });
        }
    }

    // Stop the stream and attach feedback buttons
    await streamer.stop({ blocks: [feedbackBlock] });
});

• https://docs.slack.dev/tools/node-slack-sdk/reference/web-api/classes/WebClient#chatstream

🔠 Text Streaming Methods

Alternative to the Text Streaming Helper is to call the individual methods.

1) client.chat.startStream

First, start a chat text stream to stream a response to any message:

app.event('message', async ({ client, context, event, logger }) => {
    // ...
    const streamResponse = await client.chat.startStream({
        channel: channelId,
        recipient_team_id: teamId,
        recipient_user_id: userId,
        thread_ts: threadTs,
    });

    const streamTs = streamResponse.ts

• https://docs.slack.dev/reference/methods/chat.startStream

2) client.chat.appendStream

After starting a chat text stream, you can then append text to it in chunks (often from your favourite LLM SDK) to convey a streaming effect:

for await (const chunk of llmResponse) {
    if (chunk.type === 'response.output_text.delta') {
        await client.chat.appendSteam({
            channel: channelId,
            markdown_text: chunk.delta,
            ts: streamTs,
        });
    }
}

• https://docs.slack.dev/reference/methods/chat.appendStream

3) client.chat.stopStream

Lastly, you can stop the chat text stream to finalize your message:

await client.chat.stopStream({
    blocks: [feedbackBlock],
    channel: channelId,
    ts: streamTs,
});

• https://docs.slack.dev/reference/methods/chat.stopStream

👍🏻 Feedback Buttons

Add feedback buttons to the bottom of a message, after stopping a text stream, to gather user feedback:

const feedbackBlock = {
    type: 'context_actions',
    elements: [{
        type: 'feedback_buttons',
        action_id: 'feedback',
        positive_button: {
            text: { type: 'plain_text', text: 'Good Response' },
            accessibility_label: 'Submit positive feedback on this response',
            value: 'good-feedback',
        },
        negative_button: {
            text: { type: 'plain_text', text: 'Bad Response' },
            accessibility_label: 'Submit negative feedback on this response',
            value: 'bad-feedback',
        },
    }],
};

// Using the Text Streaming Helper
await streamer.stop({ blocks: [feedbackBlock] });

// Or, using the Text Streaming Method
await client.chat.stopStream({
    blocks: [feedbackBlock],
    channel: channelId,
    ts: streamTs,
});

• https://docs.slack.dev/reference/block-kit/blocks/context-actions-block/
• https://docs.slack.dev/reference/block-kit/block-elements/feedback-buttons-element/
• https://docs.slack.dev/reference/block-kit/block-elements/icon-button-element/

What's Changed

👾 Enhancements

• feat: add ai-enabled features text streaming methods, feedback blocks, and loading state in #2399 - Thanks @zimeg!

📚 Documentation

• docs: update package homepage to docs.slack.dev tools reference in #2369 - Thanks @zimeg!
• docs: autogenerate package reference to language specific paths in #2337 - Thanks @zimeg!

🤖 Dependencies

• build(web-api): bump to minimum @slack/[email protected] in #2401 - Thanks @zimeg!
• chore(deps-dev): bump typescript from 5.9.2 to 5.9.3 in /packages/web-api in #2398 - Thanks @dependabot!

🧰 Maintenance

• build: use latest biome schema version in #2363 - Thanks @zimeg!
• chore(web-api): release @slack/[email protected] in #2402 - Thanks @zimeg!

Milestone: https://github.com/slackapi/node-slack-sdk/milestone/147?closed=1
Full Changelog: https://github.com/slackapi/node-slack-sdk/compare/@slack/[email protected]...@slack/[email protected]
Package: https://www.npmjs.com/package/@slack/web-api/v/7.11.0