Inspiration

I was inspired by @rasmickyy project. He used a canvas first approach to interact with AI agents. I thought it was an interesting solution and wanted to try my hands on solving a problem with that. I asked: What if you had a team of AI agents to co-write with you? Each with a role. Each with a voice. Each helping you build something bigger than a single prompt ever could.

What it does

Here’s how it works: Users start with a blank canvas and add in story elements like characters, locations, or events. Each time an element is added, AI agents with unique personalities respond dynamically to instructions given. The story unfolds as these agents react to each user input, making it feel like co-writing with a team of creative partners.

How we built it

I used Bolt.new to setup a svelte SPA and converted it to a sveltekit application.

  • Drag-and-drop canvas: Lets users place characters, settings, and events as story blocks.
    • AI agents (Narrator, Character Developer, Plot Twist Generator, World Builder): Each agent is powered by unique role-based prompting logic to generate dynamic responses based on what’s on the canvas.
    • Modular UI components: Designed for flexibility all UI design done by bolt.new ## Challenges we ran into Bolt.new defaults to svelte 4 for it's components and state management. I had to keep upgrading them. It eventually got the hang of $state() and $derived() runes but kept mixing them up with stores ## Accomplishments that we're proud of
    • This is my first project building an AI agent that users can interact with from my application.

What we learned

  • I learnt how to use the ai-sdk to interact with ai models.
  • I learnt about prompting and how to be specific with ai models to get my users desired outvomes
  • I learnt that how you interact with AI affects how useful and magical it feels.
  • Bolt.new is perfect for rapid, collaborative builds ## What's next for Story Weaver
  • I talked to one of my beta testers and they said the would love to use this interface to generate specific social media posts for specific platforms. E.g They have a draft they upload it and connect a linkedin agent to it and have a special post for it.

Built With

  • svelte
  • sveltekit
Share this project:

Updates