Generating Twitter Threads

Relevant source files

The following files were used as context for generating this wiki page:

• hooks/useContentGenerator.ts
• components/ThreadModal.tsx
• services/geminiService.ts
• components/SmartBoard.tsx
• App.tsx
• types.ts
• README.md

The Twitter Thread generation is a core feature of the "Smart Board Analysis" module, designed to transform a raw YouTube video transcript into a high-engagement, viral-ready Twitter thread. This process is automated and triggered once a video transcript is successfully loaded. It leverages the Google Gemini API to craft a narrative structure from the video's content, which is then presented to the user through a dedicated UI for easy viewing and sharing.

This feature is part of a larger content generation system that also creates LinkedIn posts, blog outlines, and key takeaways. The entire process is managed from the frontend, combining state management hooks, API service calls, and interactive React components to provide a seamless user experience.

Sources: README.md:16-20, App.tsx:32-38

System Architecture and Data Flow

The generation of a Twitter thread is an automated process that begins after a video's transcript is fetched. The flow involves several key components, from the main application view down to the specific API service.

The following diagram illustrates the end-to-end data flow for generating and displaying a Twitter thread.

This diagram shows the process starting in App.tsx when a transcript is loaded, triggering generateAll in the useContentGenerator hook. This hook calls the generateTwitterThread function, which interacts with the Gemini API. The result is then stored and passed to the SmartBoard and ThreadModal components for display.

Sources: App.tsx:32-38, hooks/useContentGenerator.ts:80-90, services/geminiService.ts:91-94, components/SmartBoard.tsx:162-174

State Management and Orchestration

The useContentGenerator hook is the central orchestrator for all AI-driven content generation, including the Twitter thread.

Sources: hooks/useContentGenerator.ts

Key Responsibilities

• Progress Tracking: It maintains the status of the thread generation (idle, loading, done, error) in the progress state object.
• Content Storage: It stores the final array of tweets in the content state object, which follows the ContentOutput interface.
• Initiating Generation: The generateAll function is called when a new transcript is available. It runs all content generation tasks in parallel using Promise.allSettled.
• Caching: Upon successful generation, the entire ContentOutput object is cached in localStorage with a key prefixed by tldw_content_ and the videoId. This allows previously generated content to be loaded instantly for a given video.

Sources: hooks/useContent-generator.ts:16-21, 48-53, 80-90

Generation Progress States

The GenerationProgress type defines the possible states for the thread generation process.

State	Description
idle	The initial state before generation begins or after content is cleared.
loading	The generateTwitterThread function has been called and is awaiting a response.
done	The API call was successful and the thread has been parsed and stored.
error	The API call failed.

Sources: hooks/useContentGenerator.ts:6-12

API Interaction: geminiService

The generateTwitterThread function in services/geminiService.ts is responsible for the direct interaction with the Google Gemini API.

Sources: services/geminiService.ts:91-118

System Prompt (THREAD_INSTRUCTION)

To ensure the AI produces the desired output, a specific system instruction is provided. This prompt defines the persona, task, and strict formatting rules for the AI.

Key rules from the prompt include:

• Generate a thread of 7-10 tweets.
• The first tweet must be a catchy hook.
• The final tweet should be a conclusion or takeaway.
• Each tweet must be under 240 characters.
• The output must be a numbered list (e.g., "1. [Content]").
• No introductory or concluding text outside the numbered list.

Sources: services/geminiService.ts:78-90

API Call and Response Parsing

The function performs the following steps:

1. Requires a valid Gemini API key.
2. Slices the input transcript to a maximum length defined by AI_LIMITS.TRANSCRIPT_SLICE for safety.
3. Calls the gemini-2.0-flash model with the transcript and the THREAD_INSTRUCTION.
4. Parses the returned text, which is expected to be a numbered list. It uses the regex /\n?\d+\.\s/ to split the string into an array of tweets.
5. A fallback mechanism splits the text by newlines if the primary regex fails to produce any tweets.

The following sequence diagram illustrates the API call flow.

UI Components

The generated Twitter thread is displayed to the user through two primary components: SmartBoard and ThreadModal.

SmartBoard Preview

The SmartBoard component acts as a dashboard for all generated content. When the "Thread" tab is active, it displays a preview of the generated content.

• Loading State: While the thread is being generated (progress.thread === 'loading'), a loader animation is shown.
• Preview Display: Once complete, it displays the first 3 tweets from the content.twitterThread array.
• Full View Trigger: If the thread contains more than 3 tweets, a button "View Full Thread" is rendered, which, when clicked, sets the isThreadModalOpen state to true.

Sources: components/SmartBoard.tsx:162-174

ThreadModal Full View

The ThreadModal component provides a focused, full view of the entire Twitter thread. It opens as a modal overlay when triggered from the SmartBoard.

Key features of the modal include:

• Full List: Renders every tweet in the tweets array, each labeled with its number (e.g., "Tweet 1").
• Character Count: Displays a character count for each tweet, highlighting in red if it exceeds 240 characters.
• Copy Single Tweet: A copy button appears on hover for each tweet, allowing the user to copy its content individually.
• Copy Full Thread: A primary action button, "Copy Full Thread", copies the entire thread to the clipboard, formatted with numbering (e.g., "1/10\n[Content]").

This diagram shows the structure and user actions within the ThreadModal.

Data Structures

The data related to the Twitter thread is defined in types.ts and used across the hooks and components.

Property	Type	Description	Source File
twitterThread	string[]	An array where each string is a single tweet. Part of ContentOutput.	types.ts:38
ContentOutput	interface	A container for all generated content types, including the Twitter thread.	types.ts:37-43
ContentTab	type	A string literal type including 'thread' used for tab navigation.	types.ts:45

Conclusion

The Twitter Thread generation feature is a well-defined, automated system that adds significant value by repurposing long-form video content. It effectively encapsulates the logic for AI interaction, state management, and UI presentation into distinct, reusable modules. The process is robust, featuring parallel execution, local storage caching for performance, and a user-friendly interface for consuming and sharing the generated content.