Building a collaborative AI system isn't just about calling an API; it's about managing tension—both narrative and technical. Story Swarm is an experiment in multi-agent orchestration where the "vibe" of the UI is as alive as the story being told.
The Challenge of Multi-Agent State
In a standard chat app, state is linear. In Story Swarm, we have:
- The Shared Manuscript: A history of messages that must be truncated and formatted differently for each agent.
- The Meta-Data: Genre, Tension, and Visual Storyboard state that lives alongside the dialogue.
We utilized Zustand for state management because of its low boilerplate and high performance in "streaming" scenarios.
// Truncation logic used in src/hooks/useStoryEngine.ts
const historyForContext = storyHistory.slice(-10); // Keep last 10 turns for context
Dynamic UI through Narrative Analysis
One of the most unique features of the app is the Real-time Genre Detection. Every few rounds, the full script is sent to a secondary Gemini call.
sequenceDiagram
participant App as Frontend
participant Srv as Express Server
participant AI as Gemini 1.5 Flash
App->>Srv: POST /api/detect-genre (Recent context)
Srv->>AI: Prompt: "What is the 2-word genre of this story?"
AI-->>Srv: Output: "Cyberpunk Noir"
Srv-->>App: { genre: "Cyberpunk Noir", tension: 85 }
The resulting genre string is then used by a useMemo hook in the React frontend to modify CSS variables:
/* src/index.css */
.genre-glow {
background: radial-gradient(circle at 50% 50%, var(--glow-color, rgba(6, 182, 212, 0.15)) 0%, transparent 70%);
}
The "Director" Layer
To add flavor, we implemented a "Director" agent. This agent doesn't write story dialogue; instead, it observes and outputs meta-commentary. This adds a layer of "meta-fiction" that makes the experience feel like watching a live writer's room rather than just a chatbot.
Future Horizons
The architecture is built to be provider-agnostic. We can swap Gemini for Llama 3 or GPT-4o on a per-agent basis, allowing for a benchmark of "creative writing" across different LLMs in real-time.
Code and more: https://www.dailybuild.xyz/project/135-story-swarm
Top comments (0)