エージェントが操作できるAI PDFエディター

import { EmbedPDF } from '@simplepdf/react-embed-pdf';

export function Document() {
  return (
    <EmbedPDF
      mode="inline"
      style={{ width: 900, height: 800 }}
      companyIdentifier="yourcompany"
      document={{ url: 'https://cdn.simplepdf.com/simple-pdf/assets/forms/fw9.pdf' }}
    />
  );
}

// <div id="editor" style="height: 100vh"></div>
import { createEmbed } from '@simplepdf/embed';

const embed = createEmbed({
  // a CSS selector, or the HTMLElement itself
  target: '#editor',
  companyIdentifier: 'yourcompany',
  document: { url: 'https://cdn.simplepdf.com/simple-pdf/assets/forms/fw9.pdf' },
});

<!-- every link to a PDF on the page opens in your editor -->
<script
  src="https://unpkg.com/@simplepdf/web-embed-pdf"
  companyIdentifier="yourcompany"
  defer
></script>

<a href="https://cdn.simplepdf.com/simple-pdf/assets/forms/fw9.pdf">
  Fill the W-9
</a>

<!-- your branded editor, no JavaScript needed -->
<iframe
  src="https://yourcompany.simplepdf.com/editor?open=https://cdn.simplepdf.com/simple-pdf/assets/forms/fw9.pdf"
  width="100%"
  height="800"
  frameborder="0"
></iframe>

import { useChat, fetchServerSentEvents } from '@tanstack/ai-react';
import { EmbedPDF, useEmbed } from '@simplepdf/react-embed-pdf';
import { useEmbedTools } from '@simplepdf/react-embed-pdf/tanstack-ai';

export function AgentEditor() {
  const { embedRef } = useEmbed();
  const tools = useEmbedTools(embedRef);
  // the model's tool calls run against the open PDF, in the browser
  useChat({ connection: fetchServerSentEvents('/api/chat'), tools });
  return (
    <EmbedPDF
      ref={embedRef}
      mode="inline"
      companyIdentifier="yourcompany"
      style={{ width: 900, height: 800 }}
    />
  );
}