Skip to content

Commit eefa872

Browse files
karthinkkarthink
committed
website: Add initial HTML documentation page
* doc/index.html (gptel): (Resources): * doc/manual.org:
1 parent aac493a commit eefa872

File tree

2 files changed

+290
-1
lines changed

2 files changed

+290
-1
lines changed

‎doc/index.html‎

Lines changed: 289 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,289 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>gptel</title>
6+
<link rel="stylesheet" href="style.css">
7+
<script src="toc-and-theme-loader.js"></script>
8+
<style>
9+
/* Minimal tweaks for GPTel-branding. You probably already have similar in style.css */
10+
/* body { background: #fff5e5; color: #4b4000; font-family: 'Segoe UI', Arial, sans-serif; border: 0px; } */
11+
body { background: var(--body-bg); color: var(--fg); font-family: 'Segoe UI', Arial, sans-serif; border: 0px; }
12+
/* html { background: #fff5e5; } */
13+
html { background: var(--body-bg); }
14+
.centered { text-align: center; margin: 2em 0; }
15+
.tagline { color: #28a225; font-weight: bold; font-size: 1.4em; margin: 0.7em 0 1.5em; }
16+
.section { margin: 2em auto; max-width: 660px; }
17+
.install-box {
18+
/* background: #ffffef; */
19+
color: var(--pre-fg);
20+
background: var(--pre-bg);
21+
border-radius: 7px;
22+
padding: 1em;
23+
border: 1px solid var(--border);
24+
margin: 1.5em 0;
25+
font-family: monospace;
26+
font-size:1.03em;
27+
}
28+
body.dark-theme .install-box {
29+
filter: invert(0.9) hue-rotate(180deg) brightness(0.9) saturate(0.8);
30+
}
31+
a { color: #6287d1; }
32+
.feature-list { margin-top: 1em; text-align: left;}
33+
h1 { font-size:2.3em; }
34+
.logo { width: 600px; height: auto; border-radius: 0px; box-shadow:0 0 4px #bbb;}
35+
.video-label-grid {
36+
display: grid;
37+
grid-template-columns: max-content max-content;
38+
grid-gap: 36px 32px;
39+
align-items: center;
40+
justify-content: center;
41+
overflow: visible;
42+
padding-bottom: 18px;
43+
}
44+
.video-label {
45+
grid-row: span 1;
46+
align-self: stretch;
47+
writing-mode: vertical-rl;
48+
text-orientation: mixed;
49+
text-align: center;
50+
font-size: 1.3em;
51+
font-weight: bold;
52+
color: #2e901e;
53+
letter-spacing: 0.1em;
54+
border-radius: 12px;
55+
padding: 10px 3px;
56+
min-width: 32px;
57+
margin-right: 6px;
58+
}
59+
.video-pair {
60+
display: flex;
61+
flex-direction: row;
62+
gap: 28px;
63+
width: max-content;
64+
background: var(--body-bg);
65+
}
66+
@media (max-width: 1200px) {
67+
.video-pair {
68+
flex-direction: column;
69+
min-width: unset;
70+
gap: 16px;
71+
align-items: flex-start;
72+
}
73+
.video-label-grid {
74+
grid-template-columns: 1fr;
75+
gap: 12px 0;
76+
}
77+
.video-label {
78+
writing-mode: horizontal-tb;
79+
text-align: left;
80+
margin-bottom: 3px; /* space under label in 1-col mode */
81+
padding: 0px 0 5px 0;
82+
min-width: 0;
83+
}
84+
.video-section {
85+
overflow-x: auto;
86+
margin: 2em 0;
87+
display: flex;
88+
flex-direction: column;
89+
align-items: center;
90+
width: 100vw;
91+
position: relative;
92+
left: 50%;
93+
transform: translateX(-50%);
94+
}
95+
/* Override the inline styles and center properly */
96+
div.video-label-grid {
97+
width: 100vw;
98+
position: relative;
99+
left: 50%;
100+
transform: translateX(-50%);
101+
max-width: none;
102+
margin: 0 auto;
103+
overflow: visible;
104+
display: flex;
105+
flex-direction: column;
106+
align-items: center;
107+
background: var(--body-bg);
108+
padding: 2em 0;
109+
}
110+
.video-label {
111+
writing-mode: vertical-rl;
112+
text-orientation: mixed;
113+
text-align: center;
114+
font-size: 1.3em;
115+
font-weight: bold;
116+
color: #2e901e;
117+
letter-spacing: 0.1em;
118+
border-radius: 12px;
119+
padding: 10px 3px;
120+
min-width: 32px;
121+
flex-shrink: 0;
122+
}
123+
@media (max-width: 1200px) {
124+
.video-label {
125+
writing-mode: horizontal-tb;
126+
text-align: left;
127+
margin-bottom: 12px;
128+
padding: 6px 12px;
129+
min-width: 0;
130+
}
131+
}
132+
133+
</style>
134+
</head>
135+
<body>
136+
<button id="dark-theme-toggle" aria-pressed="false"><span class="toggle-icon"><span class="icon-light">🌙</span><span class="icon-dark">☀️</span></span></button>
137+
<div class="section centered">
138+
<img src="https://share.karthinks.com/gptel-logo.png" class="logo" alt="gptel logo">
139+
<h1><b>gptel</b></h1>
140+
<div class="tagline">A simple LLM client for Emacs</div>
141+
<p>
142+
<b>gptel</b> is a simple Large Language Model chat client for Emacs, with support for many models and backends. It works in the spirit of Emacs, available at any time and uniformly in any buffer.
143+
</p>
144+
</div>
145+
146+
<div class="section feature-list">
147+
<p>
148+
<b>gptel is available in <em>any</em> context:</b>
149+
</p>
150+
<ul>
151+
<li>Interact with LLMs from anywhere in Emacs (any buffer, shell, minibuffer, wherever).</li>
152+
<li>Carry on multiple independent conversations, one-off, ad hoc interactions or anything in between.</li>
153+
</ul>
154+
<p>but <em>unobtrusive</em>: it stays out of your way until you need it.</p>
155+
<p>
156+
<b>gptel can talk to most LLM services/runners:</b>
157+
</p>
158+
<ul>
159+
<li> ChatGPT (OpenAI), Claude (Anthropic), Gemini (Google), Llama.cpp and Ollama models,</li>
160+
<li> but also Perplexity, Kagi, Deepseek, Azure, GitHub Copilot (chat), xAI and AWS Bedrock, </li>
161+
<li> and nearly every other inference provider or proxy: Openrouter, PrivateGPT, GitHub Models, Groq, Cerebras, Mistral Le Chat, Moonshot, Anyscale, Sambanova, Novita AI, ...</li>
162+
<p>
163+
<b>gptel can use LLMs as agents:</b>
164+
</p>
165+
<ul>
166+
<li>Supports tool-use to equip LLMs with agentic capabilities.</li>
167+
<li>Supports Model Context Protocol (MCP) integration using <a href="https://github.com/lizqwerscott/mcp.el">mcp.el</a>.</li>
168+
</ul>
169+
<p>
170+
<b>gptel is featureful, it can:</b>
171+
</p>
172+
<ul>
173+
<li>stream responses, and will never block Emacs. (If you know you know!)</li>
174+
<li>handle multi-modal input — include images and documents with queries.</li>
175+
<li>handle "reasoning" content in LLM responses.</li>
176+
</ul>
177+
<p>
178+
<b>Chats are just regular Emacs buffers. This means you can:</b>
179+
</p>
180+
<ul>
181+
<li>save chats as regular Markdown/Org/Text files and resume them later.</li>
182+
<li>edit your previous prompts or LLM responses when continuing a conversation. These will be fed back to the model.</li>
183+
<li>use gptel seamlessly in Org-mode.</li>
184+
</ul>
185+
<p>
186+
<b>gptel is <em>transparent</em> and <em>composable</em>.</b>
187+
</p>
188+
<ul>
189+
<li>It supports introspection, so you can see <em>exactly</em> what will be sent. Inspect and modify queries before sending them.</li>
190+
<li>Pause multi-stage requests at an intermediate stage and resume them later.</li>
191+
<li>Don't like gptel's workflow? gptel is fully scriptable. Use it to create your own for any supported model/backend with a <a href="https://github.com/karthink/gptel/wiki/Defining-custom-gptel-commands">simple API</a>.</li>
192+
</ul>
193+
</div>
194+
195+
<div class="section">
196+
<h2 style="color:#28a225;">Screencasts</h2>
197+
<a href="https://www.youtube.com/watch?v=bsRnh_brggM">Walkthrough on YouTube, 18 minutes (Dec 2023) </a><br><br>
198+
<div class="video-label-grid">
199+
<div class="video-label">General usage</div>
200+
<div class="video-pair">
201+
<video preload="none" poster="https://share.karthinks.com/gptel-poster-small.png" controls width="600" style="border-radius:8px;">
202+
<source src="https://user-images.githubusercontent.com/8607532/230516812-86510a09-a2fb-4cbd-b53f-cc2522d05a13.mp4" type="video/mp4">
203+
<a href="https://user-images.githubusercontent.com/8607532/230516812-86510a09-a2fb-4cbd-b53f-cc2522d05a13.mp4">General usage demo 1</a>
204+
</video>
205+
<video preload="none" poster="https://share.karthinks.com/gptel-poster-small.png" controls width="600" style="border-radius:8px;">
206+
<source src="https://user-images.githubusercontent.com/8607532/230516816-ae4a613a-4d01-4073-ad3f-b66fa73c6e45.mp4" type="video/mp4">
207+
<a href="https://user-images.githubusercontent.com/8607532/230516816-ae4a613a-4d01-4073-ad3f-b66fa73c6e45.mp4">General usage demo 2</a>
208+
</video>
209+
</div>
210+
<div class="video-label">Rewrite in place</div>
211+
<div class="video-pair">
212+
<video preload="none" poster="https://share.karthinks.com/gptel-poster-small.png" controls width="600" style="border-radius:8px;">
213+
<source src="https://github.com/user-attachments/assets/cec11aec-52f6-412e-9e7a-9358e8b9b1bf" type="video/mp4">
214+
<a href="https://github.com/user-attachments/assets/cec11aec-52f6-412e-9e7a-9358e8b9b1bf">Rewrite text in place 1</a>
215+
</video>
216+
<video preload="none" poster="https://share.karthinks.com/gptel-poster-small.png" controls width="600" style="border-radius:8px;">
217+
<source src="https://github.com/user-attachments/assets/4067fdb8-85d3-4264-9b64-d727353f68f9" type="video/mp4">
218+
<a href="https://github.com/user-attachments/assets/4067fdb8-85d3-4264-9b64-d727353f68f9">Rewrite text in place 2</a>
219+
</video>
220+
</div>
221+
<div class="video-label">Tool use</div>
222+
<div class="video-pair">
223+
<video preload="none" poster="https://share.karthinks.com/gptel-poster-small.png" controls width="600" style="border-radius:8px;">
224+
<source src="https://github.com/user-attachments/assets/5f993659-4cfd-49fa-b5cd-19c55766b9b2" type="video/mp4">
225+
<a href="https://github.com/user-attachments/assets/5f993659-4cfd-49fa-b5cd-19c55766b9b2">Tool use 1</a>
226+
</video>
227+
<video preload="none" poster="https://share.karthinks.com/gptel-poster-small.png" controls width="600" style="border-radius:8px;">
228+
<source src="https://github.com/user-attachments/assets/8f57c20b-e1b0-4d86-b972-f46fb90ae1e7" type="video/mp4">
229+
<a href="https://github.com/user-attachments/assets/8f57c20b-e1b0-4d86-b972-f46fb90ae1e7">Tool use 2</a>
230+
</video>
231+
</div>
232+
</div>
233+
</div>
234+
235+
<div class="section">
236+
<h2 style="color:#28a225;">Install</h2>
237+
<center>
238+
<div class="install-box">
239+
<code>M-x package-install </code><strong><code>gptel</code></strong><br><br>
240+
<strong>Manually:</strong><br>
241+
<code>(package-install-file "/path/to/gptel")<br><br></code>
242+
See <a href="https://github.com/karthink/gptel#installation">full installation instructions</a>
243+
and <a href="https://github.com/karthink/gptel#usage">usage</a> in the README.
244+
</div>
245+
</center>
246+
</div>
247+
248+
<div class="section">
249+
<h2 style="color:#28a225;">Documentation</h2>
250+
<ul>
251+
<li><b><a href="manual.html">gptel manual</a></b></li>
252+
<li><a href="https://github.com/karthink/gptel/tree/master/README.org">Project README</a></li>
253+
</ul>
254+
</div>
255+
256+
<div class="section">
257+
<h2 style="color:#28a225;">Links</h2>
258+
<ul>
259+
<li><a href="https://github.com/karthink/gptel">GitHub repository</a></li>
260+
<li><a href="https://gptel.org">Project website (You are here)</a></li>
261+
</ul>
262+
</div>
263+
264+
<!-- TODO -->
265+
<!-- <div class="section"> -->
266+
<!-- <h2 style="color:#28a225;">Quotes</h2> -->
267+
<!-- <blockquote> -->
268+
<!-- <em>“The fastest way to talk to ChatGPT and Gemini without leaving Emacs.”</em> -->
269+
<!-- </blockquote> -->
270+
<!-- <blockquote> -->
271+
<!-- <em>“Simple, powerful, with streaming and org-mode support out of the box.”</em> -->
272+
<!-- </blockquote> -->
273+
<!-- </div> -->
274+
275+
<div class="section">
276+
<h2 style="color:#28a225;">Resources</h2>
277+
<ul>
278+
<li><a href="https://github.com/karthink/gptel/issues">Report an issue</a></li>
279+
<li><a href="https://github.com/karthink/gptel/discussions">Discussions</a></li>
280+
<li><a href="https://emacs.stackexchange.com/questions/tagged/gptel">Ask on StackExchange</a></li>
281+
<!-- <li><a href="https://www.reddit.com/r/emacs/search?q=gptel&restrict_sr=1">Reddit discussions</a></li> -->
282+
</ul>
283+
</div>
284+
285+
<div class="section centered" style="font-size:0.95em;">
286+
<p>&copy; 2025 <a href="https://github.com/karthink">karthink</a></p>
287+
</div>
288+
</body>
289+
</html>

‎doc/manual.org‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
#+options: ':t ^:{} toc:t author:nil email:nil num:t h:3
77
#+options: broken-links:mark creator:nil date:nil html-style:nil html5-fancy:t
88
#+property: header-args eval:never-export
9-
#+export_file_name: gptel
9+
#+export_file_name: manual
1010
#+startup: content
1111

1212
#+infojs_opt: view:info toc:nil mouse:underline ftoc:nil ltoc:nil

0 commit comments

Comments
 (0)