AI-native product ops, pre-built.

import { AppgramProvider, useWishes } from '@appgram/react';

function FeatureRequests() {
  const { wishes, isLoading } = useWishes();

  if (isLoading) return <Spinner />;

  return wishes.map((wish) => (
    <article key={wish.id}>
      <h3>{wish.title}</h3>
      <p>{wish.description}</p>
    </article>
  ));
}

export default function App() {
  return (
    <AppgramProvider
      config={{
        projectId: 'proj_xxx',
        orgSlug: 'acme',
        projectSlug: 'feedback',
      }}
    >
      <FeatureRequests />
    </AppgramProvider>
  );
}

import { AppgramProvider, WishList } from '@appgram/react-native';

export default function Feedback({ navigation }) {
  return (
    <AppgramProvider
      config={{
        projectId: 'proj_xxx',
        orgSlug: 'acme',
        projectSlug: 'feedback',
      }}
    >
      <WishList
        showSubmitButton
        onWishPress={(wish) =>
          navigation.navigate('Wish', { id: wish.id })
        }
      />
    </AppgramProvider>
  );
}

<!-- One tag, no build step, any stack. -->
<script
  src="https://cdn.appgram.dev/appgram.min.js"
  data-project="your-org/your-project"
></script>

<!-- Or configure first, then load: -->
<script>
  window.appgramSettings = {
    projectKey: 'your-org/your-project',
    mode: 'floating',
    position: 'bottom-right'
  };
</script>
<script src="https://cdn.appgram.dev/appgram.min.js"></script>

import 'package:appgram_flutter/appgram_flutter.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(
    AppgramProvider(
      config: AppgramConfig(
        projectId: 'proj_xxx',
        orgSlug: 'acme',
        projectSlug: 'feedback',
      ),
      child: const MaterialApp(
        home: HelpCenter(),
      ),
    ),
  );
}

import SwiftUI
import AppGramSDK

@main
struct FeedbackApp: App {
  init() {
    AppGramSDK.shared.configure(
      projectId: "proj_xxx"
    )
  }

  var body: some Scene {
    WindowGroup {
      AppGramSDK.shared.feedbackView()
    }
  }
}