agentic-interface-framework/resources.html at main · thesysdev/agentic-interface-framework · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' fill='%23111111'/%3E%3Cpath transform='translate(12.4,3.9) scale(0.4)' fill='%23FFFFFF' d='M0.123047 0.183838C30.3704 -0.193155 61.5253 0.117643 91.8252 0.171143V0.215088C93.8908 0.210607 95.9524 0.201319 98.0059 0.177979L97.9932 140.018L97.999 140.376C97.2973 140.793 63.8272 140.603 60.0508 140.6C60.1153 135.259 60.1187 129.849 60.1064 124.433C52.7323 124.42 45.365 124.437 38.0879 124.55L38.0977 140.584L0.115234 140.582C-0.129765 121.528 0.0923427 141.904 0.0898438 122.793L0.123047 0.183838ZM38.0879 31.8411L38.1152 92.7961L60.0576 92.8127L60.0518 36.9084C60.0516 35.2222 60.0477 33.5277 60.043 31.8274L38.0879 31.8411Z'/%3E%3C/svg%3E">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@300..800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles.css">
  <script>
    document.documentElement.classList.add('js');
    // Apply the theme before first paint: stored choice, else system.
    try {
      var t = localStorage.getItem('aif-theme');
      if (t === 'dark' || ((!t || t === 'system') && matchMedia('(prefers-color-scheme: dark)').matches)) {
        document.documentElement.dataset.theme = 'dark';
      }
    } catch (e) {}
  </script>
  <script src="components.js" defer></script>
  <script src="shader-bg.js" defer></script>
  <title>Resources — The Agentic Interface Framework</title>
  <meta name="description" content="Resources for building agentic interfaces.">
  <meta property="og:title" content="Resources — The Agentic Interface Framework">
  <meta property="og:description" content="Resources for building agentic interfaces.">
  <meta property="og:type" content="website">
