diff --git a/packages/app/src/components/content/ContentPanel.vue b/packages/app/src/components/content/ContentPanel.vue
index 522075e1..288d82db 100644
--- a/packages/app/src/components/content/ContentPanel.vue
+++ b/packages/app/src/components/content/ContentPanel.vue
@@ -55,8 +55,9 @@
       <div class="flex-1 min-h-0">
         <ErrorBoundary title="Content failed to load">
           <!-- Detail views (override tab content) -->
-          <FilmDetail
-            v-if="selectedFilm"
+          <component
+            :is="filmRenderer?.panelPlay"
+            v-if="selectedFilm && filmRenderer?.panelPlay"
             :film="selectedFilm"
             @back="closeFilmDetail"
           />
@@ -70,8 +71,9 @@
             :series="selectedTVSeries"
             @back="closeTVSeriesDetail"
           />
-          <SongDetail
-            v-else-if="selectedSong"
+          <component
+            :is="songRenderer?.panelPlay"
+            v-else-if="selectedSong && songRenderer?.panelPlay"
             :song="selectedSong"
             @back="closeSongDetail"
           />
@@ -87,8 +89,9 @@
           />
 
           <!-- Grid views by active tab -->
-          <FilmGrid
-            v-else-if="activeTab === 'film'"
+          <component
+            :is="filmRenderer?.panelPreview"
+            v-else-if="activeTab === 'film' && filmRenderer?.panelPreview"
             :films="panelFilms"
             :title="panelTitle"
             @select-film="openFilmDetail"
@@ -105,8 +108,9 @@
             :title="panelTitle"
             @select-series="openTVSeriesDetail"
           />
-          <SongGrid
-            v-else-if="activeTab === 'song'"
+          <component
+            :is="songRenderer?.panelPreview"
+            v-else-if="activeTab === 'song' && songRenderer?.panelPreview"
             :songs="panelSongs"
             :title="panelTitle"
             @select-song="openSongDetail"
@@ -154,14 +158,11 @@
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useTheme } from '@/composables/useTheme'
 import { useContentPanel, type ContentTab } from '@/composables/useContentPanel'
-import FilmGrid from './FilmGrid.vue'
-import FilmDetail from './FilmDetail.vue'
+import { getRendererForContentType } from '@aiui/core'
 import BookGrid from './BookGrid.vue'
 import BookDetail from './BookDetail.vue'
 import TVSeriesGrid from './TVSeriesGrid.vue'
 import TVSeriesDetail from './TVSeriesDetail.vue'
-import SongGrid from './SongGrid.vue'
-import SongDetail from './SongDetail.vue'
 import PodcastGrid from './PodcastGrid.vue'
 import PodcastDetail from './PodcastDetail.vue'
 import NewsGrid from './NewsGrid.vue'
@@ -171,6 +172,10 @@ import ProjectGrid from './ProjectGrid.vue'
 import NostrGrid from './NostrGrid.vue'
 import ErrorBoundary from '@/components/ui/ErrorBoundary.vue'
 
+// Film and song renderers loaded from plugin registry
+const filmRenderer = computed(() => getRendererForContentType('film'))
+const songRenderer = computed(() => getRendererForContentType('song'))
+
 const { isDark } = useTheme()
 const {
   panelOpen,
diff --git a/packages/app/src/plugins/index.ts b/packages/app/src/plugins/index.ts
index c73669c2..1bdde1ee 100644
--- a/packages/app/src/plugins/index.ts
+++ b/packages/app/src/plugins/index.ts
@@ -1,4 +1,4 @@
-import { registerPlugin } from '@aiui/core'
+import { registerPlugin, registerRenderer } from '@aiui/core'
 
 export async function initializePlugins(): Promise<void> {
   // Register built-in AI provider
@@ -20,7 +20,14 @@ export async function initializePlugins(): Promise<void> {
     },
   })
 
+  // Register built-in content renderers
+  const { filmRenderer } = await import('./renderers/film-renderer')
+  const { songRenderer } = await import('./renderers/song-renderer')
+  registerRenderer(filmRenderer)
+  registerRenderer(songRenderer)
+
   if (import.meta.env.DEV) {
     console.log('[AIUI] Plugins initialized:', claudeProvider.id)
+    console.log('[AIUI] Renderers registered: film, song')
   }
 }
diff --git a/packages/app/src/plugins/renderers/film-renderer.ts b/packages/app/src/plugins/renderers/film-renderer.ts
new file mode 100644
index 00000000..db94b182
--- /dev/null
+++ b/packages/app/src/plugins/renderers/film-renderer.ts
@@ -0,0 +1,12 @@
+import { defineAsyncComponent } from 'vue'
+import type { RendererDefinition } from '@aiui/core'
+
+export const filmRenderer: RendererDefinition = {
+  id: 'film',
+  name: 'Film Renderer',
+  contentType: 'film',
+  surfaces: ['chat-preview', 'panel-preview', 'panel-play'],
+  chatPreview: defineAsyncComponent(() => import('@/components/content/FilmGrid.vue')),
+  panelPreview: defineAsyncComponent(() => import('@/components/content/FilmGrid.vue')),
+  panelPlay: defineAsyncComponent(() => import('@/components/content/FilmDetail.vue')),
+}
diff --git a/packages/app/src/plugins/renderers/song-renderer.ts b/packages/app/src/plugins/renderers/song-renderer.ts
new file mode 100644
index 00000000..9db90643
--- /dev/null
+++ b/packages/app/src/plugins/renderers/song-renderer.ts
@@ -0,0 +1,12 @@
+import { defineAsyncComponent } from 'vue'
+import type { RendererDefinition } from '@aiui/core'
+
+export const songRenderer: RendererDefinition = {
+  id: 'song',
+  name: 'Song Renderer',
+  contentType: 'song',
+  surfaces: ['chat-preview', 'panel-preview', 'panel-play'],
+  chatPreview: defineAsyncComponent(() => import('@/components/content/SongGrid.vue')),
+  panelPreview: defineAsyncComponent(() => import('@/components/content/SongGrid.vue')),
+  panelPlay: defineAsyncComponent(() => import('@/components/content/SongDetail.vue')),
+}