Pi - Your Personal AI Assistant

\n ✨ Pi\n

\n \n \n \n

\n \n

\n {isInitializing ? (\n

Loading your conversation history...

\n ) : messages.length === 0 ? (\n

Welcome to Pi

Your personal AI assistant

Ask me anything to get started!

\n ) : (\n messages.map((message) => (\n

\n {message.text}\n

\n ))\n )}\n \n {isLoading && (\n

\n )}\n \n

\n \n

\n setInputValue(e.target.value)}\n onKeyDown={handleKeyDown}\n disabled={isLoading || isInitializing}\n />\n \n

\n );\n}",[],[187,193,199],[187,193],{"_104":210,"_95":211,"_157":212,"_159":188,"_160":138,"_161":203,"_163":22,"_106":213,"_100":162,"_166":214,"_168":215,"_169":22,"_170":-5,"_171":216,"_98":217},"f842a22a-31d4-11f0-b063-569c3dd06744","index.html","c7540cb0-c8c1-4582-be24-a1fc2d241f6d",["D",1747345121633],"file","\n\n \n \n \n Pi - Your Personal AI Assistant\n \n ✨\">\n \n \n \n

\n \n \n \n",[],[187,211],{"_104":219,"_95":220,"_157":221,"_159":188,"_160":138,"_161":162,"_163":22,"_106":222,"_100":32,"_166":204,"_168":223,"_169":22,"_170":-5,"_171":224,"_98":225},"6e6775b2-31d4-11f0-97b2-569c3dd06744","index.tsx","82c098a0-237c-4249-902c-e099395dfa8b",["D",1747344890318],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[187,220],[187],{"_104":228,"_95":229,"_157":230,"_159":-5,"_160":138,"_161":101,"_163":22,"_106":231,"_100":232,"_166":214,"_168":233,"_169":22,"_170":-5,"_171":234,"_98":235},"70098102-31d5-11f0-a929-569c3dd06744","README.md","60197c55-0ae2-4c96-96fe-0a608cf62d7b",["D",1747345322585],2,"# Pi - Personal AI Assistant\n\nThis is a personal AI assistant app built with React and Hono on Val Town. It provides a clean, minimalist chat interface for interacting with an AI assistant named Pi.\n\n## Features\n\n- Chat interface with message history\n- OpenAI integration for AI responses\n- Clean, minimalist design\n- Mobile-responsive layout\n- **Persistent message history** using Val Town's blob storage\n- Conversation context for more coherent responses\n\n## Project Structure\n\n- **Backend**: `/backend/index.ts` - Handles API requests and serves frontend assets\n - OpenAI integration for chat completions\n - API endpoint for chat messages\n - Message history persistence using blob storage\n - Conversation context management\n\n- **Frontend**: \n - `/frontend/index.html` - Main HTML template\n - `/frontend/index.tsx` - Client-side entry point\n - `/frontend/components/App.tsx` - React app with chat interface\n\n## How to Use\n\n1. Type your message in the input field at the bottom\n2. Press Enter or click the send button to send your message\n3. Pi will respond with a thoughtful answer\n4. Your conversation history is automatically saved\n5. Use the trash icon to clear your conversation history\n\n## Technical Details\n\n- Uses OpenAI's GPT model for generating responses\n- Built with React for the frontend and Hono for the backend\n- Styled with inline CSS for simplicity\n- Uses Val Town's blob storage for message persistence\n- Maintains conversation context for more coherent responses\n\n## Future Improvements\n\n- Implement voice input functionality\n- Add user authentication\n- Enhance the AI with custom knowledge or personality\n- Add message search functionality\n- Support for image uploads and processing",[],[229],"files",[154,173,185,191,197,209,218,227],"counts",{"_240":32,"_241":162,"_242":32,"_243":32},"pulls","branches","forks","envVars","contents",[],{"_104":210,"_95":211,"_157":212,"_159":188,"_160":138,"_161":203,"_163":22,"_106":247,"_100":162,"_166":214,"_168":215,"_169":22,"_170":-5,"_98":248},["D",1747345121633],[187,211],"upstreamProject",{"_104":146,"_95":96,"_112":251,"_113":-5,"_110":111,"_23":252},"Starter template with client-side React & Hono server",{"_93":253,"_130":254},"std","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJVaVhpQ1BId3dscVpBbkdZVWlMNjJtcjkxWS5wbmcifQ","upstreamBranch",{"_104":141,"_106":257,"_258":259,"_95":43,"_139":146,"_100":260,"_140":-5,"_142":-5,"_261":262,"_108":-5,"_151":22,"_110":111,"_150":253,"_16":148,"_149":96},["D",1740674013689],"updatedAt",["D",1755284984205],72,"lockfileKey","1755284987385-esm.town_v_std_reactHonoStarter@72-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":269,"_152":274,"_236":299,"_214":300,"_244":302,"_303":304,"_307":22,"_308":-5,"_309":310,"_311":312,"_313":314},{"_104":105,"_95":96,"_106":270,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":271,"_132":272,"_135":273,"_151":22},["D",1747344890318],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_100":137,"_95":43,"_104":138,"_139":105,"_140":141,"_142":143,"_144":111,"_145":146,"_147":148,"_149":96,"_150":94},[275,281,296],{"_104":155,"_95":156,"_157":158,"_159":-5,"_160":138,"_161":162,"_163":164,"_106":165,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":276,"_98":280},[277],{"_104":174,"_95":175,"_157":176,"_159":158,"_160":138,"_161":177,"_163":22,"_106":178,"_100":179,"_166":180,"_168":181,"_169":22,"_170":-5,"_171":278,"_98":279},[],[156,175],[156],{"_104":186,"_95":187,"_157":188,"_159":-5,"_160":138,"_161":162,"_163":164,"_106":189,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":282,"_98":295},[283,289,292],{"_104":192,"_95":193,"_157":194,"_159":188,"_160":138,"_161":162,"_163":164,"_106":195,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":284,"_98":288},[285],{"_104":198,"_95":199,"_157":200,"_159":194,"_160":138,"_161":201,"_163":22,"_106":202,"_100":203,"_166":204,"_168":205,"_169":22,"_170":-5,"_171":286,"_98":287},[],[187,193,199],[187,193],{"_104":210,"_95":211,"_157":212,"_159":188,"_160":138,"_161":203,"_163":22,"_106":213,"_100":162,"_166":214,"_168":215,"_169":22,"_170":-5,"_171":290,"_98":291},[],[187,211],{"_104":219,"_95":220,"_157":221,"_159":188,"_160":138,"_161":162,"_163":22,"_106":222,"_100":32,"_166":204,"_168":223,"_169":22,"_170":-5,"_171":293,"_98":294},[],[187,220],[187],{"_104":228,"_95":229,"_157":230,"_159":-5,"_160":138,"_161":101,"_163":22,"_106":231,"_100":232,"_166":214,"_168":233,"_169":22,"_170":-5,"_171":297,"_98":298},[],[229],[275,277,281,283,285,289,292,296],{"_104":210,"_95":211,"_157":212,"_159":188,"_160":138,"_161":203,"_163":22,"_106":247,"_100":162,"_166":214,"_168":215,"_169":22,"_170":-5,"_98":301},[187,211],[],"upstream",{"_104":141,"_106":305,"_258":306,"_95":43,"_139":146,"_100":260,"_140":-5,"_142":-5,"_261":262,"_108":-5,"_151":22,"_110":111,"_150":253,"_16":148,"_149":96},["D",1740674013689],["D",1755284984205],"showCompareCallout","pull","ahead",26,"behind",33,"templates",[],"actionData","errors"]

Arthur88

reactHonoStarter