</head>
<body>

  <site-header active="resources"></site-header>

  <main id="main">
    <section class="page-header">
      <div class="container">
        <h1 class="page-title">Resources</h1>
        <p class="page-sub">Engineering guides, foundational papers, frameworks, and safety standards worth reading before you build.</p>
      </div>
    </section>

    <section class="page-body">
      <div class="container">
        <div class="res-grid">
          <article class="res-card res-feature">
            <div class="res-feature-main">
              <span class="res-icon" aria-hidden="true"><svg viewBox="0 0 256 256" width="18" height="18" fill="currentColor"><path d="M197.58,129.06,146,110l-19-51.62a15.92,15.92,0,0,0-29.88,0L78,110l-51.62,19a15.92,15.92,0,0,0,0,29.88L78,178l19,51.62a15.92,15.92,0,0,0,29.88,0L146,178l51.62-19a15.92,15.92,0,0,0,0-29.88ZM137,164.22a8,8,0,0,0-4.74,4.74L112,223.85,91.78,169A8,8,0,0,0,87,164.22L32.15,144,87,123.78A8,8,0,0,0,91.78,119L112,64.15,132.22,119a8,8,0,0,0,4.74,4.74L191.85,144ZM144,40a8,8,0,0,1,8-8h16V16a8,8,0,0,1,16,0V32h16a8,8,0,0,1,0,16H184V64a8,8,0,0,1-16,0V48H152A8,8,0,0,1,144,40ZM248,88a8,8,0,0,1-8,8h-8v8a8,8,0,0,1-16,0V96h-8a8,8,0,0,1,0-16h8V72a8,8,0,0,1,16,0v8h8A8,8,0,0,1,248,88Z"/></svg></span>
              <h2 class="res-name">Agent Interface</h2>
              <p class="res-by">By OpenUI</p>
              <p class="res-desc">The open-source, production-ready, best-practice implementation of the Agentic Interface Framework.</p>
              <a class="btn" href="https://openui.com/agentinterface" target="_blank" rel="noopener">Explore Agent Interface<span class="btn-icon" aria-hidden="true"><ph-icon name="arrow-right" size="12"></ph-icon></span></a>
            </div>
            <figure class="ph" aria-hidden="true"><span>Image</span></figure>
          </article>
          <article class="res-card">
            <span class="res-icon" aria-hidden="true"><svg viewBox="0 0 256 256" width="18" height="18" fill="currentColor"><path d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z"/></svg></span>
            <h2 class="res-name">Building Effective AI Agents</h2>
            <p class="res-by">By Anthropic</p>
            <p class="res-desc">Anthropic&rsquo;s practical engineering guide to when to use workflows vs agents, and how to keep agent systems simple, observable, and tool-aware.</p>
            <a class="res-cta" href="https://www.anthropic.com/engineering/building-effective-agents" target="_blank" rel="noopener">Read the guide<span class="res-cta-icon" aria-hidden="true"><ph-icon name="arrow-right-bold" size="12"></ph-icon></span></a>
          </article>
          <article class="res-card">
            <span class="res-icon" aria-hidden="true"><svg viewBox="0 0 256 256" width="18" height="18" fill="currentColor"><path d="M80,64a8,8,0,0,1,8-8H216a8,8,0,0,1,0,16H88A8,8,0,0,1,80,64Zm136,56H88a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Zm0,64H88a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16ZM44,52A12,12,0,1,0,56,64,12,12,0,0,0,44,52Zm0,64a12,12,0,1,0,12,12A12,12,0,0,0,44,116Zm0,64a12,12,0,1,0,12,12A12,12,0,0,0,44,180Z"/></svg></span>
            <h2 class="res-name">A practical guide to building AI agents</h2>
            <p class="res-by">By OpenAI</p>
            <p class="res-desc">OpenAI&rsquo;s end-to-end guide covering use-case selection, orchestration patterns, tool design, guardrails, and multi-agent system design.</p>
            <a class="res-cta" href="https://openai.com/business/guides-and-resources/a-practical-guide-to-building-ai-agents/" target="_blank" rel="noopener">Read the guide<span class="res-cta-icon" aria-hidden="true"><ph-icon name="arrow-right-bold" size="12"></ph-icon></span></a>
          </article>
          <article class="res-card">
            <span class="res-icon" aria-hidden="true"><svg viewBox="0 0 256 256" width="18" height="18" fill="currentColor"><path d="M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216Zm-32-80a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,136Zm0,32a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,168Z"/></svg></span>
            <h2 class="res-name">ReAct: Synergizing Reasoning and Acting in Language Models</h2>
            <p class="res-by">By Google &amp; Princeton</p>
            <p class="res-desc">A foundational paper showing how interleaving reasoning traces with actions improves agent performance and interpretability.</p>
            <a class="res-cta" href="https://arxiv.org/abs/2210.03629" target="_blank" rel="noopener">Read the paper<span class="res-cta-icon" aria-hidden="true"><ph-icon name="arrow-right-bold" size="12"></ph-icon></span></a>
          </article>
          <article class="res-card">
            <span class="res-icon" aria-hidden="true"><svg viewBox="0 0 256 256" width="18" height="18" fill="currentColor"><path d="M104,40H56A16,16,0,0,0,40,56v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,104,40Zm0,64H56V56h48v48Zm96-64H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Zm0,64H152V56h48v48Zm-96,32H56a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,104,136Zm0,64H56V152h48v48Zm96-64H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,200,136Zm0,64H152V152h48v48Z"/></svg></span>
            <h2 class="res-name">LangGraph overview</h2>
            <p class="res-by">By LangChain</p>
            <p class="res-desc">Official documentation for a low-level orchestration framework and runtime for long-running, stateful agents.</p>
            <a class="res-cta" href="https://docs.langchain.com/oss/python/langgraph/overview" target="_blank" rel="noopener">View the docs<span class="res-cta-icon" aria-hidden="true"><ph-icon name="arrow-right-bold" size="12"></ph-icon></span></a>
          </article>
          <article class="res-card">
            <span class="res-icon" aria-hidden="true"><svg viewBox="0 0 256 256" width="18" height="18" fill="currentColor"><path d="M104,40H56A16,16,0,0,0,40,56v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,104,40Zm0,64H56V56h48v48Zm96-64H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Zm0,64H152V56h48v48Zm-96,32H56a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,104,136Zm0,64H56V152h48v48Zm96-64H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,200,136Zm0,64H152V152h48v48Z"/></svg></span>
            <h2 class="res-name">AutoGen</h2>
            <p class="res-by">By Microsoft</p>
            <p class="res-desc">Microsoft&rsquo;s official framework and documentation for building single-agent and multi-agent applications, with higher-level and lower-level APIs.</p>
            <a class="res-cta" href="https://microsoft.github.io/autogen/stable//index.html" target="_blank" rel="noopener">View the docs<span class="res-cta-icon" aria-hidden="true"><ph-icon name="arrow-right-bold" size="12"></ph-icon></span></a>
          </article>
          <article class="res-card">
            <span class="res-icon" aria-hidden="true"><svg viewBox="0 0 256 256" width="18" height="18" fill="currentColor"><path d="M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216Zm-32-80a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,136Zm0,32a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,168Z"/></svg></span>
            <h2 class="res-name">Language Models Can Teach Themselves to Use Tools</h2>
            <p class="res-by">By Meta</p>
            <p class="res-desc">The Toolformer paper, which is still one of the clearest primary sources on tool use as a first-class capability in agentic systems.</p>
            <a class="res-cta" href="https://arxiv.org/abs/2302.04761" target="_blank" rel="noopener">Read the paper<span class="res-cta-icon" aria-hidden="true"><ph-icon name="arrow-right-bold" size="12"></ph-icon></span></a>
          </article>
          <article class="res-card">
            <span class="res-icon" aria-hidden="true"><svg viewBox="0 0 256 256" width="18" height="18" fill="currentColor"><path d="M165.66,90.34a8,8,0,0,1,0,11.32l-64,64a8,8,0,0,1-11.32-11.32l64-64A8,8,0,0,1,165.66,90.34ZM215.6,40.4a56,56,0,0,0-79.2,0L106.34,70.45a8,8,0,0,0,11.32,11.32l30.06-30a40,40,0,0,1,56.57,56.56l-30.07,30.06a8,8,0,0,0,11.31,11.32L215.6,119.6a56,56,0,0,0,0-79.2ZM138.34,174.22l-30.06,30.06a40,40,0,1,1-56.56-56.57l30.05-30.05a8,8,0,0,0-11.32-11.32L40.4,136.4a56,56,0,0,0,79.2,79.2l30.06-30.07a8,8,0,0,0-11.32-11.31Z"/></svg></span>
            <h2 class="res-name">Model Context Protocol Specification</h2>
            <p class="res-by">By Anthropic</p>
            <p class="res-desc">The authoritative MCP specification for connecting LLM applications to external tools and data through an open protocol.</p>
            <a class="res-cta" href="https://modelcontextprotocol.io/specification/2025-06-18" target="_blank" rel="noopener">Read the spec<span class="res-cta-icon" aria-hidden="true"><ph-icon name="arrow-right-bold" size="12"></ph-icon></span></a>
          </article>
          <article class="res-card">
            <span class="res-icon" aria-hidden="true"><svg viewBox="0 0 256 256" width="18" height="18" fill="currentColor"><path d="M208,40H48A16,16,0,0,0,32,56v56c0,52.72,25.52,84.67,46.93,102.19,23.06,18.86,46,25.26,47,25.53a8,8,0,0,0,4.2,0c1-.27,23.91-6.67,47-25.53C198.48,196.67,224,164.72,224,112V56A16,16,0,0,0,208,40Zm0,72c0,37.07-13.66,67.16-40.6,89.42A129.3,129.3,0,0,1,128,223.62a128.25,128.25,0,0,1-38.92-21.81C61.82,179.51,48,149.3,48,112l0-56,160,0ZM82.34,141.66a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32l-56,56a8,8,0,0,1-11.32,0Z"/></svg></span>
            <h2 class="res-name">AI Risk Management Framework: Generative AI Profile</h2>
            <p class="res-by">By NIST</p>
            <p class="res-desc">NIST&rsquo;s official governance profile for identifying and managing GenAI-specific risks across design, deployment, and evaluation.</p>
            <a class="res-cta" href="https://nvlpubs.nist.gov/nistpubs/ai/NIST.AI.600-1.pdf" target="_blank" rel="noopener">Read the framework<span class="res-cta-icon" aria-hidden="true"><ph-icon name="arrow-right-bold" size="12"></ph-icon></span></a>
          </article>
          <article class="res-card">
            <span class="res-icon" aria-hidden="true"><svg viewBox="0 0 256 256" width="18" height="18" fill="currentColor"><path d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z"/></svg></span>
            <h2 class="res-name">GenAI Red Teaming Guide</h2>
            <p class="res-by">By OWASP</p>
            <p class="res-desc">OWASP&rsquo;s practical guide for testing model, system, infrastructure, and runtime risks in generative and agentic AI systems.</p>
            <a class="res-cta" href="https://genai.owasp.org/resource/genai-red-teaming-guide/" target="_blank" rel="noopener">Read the guide<span class="res-cta-icon" aria-hidden="true"><ph-icon name="arrow-right-bold" size="12"></ph-icon></span></a>
          </article>
          <article class="res-card">
            <span class="res-icon" aria-hidden="true"><svg viewBox="0 0 256 256" width="18" height="18" fill="currentColor"><path d="M208,80H176V56a48,48,0,0,0-96,0V80H48A16,16,0,0,0,32,96V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V96A16,16,0,0,0,208,80ZM96,56a32,32,0,0,1,64,0V80H96ZM208,208H48V96H208V208Z"/></svg></span>
            <h2 class="res-name">An introduction to Google&rsquo;s approach for secure AI agents</h2>
            <p class="res-by">By Google</p>
            <p class="res-desc">Google&rsquo;s security-focused framework for agent systems built around human control, least privilege, and observable actions.</p>
            <a class="res-cta" href="https://research.google/pubs/an-introduction-to-googles-approach-for-secure-ai-agents/" target="_blank" rel="noopener">Read the guide<span class="res-cta-icon" aria-hidden="true"><ph-icon name="arrow-right-bold" size="12"></ph-icon></span></a>
          </article>
        </div>
      </div>
    </section>
  </main>

  <site-footer></site-footer>

</body>
</html>